带有三个点 (...) 的 Javascript 属性

Question

我应该使用的代码有问题。我发现了一个我不熟悉的语法，并且在谷歌上搜索文档时遇到了麻烦：

export const Something = class Something {
    constructor(someObject = {}) {
        this.someObject = {...Something.someObjectDefaultAsStaticMethod,...someThing};
    };
// The rest of the class
};

我无法理解参数前面的三个点 (...) 的作用。并且“参数 javascript 中的点”是一个糟糕的搜索词。有人可以帮助我，也许可以告诉我这个语法实际上是什么，或者直接将我链接到文档？

Answer 1

这不是 ES6，只是在 ECMAScript 2018 中添加。

它被称为“对象休息/传播属性”，是Spread Syntax 的一部分。

Answer 2

...（Javascript 中的三个点）称为 Spread Syntax 或 Spread Operator。这允许在任何位置扩展诸如数组表达式或字符串之类的可迭代对象，或者在任何位置扩展对象表达式。

我想列出Spread Syntax（扩展运算符）最常用的实际用例。以下已在this stackoverflow answer中举例说明。

1. 组合数组（连接数组）
2. 复制数组
3. 在没有 Apply 的情况下调用函数
4. 解构数组
5. 作为休息参数的函数参数
6. 使用数学函数
7. 组合两个对象
8. 将字符串分隔成单独的字符

Answer 3

[...something] 是展开运算符。它本质上允许扩展数组或字符串。你会看到它经常在 React 中使用，但还有许多其他用例。

MDN 有关于扩展运算符的大量文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 4

您可以在对象中使用 "..."。在下面这个例子中，"...data" 得到 'name: "John", age: 24':

const data= { name: "John", age: 24 };

const newData = {
  ...data, // Here
  sex: "Male"
}

console.log(newData);

这是结果：

{ name: "John", age: 24, sex: "Male" }

这是另一个使用 "...data[key]" 将 "id" 添加到数组中的每个对象的示例：

const data = [
  { name: "John", age: 24 },
  { name: "Marry", age: 18 },
  { name: "Tom", age: 15 },
]

const newData = [];

for(const key in data) {

  const obj = {
    id: Number(key),
    ...data[key] // Here
  }

  newData.push(obj);
}

console.log(newData);

这是结果：

[
  { id: 0, name: "John", age: 24 },
  { id: 1, name: 'Marry', age: 18 },
  { id: 2, name: 'Tom', age: 15 }
]