ES6的rest參數和擴展運算符

ccj659 發布于2019-08-20 18:05 / 1304人閱讀

摘要：參數的形式為變量名擴展運算符是三個點。傳遞給函數的一組參數值，被整合成了數組。擴展運算符的應用普通的函數調用上面代碼中，和這兩行，都是函數的調用，它們的都使用了擴展運算符。這時，擴展運算符可以將其轉為真正的數組，原因就在于對象實現了。

rest參數和擴展運算符都是ES6新增的特性。
rest參數的形式為：...變量名；擴展運算符是三個點（...）。

rest參數

rest參數用于獲取函數的多余參數，這樣就不需要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(1, 2, 3) // 6

傳遞給 add 函數的一組參數值，被整合成了數組 values。

下面是一個 rest 參數代替arguments變量的例子。

// arguments變量的寫法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest參數的寫法
const sortNumbers = (...numbers) => numbers.sort();

rest參數和arguments對象的區別

rest參數只包含那些沒有對應形參的實參；而 arguments 對象包含了傳給函數的所有實參。

arguments 對象不是一個真實的數組；而rest參數是真實的 Array 實例，也就是說你能夠在它上面直接使用所有的數組方法。

arguments 對象對象還有一些附加的屬性 (比如callee屬性)。

另外，使用rest參數時應注意一下兩點：

rest 參數之后不能再有其他參數（即只能是最后一個參數），否則會報錯。

function f(a, ...b, c) { ... } // 報錯

函數的length屬性，不包括 rest 參數。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

擴展運算符

擴展運算符可以看做是 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。

console.log(...[1, 2, 3]) // 1 2 3

console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5

擴展運算符的應用 普通的函數調用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

上面代碼中，array.push(...items)和add(...numbers)這兩行，都是函數的調用，它們的都使用了擴展運算符。該運算符將一個數組，變為參數序列。

替代 apply 方法調用函數

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

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

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

// ES5 的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

合并數組

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" ]

與解構賦值結合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果將擴展運算符用于數組賦值，只能放在參數的最后一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];  // 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];  // 報錯

將字符串轉為數組

var str = "hello";

// ES5  
var arr1 = str.split("");  // [ "h", "e", "l", "l", "o" ] 

// ES6  
var arr2 = [...str];  // [ "h", "e", "l", "l", "o" ]

實現了 Iterator 接口的對象

任何 Iterator 接口的對象，都可以用擴展運算符轉為真正的數組。

var nodeList = document.querySelectorAll("div");
var array = [...nodeList];

上面代碼中，querySelectorAll方法返回的是一個nodeList對象。它不是數組，而是一個類似數組的對象。這時，擴展運算符可以將其轉為真正的數組，原因就在于NodeList對象實現了 Iterator 。

總結

從上面的例子可以看出，rest參數使用場景應該稍少一些，主要是處理不定數量參數，可以避免arguments對象的使用。而擴展運算符的應用就比較廣了，在實際項目中靈活應用，能寫出更精簡的代碼。

云服務器 GPU云服務器 es6字符串擴展 Rest參數 GPU 云運算參數 FPGA云運算主機參數

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84073.html

ES6—擴展運算符和rest運算符（6）

摘要：擴展運算符簡介擴展運算符是三個點，可以將一個數組轉為用逗號分隔的參數序列。在實際項目中靈活應用擴展運算符運算符，能寫出更精簡易讀性高的代碼。 1、擴展運算符簡介擴展運算符（ spread ）是三個點（...），可以將一個數組轉為用逗號分隔的參數序列。說的通俗易懂點，有點像化骨綿掌，把一個大元素給打散成一個個單獨的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 評論0 收藏0
ES6 ...操作符

摘要：在語法中，操作符有兩種意義剩余語法，參數和展開語法，展開數組對象，作為函數數組對象的擴展運算符。使用和參數進行操作其余參數傳給原始函數展開語法運算則可以看作是參數的逆運算。在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數) 和 spread(展開語法，展開數組/對象)，作為函數、數組、對象的擴展運算符。從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0
es6的解構賦值、擴展運算符、rest參數使用

摘要：模板字符串甚至還能嵌套解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。運算符使用場景應該稍少一些，主要是處理不定數量參數，可以避免對象的使用。 es6中較為常用的書寫風格為了書寫的方便，es6中提出了很多比較友好的書寫方式，其中最為常見的屬于以下幾個：字符串模板 `abcdef${test}` 解構賦值 let [a, b, c] = [1,...

xuweijian 2019-08-21 16:47 評論0 收藏0
es6學習筆記-函數擴展_v1.0_byKL

摘要：學習筆記函數擴展函數參數的默認值如果參數默認值是變量，那么參數就不是傳值的，而是每次都重新計算默認值表達式的值。屬性函數的屬性，返回該函數的函數名。箭頭函數詳細鏈接參考引用函數擴展 es6學習筆記-函數擴展_v1.0 函數參數的默認值 function Point(x = 0, y = 0) { this.x = x; this.y = y; } var p = ne...

yuanzhanghu 2019-08-20 15:16 評論0 收藏0
es6 -- 默認參數Default，不定參數Rest，擴展運算符Spread詳解

摘要：將數組中的每個元素展開為函數參數擴展運算符取代方法的一個實際的例子，應用方法，簡化求出一個數組最大元素的寫法。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言記錄一下在實際開發中，很有用的三個es6的新方法用法詳解默認參數 function f(x, y=13) { // 如果沒有傳入y或傳入了undefined，y的默認值為13 retur...

Betta 2019-08-23 15:20 評論0 收藏0