07 对象的扩展

1.属性的可枚举性和遍历
2.解构赋值
3.扩展运算符
4.解构赋值与扩展运算符总结

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

可枚举性

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。可对比专栏《JavaScript 沉淀 5-1》
Object.getOwnPropertyDescriptor(属性所在对象，‘属性’)

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

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

目前会忽略 enumerable为false的属性的四个操作

• for…in 循环： 只遍历对象自身和继承的可枚举的属性。
• Object.keys()：返回对象自身的所有可枚举的属性的键名。
• JSON.stringify()：只串行化对象自身的可枚举的属性。
• JSON.stringify()：只串行化对象自身的可枚举的属性。

属性的遍历

ES6一共有5中方法可以遍历对象的属性

1. for…in
2. Object.keys(obj)
3. Object.getOwnPropertyNames(obj)
4. Object.getOwnPropertySymbols(obj)
5. Reflect.ownKeys(obj)

1. for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

var myObject={
  　　a:1,
  　　b:2,
  　　c:3
  }
  for (var key in myObject) {
  console.log(key + ':' + myObject[key]);
  }
  //  a:1
  //  b:2
  //  c:3

key即属性 a、b、c。

2.Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

var myObject={
  　　a:1,
  　　b:2,
  　　c:3
  }
  const keys = Object.keys(myObject)
  console.log(keys)  // [ 'a', 'b', 'c' ]
  // 通过遍历数组获取对应的value
  keys.forEach((index) => {
    console.log(myObject[index]) // 1,2,3
  })

3.Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

var myObject={
  　　a:1,
  　　b:2,
  　　c:3
  }
  const keys = Object.getOwnPropertyNames(myObject)
  console.log(keys)  // [ 'a', 'b', 'c' ]
  // 通过遍历数组获取对应的value
  keys.forEach((index) => {
    console.log(myObject[index]) // 1,2,3
  })

4.Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

var myObject={
  　　a:1,
  　　b:2,
  　　c:3
  }
  const keys = Object.getOwnPropertySymbols(myObject)
  console.log(keys)  // []

  keys.forEach((index) => {
    console.log(myObject[index]) // []
  })

由于遍历的是对象自身所有的Symbol属（此对象没有），故空。

5.Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

var myObject={
  　　a:1,
  　　b:2,
  　　c:3
  }
  const keys = Reflect.ownKeys(myObject)
  console.log(keys)  // [ 'a', 'b', 'c' ]
  // 通过遍历数组获取对应的value
  keys.forEach((index) => {
    console.log(myObject[index]) // 1,2,3
  })

2.解构赋值

作用：
将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。

 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x)  //  1
console.log(y)  //  2
console.log(z)  //  { a: 3, b: 4 }

两个注意点：
1.解构赋值要求等号右边是一个对象，所以如果右边是undefined或null就会报错，因为无法转为对象。
2.解构赋值必须是最后一个参数(唯一参数)，否则会报错。

 let { x, ...y, z } = { x: 1, y: 2, a: 3, b: 4 };
 //  Rest element must be last element
let { x, ...y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
//  Rest element must be last element

3.扩展运算符

作用：
对象的扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = {a:3, b:4}
let n = {...z}
console.log(n)  // { a: 3, b: 4 }

4.解构赋值与扩展运算符总结

解构赋值：把属性分配到对象上 扩展运算符：相当于解构赋值逆运算