esl6中的三个点（...）-rest参数与扩展运算符

Rango 发布于2019-08-22 17:16 / 1266人阅读

摘要：参数搭配的变量是一个数组，该变量将多余的参数放入数组中。扩展运算符扩展运算符是三个点。应用扩展运算符将数组变为参数序列替代数组的方法由于扩展运算符可以展开数组，所以不再需要方法，将数组转为函数的参数了。

rest参数

ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。 rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
        let sum = 0;
        for (var val of values) {
            sum += val;
        }
         return sum;
} 
add(2, 5, 3) // 10

应用：

1.rest参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用rest参数改写数组push方法的例子。

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
    return array
} 
var a = [];
push(a, 1, 2, 3)  //[1,2,3]

扩展运算符

扩展运算符（ spread）是三个点（ ...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll("div")]
// [, , ]

应用：

1.扩展运算符将数组变为参数序列

function add(x,y){
    return x + y
}
var numbers = [4,28];
add(...numbers) //42

2.替代数组的apply 方法,由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5的写法
function f(x, y, z) {
// ...
} 
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
// ...
}
 var args = [0, 1, 2];
f(...args);

// 应用Math.max方法， 简化求出一个数组最大元素的写法

// ES5的写法
Math.max.apply(null, [14, 3, 77])

// ES6的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

上面代码表示，由于JavaScript不提供求数组最大元素的函数，所以只能套用Math.max函数，将数组转为一个参数序列，然后求最大值。有了扩展运算
符以后，就可以直接用Math.max

3.合并数组

// ES5的写法
[1, 2].concat(more)

// ES6
[1, 2, ...more]
var arr1 = ["a", "b"];
var arr2 = ["c"];
var arr3 = ["d", "e"];

// ES5的合并数组
arr1.concat(arr2, arr3);  // [ "a", "b", "c", "d", "e" ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]   // [ "a", "b", "c", "d", "e" ]

云服务器 GPU云服务器 js 三个点参数 Rest参数 html三个点的效果 php 中的三个等号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95011.html

（...）这三个点在JavaScript中意味着什么？

摘要：下面是我试图解释中三个点的作用。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。这意味着下面的代码将导致您拥有包含重复元素的数组。这应该是您需要了解的所有内容，以便在中使用运算符。这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释JavaScript中三个点的作用。希望这对于将来有相同问题的人来说可以消除围绕这个概念的迷雾。数组/对象扩展运算符假...

Faremax 2019-08-29 16:31 评论0 收藏0
（...）这三个点在JavaScript中意味着什么？

摘要：下面是我试图解释中三个点的作用。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。这意味着下面的代码将导致您拥有包含重复元素的数组。这应该是您需要了解的所有内容，以便在中使用运算符。这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释JavaScript中三个点的作用。希望这对于将来有相同问题的人来说可以消除围绕这个概念的迷雾。数组/对象扩展运算符假...

Travis 2019-08-23 11:31 评论0 收藏0
（...）这三个点在JavaScript中意味着什么？

摘要：下面是我试图解释中三个点的作用。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。这意味着下面的代码将导致您拥有包含重复元素的数组。这应该是您需要了解的所有内容，以便在中使用运算符。这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释JavaScript中三个点的作用。希望这对于将来有相同问题的人来说可以消除围绕这个概念的迷雾。数组/对象扩展运算符假...

fjcgreat 2019-08-02 16:31 评论0 收藏0
ECMASCRIPT 6 实战之扩展运算符

摘要：扩展运算符是以下简称中又一非常好用的实战技术它的写法只需要三个点作用则顾名思义用来展开你想要使用的任意变量本质上是对所有拥有迭代器接口的对象进行迭代。扩展运算符(spreading)是 ECMASCRIPT 6(以下简称ES 6) 中又一非常好用的实战技术, 它的写法只需要三个点(...),作用则顾名思义,用来展开你想要使用的任意变量,本质上是对所有拥有迭代器接口(Iterator)...

habren 2019-08-26 13:55 评论0 收藏0
ES6—扩展运算符和rest运算符（6）

摘要：扩展运算符简介扩展运算符是三个点，可以将一个数组转为用逗号分隔的参数序列。在实际项目中灵活应用扩展运算符运算符，能写出更精简易读性高的代码。 1、扩展运算符简介扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 评论0 收藏0