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

参考文章：

• https://www.jianshu.com/p/a030453e59bd
• https://www.jianshu.com/p/3529866b0854

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';


//=> [{ '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 25

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

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