一、属性的简洁表示法
ES6允许在大括号里面直接写入变量和函数，作为对象的属性和方法。
如下：变量foo直接写在大括号，属性名就是变量名，属性值就是变量值。
- 简写的对象方法不能用作构造函数，会报错
const foo = "bar";
const baz = {foo};
console.log(baz); // => {foo:"bar"}
// 等同于
const baz = {foo:foo}
// 自己使用场景
const {dataSource} = this.props;
this.setState({dataSource});
function getPoint() {
const x = 1;
const y = 10;
return {x, y};
}
方法也可以简写
const o = {
init(){
console.log('Hello Word!');
}
}
const obj = {
f() {
this.foo = 'bar';
}
};
new obj.f() // 报错
二、super 关键字
this关键字总是指向函数所在的当前对象
super关键字指向当前对象的原型对象
super表示原型对象时，只能用在对象的方法中，用在其它地方都会报错
const o = {
h:"Hello"
}
const p = {
h:"Word",
find() {
return super.h
}
}
Object.setPrototypeOf(p, o);
p.find() // "hello"
三、链判断运算符
在编程实务中，如果读取对象内部的某个属性，为了安全我们需要判定一下该对象是否存在
var o = {
x:1,
y:2
}
var a = o && o.x ;
// => undefined
var b = o && o.z;
// => undefined
或者使用三元运算符?:，判断一个对象是否存在
var a = o ? o.x : 10;
如上两种方式，如果层次深判断起来非常麻烦，因此ES2020引入了“链判断运算符”?.
- 直接在链式调用的时候判断，左侧的对象是否
null或undefined，如果是，就不再往下运算，返回undefined。
var o = {
x:1,
y:2,
z:{
w:3
}
}
var a = o?.z?.w;
使用这个运算符，有几个注意点：
1、短路机制
a?.[++x];
// 等同于
a == null ? undefined : a[++x];
如果a是undefined或null，那么x不会进行递增运算，也就是说，链判断运算符一旦为真，右侧的表达式就不再求值。
2、delete 运算符
delete a?.b
// 等同于
a == null ? undefined ? delete a.b;
3、括号的影响
如果属性链有圆括号，链判断运算符对圆括号外部没有影响，只对圆括号内部有影响。
(a?.b).c
// 等同于
(a == null ? undefined : a.b).c
4、报错场合（以下写法是禁止的）
// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`
// 链判断运算符的左侧是 super
super?.()
super?.foo
// 链运算符用于赋值运算符左侧
a?.b = c
5、右侧不得为十进制数值
为了兼容以前代码，?.后边紧跟一个十进制的数组，那么?.不再被看成一个完整的运算符，而会按照三元运算符进行处理，那个小数点会归属后面的十进制数字，形成一个小数。
a?.3:0
// 被解析成
a ? .3 : 0
四、Null 判断运算符
读取对象属性的时候，如果某个属性值是null或undefined，有时候需要为它们指定默认值，常见的做法是通过||运算符指定默认值。
var o = {
x:0,
t:"",
s:false
}
var a = o.x || 200; // => 200
var b = o.t || "word"; // => "word"
var c = o.s || true; // => true
上述三行代码都是通过||运算符指定默认值，但是这样写是错误的，开发者的意愿是，只要属性的值为null或undefined，默认值就会生效，但是如果属性值为0或空字符或false，默认值也会生效。
为了避免上述情况，ES2020引入了一个新的Null判断运算符?
它的行为类似||，但是只有运算符左侧的值为null或undefined，才会返回右侧的值。
var a = o.x ?? 200; // => 0
var b = o.t ?? "word"; // => ""
var c = o.s ?? true; // => false
??有一个运算符优先级问题，它与&&和||的优先级孰高孰低？现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。
五、对象新增方法
1、Object.is()
ES6提出同值相等算法，在所有环境中，只要两个值是一样的，它们就应该相等，Object.is()用来比较两个值是否严格相等，与严格比较运算符===的行为基本一致。
var o = {
x:0,
y:0
}
Object.is(o.x,o.y); // => true
与===不同之处在于
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
2、Object.assign()
基本用法
Object.assign方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。
- 第一个参数是目标对象
- 后面的参数都是源对象
var target = {};
var source = {a:1,b:2};
Object.assign(target,source);
target // => {a:1, b:2, c:3}
- 如果目标对象与源对象有同名属性，或多个源对象有同名属性，后面的属性会覆盖前面的属性。
var target = {a:1,c:4};
var source = {a:2,b:3};
Object.assign(target,source);
target // => {a:2,c:4,b:3} 相同的a属性被覆盖
- 如果只有一个参数，
Object.assign会直接返回该参数
var o = {a:1};
Object.is(o,Object.assign(o)); // true
- 如果该参数不是对象，则会先转成对象，然后返回
typeof Object.assign(2) // "object"
- 由于undefined和null无法转成对象，所以如果它们作为参数，直接报错。
Object.assign(undefined);
Object.assign(null);
// TypeError: Cannot convert undefined or null to object
- 如果非对象参数出现在源对象的位置，这些参数会转成对象，如果无法转成对象，就会跳过。
var o = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
注意点：
-
浅拷贝
Object.assign()实现的是浅拷贝，如果源对象的某个属性值是对象，那么目标对象拷贝得到的是这个对象的引用。
var o1 = {a:{b:1}};
var o2 = Object.assign({},o1);
o2.a.b = 2;
o1.a.b; // => 2
- 同名属性的替换
var target = {a:1,b:2};
var source = {a:"word"};
Object.assign(target,source);
// {a:"word",b:2}
-
数组的处理
Object.assign()可以处理数组，但是会把数组视为对象。
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
// 实际执行的是
Object.assign({0:1,1:2,2:3},{0:4,1:5});
// 根据同名替换原则输出的是：{0:4,1:5,2:3}
Array.from({0:4,1:5,2:3,length:3});
// [4,5,3]
-
取值函数的处理
Object.assign()只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。
var target = {}
var source = {
get x () { return 1 }
}
Object.assign(target,source);
// => {x:1}
常用途径：
- 为对象添加属性
class Point {
constructor(x,y){
Object.assign(this,{x,y}); // 属性的简洁表示法
}
}
var point = new Point(1,2);
// {x:1,y:2};
point instanceof Point; // => true point 是 类 Point 的实例
point instanceof Object; // => true 所有对象都是Object的实例
-
合并多个对象
将对象合并后返回一个新对象
var o1 = {x:1};
var o2 = {y:2};
var merge = (...sources) => Object.assign({}, ...sources); // 合并函数
var newObj = merge(o1,o2);
// => {x:1,y:2}
3、__proto__属性
__proto__属性（前后个两个下划线），用来读取或设置当前对象的prototype对象，目前，所有浏览器（包括IE11）都部署了这个属性。
实现上，__proto__调用的是Object.prototype.__proto__。
该属性并没有写入ES6的正文，而是附录，原因是__proto__前后的双下划线，说明它本质是一个内部属性，而不是对外的API。因此，无论是从语义角度，还是从兼容角度，都不要使用，而是用下边的代替。
Object.setPrototypeOf()（写入）
Object.getPrototyprOf()（读取）
Object.create()（生成）
Object.setPrototypeOf()用来设置一个对象的prototype对象，返回参数本身
- 如果第一个参数是
undefined或null，会报错。
// 格式
Object.setPrototypeOf(object, prototype)
// 实际使用
var p = {};
var o = {x:1};
Object.setPrototypeOf(o,p); // 将p对象设置为o对象的原型
p.y = 2;
p.z = 3;
"x" in o; // => true 自有属性
"y" in o; // => true 继承原型对象属性
"z" in o; // => true 继承原型对象属性
Object.getPrototypeOf()用来读取一个对象的原型对象
- 如果第一个参数是
undefined或null，会报错。
var p = {x:1};
var o = Object.create(p);
Object.getPrototypeOf(o);
// {x:1}
Object.is(Object.getPrototypeOf(o),p);
// true
4、Object.keys()
- 返回数组
- 数组成员是参数对象自身所有可遍历的属性的键名
- 不返回继承的属性
- 可以使用
for ... of循环使用
var o = { a:1, b:2 ,c:3};
Object.keys(o); // => ["a","b","c"]
for (let key of Object.keys(o)) {
console.log(key);
}
// => "a"
// => "b"
// => "c"
5、Object.values()
- 返回数组
- 数组成员是参数对象自身所有可遍历属性的键值
- 不返回继承属性
- 可以使用
for ... of循环使用
var o = { a:1, b:2 ,c:3};
Object.values(o); // => [1,2,3]
for (let value of Object.values(obj)) {
console.log(value);
}
// => 1
// => 2
// => 3
- 会过滤属性名为
Symbol值的属性
Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']
- 如果参数是一个字符串
Object.values('abc');
// => ["a","b","c"]
// 字符串会先转成一个类似数组的对象如下
Object.keys("abc");
// ["0","1","2"];
Object.values({0:"a",1:"b",2:"c"});
- 如果参数不是对象，会先转成对象，由于数值和布尔值的包装对象，都不会为实例添加非继承的属性，所以返回空数组
Object.values(42); // => []
Object.values(true); // => []
6、Object.entries()
- 返回一个数组
- 数组成员是参数对象自身所有可编辑属性的键值对数组
- 其他行为与
Object.values()基本一致
var o = { a:1, b:2 ,c:3};
Object.entries(o);
// => [["a",1],["b",2],["c",3]]
for (let [key, value] of entries(o)) {
console.log([key, value]);
}
// => ['a', 1]
// => ['b', 2]
// => ['c', 3]
7、Object.fromEntries()
此方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
Object.fromEntries([["a",1],["b",2],["c",3]]);
// { a:1, b:2 ,c:3}
- 将Map结构转为对象
var map = new Map().set("a",1).set("b",2);
Object.fromEntries(map);
// {a:1,b:2}
- 配合
URLSearchParams对象，将查询字符串转为对象
Object.fromEntries(new URLSearchParams('a=1&b=2'))
// { a: "1", b:"2" }
Object.fromEntries(new URLSearchParams(window.location.search))
