参考文章:
1. forEach()的使用及注意事项
forEach的使用频率很高,多用于对数组自身的改变和各元素相关统计性的计算,重要特性如下:
- 可以改变数组自身,没有返回值;
- 中途不能用常规操作跳出循环,
- 可以用抛出异常(try/catch)的方式,但不推荐这样做。
- 改变数组自身:当数组中元素是值类型,forEach不会改变数组元素;当是引用类型,则可以改变数组元素
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]
易错点
- 不支持链式操作,所以以下代码是错误的:
[1,2,3,4,5].forEach(
item => console.log(item)
).filter(item => {
return item > 2
})
// Uncaught TypeError: Cannot read property 'filter' of undefined
-
注意这里我们说仅仅是forEach()这个方法不支持链式调用,在调用forEach之前,前面的数组你怎么玩链式都没问题,最后返回一个正常数组即可:
// 这个没问题
[1,2,3,4,5].filter(item => {
return item > 2
}).forEach(item => {
console.log(item)
})
2. map()的使用及注意事项
map()功能很强大,forEach()的一些局限性它很多都能解决。"map"即"映射",也就是原数组被"映射"成对应新数组。
- 该数组中的每个元素都调用一个提供的函数后返回结果。
- 建一个数组,需要有承载对象,也意味着原始数组在调用它后不会发生变化,但这不代表不能用它改变原数组,用原有数组去承载就可实现改变原数组
let arr = [1,2,3];
arr = arr.map(item => { return item * 2 })
- map()中每个元素都要执行相应的回调函数,所以必须要有return(千万别学某些人,判断过程一复杂,忘了return,最后得到的是个空数组,哭天喊地的~~~),如果你想给数组做一定的过滤处理,那map()基本上行不通:
let newArr = [1,2,3,4,5].map(item => { if(item > 3) return item })
// => [undefined, undefined, undefined, 4, 5]
3. filter()的使用
众所周知,map()没法做到的过滤,就交给filter()去完成。filter()和map()很像,也是创建一个新数组,新数组中的元素是筛选出来的符合条件的所有对象。使用如下:
let newArr = [1,2,3,4,5].filter(item =>{
if(item > 3) return item
})
// => [4,5]
4. sort()的使用
sort()用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。使用如下:
[3,4,2,1,5].sort()
// => [1,2,3,4,5]
['Javascript','Vue','React','Node','Webpack'].sort();
// => ["Javascript", "Node", "React", "Vue", "Webpack"]
- 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之前
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()也是很好的一个方法,用于检查数组中是否有某些符合条件的元素。只要有一个满足即返回true,之后的不再执行,对性能很友好。
var result = [
{name:'鸣人',age:16},
{name:'佐助',age:17}
].some(item => {
return item.age > 16
});
=> true
6. every()的使用
如果说some()是
||
判断,那every()就是&&
判断,它用于检测数组中的每一项是否都满足条件,只有都满足了才会返回true。
var result = [
{name:'鸣人',age:16},
{name:'佐助',age:17}
].every(item => {
return item.age > 16
});
=> false
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
let testArr = [{name:'鸣人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}]
let index = testArr.findIndex(item => { return item.age > 16 });
// => 1
- 或者也可以使用Lodash提供的
_.findIndex()
,通过对象属性值直接获取对应索引
let testArr = [{name:'鸣人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}]
let index = _.findIndex(testArr, {name:'佐助'});
// => 1
- 使用
find()
:在数组中找到我们所需要的元素,并且和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 }
(3) 删除指定元素:判定当前数组里是否有某个元素,若有则把它删除
let testArr = [{name:'鸣人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:27},{name:'佐助',age:17}]
let index= testArr.findIndex(item => { return item.name == '佐助'});
// => 1
testArr.splice(index,1)
=> [{name:'鸣人',age:16},{name:'卡卡西',age:27},{name:'佐助',age:17}]
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