Java教程

12种JavaScript中最常用的数组操作整理汇总(2)

本文主要是介绍12种JavaScript中最常用的数组操作整理汇总(2),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

7、转换为数组

有时我们必须将一些其它数据结构,如集合或字符串转换为数组。

类数组:函数参数,dom 集合

Array.prototype.slice.call(arguments);Array.prototype.concat.apply([], arguments);

字符串:

console.log('string'.split('')); // ["s", "t", "r", "i", "n", "g"]console.log(Array.from('string'));  // ["s", "t", "r", "i", "n", "g"]

集合:

console.log(Array.from(new Set(1,2,3))); // [1,2,3]console.log([...(new Set(1,2,3))]); // [1,2,3]

8、数组遍历

数组遍历方式很多,有底层的,有高阶函数式,我们就来介绍几种:

for:

const arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) {   console.log(arr[i]); } // 1 2 3

for-in:

const arr = [1, 2, 3]; for (let i in arr) {   if(arr.hasOwnProperty(i)) {      console.log(arr[i]);   }} // 1 2 3

for-of:

const arr = [1, 2, 3]; for (let i of arr) {  console.log(i); } // 1 2 3

forEach:

[1, 2, 3].forEach(i => console.log(i))// 1 2 3

while:

const arr = [1,2,3];let i = -1;const length = arr.length;while(++i < length) {    console.log(arr[i])}// 1 2 3

迭代辅助语句:break 和 continue

  • break 语句是跳出当前循环,并执行当前循环之后的语句

  • continue 语句是终止当前循环,并继续执行下一次循环

上面方式中,除了 forEach 不支持跳出循环体,其他都支持。高阶函数式方式都类似 forEach 。

性能对比:

while > for > for-of > forEach > for-in

如果是编写一些库或者大量数据遍历,推荐使用 while。有名的工具库 lodash 里面遍历全是 while。正常操作,for-of 或者 forEach 已经完全满足需求。

下面介绍几种高级函数式,满足条件为 true 立即终止循环,否则继续遍历到整个数组完成的方法:

// ES5[1, 2, 3].some((i) => i == 1);// ES6[1, 2, 3].find((i) => i == 1);[1, 2, 3].findIndex((i) => i == 1);

其他高阶函数式方法,例如 forEach map filter reduce reduceRight every sort 等,都是把整个数组遍历。

9、扁平化多维数组

这个功能说不是很常用,但是有时候又会用到:

二维数组:

const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];const arr2 = [].concat.apply([], arr1);console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

三维数组:

const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];const arr2 = [].concat.apply([], arr1);console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, [1, 2, 3], [4, 5, 6], [7, 8, 9]]

concat.apply 方式只能扁平化二维数组,在多了就需要递归操作。

function flatten(arr) {  return arr.reduce((flat, toFlatten) => {    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);  }, []);}const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];const arr2 = flatten(arr1);console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]

ES6+(ES2019) 给我们提供一个 flat 方法:

const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];const arr2 = arr1.flat();console.log(arr2); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

默认只是扁平化二维数组,如果想要扁平化多维,它接受一个参数 depth,如果想要展开无限的深度使用 Infinity:

const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];const arr2 = arr1.flat(Infinity);console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]

还有一种面试扁平化二维数组方式:

const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];const arr2 = arr1.toString().split(',').map(n => parseInt(n, 10));console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]

10、数组添加

如何从数组中添加元素?

我们可以使用 push 从数组末尾添加元素,使用 unshift 从开头添加元素,或者使用 splice 从中间添加元素。concat 方法可创建带有所需项目的新数组,这是一种添加元素的更高级的方法。

从数组的末尾添加元素:

const arr = [1, 2, 3, 4, 5, 6];arr.push(7)console.log( arr ); // [1, 2, 3, 4, 5, 6, 7]

从数组的开头添加元素:

