解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用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
for迴圈解構:var arr = ['this is a string', 2, 3];
function
fn1([a, b, c])
fn1(arr);
//this is a string//2
//3
物件賦值解構: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
rest運算子也是三個點號,不過其功能與擴充套件運算子恰好相反,把逗號隔開的值序列組合成乙個陣列//
陣列深拷貝
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 ]
等號表示式是典型的賦值形式,函式傳參和for迴圈的變數都是特殊形式的賦值。解構的原理是賦值的兩邊具有相同的解構,就可以正確取出陣列或物件裡面的元素或屬性值,省略了使用下標逐個賦值的麻煩。var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//
1console.log(rest);//
[2, 3, 4]
對於三個點號,三點放在形參或者等號左邊為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解構和擴充套件運算子
解構 解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用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系列 4之擴充套件運算子和rest運算子
運算子可以很好的為我們解決引數和物件陣列未知情況下的程式設計,讓我們的 更健壯和簡潔。運算子有兩種 物件擴充套件運算子與rest運算子。1 解決引數個數問題 以前我們程式設計是傳遞的引數一般是確定,否則將會報錯或者異常,如下 function test a,b,c,d test 1,2,3,4 引數...