ES6之对象的扩展

1. 属性的简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。意思就是说允许在对象中只写属性名，不用写属性值。这时，属性值等于属性名称所代表的变量。下面分别举一个例子来说明：

属性：

function getPoint() {
  var x = 1;
  var y = 2;
  return { x, y };
}

等同于

fucntion getPoint(x,y){
    var x = 1 ;
    var y = 2;
    return {x:x,y:y}
}

测试：

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

函数：

var obj = {
  fun() {
    return "simply function";
  },
};

等同于

var obj = {
  fun: function () {
    return "simply function";
  },
};

测试：

obj.fun(); //simply function

2. 属性名表达式

ES6里允许定义对象的时候用表达式作为对象的属性名或者方法名，即把表达式放在方括号里。

属性

let propKey = "foo";

let obj = {
  [propKey]: true,
  ["a" + "bc"]: 123,
};

测试：

obj.foo; //true
obj.abc ; //123

方法

let obj = {
  ["h" + "ello"]() {
    return "hello world";
  },
};

测试：

obj.hello();//hello world

注意：

属性名表达式与简介表达式不能同时使用。

//错误的
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

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

方法的name属性

这个比较容易理解，直接阐述文字。

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

• 一般情况方法的name属性返回函数名
• 如果是取值函数会在函数名前加”get”
• 如果是存值函数会在函数名前加”set”
• 如果bind方法创建的函数会在函数名前加”bound”
• 如果是Function构造函数创建的函数，会在函数名前加”anonymous”
• 如果对象的方法是一个Symbol值，那么name属性返回的是这个Symbol值的描述

Oject.is()

Object.is()用来比较两个值yan’ge严格相等。与严格比价运算符（===）的行为基本一致。不同之处只有两个：一是 +0 不等于 -0 ，二是NaN等于自身

+0 === -0 //true
NaN === NaN //false

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

Oject.assign()

Object.assign()方法是用于将源对象的可枚举属性复制到目标对象。它至少需要两个参数，第一是目标对象，后面的全是源对象。

注意：

• 每个参数必须是对象，否则会报TypeError错误。
• 如果目标对象与源对象有同名属性，或多个源对象有同名的属性，则后面的属性会覆盖前面的属性
• Object.assign只复制自身属性，不可枚举的属性和继承属性不会被复制
• 属性名为Symbol值的属性，也会被Object。assign复制。

demo：

var target = { a: 1, b: 2 };

var source1 = { a: 2, c: 5 };
var source2 = { a: 3, d: 6 };

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

• Object.assign可用于处理数组，但是会将其视为对象

Object.assign([1, 2, 3], [4, 5]);
//[4,5,3]

其他用处

• 为对象添加属性
• 为对象添加方法
• 克隆对象
• 合并多个对象
• 为属性指定默认值

具体例子参考阮一峰的ES6标准入门

属性的可枚举性

对象的没个属性都有一个描述对象(Descriptor)，可通过Object.getOwnPropertyDescriptor(object,prop),object表示对象，prop表示对象的里的一个属性，用的时候需要加上引号。描述对象里面有个enumerable（可枚举性）属性，来描述该属性是否可枚举。

ES5中会忽略enumerable为false的属性

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

ES6新增的操作

• Object.assign(): 只复制对象自身的可枚举属性
• Reflect.enumerate(): 返回所有for…in循环会遍历的属性（包含继承）

属性的遍历

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

• for…in循环遍历对象自身和继承的可枚举的属性（不含Symbol属性）
• Object.keys(obj)返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性，但是包含不可枚举属性）
• Object.getOwnPropertySymbols(obj)返回一个数组，包含对象自身的所有Symbol属性。
• Relect.ownKeys(obj)返回一个数组，包含对象的所有属性，包含属性名是Symbol或者字符串，也不管是否可枚举。
• Reflect.enumerate(obj)返回一个Iterator对象，遍历对象自身的和继承的所有可枚举属性（不含Symbol）,与for…in相同

以上6种方法遍历对象的属性遵守同样的属性遍历次序规则

• 首先遍历所有属性名为数值的属性，按照数字排序

• 其次遍历所有属性名为字符串的属性，按照生成时间排序

• 最后遍历所有属性名为Symbol值的属性，按照生成时间排序

  Reflect.ownkeys({[Symbol()]:0,b:0,10:0,2:0,a:0}) //[‘2’,‘10’,‘b’,‘a’,Symbol()]

proto 属性，Object.setPrototypeOf(),Object.getPrototypeOf()

proto 属性

（前后应该有两个下划线，这里没显示出来）。用来读取或者设置当前对象的prototype对象。但是一般不直接对这个属性进行操作，而是通过Object.setProtortypeOf()（写操作）、Object.getPrototypeOf()（读操作）或者Object.create()（生成操作）代替。

Object.setProtortypeOf()

let proto = {};
let obj = { x: 10 };
Object.setProtortypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x; //10
obj.y; //20
obj.z; //40

Object.getProtortypeOf()

function Rectangle() {}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangele.prototype; // true

对象的扩展运算符

ES7中提案，将rest参数/扩展运算符（…）引入对象。

Rest参数

Rest参数用于从一个对象取值，相当于将所有可遍历尚未被读取的属性，分配到制定的对象上。所有的键及其值都会复制到新对象上。需要注意的是rest参数的复制是浅复制，并且也不会复制继承自原型对象的属性。

简单的demo

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

扩展运算符

扩展运算符用于取出参数对象的所有可遍历属性，复制到当前对象中。

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

扩展运算符还可以合并两个对象。

let a = { c: 5, d: 6 };
let b = { e: 7, f: 8 };
let ab = { ...a, ...b };
ab; //{c:5,d:6,e:7,f:7}

扩展运算符还可以自定义属性，会在新对象中覆盖掉原有参数。

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