const arr = [1, 2, 3, 4, 5, 6];arr.unshift(0)console.log( arr ); // [0, 1, 2, 3, 4, 5, 6]

push 方法的工作原理与 unshift 方法非常相似,方法都没有参数,都是返回数组更新的 length 属性。它修改调用它的数组。

使用 splice 添加数组元素:

只需要把 splice,第二个参数设为 0 即可,splice 在数组删除有更多的说明

const arr = [1, 2, 3, 4, 5];arr.splice(1, 0, 10)console.log(arr); // [1, 10, 2, 3, 4, 5]

使用 concat 添加数组元素:​​​​​​​

const arr1 = [1, 2, 3, 4, 5];const arr2 = arr1.concat(6);console.log(arr2); // [1, 2, 3, 4, 5, 6]

11、数组删除

数组允许我们对值进行分组并对其进行遍历。 我们可以通过不同的方式添加和删除数组元素。 不幸的是,没有简单的 Array.remove 方法。

那么,如何从数组中删除元素?

除了 delete 方式外,JavaScript 数组还提供了多种清除数组值的方法。

我们可以使用 pop 从数组末尾删除元素,使用 shift 从开头删除元素,或者使用 splice 从中间删除元素。

filter 方法可创建带有所需项目的新数组,这是一种删除不需要的元素的更高级的方法。

从数组的末尾删除元素:

通过将 length 属性设置为小于当前数组长度,可以从数组末尾删除数组元素。 索引大于或等于新长度的任何元素都将被删除。

const arr = [1, 2, 3, 4, 5, 6];arr.length = 4; console.log( arr ); // [1, 2, 3, 4]

pop 方法删除数组的最后一个元素,返回该元素,并更新length属性。pop 方法会修改调用它的数组,这意味着与使用 delete 不同,最后一个元素被完全删除并且数组长度减小。

const arr = [1, 2, 3, 4, 5, 6];arr.pop(); console.log( arr ); // [1, 2, 3, 4, 5]

从数组的开头删除元素:

shift 方法的工作原理与 pop 方法非常相似,只是它删除了数组的第一个元素而不是最后一个元素。

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

shift 和 pop 方法都没有参数,都是返回已删除的元素,更新剩余元素的索引,并更新 length 属性。它修改调用它的数组。如果没有元素,或者数组长度为 0,该方法返回 undefined。

使用 splice 删除数组元素:

splice 方法可用于从数组中添加、替换或删除元素。

splice 方法接收至少三个参数:

  • start:在数组中开始删除元素的位置

  • deleteCount:删除多少个元素(可选)

  • items...:添加元素(可选)

splice 可以实现添加、替换或删除。

删除:

如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

const arr1 = [1, 2, 3, 4, 5];arr1.splice(1);   console.log(arr1); // [1];const arr2 = [1, 2, 3, 4, 5];arr2.splice(1, 2) console.log(arr2); // [1, 4, 5]const arr3 = [1, 2, 3, 4, 5];arr3.splice(1, 1) console.log(arr3); // [1,3, 4, 5]

添加:

添加只需要把 deleteCount 设置为 0,items 就是要添加的元素。

const arr = [1, 2, 3, 4, 5];arr.splice(1, 0, 10)console.log(arr); // [1, 10, 2, 3, 4, 5]

替换:

添加只需要把 deleteCount 设置为和 items 个数一样即可,items 就是要添加的元素。

const arr = [1, 2, 3, 4, 5];arr.splice(1, 1, 10)console.log(arr); // [1, 10, 3, 4, 5]

注意:splice 方法实际上返回两个数组,即原始数组(现在缺少已删除的元素)和仅包含已删除的元素的数组。如果循环删除元素或者多个相同元素,最好使用倒序遍历。

使用 delete 删除单个数组元素:

使用 delete 运算符不会影响 length 属性。它也不会影响后续数组元素的索引。数组变得稀疏,这是说删除的项目没有被删除而是变成 undefined 的一种奇特的方式。

