ES9 中的对象扩展操作符，你值得拥有-JavaScript中文网-JavaScript教程资源分享门户

ES9（ECMAScript 2018）中加入了许多新的语言特性和功能，其中对象扩展操作符是一个非常实用的新功能，它可以很大程度上简化对象的操作和处理。本篇文章将详细介绍对象扩展操作符的语法、用法和注意事项，并提供示例代码和指导意义。

对象扩展操作符的语法

对象扩展操作符使用三个点（...）表示，放在对象字面量或者函数参数列表中的对象后面，用于将对象展开为一个或多个独立的属性和方法。它的语法如下所示：

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // { x: 1, y: 2, z: 3}

function myFunc({ x, y, ...z }) {
  console.log(x, y, z);
}
myFunc(obj2); // 1 2 { z: 3 }

在第一行代码中，我们定义了一个对象 obj1，它有两个属性 x 和 y。在第二行代码中，我们使用对象扩展操作符 ...obj1 将 obj1 对象展开，然后将 z 属性添加到新对象 obj2 中。因此，obj2 对象包括了 obj1 中的所有属性加上新的属性 z。

在第四行代码中，我们定义了一个函数 myFunc，它的参数是一个对象，包括了 x、y 和所有其它的属性 z。当我们调用 myFunc(obj2) 函数时，x 和 y 分别对应 obj2 中的 x 和 y 属性，而 z 则对应 obj2 中的 z 属性。

对象扩展操作符的用法

对象扩展操作符可以用于多种场景，包括以下几种：

1. 组合多个对象

我们可以使用对象扩展操作符将多个对象合并为一个新的对象，例如：

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }

在上面的代码中，我们使用对象扩展操作符将 obj1 和 obj2 对象合并为一个新对象 obj3。这样，obj3 就包含了 obj1 和 obj2 中的所有属性。

2. 克隆一个对象

我们也可以使用对象扩展操作符来创建一个对象的浅拷贝，例如：

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { x: 1, y: 2 }

在上面的代码中，我们使用对象扩展操作符将 obj1 拷贝到 obj2 中，从而创建了一个新的对象。

3. 选取和忽略属性

我们可以使用对象扩展操作符来选取一个对象中的属性，并创建一个新的对象，例如：

const obj1 = { x: 1, y: 2, z: 3 };
const { x, ...rest } = obj1;
console.log(x);    // 1
console.log(rest); // { y: 2, z: 3 }

在上面的代码中，我们使用对象扩展操作符将对 obj1 进行展开操作，提取了 x 属性，然后将其余的属性存储在一个名为 rest 的对象中。

另外，我们还可以使用对象扩展操作符来忽略一个或多个属性，并创建一个新的对象，例如：

const obj1 = { x: 1, y: 2, z: 3 };
const { y, ...rest } = obj1;
console.log(y);    // 2
console.log(rest); // { x: 1, z: 3 }

在上面的代码中，我们使用对象扩展操作符将对 obj1 进行展开操作，忽略了 y 属性，并将其余的属性存储在一个名为 rest 的对象中。

4. 操作对象属性

我们可以使用对象扩展操作符来操作一个对象的属性，例如：

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, x: 3 };
console.log(obj2); // { x: 3, y: 2 }

在上面的代码中，我们使用对象扩展操作符将 obj1 对象展开，然后将 x 属性的值从 1 改为 3，并将其余的属性存储在 obj2 中。

对象扩展操作符的注意事项

虽然对象扩展操作符非常实用，但在使用时还需要注意以下几点：

1. 对象扩展操作符只能用于对象

对象扩展操作符只能用于对象，不能用于数组或字符串等其它数据类型，例如：

const arr1 = [1, 2];
const arr2 = [...arr1]; // ✅
const str1 = "hello";
const str2 = [...str1]; // ❌

在上面的代码中，我们可以使用对象扩展操作符来克隆数组 arr1，但不能使用对象扩展操作符来克隆字符串 str1。

2. 对象扩展操作符只能用于 enumerable 属性

当对象的属性不是 enumerable 属性时，对象扩展操作符不会拷贝这些属性。例如：

const obj1 = Object.defineProperties({}, {
    x: { value: 1, enumerable: true },
    y: { value: 2, enumerable: false }
});
const obj2 = { ...obj1 };
console.log(obj2); // { x: 1 }

在上面的代码中，我们使用 Object.defineProperties 定义了一个名为 obj1 的对象，它有两个属性 x 和 y，其中 y 属性的 enumerable 属性为 false。然后，我们使用对象扩展操作符将 obj1 对象展开到 obj2 对象中，发现只有 x 属性被拷贝了。这是因为 y 属性的 enumerable 属性为 false，不允许被拷贝。

3. 对象扩展操作符是浅拷贝

当使用对象扩展操作符克隆一个对象时，它只会克隆对象中的属性和方法，而不会克隆属性中的子对象。例如：

const obj1 = { x: 1, y: { z: 2 } };
const obj2 = { ...obj1 };
obj2.y.z = 3;
console.log(obj1.y.z); // 3 ❌

在上面的代码中，我们使用对象扩展操作符将 obj1 克隆到 obj2 中，然后修改 obj2 中 y 属性的 z 值为 3。但是，我们发现 obj1 中的 y 属性也被修改了。这是因为对象扩展操作符只进行浅拷贝，不会深度拷贝子对象。

指导意义

在本文中，我们详细介绍了对象扩展操作符的语法、用法和注意事项，以及提供了一些示例代码。通过熟练掌握对象扩展操作符，我们可以更加方便、高效地操作和处理对象。同时，我们还应该注意使用对象扩展操作符的注意事项，避免出现意外的错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d658bba941bf7134c10c92

ES9 中的对象扩展操作符，你值得拥有