ES6 - 对象的扩展

技术

本文摘自阮一峰老师的es6讲解，一下只是个人的笔记，更多详细内容可以点这里

1.属性的简洁表示法

ES6允许直接写入变量和函数，作为对象的属性和方法。啥意思呢？不多说，上两个简单的例子吧！

• 列子1
  const foo = "123"; // 定义了一个字符串变量
  const baz = {foo}; // 这里baz是一个对象，表现形式为：{foo:"123"}

  等同于
  const baz = {foo:foo} // key : foo ，value : 变量foo的值

• 例子2
  const o = {
  method (){
  return "Hello"
  }
  }

等同于
const o = {
method : function (){
return : "Hello"
}
}

2.属性名表达式

看到这个标题，有点😳，属性名表达式是啥意思？简单来说就是用 这个[]中括号来搞事情，就是对对象的属性搞事情的，到底怎么搞事情，下边举几个🌰就明白了。

• 🌰1
  JavaScript有两种表示方式定义对象的属性
  // 方法1
  foo.name = "小红"
  // 方法2
  foo["n" + "ame"] = "小红"
  如果用字面量方式（就是大括号方式）定义对象的属性
  // ES5只能用使用标识符方式
  let foo = {
  name : '小红',
  age : 10
  }
  // ES6 就厉害了，他也可以用[]中括号了
  let keyParam = 'name'
  let foo = {
  [keyParam] : '小红',
  ['a' + 'ge'] : 10
  }
  对照一下下面的输出，应该理解了吧
  foo['keyParam'] // "小红"
  foo['name'] // "小红"
  foo['a' + 'ge'] // 10
  foo['age'] // 10
  foo.age // 10
• 🌰2
  表达式定义方法名
  let obj = {
  'h' + 'i'{
  return 'Hello'
  }
  }
  obj.hi() // "Hello"
  obj['h' + 'i'] // "Hello"
• 🌰3
  需要注意，属性名表达式不能和简洁表达式同时使用，会报错。
  // 报错
  const foo = 'bar';
  const bar = 'abc';
  const baz = { [foo] };
  // 正确
  const foo = 'bar';
  const baz = { [foo]: 'abc'};
• 🌰4
  还需要注意的是，属性名如果是一个对象，默认情况会将对象转为字符串[object object]。
  这里就是一个坑，需要小心处理。
  const keyA = {a: 1};
  const keyB = {b: 2};
  const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
  };
  myObject // Object {[object Object]: "valueB"}
  看完log理解了吧，[keyB]把[keyA]给覆盖了。
  平时使用还是尽量不要用这个吧，以前是搞iOS的，看了这个[]总感觉是数组，我反正不会这么用。

3.Object.is()

更多的Object使用方法可以来这里查看

ES5比较两个值是否相等，只有两个运算符:相等运算符（==）和严格相等运算符（===），这两个运算符都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0 等于-0。

Object.is() 判断两个值是否相同。如果下列任何一项成立，则两个值相同：

• 两个值都是 undefined
• 两个值都是 null
• 两个值都是 true 或者都是 false
• 两个值是由相同个数的字符按照相同的顺序组成的字符串
• 两个值指向同一个对象
• 两个值都是数字并且
• 都是正零 +0
• 都是负零 -0
• 都是 NaN
• 都是除零和 NaN 外的其它同一个数字

这种相等性判断逻辑和传统的 == 运算符所用的不同，== 运算符会对它两边的操作数做隐式类型转换（如果它们类型不同），然后才进行相等性比较，（所以才会有类似 "" == false 为 true 的现象），但 Object.is 不会做这种类型转换。

这与===运算符也不一样。===运算符（和==运算符）将数字值-0和+0视为相等，并认为Number.NaN不等于NaN。

看一下例子吧

Object.is('foo', 'foo'); // true
Object.is(window, window); // true

Object.is('foo', 'bar'); // false
Object.is([], []); // false

var test = { a: 1 };
Object.is(test, test); // true

Object.is(null, null); // true

// 特例
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true

4.Object.assign()

这家伙就一个合并操作,用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

注意，Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

5.属性的可枚举性和遍历

5.1 可枚举性

对象的每个属性都有一个描述对象(Descriptor)，用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述对象的enumerable属性，称为“可枚举性”，如果该属性为false，就表示某些操作会忽略当前操作。

目前有4个操作会忽略enumerable为false的属性。

• for...in循环：只遍历对象自身的和继承的可枚举的属性。
• Object.keys()：返回对象自身的所有可枚举的属性的键名。
• JSON.stringify()：只串行化对象自身的可枚举的属性。
• Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

举个例子吧

var obj = {
    name : 'xiaohong',
    age  : 10,
    test : 'enumerable is false'
}
Object.defineProperty(obj1, 'test', {
                configurable: false,
                enumerable: false,
                value: 'not enumerable'
            });

5.2 遍历

• for...in
• Object.keys(obj)
• Object.getOwnPropertyNames(obj)
• Object.getOwnPropertySymbols(obj)
• Reflect.ownKeys(obj)

以上5种方法遍历对象的的键名，都遵守同样的属性遍历的次序规则。

• 首先遍历所有数值键，按照数值升序排列。
• 其次遍历所有字符串键，按照加入时间升序排列
• 最后遍历所有 Symbol 键，按照加入时间升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]