我对 ES2015 中的扩展语法和休息参数感到困惑。任何人都可以用适当的例子解释它们之间的区别吗？
问问题
32725 次
11 回答
136
使用展开时，您将单个变量扩展为更多：
var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];使用剩余参数时，您将函数的所有剩余参数折叠到一个数组中：
function sum( first, ...others ) {
for ( var i = 0; i < others.length; i++ )
first += others[i];
return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;于 2015-11-24T16:18:03.603 回答
82
ES6 有新特性三点...
以下是我们如何使用这些点：
- 作为休息/收集/收集
var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]
这...m是一个收集器，它收集其余的参数。当我们在内部编写时：
var [c, ...m] = [1,2,3,4,5];
JavaScript 执行以下操作
var c = 1,
m = [2, 3, 4, 5];
- 作为传播
var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]
在这里，...params展开以便将其所有元素添加到other
JavaScript 在内部执行以下操作
var other = [1, 2].concat(params);
希望这可以帮助。
于 2017-03-03T11:04:00.690 回答
13
概括：
在 javascript 中...是重载的。它根据使用运算符的位置执行不同的操作：
- 当在函数声明/表达式的函数参数中使用时，它将剩余的参数转换为数组。此变体称为Rest 参数语法。
- 在其他情况下，它将在需要零个或多个参数（函数调用）或元素（数组文字）的地方展开迭代的值。这种变体称为传播语法。
例子：
休息参数语法：
function rest(first, second, ...remainder) {
console.log(remainder);
}
// 3, 4 ,5 are the remaining parameters and will be
// merged together in to an array called remainder
rest(1, 2, 3, 4, 5);传播语法：
// example from MDN:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
// the numbers array will be spread over the
// x y z parameters in the sum function
console.log(sum(...numbers));
// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers);于 2018-10-23T18:07:32.713 回答
6
当我们在代码中看到“...”时，它要么是剩余参数，要么是扩展运算符。
有一种简单的方法可以区分它们：
当 ... 在函数参数的末尾时，它是“其余参数”并将列表的其余部分收集到数组中。当 ... 出现在函数调用或类似函数中时，它被称为“扩展运算符”并将数组扩展为列表。使用模式：
剩余参数用于创建接受任意数量参数的函数。扩展运算符用于将数组传递给通常需要许多参数列表的函数。它们一起帮助轻松地在列表和参数数组之间移动。有关此的更多信息，请单击此处
于 2017-10-25T10:29:40.320 回答
4
Javascript 的三个点 ( ...) 运算符可以以两种不同的方式使用：
- Rest 参数：将所有剩余元素收集到一个数组中。
var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]- 扩展运算符：允许将迭代（数组/对象/字符串）扩展为单个参数/元素。
var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"];
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]请注意，展开运算符可以是第一个元素，但其余参数必须是最后一个才能收集其余元素。
于 2019-07-18T22:41:27.733 回答
3
在 ES6 中添加这三个点...有两个含义，Spread 运算符和 Rest 参数
扩展运算符：您使用三个点来扩展iterables，iterables我的意思是arrays，string等作为参数。例如Math.max()，函数需要不确定数量的参数，因此您可以使用扩展运算符将元素扩展为函数的参数Math.max()。这是来自mdn的示例
console.log(Math.max(1, 3, 2));
// expected output: 3
console.log(Math.max(-1, -3, -2));
// expected output: -1
var array1 = [1, 3, 2];
console.log(Math.max(...array1));
// expected output: 3
另一个用例是添加，例如拥有这个数组
const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];
您可以将其添加到另一个数组
const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];
那么favoritesVideoGames值为
[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]
关于 Rest 参数，这里是MDN定义
剩余参数语法允许我们将不定数量的参数表示为一个数组。
这意味着您可以将许多元素打包成一个元素
这是来自 MDN 的示例
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
// expected output: 6
console.log(sum(1, 2, 3, 4));
// expected output: 10
我通常对这三点感到困惑，@stephaniecodes 的这个插图帮助我记住了它的逻辑。我提到我从这个插图中得到灵感来回答这个问题。
我希望它是有用的。
于 2018-09-25T22:57:36.457 回答
2
基本上就像在 Python 中一样：
>>> def func(first, *others):
... return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']
于 2017-03-24T19:40:04.857 回答
1
简单易记............
如果三点 (...) 在左侧，则为 Rest 参数，如果三点在右侧，则为 Spread 参数。
const [a,b,...c] = [1,2,3,4,5] // (left) rest
const [d,e] = [1, ...c] // (right) spread
于 2021-03-05T17:36:01.887 回答
0
关于这一点，我无法理解我们如何在 javascript 中传递函数和返回参数
函数是一组指令，它接受一些输入并处理它们并返回结果。
这里我们有一个数组 [1, 2, 3, 4, 5, 6]，filter 函数遍历每个元素并将每个元素传递给正函数，如果它是偶数则返回数字，否则跳过它。
痕迹：
1 => Filter(1) => positive(1) => skips 1,
2 => Filter(2) => positive(2) => returns 2,
3 => Filter(3) => positive(3) => skips 3,
...
6 => Filter(6) => positive(6) => returns 6
因此结果 [2, 4, 6]
于 2019-09-24T09:20:43.613 回答
0
考虑 3 种情况
1] 不使用任何运算符
function add(x, y) {
return x + y;
}
add(1, 2, 3, 4, 5) // returns 3 (function will takes first 2 arg only)
2] 带休息运算符
function add(...args) {
let result = 0;
for (let arg of args) result += arg;
return result
}
add(1) // returns 1
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15
- 我们可以将任意数量的参数收集到一个数组中
3] 使用扩展运算符
const arr = ["Joy", "Wangari", "Warugu"];
const newArr = ["joykare", ...arr];
The value of newArr will be [ 'joykare', 'Joy', 'Wangari', 'Warugu' ]
另一个
function add(a, b, c) {
return a + b + c ;
}
const args = [1, 2, 3];
add(...args);
-We have been using arrays to demonstrate the spread operator,
but any iterable also works. So, if we had a
string const str = 'joykare', [...str] translates to [ 'j', 'o', 'y', 'k', 'a', 'r', 'e' ]
于 2020-01-03T09:48:32.033 回答
0
来自：Ved Antani，Stoyan Stefanov 的书“面向对象的 JavaScript - 第三版”。：
休息参数
ES6引入了rest参数。剩余参数允许我们以数组的形式向函数发送任意数量的参数。剩余参数只能是参数列表中的最后一个，并且只能有一个剩余参数。在最后一个形式参数之前放置一个休息运算符（...）表示该参数是一个休息参数。以下示例显示在最后一个形式参数之前添加一个 rest 运算符：
function sayThings(tone, ...quotes){
console.log(Array.isArray(quotes)); //true
console.log(`In ${tone} voice, I say ${quotes}`)
}
sayThings("Morgan Freeman","Something serious","
Imploding Universe"," Amen");
//In Morgan Freeman voice, I say Something serious,
Imploding Universe,Amen
传递给函数的第一个参数以音调接收，而其余参数作为数组接收。可变参数 (var-args) 已成为其他几种语言的一部分，并且是ES6的欢迎版本。休息参数可以代替有争议的参数变量。剩余参数和参数变量之间的主要区别在于剩余参数是实数数组。所有数组方法都可用于剩余参数。
传播运算符
扩展运算符看起来与休息运算符完全相同，但执行的功能完全相反。在调用函数或定义数组时提供参数时使用扩展运算符。扩展运算符接受一个数组并将其元素拆分为单独的变量。以下示例说明了扩展运算符如何在调用将数组作为参数的函数时提供更清晰的语法：
function sumAll(a,b,c){
return a+b+c
}
var numbers = [6,7,8]
//ES5 way of passing array as an argument of a function
console.log(sumAll.apply(null,numbers)); //21
//ES6 Spread operator
console.log(sumAll(...numbers))//21
于 2020-04-28T08:59:25.900 回答