陣列常用方法補充

Saikikoko發表於2019-01-04
陣列

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 呼叫該方法的陣列物件(可選，基本不用)
  1. 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
複製程式碼
  1. Array.forEach()

用於遍歷陣列，不返回任何值

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

陣列常用方法補充

  1. Array.map()

該方法也可以遍歷陣列，但是它和forEach()不同的是，它返回一個陣列，陣列接收的是每次迴圈的返回值

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

陣列常用方法補充

  1. Array.filter()

用於篩選資料，當return返回值為true時，將該元素放入新陣列中，最後返回新陣列

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

陣列常用方法補充

  1. 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
複製程式碼
  1. 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
複製程式碼
  1. 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]);
}
複製程式碼

相關文章