JSON(JavaScript Object Notation)

• 能展示四种基本类型(strings, number, booleans, null)和两种结构类型(object, arrays)
• A JSON text is a sequence of tokens./A JSON text is a serialized object or array.
• six structural characters: [{]}:,
• A JSON value MUST be an object, array, number, or string, or one of the three literal names: false, null, true(必须小写)
• 默认编码为UTF-8

规范里的

• 顶级JSONText由JSONValue构成( JSONNullLiteral JSONBooleanLiteral JSONObject JSONArray JSONString JSONNumber)
• JSON 对象内部属性 [[Prototype]] 的值是标准内建的 Object 原型对象。内部属性 [[Class]] 的值是 "JSON"。内部属性 [[Extensible]] 的值设置为 true。
• JSON 对象没有内部属性 [[Construct]]；不能把 JSON 对象当作构造器来使用 new 操作符。
• JSON 对象没有内部属性 [[Call]]；不能把 JSON 对象当作函数来调用。
• JSON.stringify 会产生一个符合 JSON 语法的字符串。JSON.parse 接受的是一个符合 JSON 语法的字符串。
• parse ( text [ , reviver ] ):可选参数 reviver 是一个接受两个参数的函数（key 和 value）。它可以过滤和转换结果。它在每个 key/value 对产生时被调用，它的返回值可以用于替代原本的值。如果它原样返回接收到的，那么结构不会被改变。如果它返回 undefined，那么属性会被从结果中删除。JSON.parse() 不允许用逗号作为结尾。

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

• stringify ( value [ , replacer [ , space ] ] ):可选的 replacer 参数要么是个可以修改对象和数组字符串化的方式的函数，要么是个扮演选择对象字符串化的属性的白名单这样的角色的 String 和 Number 组成的数组。可选的 space 参数是一个 String 或者 Number，可以允许结果中插入空白符以改善人类可读性,如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格（最多10个空格）；如果是一个字符串，则每一级别会比上一级别多缩进用该字符串（或该字符串的前十个字符）。

function censor(key, value) {
  if (typeof(value) == "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, censor);

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')

• 如果一个被序列化的对象拥有 toJSON 方法，那么该 toJSON 方法就会覆盖该对象默认的序列化行为

var obj = {
  foo: 'foo',
  toJSON: function () {
    return 'bar';
  }
};
JSON.stringify(obj);      // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

• null 值在 JSON 文本中表示为 String null。undefined 值不出现。true 值在 JSON 文本中表示为 String true。false 值在 JSON 文本中表示为 String false。NaN 和不论正负的 Infinity 都表示为字符串 null。没有 JSON 表示的值（如 undefined 和函数）不会产生字符串。而是会产生 undefined 值。

object literal extensions(对象字面量的扩展)

• shorthand properties(属性的简写)

  • ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量

    var firstName = 'Edward';
    var lastName = 'Ann';
    var personA = {firstName: firstName, lastName: lastName};
    var personB = {firstName, lastName};
    personA //Object {firstName: "Edward", lastName: "Ann"}
    personB //Object {firstName: "Edward", lastName: "Ann"}

  • 除了属性简写，方法也可以简写(注意，简洁写法的属性名总是字符串)

    var personC = {
        name: 'edward',
        sayHello() {
            console.log(this.name + ' hello');}}
    personC.sayHello(); //edward hello

  • ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内

    var person1 = {
    firstName: 'Teddy',
        lastName: 'John'
    };
    let propKey1 = 'firstName';
    let propKey2 = 'lastName';
    let person2 = {
        [propKey1]: 'Ann',
        [propKey2 + 'test']: 'Lynn'
    }
    person1 //Object {firstName: "Teddy", lastName: "John"}
    person2 //Object {firstName: "Ann", lastNametest: "Lynn"}

  • 表达式还可以用于定义方法名

    let salut = {
        ['say' + 'hi']() {
        console.log("hi");
        }
    }
    salut.sayhi() // hi

  • 字符串也可以作为对象中方法名的key

    let animal1 = {
        "say hi"() {console.log('hi')}
    }
    animal1["say hi"]() //hi

  • 用表达式作为属性访问器(getter,setter)的定义(实际使用中很少使用)

     function getCar(make, model, value) {
       let x = "value";
        return {
            make,
            model,
    
            _value: value,
    
            get [x]() {
                return this._value;
            },
            set [x](value) {
                if (value < 0)
                    throw new Error('invalid value');
    
                this._value = value;
            }
        };
    }
    let car = getCar('Kia', 'Sorento', 40000);
    console.log(car.value);//40000
    car.value = 30000;//3000
    car.value = -100;//Uncaught Error: invalid value(…)

  • 注意，属性名表达式与简洁表示法，不能同时使用，否则会报错

    let Rayn = 'Bill';
    let newPerson = {
        [Rayn]: 'Bill'
    }
    let newPerson1 = {
        Rayn
    }
    //下面的写法会报错
    let newPerson2 = {
        [Rayn]
    }

non-strict function semantics

• hoisted lock-level function declaration

  • 在ECMAScript3和更早之前，在块级作用域内声明函数会直接报错，但是很多的浏览器依然支持这个特性，当然在实现上稍有不一。为了解决这种兼容性问题，ECMAScript5的严格模式下定义，当在块级作用里面定义了一个函数时，就会报错。

    "use strict";
        if (true) {
    
        // Throws a syntax error in ES5, not so in ES6
        function doSomething() {
            // ...
        }
    }

  • 在ECMAScript 6中，上面的doSomething()函数被认为是被认为是块级层面的声明并且能够在同一个块级作用域内被访问到。即事实上它的声明被提升到了同样块级的顶部。

    "use strict";
    
    if (true) { 
        console.log(typeof doSomething);        // "function"
        function doSomething() {
            // ...
        }
        doSomething();
    }
    
    console.log(typeof doSomething);            // "undefined"

  • A function is declared and only referenced within a single block

  • A function is declared and possibly used within a single Block but also referenced by an inner function definition that is not contained within that same Block.

  • A function is declared and possibly used within a single block but also referenced within subsequent blocks

• Labelled Function Declarations

  • 标记语句（labeled statement）可以和 break 或 continue 语句一起使用。标记就是在一条语句前面加个可以引用的标识符（identifier)

        var i, j;
        loop1:
        for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
           loop2:
           for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
              if (i == 1 && j == 1) {
                 continue loop1;
              }
              console.log("i = " + i + ", j = " + j);
           }
        }

  • 但是在ECMAScript 2015之前，标记语句是不允许用于函数定义的，但是，被标记的函数定义在非严格模式下是允许扩展的，同时很多浏览器也提供了不一的实现。所以在ES6中，对这部分提供了支持。(注意如果是严格模式下依然会报语法错误)

    LabelledItem : FunctionDeclaration

