JS部分Array实用方法

300 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

相信很多小伙伴在前端学习过程中或者是接触一些数组类的算法时,总觉得有那么几个方法特别实用,那今天我就来分享一些近期我学习过程中比较实用且常用的数组方法。话不多说我们进入正题。

Array.map( )

map()方法定义在JavaScript的数组(Array)中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。

语法:  array.map(function(item, index, arr), thisIndex)
  • function(currentValue, index, arr)必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
  1. item必须。当前元素的的值。
  2. index可选。当前元素的索引(下标)。
  3. arr可选。当前元素属于的数组对象。
  • thisValue可选。对象作为该执行回调时使用,传递给函数,用作"this"的值。
我们来个🌰体会一下它的妙用:

let num = [2,5,7,9,4]

num = num.map(function(item){
    return item * 2;
});
console.log(num);//[4, 10, 14, 18, 8]

我们只需要记住map是对数组里面的每一个元素进行操作,当我们对item操作时
就相当于对数组里的每一个元素进行操作,方便快捷。

image.png

但是在使用map()方法时要注意以下两点:

  • 1、map()不会对空数组进行检测
  • 2、map()不会改变原始数组

forEach(function)

array.forEach(function)用于调用数组的每个元素,并将元素传递给回调函数,原数组不变(注意:forEach遍历与map的区别,一个是对每一个元素进行操作,一个是给回调函数操作,如果直接打印Array.forEach,结果为undefined)。

push()

push()是向数组末尾添加一个或者多个元素;

var arr = [2,3,4,5,6]
arr.push(7,8,9);
console.log(arr);

image.png

pop()

pop()是删除数组的最后一个元素。

var arr = [2,3,4,5,6,7]
arr.pop();
console.log(arr);

image.png

要注意的是这push()、pop()两个方法都会改变原数组

unshift()

对待这两兄弟时一定要注意,英语大佬不要被un-这个前缀给迷惑了。

unshift()是在数组开头添加一个或多个元素;

var arr = [2,3,4,5,6,7]
arr.unshift(1);
console.log(arr);

image.png

shift()

而shift()才是删除数组的第一个元素。

var arr = [1,2,3,4,5,6,7]
arr.shift();
console.log(arr);

image.png

splice()

相信有不少小伙伴和我一样,这两个方法傻傻分不清,我们细细品味一下两个方法的作用,以及传几个参数会有不同的效果。

splice(index,howmany,arr1,arr2…)

用于添加或删除数组中的元素。从index位置开始删除howmany个元素,并将arr1、arr2…数据从index位置依次插入。howmany为0时,则不删除元素。原数组改变。

var arr = [1, 'a', 2, true]

arr.splice(0,1)//从下标0开始,切1个

console.log(arr.splice(0,1));

//splice方法返回的是一个新数组,同时我们可以看到,它会改变原数组并生成新数组

image.png

image.png

slice()

slice(start,end)

在数组中从指定的开始位置到指定的结束位置(包括 start,不包括 end),复制为新的数组

参数:

  • 1、array.slice(m,n),从索引(下标)m处开始查找一直到n处(包括m,不包括n)--不会修改原数组;

image.png

  • 2、array.slice(m),第二个参数省略从索引为m一直查找到数组末尾;

image.png

  • 3、array.slice(0),原样输出内容,可以实现数组克隆,且不影响原数组,便于一些算法题的解决;

join()

将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。 //如果数组只有一个项目,那么将返回该项目而不使用分隔符,默认连接字符为“,”逗号,可以在(‘-’)设定使用什么符号连接。

image.png

reverse()

将数组倒序,会改变原数组

image.png

concat()

array.concat(arr1,arr2...),合并两个或多个数组,生成一个新数组,原数组不变。

image.png

sort()

arr.sort(function(a,b){
    return a - b  //--升序
})
arr.sort(function(a,b){
    return b - a  //--降序
})

image.png

filter()

过滤数组中符合条件的元素并返回一个新的数组。

image.png

结语

这些目前就是小编在学习过程中遇到的一些常用的并且比较实用的js数组的一些方法,希望可以帮助到大家,后期有学习了解到新的方法也会完善,当我们熟练地掌握了这些方法的时候一些数组相关的简单算法题你就会有更明显的思路了,谢谢!