es6+最佳入門實踐(3)
3.1.擴展運算符
擴展運算符用三個點(...)表示,從字面上理解,它的功能就是把數組擴展開來,具體形式如下:
let arr = [1, 2, 3];
console.log(...arr); //打印結果 1 2 3
//等價於
console.log(1,2,3);
從上面代碼中,我們可以看出...arr展開後的形式是這樣的 1,2,3,用逗號隔開的參數序列
在函數調用的時候,可以用這個擴展運算符把數組裏面的元素展開,分別傳給函數的形參
let arr = [4, 5, 6]; function Fn(a, b, c) { console.log(a); console.log(b); console.log(c); return a + b + c; } result = Fn(...arr); console.log(result);
擴展雲算符可以和正常參數結合起來使用,非常的靈活
let arr = [4, 5, 6];
function Fn(a, b, c, d, e, f) {
console.log(a);
console.log(b);
console.log(c);
console.log(d, e, f)
}
Fn(1,...arr, 2, 3); //註意一一對應關系:1->a;...arr->b,c,d;2->e; 3->f
總結: 掌握擴展運算符在傳參應用中的關鍵是抓住他們的一一對應關系
擴展運算符應用
1.復制數組
如果把一個數組直接賦值給另一個數組,那麽會產生引用,相互影響,在es5中,只能通過變通的方式復制數組,但在es6中,我們可以通過擴展運算符來實現數組復制
//直接賦值 產生引用
let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr) // [1, 2, 3, 4]
//es5 中復制數組
let arr3 = arr.concat();
console.log(arr3)
//es6中復制數組
let arr4 = [...arr];
arr4.push(5);
console.log("arr4",arr4); //[1,2,3,5]
console.log("arr",arr) //[1,2,3] 和arr4並不會相互影響
2.合並數組
let arr = [1, 2, 3]; let arr2 = [4, 5, 6]; console.log([...arr,...arr2]) //?[1, 2, 3, 4, 5, 6]
3.和解構賦值結合,用於生成數組
let [a, b, ...rest] = [1, 2, 4, 5, 6, 7]
console.log(rest); //[4, 5, 6, 7]
3.2.Array.from
Array.from可以把類數組轉成真正的數組
<ul>
<li>nodeing_1</li>
<li>nodeing_2</li>
<li>nodeing_3</li>
<li>nodeing_4</li>
<li>nodeing_5</li>
<li>nodeing_6</li>
</ul>
<script>
let aLi = document.getElementsByTagName(‘li‘)
for(let i in aLi){
aLi[i].style.color = "red" //執行報錯
}
</script>
上面報錯原因是因為aLi是類數組,除了下標外還有其他屬性,例如length屬性, aLi[length].style.color,這樣就會報錯
let aLi = document.getElementsByTagName(‘li‘)
for(let i in Array.from(aLi)){
aLi[i].style.color = "red"
}
3.3.Array.of
這個方法可以將一組數值轉換成數組
let arr = Array.of(1, 2, 3,4)
console.log(arr) // [1,2,3,4]
這個方法的主要應用就是彌補Array的不足,基本上看可以取代Array()和new Array,當Array傳入一個參數的時候,表示給數組設置長度,傳入的參數大於等於2的時候,才返回數組,因此,參數的不同導致行為的差異
//Array的行為不統一,根據參數的不同返回的結果不一樣
let arr = Array(4)
let arr2 = Array(1, 3)
let arr3 = Array(1,3,4,5);
console.log(arr, arr2, arr3) // [empty × 4]?、[1, 3]、 [1, 3, 4, 5]
Array.of不管傳入多少參數,返回的都是數組
let arr = Array.of(4)
let arr2 = Array.of(1, 3)
let arr3 = Array.of(1,3,4,5)
console.log(arr, arr2, arr3) // [4] ?[1, 3] ?[1, 3, 4, 5]
3.4.copyWithin
將數組內部指定位置的元素復制到指定的目標位置
let arr = [1, 2, 3, 4, 5]
//第一個參數為目標起始位置 第二個參數為被復制元素的開始位置,第三個參數為被復制元素的結束位置
//將下標3到4的元素 復制到下標為1的位置 原來位置的元素被覆蓋
arr.copyWithin(0, 3, 4) //[4,2,3,4,5]
console.log(arr)
3.5.find和findIndex
find方法用來查找數組中符合條件的第一個元素,接收一個回調函數
let arr = [1, 2, 3, 4, 5]
arr.find(function (v,i,a) {
//第一個參數是每個數組元素,第二個參數是對應數組元素到索引,第三個參數是當前的數組
console.log(v,i,a);
})
let arr = [1, 2, 3, 4, 5]
let num = arr.find(function (v,i,a) {
return v > 3
})
console.log(num) //4
findIndex的用法和find類似,返回的是索引位置,而不是具體的值
let arr = [1, 2, 3, 4, 5]
let num = arr.findIndex(function (v,i,a) {
return v > 3
})
console.log(num) //3
3.6.fill
fill方法用於填充數組
let arr = [1,2,8,8,8]
arr.fill(1)
console.log("arr",arr)
3.7.entries、keys和values
這幾個方法應用在遍歷數組中
let arr = [1, 2, 3, 4, 5];
//遍歷鍵名
for(let index of arr.keys()){
console.log(index)
}
//遍歷值
for(let v of arr.values()){
console.log(v)
}
//遍歷鍵/值對
let arr = [1, 2, 3, 4, 5];
for(let index of arr.keys()){
console.log(index)
}
3.8.includes
includes方法的作用是查看某個數組是否包含給定的值,返回一個布爾值,true表示包含,false表示沒有這個值
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(7)) //false
console.log(arr.includes(1)) //true
視頻教程地址:http://edu.nodeing.com/course/50
es6+最佳入門實踐(3)