标签: spread-syntax

为了简单的传播，我们可以像这样创建或替换：

let a = {1: "one", 2: "two"}; 
let b= {...a, ...{2: "too", 3: "three"}}
console.log(b); //{1: "one", 2: "too", 3: "three"}

我想做的是类似的事情，但是在嵌套对象上：

let a = {
   title: "hello world", 
   nestedObject: {
      1: "one", 
      2: "two", 
   }
}; 

let b= {...a, ...{nestedObject: {2: "too", 3: "three"}}};
console.log(b); //Replaces the nested object entirely. 

我真正想要的结果是：

{
   title: "hello world", 
   nestedObject: {
      1: "one", 
      2: "too",
      3: "three" 
   }
}; 

我将如何实现这一目标？

我的组件中有一个名为 的对象数组config和一个currentIdx属性。然后我发现自己需要这样做：

computed: {
    textStyle: function() {
        return this.config[this.currentIdx].textStyle;
    },
    text: function() {
        return this.config[this.currentIdx].text;
    },
    key: function() {
        return this.config[this.currentIdx].key;
    }
}

我尝试将所有功能替换为：

computed: {
    ...this.config[this.currentIdx]
}

它通过了编译，但我在浏览器控制台中出现错误。我认为问题在于computed需要函数，但扩展语法 (...) 返回对象。所以，我的问题是：在这种情况下，有没有办法减少重复？

谢谢！

我不了解对象内的传播语法。

console.log(...false) // TypeError not iterable
console.log(...1) // TypeError not iterable
console.log(...null) // TypeError not iterable
console.log(...undefined) // TypeError not iterable

我理解上面的代码由于非迭代器而发生错误。

但是这些代码运行良好。

console.log({...false}) // {}
console.log({...1}) // {}
console.log({...null}) // {}
console.log({...undefined}) // {}

请让我知道为什么上述代码有效。

我在MDN上阅读了有关扩展语法的内容,并且它可以与数组和字符串一起使用:

扩展语法允许在可能需要零个或多个参数(用于函数调用)的地方扩展诸如数组表达式或字符串之类的可迭代- mdn.

我很清楚数组.它会将元素扩展为单独的参数.
但我没有找到字符串的例子.

那么,使用扩展语法在函数调用中扩展字符串的规则是什么？
如果字符串字符用空格分隔,因为我试过这个并打印3.

var x = "1 2 3";
console.log(Math.max(...x));

在JavaScript中,扩展运算符的放置和排序是否重要？

var item = {/* key value pairs here */};
var itemB = {/* key value pairs here */};

例如,在以下代码中,代码段newItem总是具有相同的键值对？

var newItem = {
    ...item,
    ...itemB
};

如

var newItem = {
    ...itemB,
    ...item
};

我对 javascript 开发还很陌生，仍在学习概念。我有一个关于价差“运算符”（...）的问题。它可以用作类似继承的机制还是它有应该让我避免这种情况的副作用？

例子

const A = {
  prop1: "value1",
  prop2: function() {return this.prop1}
}

const B = {
  ...A,
  prop1: "updated_value1",
  prop3: "value3"
}

在这里可以看到 B 已经从 A 继承，A.prop2()返回value1，并且B.prop2()返回updated_value1具有从任何继承对象所期望的。

这是有效的吗？

我正在尝试使用 new Set 删除数组中的重复项给出错误“new Set(names).slice is not a function”

const names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
const uniq = [ ...new Set(names) ];
console.log(uniq);

这是stackblitz上的代码

所以我安装了babel 7，同时在预设环境中包含了插件“ @ babel / plugin-proposal-object-rest-spread”，但是由于它没有转换我的传播运算符，我仍然遇到以下错误回到es2015。

SCRIPT1028: Expected identifier, string or number

我尝试在.babelrc文件中的plugin数组中引用该插件。

我的.babelrc文件：

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env", {
            "include": [
                "@babel/plugin-proposal-object-rest-spread"
            ]
        }
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
    ]
}

我的package.json依赖项/ dev依赖项：

  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.6.3",
    "dotenv": "^6.1.0",
    "get-base64": "^1.3.0",
    "history": "^4.7.2",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "qs": "^6.5.2",
    "react": "^16.6.0",
    "react-debounce-input": "^3.2.0",
    "react-dom": "^16.6.0",
    "react-onclickoutside": "^6.7.1",
    "react-redux": "^5.1.0",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-select": "^2.1.2",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.5", …

我目前正在使用传播语法，遇到了意外问题。

以下代码段可以正常运行（并且不出所料），并且不会引发任何错误：

const arr = [1, 2, 3, 4] // create array of numbers

const copy = [...arr] // make a shallow copy of the array
copy.forEach(n => { // loop through array
  console.log(n + 1);
});

但是，如果删除中间变量copy，我的代码似乎抛出错误：

const arr = [1, 2, 3, 4] // create array of numbers

[...arr].forEach(n => { // loop through array
  console.log(n + 1);
});

如您所见，上面的代码片段引发了一个错误：

未捕获的SyntaxError：意外的令牌...

而第一个代码段则没有。为什么会这样呢？据我了解，我应该能够copy用包含但没有问题的文字数组替换（就像我在第二个片段中所做的那样）。

我希望第二个片段像第一个片段一样工作，并且不会抛出任何错误。

注意：[...arr]在这种情况下，我知道这似乎是多余的，我只是用它来演示我的问题。

我很好奇为什么这似乎是不可能的：

const {a, b, 'special-one'} = { a:1, b:2, 'special-one': 3 };
// output => missing : after property id

是否有可能在未来的 ES 版本中找到该语法？

谢谢你的灯:)