js之数组操作常用方法及注意事项

拓展：js在线运行工具可运行JavaScrip代码，做一些简单的调试；复杂的Javascript运行，建议直接用Chrome的控制台调试（即随便打开Chrome一个页面，点击F12进入调试界面，然后选择console控制台，在控制台中输入js代码即可）。

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

forEach的使用频率很高，多用于对数组自身的改变和各元素相关统计性的计算，重要特性如下：可以改变数组自身，没有返回值；中途不能用常规操作跳出循环，可以用抛出异常（try/catch）的方式，但不推荐这样做。

改变数组自身：当数组中元素是值类型，forEach不会改变数组元素；当是引用类型，则可以改变数组元素

image.png
链式操作：forEach不支持链式操作；调用forEach之前，数组支持链式操作

forEach不支持链式操作.png

调用forEach之前，数组支持链式操作.png

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

map()功能很强大，forEach()的一些局限性它很多都能解决。"map"即"映射"，也就是原数组被"映射"成对应新数组。

创建新数组不代表不能用它改变原数组，用原有数组去承载就可实现改变原数组

改变原数组.png
map()中每个元素都要执行相应的回调函数，所以必须要有return；map()基本上无法对数组做过滤处理

map操作必须要有return.png

3. filter()的使用

众所周知，map()没法做到的过滤，就交给filter()去完成。filter()和map()很像，也是创建一个新数组，新数组中的元素是筛选出来的符合条件的所有对象。使用如下：

image.png

4. sort()的使用

sort()用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。使用如下：

image.png

sort()与map()、filter()等不同，它直接改变原始数组
如果想按照其他标准进行排序，就需提供比较函数compareFunction(a,b)，数组会按照调用该函数的返回值排序，即a和b是两个将要比较的元素
- 如果compareFunction(a,b)小于0，则a排列到b之前；
- 如果 compareFunction(a, b)等于0，a和b的相对位置不变（并不保证）;
- 如果 compareFunction(a, b)大于0，b排列到a之前；
  
  排序.png

5. some()的使用

some()也是很好的一个方法，用于检查数组中是否有某些符合条件的元素。只要有一个满足即返回true，之后的不再执行，对性能很友好。

some操作只要有一个满足即返回true.png

6. every()的使用

如果说some()是 ||判断，那every()就是&&判断，它用于检测数组中的每一项是否都满足条件，只有都满足了才会返回true。

every操作需每一项都满足条件才返回true.png

7. 其他经典处理方法

(1) 数组去重

数组元素是值类型：可用new Set()去重（注意：new Set()会将结果转换成对象）

let tempArr = new Set([1,2,3,3,4,4,5])
// => {1,2,3,4,5} 

//并且已有元素是添加不进去的：
tempArr.add(3) 
// => {1,2,3,4,5}

tempArr.add(6)
// => {1,2,3,4,5,6}

数组元素是引用类型：Set()无法对元素是引用对象的数组进行去重

let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
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实用工具库。它提供了一个很好的方法——.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)用于执行深比较来确定两者的值是否相等。 _.uniqWith()做去重处理。

(2) 查找指定元素：判定当前数组里是否有某个元素，若有则获取该元素

当需要在数组中找到指定的元素并返回给我们时：some()只会告诉我们该元素是否存在；使用filter()可以实现该需求；但如果我们已经知道这个数组里有且仅有一个我们想要的元素，出于性能的考虑，并不想用filter()从头遍历到尾（filter不支持中断遍历），此时可使用如下方法来实现。

使用 findIndex()：若有该元素则返回第一次出现在数组中的的索引值，若没有该元素则返回-1

满足条件则返回第一个满足条件的元素索引值.png

没有一个满足则返回-1.png

也可以使用Lodash提供的_.findIndex()，通过对象属性值直接获取对应索引：let index = _.findIndex(arr, {name:'伏羲'});。注意：IE 11 及更早版本不支持findIndex() 方法；所以，如果对浏览器兼容有要求，那就用Lodash的 _.findIndex()。

使用 find()：在数组中找到我们所需要的元素，并且和some()一样，只要有一个满足即返回该元素，不会多余遍历，对性能很友善。

首次满足条件就返回该元素.png

不满足条件则返回undefined.png

(3) 删除指定元素：判定当前数组里是否有某个元素，若有则把它删除

使用 splice()

删除指定元素.png

8. 其他汇总

计算数值型数组中元素的最大(小)值

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

计算数值型数组中各元素之和

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. 优化：和普通算法(遍历)相比，下面的算法时间复杂度会降低很多，并且数据量越大越有优势

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