我对ES2015中的spread语法和rest参数感到困惑。任何人都能用适当的例子来解释它们之间的区别吗?
答案 0 :(得分:105)
使用点差时,您将单个变量扩展为更多:
\0
使用rest参数时,您将函数的所有剩余参数折叠为一个数组:
var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];
答案 1 :(得分:56)
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];
As Spread
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);
希望这有帮助。
答案 2 :(得分:8)
在javascript中...
已超载。它会根据使用运算符的位置执行不同的操作:
其余参数语法:
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);
传播语法:
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);
答案 3 :(得分:5)
当我们看到" ..."在代码中,它是rest参数或者 传播运营商。
有一种简单的方法可以区分它们:
当......位于函数参数的末尾时,它是“休息参数” 并将列表的其余部分收集到数组中。当...发生在... 函数调用或类似函数,它被称为“扩展运算符”并扩展 数组进入列表。使用模式:
Rest参数用于创建接受任意数量的函数 参数。 spread运算符用于将数组传递给函数 通常需要许多参数的列表。他们一起帮助 轻松地在列表和参数数组之间传播。 有关此click here
的详细信息
答案 4 :(得分:3)
基本上就像在Python中一样:
>>> def func(first, *others):
... return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']
答案 5 :(得分:3)
在ES6中添加的这三个点...
具有两个含义,即Spread运算符和Rest参数
扩展运算符:您使用三个点将iterables
扩展为iterables
,我的意思是arrays
,string
等。作为参数。例如,Math.max()
函数期望参数的数量不确定,因此您可以使用Spread运算符将元素扩展为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定义
rest参数语法允许我们表示一个不确定的数字 参数作为数组。
这意味着您可以将多个元素打包到一个元素中
以下是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
我通常会对这三点感到困惑,illustration的@stephaniecodes有助于我记住其逻辑。我提到我从这个插图中得到启发来回答这个问题。
我希望它有用。
答案 6 :(得分:1)
Javascript的三个点(...
)可以以两种不同的方式使用:
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"]
请注意,spread运算符可以是第一个元素,但是 rest参数必须是最后一个,以收集其余元素。
答案 7 :(得分:0)
关于此i cant understand how we are passing a function and returning arguments in javascript
函数是一组指令,它们接受一些输入并对其进行处理并返回结果。
这里我们有一个数组[1、2、3、4、5、6],并且filter函数遍历每个元素并将每个元素传递给正函数,如果正数,则返回正数,否则将其跳过。 / p>
跟踪:
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]
答案 8 :(得分: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' ]
答案 9 :(得分:0)
来自:Ved Antani,Stoyan Stefanov的书“面向对象的JavaScript-第三版。” :
其余参数
ES6 引入了 rest 参数。 Rest 参数允许我们以数组的形式向函数发送任意数量的参数。 Rest 参数只能是参数列表中的最后一个参数,并且只能有一个Rest参数。在最后一个形式参数前放置 rest运算符(...)表示该参数是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 的欢迎版本。 Rest 参数可以替换稍有争议的arguments变量。 rest参数和arguments变量之间的主要区别在于rest参数是实数数组。所有数组方法均可用于 rest 参数。
传播算子
一个 spread 运算符看上去与 rest 运算符完全一样,但执行的功能恰恰相反。 Spread 运算符用于在调用函数或定义数组时提供参数。 spread 运算符选取一个数组,并将其元素拆分为各个变量。下面的示例说明了 spread 运算符如何在调用将数组作为参数的函数时提供更清晰的语法:
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
答案 10 :(得分:0)
简单好记........
如果三个点 (...) 在左侧,则为 Rest 参数,如果三个点在右侧,则为 Spread 参数。
const [a,b,...c] = [1,2,3,4,5] // (left) rest
const [d,e] = [1, ...c] // (right) spread