es6中的擴充套件運算子

2021-10-07 21:57:25 字數 2202 閱讀 3924

物件中的擴充套件運算子(…)用於取出引數物件中的所有可遍歷屬性,拷貝到當前物件之中

1.在函式的傳引數過程,將剩餘的引數放入乙個陣列中。

rest引數形式為(…變數名),值為乙個陣列,用於獲取函式多餘引數。

function f(a,...arr)

f(1,2,3,4,4); //[2,3,4,5]複製**

rest引數只能放在最後乙個,否則報錯:

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

2.陣列中的拓展運算

拓展運算子使用(…),類似rest引數的逆運算,將陣列轉為用(,)分隔的引數序列。

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

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

拓展運算子主要使用在函式呼叫。

function f (a, b)

f(...[1, 2]); // 1 2

function g (a, b, c, d, e)

g(0, ...[1, 2], 3, ...[4]); // 0 1 2 3 4複製**

若拓展運算子後面是個空陣列,則不產生效果。

[..., 1]; // [1]
// es6之前

function f(a, b, c);

var a = [1, 2, 3];

// es6之後

function f(a, b, c);

let a = [1, 2, 3];

f(...a);

// es6之前

// es6之後

math.max(...[3,2,6]);

拓展運算子的運用

(1)複製陣列:

直接複製陣列時,只是淺拷貝,如果要實現深拷貝,可以使用拓展運算子。

// 通常情況 淺拷貝

let a1 = [1, 2];

let a2 = a1;

a2[0] = 3;

console.log(a1,a2); // [3,2] [3,2]

// 拓展運算子 深拷貝

let a1 = [1, 2];

let a2 = [...a1];

// let [...a2] = a1; // 作用相同

a2[0] = 3;

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

(2)合併陣列: 這裡合併陣列,是淺拷貝。

let a1 = [1,2];

let a2 = [3];

let a3 = [4,5];

// es5

let a4 = a1.concat(a2, a3);

// es6

let a5 = [...a1, ...a2, ...a3];

a4[0] === a1[0]; // true

a5[0] === a1[0]; // true

(3)與解構賦值結合:

與解構賦值結合生成陣列,但是使用拓展運算子需要放到引數最後乙個,否則報錯。

let [a, ...b] = [1, 2, 3, 4]; 

// a => 1 b => [2,3,4]

let [a, ...b] = ;

// a => undefined b =>

let [a, ...b] = ["abc"];

// a => "abc" b =>

擴充套件運算子可以將字串轉為真正的陣列

[...'hello']   // [ "h", "e", "l", "l", "o" ]
將資料結構轉為陣列

// arguments物件

function foo()

用於替換es5中的array.prototype.slice.call(arguments)寫

ES6 擴充套件運算子

擴充套件運算子用3個點表示,功能是把陣列或者類陣列物件展開成一系列用逗號隔開的值 1,陣列 let arr red green blue console.log arr red,green,blue拷貝陣列 和object.assign一樣都是淺拷貝 let arr red green blue l...

ES6擴充套件運算子

首先,我們要讀仔細下面這句話,就很容易知道擴充套件運算子的使用了,可以在心裡反覆讀三遍 接下來,我們看下究竟怎麼個情況 宣告乙個方法 var foo function a,b,c console.log a console.log b console.log c 宣告乙個陣列 var arr 1,2...

es6擴充套件運算子

1 複製 拷貝 陣列 陣列元素都是基本資料型別 var arr a b c var copy arr console.log copy a b c arr copy false2 函式呼叫 陣列作引數 function add x,y var numbers 4 38 add numbers 423...