Javascript 扩展语法ES6

考虑以下示例代码

var x = ["a", "b", "c"];
var z = ["p", "q"];

var d = [...x, ...z];

var e = x.concat(z);

这里，

d

和

e

的值完全相同，等于

[“a”、“b”、“c”、“p”、“q”]

，因此

这两者之间到底有什么区别

哪一个更有效？为什么

扩展语法的具体用途是什么

你不认为在正式的广域语言中引入这些小捷径可能会留下一些未被注意到的bug吗？我的意思是，要么这是非常不必要的，要么我没有意识到它的必要性

在你给出的例子中，两者基本上没有区别

.concat

是因为

..

（spread）仅仅是在更基本的底层语法之上的语法糖，它显式地迭代索引以扩展数组

Spread允许在更笨拙的直接数组操作之上使用糖化语法

在上面的第3章中，您对spread的使用是一个有点做作的例子（尽管可能会经常出现在野外）。例如，当整个参数列表都应传递给函数体中的

.call

时，Spread非常有用

function myFunc(){
    otherFunc.call( myObj, ...args );
}

对

function myFunc(){
    otherFunc.call( myObj, args[0], args[1], args[2], args[3], args[4] );
}

这是另一个任意的例子，但它更清楚地解释了为什么在一些其他冗长和笨拙的情况下使用spread操作符会更好

作为：

---

Spread也适用于任意iterable对象，这意味着它不仅适用于

数组

s，还适用于

映射

和

集

等

这是一个很好的观点，并且补充了一个观点，即虽然在ES5中不可能实现，但在扩展运算符中引入的功能是新语法中更有用的项之一

---

---

有关此特定上下文中spread运算符的实际底层语法（因为

…

也可以是“rest”参数），请参阅。正如我在上面所写的“显式迭代索引以扩展数组的更基本的底层语法”足以说明这一点，但实际的定义对后面的变量使用

GetValue

和

GetIterator

。

在给定的示例中，这两个变量之间没有区别。对于串联，我们可以使用扩展运算符上的concat方法。然而，扩展运算符的使用并不限于数组的串联

扩展语法允许扩展iterable，例如数组表达式或字符串。它可以在以下场景中使用

阵列扩展算子

• 数组串联
• 字符串到数组
• 数组作为函数的参数

带对象的扩展运算符

• 对象的串联

要查看所有这些用法的演示，并尝试使用代码，请点击下面的链接（codepen.io）

---

这个例子的输出是相同的，但在引擎盖下的行为不同

考虑（检查浏览器的控制台）：

将保留数组中的值，而排列将用

未定义的值替换它们

输入并：

运算符使用
@@iterator
符号迭代数组和类似数组的对象，如：


阵列原型
TypedArray.prototype
字符串原型
地图原型
原型

（这就是为什么您可以对它们使用
for..of
）

我们可以覆盖默认的
迭代器
符号，以查看
排列
运算符的行为：


var myIterable=[“a”、“b”、“c”]；
var myIterable2=[“d”，“e”，“f”]；
myIterable[Symbol.iterator]=函数*（）{
产量1；
产量2；
产量3；
};
log（myIterable[0]，myIterable[1]，myIterable[2]）；//a、b、c
console.log（[…myIterable]）；//[1,2,3]
var结果=[…myIterable，…myIterable2]；
console.log（结果）；//[1,2,3，“d”、“e”、“f”]
var result2=myIterable.concat（myIterable2）；
console.log（result2）；//[“a”、“b”、“c”、“d”、“e”、“f”]
让我们从基本问题开始：扩展语法的用法到底是什么

Spread语法基本上是解压iterable的元素，例如数组或对象。或者，要从中获得更详细的解释，请执行以下操作：

扩展语法允许使用iterable，例如数组表达式或字符串
在零个或多个参数（用于函数）的位置展开
调用）或元素（用于数组文本），或对象
要在零个或多个键值对所在位置展开的表达式
（对于对象文字）应为

下面是一些扩展语法典型用例的简单示例，以及扩展语法和rest参数之间的差异示例（它们看起来可能相同，但执行的功能几乎相反）

函数调用：


constmultiargs=（一，二）=>{
控制台日志（一，二）；
}
设args=[1,2]；
多参数（…参数）；
//1 2
虽然对这一问题的回答是：“你不认为在正式的广域语言中引入这些小捷径可能会留下一些未被注意到的bug吗？”但我的观点是，是的，大多数ES6都会生成大量错误代码，因为草率和/或初级开发人员无法准确理解他们在做什么。@rockerest这正是我所想的。好吧，我刚刚做了一个快速的速度测试，
concat
要快得多。@void主要用于函数调用，也就是说，如果
myFunc
接受未知数量的参数，我们可以将其作为具有排列的数组提供参数。这样：
myFunc（…dynamicallyGeneratedArgs）
如果您想在不创建另一个数组的情况下将
z
附加到
x
中，您将获得真正的好处<代码>x.push（…z）使用的真实示例：
$。当
不允许使用pro数组时
/**
* Example-1: Showing How Spread Operator can be used to concat two or more     
arrays. 
*/
const americas = ['South America', 'North America'];

const eurasia = ['Europe', 'Asia'];

const world = [...americas, ...eurasia];

/**
* Example-2: How Spread Operator can be used for string to array.
*/
const iLiveIn = 'Asia';
const iLiveIntoArray = [...iLiveIn];

/**
* Example-3: Using Spread Operator to pass arguments to function
*/
const numbers = [1,4,5];

const add = function(n1,n2,n3){
return n1 + n2 + n3;
};

const addition = add(numbers[0],numbers[1],numbers[2]);
const additionUsingSpread = add(...numbers);

/**
* Example-4: Spread Operator, can be used to concat the array
*/

const personalDetails = {
  name: 'Ravi',
  age: '28',
  sex: 'male'
};

const professionalDetails = {
  occupation: 'Software Engineer',
  workExperience: '4 years'
};

const completeDetails = {...personalDetails, ...professionalDetails};

var x = [], y = [];

x[1] = "a";
y[1] = "b";

var usingSpread = [...x, ...y];
var usingConcat = x.concat(y);

console.log(usingSpread); // [ undefined, "a", undefined, "b"]
console.log(usingConcat); // [ , "a", , "b"] 

console.log(1 in usingSpread); // true
console.log(1 in usingConcat); // false