數組經常使用方法補充

PS：

本文屬於純新手向的文章，目的在於幫助本身加深記憶以及幫助小白同窗整理JS中經常使用的一些字符串和數組的方法，因此望大佬勿噴。

前文寫了些字符串和數組一些基礎的api，本文寫一些數組的功能更強大的api，沒有看過前文的，能夠點擊如下連接：

字符串和數組經常使用方法整理

字符串還有一些結合正則表達式使用的很是棒的方法，之後單獨和正則表達式一塊兒講解。

下面進入正題。

1. Array.from()

傳入一個類數組或可迭代對象（一般是字符串），返回一個新數組

/*加入頁面有10個li標籤*/
let aLi = document.getElementsByTagName("li");
console.log(aLi);//aLi 是一個類數組
aLi.forEach((item,idx)=>{//forEach()用於遍歷數組 後面講解
    item.onclick = ()=>{
        console.log(idx);
    }
});
複製代碼

forEach()只能遍歷數組， aLi不是數組，因此會報錯。

使用Array.from()建立一個新數組後，報錯消失

Array.from(aLi).forEach((item,idx)=>{
    item.onclick = ()=>{
        console.log(idx);
    }
});
複製代碼

固然使用ES6的...運算符，能夠更方便地達到這一效果

[...aLi].forEach((item,idx)=>{
    item.onclick = ()=>{
        console.log(idx);
    }
});
複製代碼

也能夠傳入字符串返回一個新數組

let str = "文體兩開花";
console.log(Array.from(str));
console.log(str.split(""));
複製代碼

如下方法都不改變原數組且它們參數傳遞方式都相同，以下面的形式：

array.xxxx( function(currentValue,index,arr ) )

• currentValue當前元素的值
• index 當前元素的索引值 (可選)
• arr 調用該方法的數組對象(可選，基本不用)

2. Array.find()

返回第一個return值爲true的元素，沒有則返回undefined

let arr = [1,6,7,8];
console.log(arr.find(item => item > 5));//6
console.log(arr.find((item, idx) => {
    return arr[idx] < 0;
}));//undefined
複製代碼

3. Array.forEach()

用於遍歷數組，不返回任何值

let arr = [1,2,3,4,5,6,7];
let arr1 = [];
arr.forEach(val=>{
    arr1.push(val*2);
})
console.log(arr1);
複製代碼

4. Array.map()

該方法也能夠遍歷數組，可是它和forEach()不一樣的是，它返回一個數組，數組接收的是每次循環的返回值

let arr = [1,2,3,4,5,6,7];
console.log(arr.map(val => {
    return val*2
}));
複製代碼

5. Array.filter()

用於篩選數據，當return返回值爲true時，將該元素放入新數組中，最後返回新數組

let arr = [1,2,3,4,5,6,7];
console.log(arr.filter(val => val % 2));
複製代碼

6. Array.every()

該方法用於測試，數組的每一項元素是否符合條件，當有任意一項不符合要求時（即返回值爲false），當即返回false,只有全部元素都經過檢測時，才返回true

let arr = [1,2,3,4,5,6,7];
console.log(arr.every(val => val % 2));//false
console.log(arr.every(val => val > 0));//true
複製代碼

7. Array.some()

該方法和Array.every()相對，該方法只要有一項元素符合要求（回調函數返回值爲true），便當即返回true;

let arr = [1,2,3,4,5,6,7];
console.log(arr.some(val => val % 2));//true
console.log(arr.some(val => val < 0));//false
複製代碼

8. for...in和for...of

兩種方法均可以遍歷數組，它們的區別：

• for...in還能夠遍歷對象，for...of不行
• for...in遍歷的鍵名，for...of遍歷的是鍵值
• for...in遍歷的效能極差，由於它還會去遍歷原型鏈

具體使用：

let arr = [1,2,3,4,5];

for(let key in arr){
    console.log(arr[key]);
}
for(let key of arr){
    console.log(key);
}
複製代碼

使用for...in遍歷對象

let obj = {
    name: "品如",
    age: 18,
    height: 170,
}

for (let key in obj) {
    console.log(obj[key]);
}
複製代碼