esl6中的三個點（...）-rest參數與擴展運算符

Rango 發布于2019-08-22 17:16 / 1288人閱讀

摘要：參數搭配的變量是一個數組，該變量將多余的參數放入數組中。擴展運算符擴展運算符是三個點。應用擴展運算符將數組變為參數序列替代數組的方法由于擴展運算符可以展開數組，所以不再需要方法，將數組轉為函數的參數了。

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 中的三個等號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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