Javascript 属性三点 (...)

Question

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

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

我无法理解参数前面的三个点 (...) 的作用。 "dots in parameter javascript" 是一个糟糕的搜索词。有人可以帮助我，也许可以告诉我这个语法实际上叫什么，或者直接 link 我查看文档？

Answer 1

那不是 ES6，而是仅在 ECMAScript 2018 中添加的。

它被称为 "Object Rest/Spread Properties" 并且是 Spread Syntax 的一部分。

Answer 2

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

MDN 有很多关于传播运算符的文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 3

...（Javascript 中的三个点）称为 展开语法 或 展开运算符。这允许扩展诸如数组表达式或字符串之类的可迭代对象，或者扩展对象表达式。

我想列出Spread Syntax (Spread Operator). The following has been explained with examples in .

最常用的实际用例

合并数组（连接数组）
正在复制数组
调用函数而不应用
解构数组
作为剩余参数的函数参数
使用数学函数
合并两个对象
将字符串分隔成单独的字符

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 }
]

Javascript 属性三点 (...)

Javascript Property with three dots (...)

javascript

documentation

syntax

frontend

three-dots

Javascript 属性 三点 (...)

Javascript Property with three dots (...)

javascript

documentation

syntax

frontend

three-dots

Javascript 属性三点 (...)