ES6(对象扩展、对象新增方法)

一、对象扩展

1. 属性的简洁表示

大括号里面，直接写入变量和函数，作为对象的属性和方法。

以下是属性简写：直接写属性名（就自己等于属性值）

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

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

 以下是方法简写：直接省略冒号“：”和关键字function

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

案例：对象的简写：属性名=属性名：方法去除关键字和冒号

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}

 注意：对象中简写的函数不能当作构造函数使用

const obj = {
  f() {
    this.foo = 'bar';
  }
};

new obj.f() // 报错

2. 属性名表达式

但是在通过对象定义属性时候：允许通过表达式（被【】包裹的表达式作为属性名）

// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;

 在创建字面量对象定义属性时候：ES5中只允许使用标识符进行作为属性名

var obj = {
//   foo和zbc都是标识符
  foo: true,
  abc: 123
};

 但是在ES6创建字面量定义属性：可以使用表达式（一定被【】或者‘’包裹起来）

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

注意：属性名的表达式和简介表达式 同时使用会报错

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

3. 遍历对象的五种方法（暂时学习两种）： 

for...in

for...in循环遍历对象自身的和继承的可枚举属性

Object.keys(obj) 

返回一个数组，包括对象自身的（不含继承的）所有可枚举属性

 4. super关键字

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

注意：只能用在对象的方法之中，用在其他地方都会报错。

const proto = {
  foo: 'hello'
};

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

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

// 报错
const obj = {
  foo: super.foo
}

// 报错
const obj = {
  foo: () => super.foo
}

// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

5  解构赋值

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 { ...z } = undefined; // 运行时错误

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

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

 扩展运算符的解构赋值，不能复制继承自原型对象的属

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

 二、对象新增方法

1. Object.is() 

比较两个值是否严格相等：

• 弥补NaN不等于自身问题
• 弥补-0不等于+0问题

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

 2. Object.assign() 

对象的合并

注意:属性同名后面覆盖前面

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

//数组替换案例：
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

不是对象转为对象 

typeof Object.assign(2) // "object"

 实行的是浅拷贝：源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

常见用途

• 为对象添加属性 
• 为对象添加方法
• 合并多个对象
• 克隆对象

• function clone(origin) {
    return Object.assign({}, origin);
  }

 3.__proto__属性

如果一个对象本身部署了__proto__属性，该属性的值就是对象的原型

Object.getPrototypeOf({ __proto__: null })
// null

4.Object.keys()

返回对象的键名返回为数组

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

5.Object.values()

返回对象的键值返回为数组

const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

6. Object.entries()

返回对象的键值对返回为数组（嵌套）

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

 7. Object.fromEntries()

将数组嵌套转为对象

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }