es6 函式展開運算子

2021-10-02 02:21:09 字數 1916 閱讀 9252

展開運算子

使用方式: …要展開的東西 和剩餘引數的寫法相同,只是使用在不同的場景

1. 對陣列展開es6

function sum(...args) 

return sum;

}

對於下面的場景

/**

* 獲取乙個指定長度的隨機數組成的陣列

* @param length

*/function getrandomnumber(length)

return arr;

}const numbers = getrandomnumber(10);

console.log(numbers)

sum(mumber)顯然是錯誤的,它需要展開傳遞引數,而不能傳個陣列。

將陣列的每一項展開,依次作為引數傳遞,而不是把整個陣列作為引數傳遞

這裡就可以用到展開運算子:

sum(...numbers); //相當於傳遞了10個引數
陣列裡到底有多少個引數,不確定的情況,也很好用。而且,它的前後還可以再傳遞引數像這樣:

console.log(sum(1, 3, ...numbers, 3, 5))
它在另乙個場景的應用:

複製(轉殖)陣列1到陣列2

onst arr1 = [3, 67, 8, 9, 5];

// 複製(轉殖)arr1陣列到arr2

// const arr2 =arr1; 這樣寫兩個陣列指向了同乙個位址,當改動arr2 同時也會改動到arr1

// 以前的做法,可以先宣告arr2是乙個空陣列,然後迴圈arr1裡陣列的每一項放到arr2裡面去,這樣做顯然很複雜

const arr2 = [...arr1];

console.log(arr2, arr1 === arr2)// [3, 67, 8, 9, 5] false

看到中括號就是乙個新的陣列產生了,看到乙個大括號,就是乙個新的物件產生了,這裡運用展開運算子,輕鬆完成了轉殖。並且新陣列前面和後面加上幾項也很方便const arr2 = [1,5,...arr1,3];這樣寫就可以了

2. 對物件展開 es7

const obj1 =
需求把obj1 轉殖到obj2可以如下操作

const obj2 = 

// console.log(obj2)

利用物件屬性不能重複定義的特點

const obj2 = ;   

console.log(obj2) //

這樣一來,我們就可以輕鬆的複製乙個物件,還能更改一些原有的屬性

這種轉殖是淺轉殖,如果轉殖的物件屬性裡又是乙個物件,這符屬性會指向同乙個位址。

const obj3 = 

}// 淺轉殖到obj4

const obj4 =

console.log(obj4, obj3.address === obj4.address)//} true

我們可以單獨的對這個是物件的屬性或是是陣列形式的屬性控制一下,再進行展開(前提是我們知道這個屬性)
const obj5 = 

}console.log(obj5, obj5.address === obj3.address)//} false

並且還可以在展開內容前後,輕鬆的加上新的內容。

用展開符實現陣列轉殖,物件轉殖,很重要,要多練習一下這樣的寫法。

es6 展開運算子

展開運算子不能用在物件當中,只能在可遍歷物件中使用 iterables iterables的實現是依靠 symbol.iterator 函式,目前只有array,set,string內建 symbol.iterator 方法,不過es7草案中已經加入了物件展開運算子。可用展開運算子展開陣列,解構陣列...

es6 展開運算子

好記性不如爛筆頭,在學習的過程中,越來越明白這句話的含義 es6的展開運算子使用三個點來表示 使用展開運算子的前提 物件具有 iterator 遍歷器介面 比如陣列,怎麼判斷乙個物件是否具有iterator 遍歷器介面呢,我們檢視物件是否有symbol symbol.iterator 屬性就可以了 ...

es6展開運算子

展開運算子 在es6中用.來表示展開運算子,它可以將陣列方法或者物件進行展開。先來看乙個例子它是如何使用的。const arr1 1,2,3 const arr2 arr1,10,20,30 這樣,arr2 就變成了 1,2,3,10,20,30 arr1中的值完全轉殖到了arr2中 arr1改變a...