详解ES6中对象的扩展

对象，对象，对象

1.属性简写

es6允许在大括号中，直接写入变量和函数，作为属性和方法。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

方法简写

let a={
  fun(){};
}

let a={
  fun:function(){};
}

上述在es6是一样的

2.方法的name属性

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

上面代码中，方法的name属性返回函数名（即方法名）。

如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。

const obj = {
  get foo() {},
  set foo(x) {}
};

obj.foo.name
// TypeError: Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

4.属性的描述对象和遍历

想要详细了解的戳下面

https://www.w3cschool.cn/javascript_guide/javascript_guide-tr1n2692.html#toc4

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

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true, //表示值是否可以被改变
//    enumerable: true, //是否可以被遍历
//    configurable: true //是否可以修改描述对象
//  }

• writable：可写性，绝对属性的值是否可以被改变，flase为不可改变 。注意，正常模式下，对可写性为false的属性赋值不会报错，只会默默 失败。但是，严格模式下会报错，即使是对a属性重新赋予一个同样的值。
• configurable：可配置性，决定是否可以修改属性描述对象，值为false时，value、writable、enumerable和configurable都不能被修改了
• enumerable：可枚举性，值为false时下面三个操作不会取到该属性

for…in循环
Object.keys方法
JSON.stringify方法

描述对象中还有set和get,就是vue3之前双向绑定的原理

let car = {}; let val = 3000 ;
Object.defineProperty(car, 'price', {
   get(){ console.log('price属性被读取了'); return val }, 
   set(newVal){ console.log('price属性被修改了'); val = newVal } 
})

ES6一共有五种方法可以遍历对象的属性

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

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

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

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

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

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

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

5.super关键字

我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

6. 对象的扩展运算符

解构赋值
对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

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

由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。
解构赋值必须是最后一个参数，否则会报错。

let { ...z } = null; // 运行时错误
let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误

注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。
扩展运算符

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

如果扩展运算符后面不是对象，则会自动将其转为对象。

// 等同于 {...Object(1)}
{...1} // {}

// 等同于 {...Object(true)}
{...true} // {}

// 等同于 {...Object(undefined)}
{...undefined} // {}

// 等同于 {...Object(null)}
{...null} // {}

上面代码中，扩展运算符后面是整数1，会自动转为数值的包装对象Number{1}。由于该对象没有自身属性，所以返回一个空对象。

如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

//等同于使用了对象的assign()方法

如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

上面代码中，a对象的x属性和y属性，拷贝到新对象后会被覆盖掉。

本文出自阮一峰的《ECMAScript6入门》,本文只是简单中的简单总结，想看更详细的请戳：https://es6.ruanyifeng.com/search=await&x=0&y=0#docs/object