js之?dāng)?shù)組操作常用方法及注意事項

拓展：js在線運(yùn)行工具可運(yùn)行JavaScrip代碼嫉戚，做一些簡單的調(diào)試；復(fù)雜的Javascript運(yùn)行沐序，建議直接用Chrome的控制臺調(diào)試（即隨便打開Chrome一個頁面邑茄，點(diǎn)擊F12進(jìn)入調(diào)試界面姨蝴，然后選擇console控制臺，在控制臺中輸入js代碼即可）肺缕。

1. forEach()的使用及注意事項

forEach的使用頻率很高左医，多用于對數(shù)組自身的改變和各元素相關(guān)統(tǒng)計性的計算，重要特性如下：可以改變數(shù)組自身同木，沒有返回值浮梢；中途不能用常規(guī)操作跳出循環(huán)，可以用拋出異常（try/catch）的方式彤路，但不推薦這樣做秕硝。

改變數(shù)組自身：當(dāng)數(shù)組中元素是值類型，forEach不會改變數(shù)組元素洲尊；當(dāng)是引用類型远豺，則可以改變數(shù)組元素

image.png
鏈?zhǔn)讲僮鳎篺orEach不支持鏈?zhǔn)讲僮髋海徽{(diào)用forEach之前布卡，數(shù)組支持鏈?zhǔn)讲僮?/p>

forEach不支持鏈?zhǔn)讲僮?png

調(diào)用forEach之前缩膝，數(shù)組支持鏈?zhǔn)讲僮?png

2. map()的使用及注意事項

map()功能很強(qiáng)大攀痊，forEach()的一些局限性它很多都能解決。"map"即"映射"棺滞，也就是原數(shù)組被"映射"成對應(yīng)新數(shù)組唁盏。

創(chuàng)建新數(shù)組不代表不能用它改變原數(shù)組，用原有數(shù)組去承載就可實(shí)現(xiàn)改變原數(shù)組

改變原數(shù)組.png
map()中每個元素都要執(zhí)行相應(yīng)的回調(diào)函數(shù)检眯，所以必須要有return；map()基本上無法對數(shù)組做過濾處理

map操作必須要有return.png

3. filter()的使用

眾所周知昆淡，map()沒法做到的過濾锰瘸，就交給filter()去完成。filter()和map()很像昂灵，也是創(chuàng)建一個新數(shù)組避凝，新數(shù)組中的元素是篩選出來的符合條件的所有對象。使用如下：

image.png

4. sort()的使用

sort()用于對數(shù)組的元素進(jìn)行排序眨补。排序順序可以是字母或數(shù)字管削，并按升序或降序。使用如下：

image.png

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之前塞弊；
  
  排序.png

5. some()的使用

some()也是很好的一個方法漱逸，用于檢查數(shù)組中是否有某些符合條件的元素。只要有一個滿足即返回true游沿，之后的不再執(zhí)行饰抒，對性能很友好。

some操作只要有一個滿足即返回true.png

6. every()的使用

如果說some()是 ||判斷奏候，那every()就是&&判斷循集，它用于檢測數(shù)組中的每一項是否都滿足條件，只有都滿足了才會返回true蔗草。

every操作需每一項都滿足條件才返回true.png

7. 其他經(jīng)典處理方法

(1) 數(shù)組去重

數(shù)組元素是值類型：可用new Set()去重（注意：new Set()會將結(jié)果轉(zhuǎn)換成對象）

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}

數(shù)組元素是引用類型：Set()無法對元素是引用對象的數(shù)組進(jìn)行去重

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}]

.uniqWith()：Lodash是一個一致性咒彤、模塊化疆柔、高性能的JavaScript實(shí)用工具庫。它提供了一個很好的方法——.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) 查找指定元素：判定當(dāng)前數(shù)組里是否有某個元素歇拆，若有則獲取該元素

當(dāng)需要在數(shù)組中找到指定的元素并返回給我們時：some()只會告訴我們該元素是否存在鞋屈；使用filter()可以實(shí)現(xiàn)該需求；但如果我們已經(jīng)知道這個數(shù)組里有且僅有一個我們想要的元素故觅，出于性能的考慮厂庇，并不想用filter()從頭遍歷到尾（filter不支持中斷遍歷），此時可使用如下方法來實(shí)現(xiàn)输吏。

使用 findIndex()：若有該元素則返回第一次出現(xiàn)在數(shù)組中的的索引值权旷，若沒有該元素則返回-1

滿足條件則返回第一個滿足條件的元素索引值.png

沒有一個滿足則返回-1.png

也可以使用Lodash提供的_.findIndex()，通過對象屬性值直接獲取對應(yīng)索引：let index = _.findIndex(arr, {name:'伏羲'});贯溅。注意：IE 11 及更早版本不支持findIndex() 方法拄氯；所以，如果對瀏覽器兼容有要求它浅，那就用Lodash的 _.findIndex()译柏。

使用 find()：在數(shù)組中找到我們所需要的元素，并且和some()一樣姐霍，只要有一個滿足即返回該元素鄙麦，不會多余遍歷，對性能很友善邮弹。

首次滿足條件就返回該元素.png

不滿足條件則返回undefined.png

(3) 刪除指定元素：判定當(dāng)前數(shù)組里是否有某個元素黔衡，若有則把它刪除

使用 splice()

刪除指定元素.png

8. 其他匯總

計算數(shù)值型數(shù)組中元素的最大(小)值

var arr = [1,3,4,5,8,4];
var max = Math.max.apply(null, arr);
console.log(max);  //=> 8

var min = Math.min.apply(null, arr);
console.log(min);  //=> 1

計算數(shù)值型數(shù)組中各元素之和

a. 普通方法

var arr = [1,3,4,5,8,4];
var result = 0
for(var i=0;i<arr.length;i++){
  result = result + arr[i]
}
console.log(result);  //=> 25

b. 優(yōu)化：和普通算法(遍歷)相比，下面的算法時間復(fù)雜度會降低很多腌乡，并且數(shù)據(jù)量越大越有優(yōu)勢

var arr = [1,3,4,5,8,4];
var sum = eval(arr.join("+"));
console.log(sum);  //=> 25