ES6 Object：解构赋值、扩展运算符与可选链

总结

• 属性和方法简写；
• 表达式属性名和方法名；
• name 属性；
• Object.is();
• Object.assign();

代码分析

const foo = 'bar';
const propKey = 'foo';
const key1 = Symbol('description');

const obj = {
  // 属性的简洁表示法
  foo,

  // 方法的简洁表示法
  // 等同于 hello: function ()...
  hello() {
    return "Hello!";
  },

  // 表达式属性名，在ES6中是允许的
  [propKey]: true,
  // 表达式也能定义方法名
  [propKey]() {
    return true;
  },
  // 注：属性名如果是对象，会转换为`[object Object]`

  // 方法的`name`属性
  // obj.sayName.name 返回 sayName
  sayName() {
    console.log('hello!');
  },
  // Symbol值：obj[key1].name // "[description]"
  // 返回这个 Symbol 值的描述。
  [key1]() {},

  // generate 方法
  * gen() {
    yield 'hello world';
  }
};

Object.is()

用来比较两个值是否严格相等。

Object.is('foo', 'foo'); // true
Object.is({}, {}); // false
Object.is(+0, -0); // false
Object.is(NaN, NaN); // true

// ES5 中的实现
Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 针对+0 不等于 -0的情况
      return x !== 0 || 1 / x === 1 / y;
    }
    // 针对NaN的情况
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});

Object.assign()

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

// 同名属性，会覆盖前面的；
Object.assign(target, source1, source2);

// 如果该参数不是对象，则会先转成对象，然后返回。
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
// 其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。
// 但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。
// 这是因为只有字符串的包装对象，会产生可枚举属性。
const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

// Object.assign拷贝的属性是有限制的，
// 只拷贝源对象的自身属性（不拷贝继承属性），
// 也不拷贝不可枚举的属性（enumerable: false）。
Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
);
// { b: 'c' }

// 属性名为 Symbol 值的属性，也会被Object.assign拷贝。
Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' });
// { a: 'b', Symbol(c): 'd' }

注意点

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

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b; // 2

同名属性的替换：一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。

const target = { a: { b: 'c', d: 'e' } };
const source = { a: { b: 'hello' } };
Object.assign(target, source);
// { a: { b: 'hello' } }

数组的处理：Object.assign可以用来处理数组，但是会把数组视为对象。

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

取值函数的处理：Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

const source = {
  get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// { foo: 1 }

常见用途

为对象添加属性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    // ···
  },
  anotherMethod() {
    // ···
  }
});

克隆对象

// 注：是浅拷贝，
// 只能克隆原始对象自身的值，不能克隆继承的值；
// [Todos] 如何克隆继承的值；
function clone(origin) {
  return Object.assign({}, origin);
}

合并多个对象

const merge = (...sources) => Object.assign({}, ...sources);

为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};
function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

解构赋值

从对象中提取属性，赋值给变量。

const user = { name: '张三', age: 25, city: '北京' };

// 基本解构
const { name, age } = user;
console.log(name); // '张三'

// 重命名
const { name: userName } = user;
console.log(userName); // '张三'

// 默认值
const { role = 'guest' } = user;
console.log(role); // 'guest'

// 嵌套解构
const response = {
  data: {
    list: [1, 2, 3],
    total: 100
  }
};
const { data: { list, total } } = response;
console.log(list); // [1, 2, 3]

// 函数参数解构
function createUser({ name, age, role = 'user' }) {
  return { name, age, role };
}
createUser({ name: '李四', age: 30 });
// { name: '李四', age: 30, role: 'user' }

// 解构赋值的剩余属性
const { city, ...rest } = user;
console.log(rest); // { name: '张三', age: 25 }

扩展运算符（Spread）

对象的扩展运算符（...）用于取出对象的所有可遍历属性，拷贝到新对象中。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };

// 合并对象（浅拷贝）
const merged = { ...obj1, ...obj2 };
// { a: 1, b: 2, c: 3 }

// 后面的属性覆盖前面的
const overridden = { ...obj1, b: 99 };
// { a: 1, b: 99 }

// 等价于 Object.assign，但语法更简洁
const clone = { ...obj1 };
// { a: 1, b: 2 }

// 配合默认值使用
function createConfig(options) {
  return {
    debug: false,
    timeout: 3000,
    ...options
  };
}
createConfig({ timeout: 5000 });
// { debug: false, timeout: 5000 }

Object.keys() / Object.values() / Object.entries()

ES2017 引入的遍历方法，返回对象自身可枚举属性。

const person = { name: '张三', age: 25, city: '北京' };

// Object.keys - 返回键名数组
Object.keys(person);
// ['name', 'age', 'city']

// Object.values - 返回键值数组
Object.values(person);
// ['张三', 25, '北京']

// Object.entries - 返回键值对数组
Object.entries(person);
// [['name', '张三'], ['age', 25], ['city', '北京']]

// 常见用法：遍历对象
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

// 配合 Map 使用
const map = new Map(Object.entries(person));

// Object.fromEntries - entries 的逆操作（ES2019）
const entries = [['name', '李四'], ['age', 30]];
Object.fromEntries(entries);
// { name: '李四', age: 30 }

// 实用场景：过滤对象属性
const filtered = Object.fromEntries(
  Object.entries(person).filter(([key]) => key !== 'age')
);
// { name: '张三', city: '北京' }

可选链（Optional Chaining ?.）

ES2020 引入，安全地访问深层嵌套属性，遇到 null 或 undefined 时短路返回 undefined。

const user = {
  profile: {
    address: {
      city: '上海'
    }
  }
};

// 传统写法（防御性判断）
const city = user && user.profile && user.profile.address && user.profile.address.city;

// 可选链写法
const city2 = user?.profile?.address?.city;
// '上海'

// 访问不存在的路径不会报错
const zip = user?.profile?.address?.zip;
// undefined（不会抛 TypeError）

// 方法调用
const result = user?.profile?.getName?.();
// 如果 getName 不存在，返回 undefined 而非报错

// 配合空值合并运算符（??）提供默认值
const displayCity = user?.profile?.address?.city ?? '未知';

// 数组元素
const arr = [1, 2, 3];
arr?.[0]; // 1
arr?.[99]; // undefined

// 注意：可选链不能用于赋值左侧
// user?.name = '新名字'; // SyntaxError