一、 for

普通版

for (let i = 0; i < arr.lengthl; i++) {// ... }

優(yōu)化版

// 使用臨時變量，將長度緩存起來，避免重復獲取數組長度，當數組較大時優(yōu)化效果才會比較明顯。 let len = arr.length; for (let i = 0; i < len; i++) {// ... }

for 循環(huán)和 for...in 能正確響應 break、continue 和 return 語句，但 forEach 不行。

二、 forEach

注意：forEach 不會對空數組進行檢測

arr.forEach((item, index, arr) => {// ... })

item : 每個元素 index : 元素數組下標 arr : 數組本身

三、 map

• map 有返回值
• map 和 forEach 都不會對空數組進行檢測
• map 不會改變原始數組

const result = arr.map((item, index, arr) => {return item * 2; })console.log(result); // [2, 4, 6]

四、 for...of

只有可迭代對象（iterator）才能使用（Array, Map, Set, String, TypedArray, arguments 對象等等）

for (let item of arr) {// ... }

五、 filter

接收一個回調函數作為參數，返回值是一個新數組

注意：

• filter() 不會對空數組進行檢測
• filter() 不會改變原始數組

const arr = [{name: 'tony', age: '20'},{name: 'jack', age: '18'} ]const result1 = arr.filter(item => {return item.age >= 20; })const result2 = arr.filter(item => {return item.age >= 20; })console.log(result1); // [{name: 'tony', age: 20}] console.log(result2); // [] --> 沒有滿足條件的就返回一個空數組

六、 every

如果每一項返回 true, 則返回 true（全部符合條件），否則返回 false

• every 不會對空數組進行檢測
• every 不會改變原始數組

const arr = [1, 2, 3, 4, 5]; const result = arr.every((item, index, arr) => {return item > 3; // 每一項是否大于3 })console.log(result); // false ---------------------------------------------------------- const arr = [1, 2, 3, 4, 5]; const result = arr.every((item, index, arr) => {return item > 0; // 每一項是否大于0 })console.log(result); // true

七、 some

some 如果每一項都返回 true，則返回 true（只要有一個符合），否則返回 false。

• some 不會對空數組進行檢測
• some 不會改變原數組

const arr = [1, 2, 3, 4, 5]; const result = arr.some((item, index, arr) => {return item > 3; // 數組有沒有大于3的 })console.log(result); // true --> 只要有一個大于3結果都為 true

八、 reduce

---

reduce 順著挨個累加，對于空數組是不會執(zhí)行回調函數的。

const arr = [1, 2, 3]; // 沒指定初始值的情況下 arr.reduce((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循環(huán) initialValue = 1return initialVaule + currentValue; // 6 --> 從左往右累加起來 })// 給了初始值之后 arr.reduce((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循環(huán) initialValue = 10return initialVaule + currentValue; // 16 --> 從左往右累加起來 }, 10)

九、 reduceRight

reduceRight 倒著挨個累加，遍歷的是空數組的話，不會執(zhí)行

const arr = [1, 2, 3]; arr.reduceRight((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循環(huán) initialValue = 3return initialVaule + currentValue; // 6 })arr.reduceRight((initialValue, currentValue, index, arr) => {console.log(initialValue); // 第一次循環(huán) initialValue = 10return initialVaule + currentValue; // 16 }, 10)

十、 find

找到符合條件的第一項，沒找到返回 undefined，對于空數組，是不會執(zhí)行的，并且不改變原數組

const arr = [{name: 'tony', age: '20'},{name: 'jack', age: '18'} ]const result1 = arr.find(item => {return item.name === 'jack'; }) console.log(result1); // {name: 'jack', age: 18}const result2 = arr.filter(item => {return item.namee === 'mary'; }) console.log(result2); // undefined

十一、 fiendIndex

返回符合條件的第一項的下標，沒有則返回 -1，對于空數組，是不會執(zhí)行的，并且不改變原數組

const arr = [{name:'tony1',age:'20'},{name:'tony2',age:'20'},{name:'tony3',age:'20'},{name:'jack',age:"30"}, // 只管返回第一個滿足條件的{name:'jack',age:"100"} ];const result = arr.findIndex(item => {return item.name === 'jack'; })console.log(result); // 3

十二、 keys、values、entries

它們都返回一個遍歷器對象，可以用 for...of 循環(huán)進行遍歷

• keys – 返回元素索引
• values – 返回元素本身
• entries – 返回元素和下標

const arr = ['a', 'b', 'c'];for (let index of arr.keys()) {console.log(index);// 0// 1// 2 }for (let ele of arr.values()) {console.log(ele);// a// b// c }for (let [index, ele] of arr.entries()) {console.log(idnex, ele);// 0 "a"// 1 "b"// 2 "c" } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS遍历数组的12种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。