工作中大多数情况下都是对数组的操作,熟练掌握数组操作的奇淫技巧,对数组运用自如也能提高工作效率。
数组去重(改变原数组)
先讲两个ES6
时代简单的去重方法,都是用Set
结构完成:
let letters = ['a', 'b', 'c', 'd', 'c', 'b', 'a'];
let uniqueLetter = Array.from(new Set(letters));
console.log(uniqueLetter); // ['a', 'b', 'c', 'd']
let uniqueLetter1 = [...new Set(letters)];
console.log(uniqueLetter1); // ['a', 'b', 'c', 'd']
你说了这两个方法,有的面试官可能不会轻易就放你过,可能还会问你原始的方法如何去重,篇幅有限,下次再总结。
对数组增删改(改变原数组)
splice()
可以对数组进行增删改(替换)
。
let letters = ['a', 'b', 'c', 'd'];
// 增
letters.splice(1, 0, 'e', 'f'); // 在下标为1的位置删除0个元素,同时增加e和f两个元素
// console.log(letters); // ['a', 'e', 'f', 'b', 'c', 'd']
// 删
letters.splice(3, 1); // 在下标为3的位置删除1个元素
// console.log(letters); // ['a', 'b', 'c']
// 改(替换)
letters.splice(2, 2, 'e', 'f'); // 在下标为2的位置删除2个元素,同时增加e和f两个元素
console.log(letters); // ['a', 'b', 'e', 'f']
splice()
的返回值是被删除的元素的数组。从上面的代码可以看出,增删改的差别就在于,从第二个参数开始的不同。
遍历数组
遍历数组的方法有很多种,传统的有:for、forEach、for-in、 for-of(ES6)
,其他的还有:map、reduce、reduceRight、filter、every、some、find(ES6)、findIndex(ES6)
,另外还有三个遍历器对象keys,values,entries
,其实还有一个冷门的方法:Array.from
也能达到跟map
相同的效果,这里只讨论Array.from
,其他方法另外再总结并比较区别。
let letterNums = [
{ letter: 'A', num: 1 },
{ letter: 'B', num: 2 },
{ letter: 'C', num: 3 },
{ letter: 'D', num: 4 }
];
let letters = Arrary.from(letterNums, ({letter}) => letter);
console.log(letters); // ["A", "B", "C", "D"]
清空数组(改变原数组)
方式一
arr.splice(0,arr.length);
方式二(最快)
arr.length=0;
方式三
arr=[];
直接把原来的数组赋值为空数组
数组转换成对象
有时候需要将数组转换成对象的形式,使用.map()
一类的迭代方法能达到目的,这里还有个更快的方法,前提是你正好希望对象的key
就是数组的索引:
let letters = ['a', 'b', 'c', 'd'];
let letterObj = {...letters};
console.log(letterObj); // {0: "a", 1: "b", 2: "c", 3: "d"}
合并数组
提到合并数组,应该第一个想到的就是concat
方法,但是有一个更高级的用法是ES6
的扩展运算符...
:
let letters = ['a', 'b', 'c', 'd'];
let nums = [1, 2, 3];
let letterNum = [...letters, ...nums];
console.log(letterNum); // ["a", "b", "c", "d", 1, 2, 3]
两个数组的交集
经典面试题之一,ES6
简单的处理方法:
let letterOne = ['a', 'b','c','d','e','a'];
let letterTwo = [ 'b','f','d','g','h',];
let duplicatedValues = [...new Set(letterOne)].filter(item => letterTwo.includes(item));
console.log(duplicatedValues); // ["b", "d"]
去除假值
首先得知道假值(falsy values)是什么?在JS
中,假值有:false、0、''、null、NaN、undefined
。
可以使用的是filter
方法找到数组中的假值并去除:
let mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false];
let trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns ['blue', 9, true, 'white']
随机取数组的一个元素
从数组中获取随机的一个值,也是一道经典的面试题。其实考察的核心知识是随机生成一个值取值区间为[0, arr.length)
的x
:
let colors = ['blue', 'white', 'green', 'navy', 'pink', 'purple', 'orange', 'yellow', 'black', 'brown'];
let randomColor = colors[(Math.floor(Math.random() * (colors.length)))]; // Math.random()得到的值为[0, 1)
关于数组的操作,除了前文提到的数组去重、数组遍历要总结,另外数组也有很多自身的方法,后续也会一一总结,毕竟掌握数组的操作技巧和方法真的太重要了。