ES6 解構運算子 rest運算子，運算子

解構的作用是可以快速取得陣列或物件當中的元素或屬性，而無需使用arr[x]或者obj[key]等傳統方式進行賦值

陣列解構賦值：

var arr = ['this is a string', 2, 3];
//傳統方式
var a = arr[0],
b = arr[1],
c = arr[2];
//解構賦值，是不是簡潔很多？
var [a, b, c] = arr;
console.log(a);//
this is a string
console.log(b);//
2console.log(c);//
3

巢狀陣列解構：

var arr = [[1, 2, [3, 4]], 5, 6];
var [[d, e, [f, g]], h, i] = arr;
console.log(d);//1
console.log(f);//3
console.log(i);//6

函式傳參解構：

var arr = ['this is a string', 2, 3];
function
fn1([a, b, c]) 
fn1(arr);
//this is a string//2
//3

for迴圈解構：

var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) 
//11
//12
//21
//22
//31
//32

物件賦值解構：

var obj = 
};var = obj;
console.log(name + ' ' + *** + ' ' + age); //chris male 26
console.log(son); //

物件傳參解構：

var obj = 
};function
fn2() 
fn2(obj);
//chris male 26

變數名與物件屬性名不一致解構：

var obj = ;
var = obj;
console.log(nickname + ' ' + howold); //
chris 26

巢狀物件解構：

var obj = 
};var } = obj;
console.log(sonname + ' ' + son*** + ' ' + sonage);
//大熊 male 1
//babel暫不支援這種巢狀解構
obj = 
= obj;
console.log(c);

巢狀物件屬性重名，解構時需要更改變數名：

var obj = 
};//
賦值解構
var } = obj;
console.log(fathername); //
chris
console.log(name); //
大熊//
傳參解構
function
fn3(}) 
fn3(obj);
//chris male 26 大熊

迴圈解構物件：

var arr = [, , ];
for (let of arr) 
//chris 26
//jack 27
//peter 28

解構的特殊應用場景：

//
變數互換
var x = 1,
y = 2;
var [x, y] = [y, x];
console.log(x); //
2console.log(y); //1//
字串解構
var str = 'love';
var [a, b, c, d] = str;
console.log(a);//
lconsole.log(b);//
oconsole.log(c);//
vconsole.log(d);//
e

擴充套件運算子用三個點號表示，功能是把陣列或類陣列物件展開成一系列用逗號隔開的值

var foo = function
(a, b, c) 
var arr = [1, 2, 3];
//傳統寫法
foo(arr[0], arr[1], arr[2]);
//使用擴充套件運算子
foo(...arr);//1
//2//3

特殊應用場景：

//
陣列深拷貝
var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //
true, 說明arr和arr2指向同乙個陣列
console.log(arr===arr3); //
false, 說明arr3和arr指向不同陣列
//把乙個陣列插入另乙個陣列字面量
var arr4 = [...arr, 4, 5, 6];
console.log(arr4);//
[1, 2, 3, 4, 5, 6]
//字串轉陣列
var str = 'love';
var arr5 = [...str];
console.log(arr5);//
[ 'l', 'o', 'v', 'e' ]

rest運算子也是三個點號，不過其功能與擴充套件運算子恰好相反，把逗號隔開的值序列組合成乙個陣列

//
主要用於不定引數，所以es6開始可以不再使用arguments物件
var bar = function
(...args) 
}bar(1, 2, 3, 4);//1
//2//3
//4bar = function
(a, ...args) 
bar(1, 2, 3, 4);//1
//[ 2, 3, 4 ]

rest運算子配合解構使用：

var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//
1console.log(rest);//
[2, 3, 4]

等號表示式是典型的賦值形式，函式傳參和for迴圈的變數都是特殊形式的賦值。解構的原理是賦值的兩邊具有相同的解構，就可以正確取出陣列或物件裡面的元素或屬性值，省略了使用下標逐個賦值的麻煩。

對於三個點號，三點放在形參或者等號左邊為rest運算子; 放在實參或者等號右邊為spread運算子，或者說，放在被賦值一方為rest運算子，放在賦值一方為擴充套件運算子。

ES6解構和擴充套件運算子

解構解構的作用是可以快速取得陣列或物件當中的元素或屬性，而無需使用arr x 或者obj key 等傳統方式進行賦值陣列解構賦值 var arr this is string 2,3 傳統方式 var a arr 0 var b arr 1 var c arr 2 console.log 陣列解...

ES6解構和擴充套件運算子

ES6系列 4之擴充套件運算子和rest運算子

運算子可以很好的為我們解決引數和物件陣列未知情況下的程式設計，讓我們的更健壯和簡潔。運算子有兩種物件擴充套件運算子與rest運算子。1 解決引數個數問題以前我們程式設計是傳遞的引數一般是確定，否則將會報錯或者異常，如下 function test a,b,c,d test 1,2,3,4 引數...

ES6 解構運算子 rest運算子， 運算子

ES6解構和擴充套件運算子

ES6解構和擴充套件運算子

ES6系列 4之擴充套件運算子和rest運算子

相關推薦

ES6 解構運算子 rest運算子，運算子