一、常用方法解析
說起數(shù)組操作疲憋，我們肯定第一反應(yīng)就是想到forEach()、map()柜某、filter()等方法，下面分別闡述一下各方法的優(yōu)劣喂击。
1淤翔、forEach
1.1 基礎(chǔ)點
forEach的使用頻率很高，多用于對數(shù)組自身的改變和各元素相關(guān)統(tǒng)計性的計算监嗜，重要特性如下：
可以改變數(shù)組自身，沒有返回值裁奇；
中途不能用常規(guī)操作跳出循環(huán)麦撵，可以用拋出異常（try/catch）的方式，但不推薦這樣做免胃；
1.2 易錯點
forEach()不一定改變自身數(shù)組。我們可以看看數(shù)組中的元素是值類型和引用類型場景下羔沙，是否都能獲得改變：
var arr1 = [
{name:'鳴人',age:16},
{name:'佐助',age:17}
];
var arr2 = [1,2,3];
arr1.forEach(item => {
item.age = item.age + 1}
);
//=> [{name:'鳴人',age:17},{name:'佐助',age:18}]
arr2.forEach(item => {
item = item * 2}
)
// => [1,2,3]
最后的結(jié)果是，arr1發(fā)生了改變坚嗜，鳴人、佐助都長了一歲苍蔬，arr2沒有任何改變。所以涂佃，可以粗暴得出結(jié)論：當(dāng)數(shù)組中元素是值類型，forEach絕對不會改變數(shù)組辜荠；當(dāng)是引用類型，則可以改變數(shù)組
2 .不支持鏈?zhǔn)讲僮髯ハ粒砸韵麓a是錯誤的：
[1,2,3,4,5].forEach(
item => console.log(item)
).filter(item => {
return item > 2
})
// Uncaught TypeError: Cannot read property 'filter' of undefined
注意這里我們說僅僅是forEach()這個方法不支持鏈?zhǔn)秸{(diào)用伯病，在調(diào)用forEach之前，前面的數(shù)組你怎么玩鏈?zhǔn)蕉紱]問題否过，最后返回一個正常數(shù)組即可：
// 這個沒問題
[1,2,3,4,5].filter(item => {
return item > 2
}).forEach(item => {
console.log(item)
})
- 不會在迭代之前創(chuàng)建數(shù)組的副本，這個使用場景太少太少了药磺，忽略了...
2煤伟、map
map()功能很強(qiáng)大癌佩，forEach()的一些局限性它很多都能解決围辙。"map"即"映射"放案，也就是原數(shù)組被"映射"成對應(yīng)新數(shù)組姚建。
2.1 基礎(chǔ)點
- 新建一個數(shù)組吱殉，需要有承載對象，也意味著原始數(shù)組在調(diào)用它后不會發(fā)生變化;
- 該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回結(jié)果贩虾。
2.2 易錯點
- 創(chuàng)建新數(shù)組不代表不能用它改變原有數(shù)組沥阱，你用原有數(shù)組去承載就可以：
let arr = [1,2,3];
arr = arr.map(item => { return item * 2 })
arr同樣也會改變，所以這也不費事嘛策精。。咽袜。
- map()中每個元素都要執(zhí)行相應(yīng)的回調(diào)函數(shù)，所以必須要有return（千萬別學(xué)某些人谜嫉，判斷過程一復(fù)雜凹联，忘了return，最后得到的是個空數(shù)組蔽挠，哭天喊地的~~~），如果你想給數(shù)組做一定的過濾處理比原，那map()基本上行不通：
let newArr = [1,2,3,4,5].map(item => { if(item > 3) return item })
// => [undefined, undefined, undefined, 4, 5]
最終得到的結(jié)果是[undefined, undefined, undefined, 4, 5]杠巡。別和我說你簡單處理一下就能湊合用， 人生不能湊合忽孽，代碼也是！
3、filter
map()沒法做到的過濾识腿，就交給filter()去完成，這個大家肯定也都知道。filter()和map()很像，就像周董《東風(fēng)破》和《發(fā)如雪》一樣像腹殿，也是創(chuàng)建一個新數(shù)組蹬昌，新數(shù)組中的元素是篩選出來的符合條件的所有對象。簡單寫個例子：
let newArr = [1,2,3,4,5].filter(item =>{
if(item > 3) return item
})
// => [4,5]
這個相信也沒啥易錯點，有的話歡迎評論指出~~~
4昆汹、sort()
sort()用于對數(shù)組的元素進(jìn)行排序婴栽。排序順序可以是字母或數(shù)字，并按升序或降序愚争。
4.1 基礎(chǔ)點
1.默認(rèn)排序按字母升序（更準(zhǔn)確一些是根據(jù)字符串Unicode碼點）：
[3,4,2,1,5].sort()
// => [1,2,3,4,5]
['Javascript','Vue','React','Node','Webpack'].sort();
// => ["Javascript", "Node", "React", "Vue", "Webpack"]
4.2 易錯點
sort()與map()轰枝、filter()等不同，它直接改變原始數(shù)組（很重要＠旮唷）；
如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序湾戳，就需提供比較函數(shù)compareFunction(a,b)砾脑，數(shù)組會按照調(diào)用該函數(shù)的返回值排序，即a和b是兩個將要比較的元素：
- 如果compareFunction(a,b)小于0韧衣，則a排列到b之前；
- 如果 compareFunction(a, b)等于0氏淑，a和b的相對位置不變（并不保證）;
- 如果 compareFunction(a, b)大于0硕噩，b排列到a之前； 直接上例子：
let Users = [
{name:'鳴人',age:16},
{name:'卡卡西',age:28},
{name:'自來也',age:50},
{name:'佐助',age:17}
];
Users.sort((a,b)=> {
return a.age - b.age
})
// => 鳴人炉擅、佐助、卡卡西眶俩、自來也
5快鱼、some()
some()也是很好的一個方法纲岭，用于檢查數(shù)組中是否有某些符合條件嗽仪。
5.1 基礎(chǔ)點
- 只要有一個滿足即返回true，之后的不再執(zhí)行(所以說對性能很友好闻坚！)。
var result = [
{name:'鳴人',age:16},
{name:'佐助',age:17}
].some(item => {
return item.age > 16
});
=> true
5.2 易錯點
some()和下面講的every()返回的都是Boolean值仅偎，僅此而此雳殊，別多想......
6、every()
如果說some()是"||"判斷夯秃，那every()就是"&&"判斷，它用于檢測數(shù)組中的每一項是否都滿足條件介陶，只有都滿足了才會返回true色建。這點也很好理解：
var result = [
{name:'鳴人',age:16},
{name:'佐助',age:17}
].every(item => {
return item.age > 16
});
=> false
二、其他經(jīng)典方法
在我們的日常工作中某残，會有很多業(yè)務(wù)需求是上述方法做不到的陵吸，比如下面三個需求：
- 給一個數(shù)組做去重處理;
- 判定當(dāng)前數(shù)組里是否有某個元素，并返回該元素;
- 判定當(dāng)前數(shù)組里是否有某個元素壮虫，并把它去除;
針對需求1，我相信看到"去重"，你肯定會想到new Set()喳整，這也是個經(jīng)常出現(xiàn)的面試題；針對需求2搬素，當(dāng)你看到判定當(dāng)前數(shù)組中是否有某個元素，也許會說filter() 不就是干這臟活累活的嗎熬尺？ 還真不是，不信季二，我們分別展開討論一下吧揭措。
1. 數(shù)組去重（沒你想的那么簡單）
1.1 new Set() 的局限性
數(shù)組去重，基本上論壇上各位大神的面試題里都會有這個桑嘶，沒錯，正是new Set()逃顶，很經(jīng)典的辦法充甚，面試必備：
let tempArr = new Set([1,2,3,3,4,4,5])
// => {1,2,3,4,5}
//并且已有元素是添加不進(jìn)去的：
tempArr.add(3)
// => {1,2,3,4,5}
tempArr.add(6)
// => {1,2,3,4,5,6}
恩，很棒妙蔗，一定注意new Set()會將結(jié)果轉(zhuǎn)換成對象疆瑰！但實際工作中我們很少會和元素是值類型的數(shù)組打交道，那看看元素是引用類型還行不行：
let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 這里體現(xiàn)了值的唯一性
mySet.add('some text');
[...mySet]
// => [1,5,'some text']
mySet.add({name:'jay Chou',age:40});
mySet.add({name:'jay Chou',age:40});
[...mySet]
// => [1,5,'some text',{name:'jay Chou',age:40},{name:'jay Chou',age:40}]
看到了吧穆役，Set()沒法去重元素是引用對象的數(shù)組。那接下來咋整呀梳杏？
1.2 _.uniqWith()
別擔(dān)心淹接，Lodash幫我們，Lodash是一個一致性塑悼、模塊化、高性能的JavaScript實用工具庫霞势。它有提供給了我們一個很好的方法——_.uniqWith()：
import _ from 'lodash';
<script>
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.uniqWith(objects, _.isEqual);
</script>
//=> [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
其中， _.isEqual(value,other)用于執(zhí)行深比較來確定兩者的值是否相等草雕。 _.uniqWith()做去重處理固以。
2. 獲取數(shù)組中的指定元素
在工作中我們還有一個比較常見的場景，就是在數(shù)組中找到我想要的那一個嘴纺，并且返回給我。好的尖坤，some()已經(jīng)辦不到了闲擦，它只會告訴我是否存在，filter()確實可以做到墅冷，但是如果我本身就知道這個數(shù)組里即使有我想的那個，也肯定只有一個驰唬，不可能出現(xiàn)多個腔彰，所以，出于性能的考慮搓逾，我不想用filter()給我從頭遍歷到尾杯拐，這樣怎么辦？
2.1 findIndex()
好了端逼，既然filter()不支持中斷遍歷，那我們就要找一個能中斷遍歷的方法矛市，我們可以使用for...of诲祸，該方法支持中斷遍歷，但是該方法代碼量較大救氯，不建議使用，感興趣的同學(xué)可以查閱一下墩衙。針對這個場景甲抖，我們可以使用 findIndex()幫我們先獲取到所需元素的索引值，拿到索引后准谚，你要殺要剮隨你便
let testArr = [{name:'鳴人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}]
let index = testArr.findIndex(item => { return item.age > 16 });
// => 1
或者也可以使用Lodash提供的_.findIndex()柱衔，通過對象屬性值直接獲取對應(yīng)索引：
let testArr = [{name:'鳴人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}]
let index = _.findIndex(testArr, {name:'佐助'});
// => 1
注意：IE 11 及更早版本不支持findIndex() 方法。所以唆铐，如果對瀏覽器兼容有要求，那就用Lodash的 _.findIndex()
2.2 find()
find()顧名思義顺少，就是用來在數(shù)組中找到我們所需要的元素王浴，并且和some()一樣，只要有一個滿足即返回該元素叼耙，不會多余遍歷，對性能很友善簇爆。
let testArr = [{name:'鳴人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:27},{name:'佐助',age:17}]
let result = testArr.find(item => { return item.name == '佐助'});
// => { name:'佐助',age:17 }