const arr = [1, 2, 3, 4, 5];delete arr[1]console.log(arr); // [1, empty, 3, 4, 5]

实际上没有将元素从数组中删除的原因是 delete 运算符更多的是释放内存,而不是删除元素。 当不再有对该值的引用时,将释放内存。

使用数组 filter 方法删除匹配的元素:

与 splice 方法不同,filter 创建一个新数组。

filter 接收一个回调方法,回调返回 true 或 false。返回 true 的元素被添加到新的经过筛选的数组中。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];const filtered = arr.filter((value, index, arr) => value > 5);console.log(filtered); // [6, 7, 8, 9]console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

清除或重置数组:

最简单和最快的技术是将数组变量设置为空数组

let arr = [1,2,3];arr = [];

清除数组的一个简单技巧是将其 length 属性设置为 0。​​​​​​​

let arr = [1,2,3];arr.length = 0;

使用 splice 方法,不传递第二个参数。这将返回原始元素的一个副本,这对于我们的有些场景可能很方便。也是一种数组复制方法技巧。​​​​​​​

let arr = [1,2,3];arr.splice(0);

使用 while 循环,这不是一种常用清除数组的方法,但它确实有效,而且可读性强。一些性能测试也显示这是最快的技术。​​​​​​​

const arr = [1, 2, 3, 4, 5, 6];while (arr.length) { arr.pop(); }console.log(arr); // []

12、其他方法

剔除假值:

[1, false, '', NaN, 0, [], {}, '123'].filter(Boolean) // [1, [], {}, '123']

是否有一个真值:

[1, false, '', NaN, 0, [], {}, '123'].some(Boolean)  // true

是否全部都是真值:

[1, false, '', NaN, 0, [], {}, '123'].every(Boolean) // false

补零:​​​​​​​

Array(6).join('0');      // '00000'  注意:如果要补5个0,要写6,而不是5。Array(5).fill('0').join('')  // '00000'

数组最大值和最小值:​​​​​​​

Math.max.apply(null, [1, 2, 3, 4, 5])  // 5Math.min.apply(null, [1, 2, 3, 4, 5])  // 1

判断回文字符串:​​​​​​​

const str1 = 'string';const str2 = str1.split('').reverse().join('');console.log(str1 === str2); // false

数组模拟队列:

队列先进先出:

const arr = [1];// 入队arr.push(2); console.log('入队元素:', arr[arr.length -1]); // 2// 出队console.log('出队元素:', arr.shift()); // 1

获取数组最后一个元素:

像我们平常都是这样来获取:

const arr = [1, 2, 3, 4, 5];console.log(arr[arr.length - 1]);   // 5 

感觉很麻烦,不过 ES 有了提案,未来可以通过 arr[-1] 这种方式来获取,Python 也有这种风骚的操作:

目前我们可以借助 ES6 的 Proxy 对象来实现:

const arr1 = [1, 2, 3, 4, 5];function createNegativeArrayProxy(array) {    if (!Array.isArray(array)) {            throw new TypeError('Expected an array');     }    return new Proxy(array, {      get: (target, prop, receiver) => {         prop = +prop;        return Reflect.get(target, prop < 0 ? target.length + prop : prop, receiver);;       }        })}const arr2 = createNegativeArrayProxy(arr1);console.log(arr1[-1]) // undefinedconsole.log(arr1[-2]) // undefinedconsole.log(arr2[-1]) // 5console.log(arr2[-2]) // 4

注意:这样方式虽然有趣,但是会引起性能问题,50万次循环下,在Chrome浏览器,代理数组的执行时间大约为正常数组的50倍,在Firefox浏览器大约为20倍。在大量循环情况下,请慎用。无论是面试还是学习,你都应该掌握 Proxy 用法。

本文完~

这篇关于12种JavaScript中最常用的数组操作整理汇总(2)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!