目錄
- [forEach](#1) - [every](#2) - [some](#3) - [map](#4) - [filter](#5) - [reduce && reduceRight](#6) - [indexOf](#7) - [lastIndexOf](#8)
前言
ES6原生語法中提供了非常多好用的數組'遍歷'方法給我們，讓我們可以實現更多更強大的功能，下面讓我們通過這篇文章好好學習下，該如何使用它們
代碼線上測試地址：babel test
forEach
對數組的每個元素執行一次提供的函數。跳過空位元素沒有辦法中止或者跳出 forEach() 循環，除了拋出一個異常。如果你需要這樣，使用 forEach() 方法是錯誤的。
語法解析
arr.forEach((currentValue,index,array)=>{});
// currentValue 數組中正在處理的當前元素
// index 當前索引值
// array 正在處理的數組
// 返回值是undefined
例子則是非常簡單的應用了
[1,2,3].forEach((currentValue,index,array)=>{
console.log(currentValue,index,array);
});
every
回調函數中，所有的都返回真，則返回真，有一個返回假，則返回假。 簡而言之：“一假則假”語法解析
arr.every((currentValue,index,array)=>{
// currentValue = 當前執行元素
// index = 當前索引值
// array = 執行的數組
})
返回值是true或者false
可別小看這個方法，我自己平時工作當中兩個方面經常使用到
- 全選中使用
- 多個關系的搜索中使用
先看一個簡單的例子
[12, 5, 8, 130, 44].every((item)=>{
return item >= 10
})
上面的意思：當數組中所有的元素的值都大於10的時候則返回true，否則返回false
全選偽代碼示例
let allChecked = false;
const arr = [
{
id:"a",
name:"a",
checked:false
},
{
id:"b",
name:"b",
checked:false
}
]
allChecked = arr.every((item)=>{
return item.checked === true
})
// 實現起來就是這么簡單，當所有的都選中了，allChecked 全選的變量就賦值true
// 這如果硬是用es5的語法去實現的話，還是比較麻煩的
some
回調函數中有一個返回真，則返回真 簡言之：“一真則真”語法解析
arr.some((currentValue,index,array)=>{
// currentValue = 當前執行元素
// index = 當前索引值
// array = 執行的數組
})
返回值是true或者false
代碼展示
let bok = [2, 5, 8, 1, 4].some((item)=>{
return item>5
})
// bok = true
// 只要有一個數組大於5 則整體返回true
map
> 創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。語法
arr.map((currentValue,index,array)=>{
// currentValue = 當前執行元素
// index = 當前索引值
// array = 執行的數組
})
// 返回一個新的數組
實例
let arr = [1,2,3,4];
const map = arr.map(x=>x*2);
//返回每一個處理過后的新數組 [2,4,6,8]
filter
> 返回一個新數組，其結果是改數組中的每個元素符合條件的結果語法
arr.filter((currentValue,index,array)=>{
// currentValue = 當前執行元素
// index = 當前索引值
// array = 執行的數組
})
// 返回一個新的數組
顧名思義這個應該肯定是各類查詢，篩選上面
實例
let arr = [{name:"abc"},{name:"bcd"},{name:"afc"}];
arr.filter((item)=>{
return item.name.includes('b');
});
// 篩選出名字字段中帶有b的項
reduce && reduceRight
> reduce()方法在數組的每個成員上執行一個reducer函數(您提供的)，生成一個輸出值。reduceRight是從右到左的相加(其它的同reduce是一樣的，所以這里只講reduce)
語法
無參數
arr.reduce((accumulator, currentValue,currentIndex,array)=>{
// accumulator第一項的值或者上一次疊加的結果值
// currentValue 當前項
// currentIndex 當前項索引
// array 數組本身
});
有參數
arr.reduce((accumulator, currentValue,currentIndex,array)=>{},參數);
參數 = accumulator 第一次運行時的初始值
實例1：計算數據總和
const arr = [1,2,3];
const num = arr.reduce((acc,cur,index)=>{
return acc + cur
});
// num = 6
const num1 = arr.reduce((acc,cur,index)=>{
return acc+cur
},10)
// num = 16
實例2：計算一個字符串中字母出現的次數
const str = 'aaabbcccdd';
str.split('').reduce((acc,cur)=>{
acc[cur] ? acc[cur]++ : acc[cur] = 1
},{});
解析：初始化的值是一個空對象
運行的時候，判斷對象里面是不是有當前的字母，
如果沒有的話則添加到對象中，並賦值為1
如果已經存在的話在++，這樣就計算出一個字符串中字母出現的次數
同樣可以利用這點進行數組去重
const arr = ['a','a','b','c'];
const obj = arr.reduce((acc,cur)=>{
return acc[cur] ? acc[cur]++ : acc[cur] = 1
},{})
最后通過obj.keys() 的方法獲取到的數組就是去重之后的。
indexOf
> indexOf()方法返回在數組中可以找到給定元素的第一個索引，如果不存在，則返回-1。var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1
lastIndexOf
> lastIndexOf()方法返回給定元素在數組中找到的最后一個索引，如果該元素不存在，則返回-1。數組從fromIndex開始向后搜索。var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// expected output: 3
console.log(animals.lastIndexOf('Tiger'));
// expected output: 1
小結
本篇文章主要講述了ES6中數組新增的一些方法，以及如何使用。其實這些方法的實戰場景還是非常多的，需要在實戰中才能有更加深刻的體會