• function statements in if-statement clauses

  • 分成了四种类型

    if ( Expression) FunctionDeclaration else Statement
    if ( Expression) Statement else FunctionDeclaration
    if ( Expression ) FunctionDeclaration else FunctionDeclaration
    if ( Expression) FunctionDeclaration
    
    if(true) function y(){return 1} else function yy(){return 2}
    yy() //VM3511:1 Uncaught TypeError: yy is not a function(…)
    y() //1

  • 只能在非严格模式下使用

HTML-style comments

• 之前这个一直只是浏览器端独有的扩展，在其它ECMAScript的实现中是不支持的。

  <!-- Another comment
  var tt = 3; <!-- Another comment
  var ty = 4;

Proxy, internal 'getOwnPropertyDescriptor' calls

• 其作为Handler Method对应Internal Method的GetOwnProperty

• 此方法能够拦截Object.getOwnPropertyDescriptor()操作，返回值是对象或者undefined

  var p = new Proxy(target, {
    getOwnPropertyDescriptor: function (target, prop) {
      //code
    }
  })

  • 1). target:可选，被代理的目标对象。
  • 2). prop:可选，要获取特性描述的属性名称。
  • 3). 如果返回值不是对象或者undefined会报错。
  • 4). 如果target对象自有属性是不可配置，那么返回值不能是undefined，否则会报错。
  • 5). 如果target对象是不可扩展的，那么返回值不能是undefined，否则会报错。
  • 6). 如果对象是不可扩展且指定属性不是对象自有，那么返回值必须是undefined，否则会报错。

  • 7). 如果属性不是对象的自有属性，或者此属性是对象可配置自有属性，那么返回属性描述对象configurable属性值必须为true，否则报错。

    let antzone = {
      webName: "testBefore",
      url:"test"
    };
    var p = new Proxy(antzone, {
      getOwnPropertyDescriptor: function(target, prop) {
        return { configurable: true, enumerable: true, value: "testAfter" };
      }
    });
    Object.getOwnPropertyDescriptor(antzone, "webName");
    Object.getOwnPropertyDescriptor(p, "webName");
    
    //此时如果返回是undefined则会报错
    Object.defineProperty(antzone, "webName", {
      writable: true,
      enumerable: true,
      configurable: false
    })

Proxy, internal 'ownKeys' calls

• 其作为Handler Method对应Internal Method的OwnPropertyKeys

• 此方法可以拦截Object.getOwnPropertyNames(),Object.getOwnPropertySymbols(),Object.keys(),Reflect.ownKeys操作,返回值是一个数组

  var p = new Proxy(target, {
    ownKeys: function (target) {
      //code
    }
  });

  • 1). target:可选，被代理的目标对象。
  • 2). 返回值通常是一个包含属性名称数组。
  • 3). 返回数组的元素的类型是字符串类型或者Symbol类型。
  • 4). 返回数组必须包含所有target对象自有不可配置的属性名称。

  • 5). 如果target对象是不可扩展的，那么返回数组必须且只包含target对象所有的自有属性名称。

    var antzone = {
      webName: "test",
      url: "test1",
    }
    var p = new Proxy(antzone, {
      ownKeys: function(target) {
        return ["a", "b", "c"];
      }
    });
    Object.getOwnPropertyNames(p);
    
    //下面的会报错，因为返回数组必须包含所有target对象自有不可配置的属性名称
    var antzone = {
      webName: "test",
      url: "test1",
    }
    Object.defineProperty(antzone, "webName", {
      configurable: false
    })
    var p = new Proxy(antzone, {
      ownKeys: function(target) {
        return ["url"];
      }
    });
    Object.getOwnPropertyNames(p);
    
    //下面会报错，因为antzone是不可扩展的，所以返回数组必须且只包含target对象所有的自有属性名称
    var antzone = {
      webName: "test",
      url: "test1",
    }
    Object.preventExtensions(antzone);
    var p = new Proxy(antzone, {
      ownKeys: function(target) {
        return ["url"];
      }
    });
    Object.getOwnPropertyNames(p);

参考

• RFC4627
• ECMAScript 5.1 (ECMA-262)
• ECMAScript 2015 Language Specification – ECMA-262 6th Edition
• Understanding ECMAScript 6
• es6-object-literal-features-in-depth