本文共 2745 字，大约阅读时间需要 9 分钟。

ES6 对象新增特性解析

1. 属性简洁表示法

属性简洁表示法是 ES6 提供的一个便利表达方式，允许在对象定义时直接使用变量名作为属性名，只需在对象字面量中直接拼写变量名即可，无需配套的值部分（前提是值与键名相同）。这种写法简化了代码书写，提升了效率。

let name = 'hello';let age = 18;let obj = {  name, // 等同 name: name  age, // 等同 age: age  study() {    console.log(this.name + '正在学习');  }};

2. 属性名表达式

在 ES6 中，object 属性名可以使用表达式表达，这使得属性名不局限于简单的标识符，可以通过计算或者历程的方式生成。这种写法提供了更大的灵活性，适用于动态命名场景。

let s = 'address';let obj = {  name: 'xiaoming',   [s]: 'shenzhen', // 属性名为 'address'  say() {    console.log('hello' + this.name);  }};

3. Object.is()

Object.is() 是一个严格的值比较运算符，与 === 几乎行为相同，但也有区别。该方法会返回 true 当且仅当两个值严格相等，包括引用类型的地址相同和特殊值的比较。

Object.is() 对比总结

• 与 === 的区别：

  • +0 === -0 为 true，而 Object.is(+0, -0) 返回 false。
  • NaN === NaN 为 false，而 Object.is(NaN, NaN) 返回 true。

• 特殊值比较：

  • 对于 null 和 undefined，Object.is(null, null) 和 Object.is(undefined, undefined) 返回 true。
  • 对于对象的引用类型，只有在两个对象的引用地址相同时才返回 true，即 obj1 === obj2 时 Object.is(obj1, obj2) 才可能为 true。

示例

let obj1 = { name: 'xiaoming', age: 18 };let obj2 = { name: 'xiaoming', age: 18 };console.log(obj1 === obj2); // falseconsole.log(Object.is(obj1, obj2)); // falselet obj2 = obj1;console.log(Object.is(obj1, obj2)); // true

4. Object.assign()

Object.assign() 方法用于将源对象的值复制到目标对象中。该方法实际作用是对目标对象进行更新，返回新的目标对象（若未修改则返回原对象）。

示例

const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const result = Object.assign(target, source);// target 现在变为 { a: 1, b: 4, c: 5 }// result 即为 { a: 1, b: 4, c: 5 }, target 和 result 是同一个对象

注意事项

• 源对象数量：可以是单个或多个对象。
• 目标对象类型：如果目标对象不是 object 类型，则会被转换为 object。
• 深度限制：Object.assign() 进行的是浅拷贝，引用类型的属性不会被深拷贝。

5. in 运算符

in 运算符 用于判断一个字符串表达式是否是对象 (object) 属性的键，返回布尔值。

示例

let obj = { a: 1, b: 2 };console.log('a' in obj); // truelet arr = [1,, 'hello', undefined, null, ''];console.log(0 in arr); // true（数组索引为空字符串）console.log(1 in arr); // falseconsole.log(2 in arr); // trueconsole.log(3 in arr); // trueconsole.log(4 in arr); // trueconsole.log(5 in arr); // true

数组中空slot 的特殊情况

需要注意的是，数组中的空slot(即,)会被解释为 undefined。使用 `in 运算符时，空slot 会被视为属性，例如：

const arr = [1, ,3];console.log(1 in arr); // falseconsole.log('1' in arr); // true

6. 对象的遍历方式

根据具体需求选择合适的遍历方法：

###.monday 使用：

• for...in 循环：遍历所有可枚举属性（包括对象和数组的属性）。

  const obj = { name: 'xiaoming', age: 18, address: 'shenzhen' };for (let key in obj) {  console.log(key, obj[key]);}

• Object.keys()：返回对象的所有可枚举属性名数组。适用于需要明确知道属性名的情况。

  const keys = Object.keys(obj);keys.forEach(key => {  console.log(key, obj[key]);});

• Object.getOwnPropertyNames()：返回对象的所有可枚举属性名数组，包含所有属性（包括非显式定义的），适用于需要访问所有属性的场景。

  const names = Object.getOwnPropertyNames(obj);names.forEach(name => {  console.log(name, obj[name]);});

• Reflect.ownKeys()：返回所有可枚举属性名的数组，同时包含对象本身和数组的属性。

  const reflectKeys = Reflect.ownKeys(obj);reflectKeys.forEach(key => {  console.log(key, obj[key]);});

通过选择不同的遍历方法，可以根据不同需求实现对对象属性的访问和处理。

转载地址：http://cjrnz.baihongyu.com/