// 解構// 解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用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('-----------------陣列解構-----------------')
//解構賦值,是不是簡潔很多?
var [a, b, c] = arr
console.log(a);
console.log(b);
console.log(c);
console.log('-----------------巢狀陣列解構-----------------')
// 巢狀陣列解構:
var arr2 = [[1, 2, [3, 4]], 5, 6];
var [[d, e, [f, g]], h, i] = arr2
console.log(d); // 1
console.log(e); // 2
console.log(f); // 3
console.log(g); // 4
console.log(h); // 5
console.log(i); // 6
console.log('-----------------函式傳參解構-----------------')
var arr3 = ["asdasdasd", "asd", 7788];
function fn1([a, b, c])
fn1(arr3)
console.log('-----------------for迴圈解構-----------------')
var arr4 = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr4)
//11 12 21 22 31 32]
console.log('-----------------物件賦值解構-----------------')
var obj =
}var = obj;
console.log(name + ' ' + *** + ' ' + age);
console.log(son);
console.log('-----------------物件傳參解構-----------------')
var obj2 =
};function fn2()
fn2(obj2)
console.log('----------------- 變數名與物件屬性名不一致解構-----------------')
var obj3 = ;
var = obj3 //改變物件屬性名
console.log(nickname + ' ' + howold); //chris 26
console.log('----------------- 巢狀物件解構:-----------------')
var obj4 =
};var } = obj4
console.log(sonname + ' ' + son*** + ' ' + sonage);
obj5 =
var = obj5;
console.log(name + "------" + c);
console.log('----------------- 巢狀物件屬性重名,解構時需要更改變數名:-----------------')
var obj6 =
};//賦值解構
var } = obj6
console.log(myname)
console.log(name)
//傳參解構
function fn3(})
fn3(obj6);
console.log('----------------- 迴圈解構物件:-----------------')
var arr5 = [, , ]
for (let of arr5)
console.log('----------------- 解構的特殊應用場景:-----------------')
//變數互換
var x = 1;
var y = 2
var [x, y] = [y, x]
console.log(x, y) //2 1
//字串解構
var str = 'love';
var [h, i, j, k] = str
console.log(h);//l
console.log(i);//o
console.log(j);//v
console.log(k);//e
console.log('------------------- 擴充套件運算子 ---------------------')
console.log('------------------- 擴充套件運算子用三個點號表示,功能是把陣列或類陣列物件展開成一系列用逗號隔開的值---------------------')
var foo = function (a, b, c)
var arr6 = [1, 2, 3];
//傳統寫法
foo(arr6[0], arr6[1], arr6[2]);
console.log('-------------------使用擴充套件運算子----------')
foo(...arr6)
console.log('-------------陣列深拷貝----------')
var arr7 = [1, 2, 3];
var arr8 = arr7;
var arr9 = [...arr7];
console.log(arr7 === arr8); // true 說明arr7和arr8指向同乙個陣列
console.log(arr7 === arr9); // false 說明arr7和arr9指向不同陣列
console.log('--------------把乙個陣列插入另乙個陣列字面量----------')
var arr10 = [...arr7, 5, 6, 7]
console.log(arr10)
console.log('--------------字串轉陣列----------')
var str2 = "iloveyou";
var arr11 = [...str2];
console.log(arr11) //["i", "l", "o", "v", "e", "y", "o", "u"]
console.log('------------------- rest運算子 ---------------------')
console.log('------------------- rest運算子也是三個點號,不過其功能與擴充套件運算子恰好相反,把逗號隔開的值序列組合成乙個陣列 ---------------------')
console.log('------------------- 主要用於不定引數,所以es6開始可以不再使用arguments物件 ---------------------')
var bar = function (...items)
}bar(1, 2, 3, 4);
console.log('------------------- 分割符 ---------------------')
var bar2 = function (a, b, ...items)
bar2(3, 45, 523, 5);
console.log('------------------- rest運算子配合解構使用:---------------------')
var [g, ...rest] = [1, 2, 3, 4];
console.log(g);//1
console.log(rest);//[2, 3, 4]
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 擴充套件運算子
擴充套件運算子用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...