JS最常用数组方法整理!面试官问到再也不怕了!

141 阅读5分钟

下面是对常用的数组方法进行的一些整理,希望对自己还有其他小伙伴有用:)

改变原数组的方法:

改变数据的方法: pop, push, shift, unshift,splice, sort, reverse, forEach

pop() 从数组的尾部删除一个元素,返回删除的元素,原数组改变

push() 向数组尾部添加元素,返回添加后的新数组长度,原数组改变

shift() 从数组的头部删除第一个元素,返回删除的元素,原数组改变

unshift() 向数组头部添加元素,返回添加后新数组的长度,原数组改变

(记忆方法:shift按键在键盘的左边 操作的是头部的元素,p字母在键盘的右边,操作的是尾部的元素,pop是弹出的意思,push是推进。然后字母多的方法就是添加)

[1,2,3,4].pop() //4    
[1,2,3,4].push(5)//5 !!
[1,2,3,4].shift() //1
[1,2,3,4].unshift(0)//5 !!

sort() 默认排序就是以字母顺序或者数字开头数字的大小。 a-b 从小到大排序,b-a 反之 用法: arr.sort(function(a,b){return a - b;});    从小到大 arr.sort(function(a,b){return b - a;});    从大到小

reverse() 反转原数组

splice() 用法:splice(startIndex,Num 删除数,newItem插入项) 从startIndex开始删除num个元素,返回值为删除的元素。newitem, 可有可无,指添加的元素,可多个,添加到原数组。 num为0则表示不删除元素,返回空数组。所以括号里面有两个参数就是删除,有三个参数就一定有添加添加(删除与添加可同时进行)。 (记忆方法:剪接数组,1 起 2 长 3 添加)

let arr = [1,2,3]
arr.splice(0,1,4)//1   注意返回的值为删除的值
console.log(arr) //[4,2,3]
arr.splice(0,0,1)//[]
console.log(arr)//[1,4,2,3]

不改变原数组的方法:

toString() 把数组转换成字符串

join() 将数组转化成字符串,并返回该字符串,不传值则默认逗号隔开,括号里也可以传入分隔符

split(分隔符) 使用指定的分隔符 将字符串拆分为多个子字符串返回

concat() 连接数组,返回合并后的新数组; arr.concat() 无参数时直接调用数组的浅拷贝, 也就是复制原数组

assign() 合并对象

at(index) 返回指定索引位置处的元素值 ; 当需要获取数组最后一个元素时,用arr.at(-1) 比arr[arr.length-1]更简洁

charAt(index) 返回指定索引位置处的字符,类似于数组中括号获取相应下标位置的数据

match(reg) 可以在字符串内检索指定的值,找到一个或者多个正则表达式的匹配,并返回一个包含该搜索结果的数组。若无匹配返回null

findIndex() 返回第一个符合条件的数组成员的位置

indexOf() 在数组中查找指定元素最开始出现的位置,找到就返回其下标(首次出现的位置),反之则返回-1; lastIndexOf()最后出现的位置 (方法对大小写敏感)

slice (startIndex, endIndex) 从startIndex截取到endIndex,但不包括end元素, 返回新截取的部分; 无参数时浅拷贝原数组 (注意跟splice的区别!)

ES6新增:

includes() (es6新增) 在数组中查找指定元素/在字符串判断是否包含某个字符,返回布尔值

startsWith() 判断字符串开头的字符是否为参数的字符 true/false 相反:endsWith()

repeat(num) 复制字符串 参数为数字,表示复制的次数(必须为正数)

数组遍历方法

for of 遍历数组

forEach 遍历数组,没办法终止或跳出forEach循环 (改变原数组)

// forEach( item, index, arr )
var arr = [1, 2, 3];
arr.forEach((item, index, arr) => { // item为arr的元素,index为下标,arr原数组
    console.log(item); // 1, 2, 3
    console.log(index); // 0, 1, 2
    console.log(arr); // [1, 2, 3]
});

map() 返回新的数组

      // map() 映射
      var arr = [1, 2, 3];
      var arr1 = arr.map((item, index, arr) => { 
         // item为arr的元素,index为下标,arr原数组
        console.log(item); // 1, 2, 3
        console.log(index); // 0, 1, 2
        console.log(arr); // [1, 2, 3]
        return item * 2; // 返回一个处理过的新数组[2, 4, 6]
      });
      console.log(arr);
      console.log(arr1);  // 处理过的新数组[2, 4, 6]

find() 查找符合条件的项,找到第一个符合条件的元素并返回那个元素

filter() 过滤/找到所有满足条件的元素并返回新的数组

some() 判断数组里是否有一个符合条件的元素,只要有一个元素满足条件就返回true

every() 判断数组里每一个元素是否符合条件,当所有元素都满足条件才返回true,有一个不满足就返回false

reduce() arr.reduce(function(prev, current, currentIndex, sourceArr){}) 数组值累加(两个值累加完传递给第一个元素,直到最后)

      var arr = [1, 2, 3];
      var arr1 = arr.reduce((sum, item, index, arr) => {
        // item为数组中的元素,index为下标,arr为目标数组,sum为上一次调用回调函数时的返回值,
        console.log(item);//1, 2, 3
        console.log(index);//0, 1, 2
        console.log(arr);//[1,2,3]
        return sum + item; 
      }, init);

Bonus相关面试题

一下是一些关于数组方法的常见问题

For in 和for of 的区别:分别遍历对象属性,数组值

  • for in 主要遍历对象的属性key, 且它遍历数组遍历的是它的索引(因为遍历数组会遍历到数组原型上的属性和方法,更适合遍历对象

  • for of(es6新特性)主要遍历 数组的值,(而不是索引,不会遍历原型)允许遍历 maps, sets,类数组,strings等对象的值

Map 与forEach的区别:

map和forEach一样都是用来遍历数组,且每次执行匿名函数都支持三个参数:item(当前项)index(当前索引值)arr(原数组)

Map有返回值 能进行链式操作(能够继续给新数组进行filter,every等操作);forEach没有返回值不能进行链式操作 且会改变原数组的值

然后常考的还有some与every的区别,find与filter的区别等等