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

Question

我遇到了我应该使用的代码问题.我找到了一个我不熟悉的语法,我在google文档时遇到了麻烦:

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

我在理解参数前面的三个点(...)时遇到了问题.而"参数javascript中的点"是一个糟糕的搜索词.有人可以帮助我,也许告诉我这个语法实际上是什么调用,或者直接将我链接到文档？

Answer 1

...（Javascript 中的三个点）称为Spread 语法或Spread 运算符。这允许可迭代对象（例如数组表达式或字符串）在任何位置进行扩展或对象表达式进行扩展。

我想列出Spread 语法（Spread 运算符）最常用的实际用例。以下内容已通过此 stackoverflow 答案中的示例进行了解释。

1. 组合数组（连接数组）
2. 复制数组
3. 不应用调用函数
4. 解构数组
5. 函数参数作为剩余参数
6. 使用数学函数
7. 组合两个对象
8. 将字符串分成单独的字符

Answer 2

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

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

Answer 3

这不是ES6,只是在ECMAScript 2018中添加了.

它被称为"对象休息/传播属性",是传播语法的一部分.

Answer 4

您可以在对象中使用“...” 。在下面的示例中，“...data”获取“姓名：“约翰”，年龄：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 }
]