ES6中的解構、擴充套件運算子(...)、rest引數(...)的使用
阿新 • • 發佈:2018-12-31
解構
es6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱之為解構
//物件的解構
const stu={
name:'shawn',
age:'20',
gender:'男'
}
const {name,age,gender}=stu
console.log(name,age,gender) //shawn 20 男
//物件作為函式引數解構
const stu={ name:'shawn', age:'20', gender:'男' } function stuInfo({name,age,gender}){ return `${name}的年齡是${age},性別是${gender}`; } console.log(stuInfo(stu)); //shawn的年齡是20,性別是男
//陣列的解構
const names = ["Henry","Bucky","Emily"];
const [name1,name2,name3] = names;
console.log(name1,name2,name3);//Henry Bucky Emily
//返回陣列個數
const {length} = names;
console.log(length); //3
擴充套件運算子...
作用是把陣列或類陣列物件展開成一系列用逗號隔開的值
const arr1 = [1,2,3] const arr2 = [4,5,6] const arr3=[...arr1,...arr2] console.log(arr3) //[1, 2, 3, 4, 5, 6]
應用場景
//陣列深拷貝
const arr2 = arr1;
const arr3 = [...arr1];
console.log(arr1===arr2); //true, 說明arr和arr2指向同一個陣列
console.log(arr1===arr3); //false, 說明arr3和arr指向不同陣列
//把一個數組插入另一個數組字面量
const arr = [1,2,3]
const arr1 = [...arr, 4, 5, 6];
console.log(arr1);//[1, 2, 3, 4, 5, 6]
//字串轉陣列
var str = 'love'; var arr = [...str]; console.log(arr);//[ 'l', 'o', 'v', 'e' ]
rest引數...
作用與擴充套件運算子恰好相反,把逗號隔開的值序列組合成一個數組
//主要用於不定引數,所以ES6開始可以不再使用arguments物件
bar = function(one, ...unknow) {
console.log(one);
console.log(unknow);
}
bar(1, 2, 3, 4,5);
//1
//[ 2, 3, 4 ,5]