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


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

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

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

你可能感兴趣的:(js之数组操作常用方法及注意事项)