拓展：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
网友评论