对象使用扩展
一、对象属性简洁表示法
ES6 允许直接写入变量和函数,作为对象的属性和方法。
let a = 1;
let b = 2;
let es5 = { a: a, b: b };
// 等同于
let es6 = { a, b };
上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
同样的,如果对象是方法,也可以简写:
let es5 = {
sayhello: function () {
console.log('hello');
}
};
// 等同于
let es6 = {
sayhello() {
console.log('hello');
}
};
二、对象属性名表达式
ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。
let a = 'b';
let es5 = { a: 'c' }; // 输出 { a: "c" }
let es6 = { [a]: 'c' }; // 输出 { b: "c" }
表达式还可以用于定义方法名:
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi
注意,属性名表达式与简洁表示法不能同时使用,会报错:
let a = "my";
let b = "name";
let person = {
[a + b],
b
}; // Uncaught SyntaxError: Unexpected token ,
三、对象内的异步方法
ES6 在对象中的方法前加个星号 *
可以转异步。
let obj = {
* foo() {
console.log('foo')
}
}
四、对象的 super 关键字
ES6 新增了一个关键字 super
,指向当前对象的原型对象(可以通过 setPrototypeOf 来设置对象的原型)
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
findProto() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.findProto() // "hello"
上面代码中,对象 obj.find() 方法之中,通过 super.foo 引用了原型对象 proto
的 foo 属性。
注意,super
关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。
JS 引擎内部,super.foo 等同于 Object.getPrototypeOf(this).foo(属性)或 Object.getPrototypeOf(this).foo.call(this)(方法)
五、对象的扩展运算符
对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }
由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组:
let foo = { ...['a', 'b', 'c'] };
foo // {0: 'a', 1: 'b', 2: 'c'}
如果扩展运算符后面是字符串,它会自动转成一个类数组对象:
{...'hello'} // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
六、ES6 对象的新增方法
1、Object.is()
ES6 中 Object.is() 用来比较两个值是否严格相等,与严格比较运算符 (===) 的行为基本一致,但前者会自动转换数据类型,所以其 NaN
等于自身,+0 等于 -0,而后者不等。
'foo' === 'foo' // true
Object.is('foo', 'foo') // true
{} === {} // false
Object.is({}, {}) // false
+0 === -0 // true
Object.is(+0, -0) // false
NaN === NaN // false
Object.is(NaN, NaN) // true
2、Object.assign()
用于对象的合并,将源对象的所有可枚举属性复制到目标对象,其中第一个参数是目标对象,后面的参数都是源对象。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性:
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 会直接返回该参数:
const obj = {a: 1};
Object.assign(obj) === obj // true
如果该参数不是对象,则会先转成对象,然后返回:
typeof Object.assign(2) // "object"
由于 undefined
和 null
无法转成对象,所以如果它们作为参数,就会报错:
Object.assign(undefined) // 报错
Object.assign(null) // 报错
如果非对象参数出现在源对象的位置,这些参数都会转成对象,若无法转成对象则会跳过。所以当 undefined
和 null
不在首参数时不会报错:
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
Object.assign 方法实行的是浅拷贝,而非深拷贝。所以如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用:
const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
上面代码中,源对象 obj1 的 a 属性的值是一个对象,Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。
3、Object.keys()
返回一个数组,成员是参数对象自身的所有可遍历属性的键名。
var obj = { name: 'Leophen', age: 22 };
Object.keys(obj) // ["name", "age"]
4、Object.values()
返回一个数组,成员是参数对象自身的所有可遍历属性的键值。
var obj = { name: 'Leophen', age: 22 };
Object.values(obj) // ["Leophen", 22]
5、Object.entries()
返回一个数组,成员是参数对象自身的所有可遍历属性的键值对数组。
var obj = { name: 'Leophen', age: 22 };
Object.entries(obj) // [ ["name", "Leophen"], ["age", 22] ]
6、Object.fromEntries()
这是 Object.entries() 的逆操作,用于将一个键值对数组转为对象。
Object.fromEntries([ ["name", "Leophen"], ["age", 22] ])
// { name: 'Leophen', age: 22 }
7、Object.setPrototypeOf()
作用与 __proto__
相同,用来设置一个对象的 prototype
对象,返回参数对象本身。
// 格式
Object.setPrototypeOf(object, prototype)
// 用法
const o = Object.setPrototypeOf({}, null);
举个例子:
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40
上面代码将 proto
对象设为 obj 对象的原型,所以从 obj 对象可以读取 proto
对象的属性。
8、Object.getPrototypeOf()
该方法与 Object.setPrototypeOf 方法配套,用于读取一个对象的原型对象。
const obj1 = {a: 1};
const obj = Object.create(obj1);
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); // true