不能不知道的15 个JavaScript数组实用技巧

790 阅读5分钟

这是我参与8月更文挑战的第10天,活动详情查看:8月更文挑战

JavaScript 充满了技巧。JavaScript 是一门庞大的语言,具有一系列有时奇怪的功能,使其特别、与众不同。在 JavaScript 中有很多方法可以完成工作;特别是对于编程世界中最重要的概念之一,数组。今天,我们要回顾一系列在 JavaScript 中使用数组的有趣且实用的技巧。

从数组中删除重复项

这是一个非常流行的关于 Javascript 数组的面试问题,如何从 Javascript 数组中提取唯一值。以下提供两种针对此问题的快速简便的解决方案。


方案一👉:Array.from(new Set(arr));


方案二👉:[...new Set(arr)];

image-20210810195257107

替换数组中的特定值

有时需要在创建代码时替换数组中的特定值,有一个很好的简短方法可以做到这一点,但是你可能还不知道。

我们可以使用 .splice(start, value to remove,....., valueToAdd)

  • 【start】指定我们要开始【添加/删除】的位置(如果为负数,则是从数组结尾处规定位置)

  • 【value to remove】要删除的项目数量

  • 【....., valueToAdd】以及向数组添加的新项目

    
    正数👉arr1.splice(0, 2, "Hi", "good");
    
    负数👉arr2.splice(-1, 2, "Hi", "good");
    
    

image-20210810200309697

如果想要替换某个指定值

比如我们想要把下例数组中的【呀】替换成【哦】,可以这样做

var Arr = ['你','好','呀','!'];
let replaceIndex = Arr.indexOf("呀"); 
if (replaceIndex > -1) {
    Arr[replaceIndex] = "哦";
}
console.log(Arr)

image-20210810204032598

对象转数组

利用 .from() 方法快速实现把对象的某属性转为数组

var friendsNames = Array.from(friends, ({name}) => name);

image-20210810200652330

将数组转为对象

假如我们有一个数组,而我们需要转成包含这些数据的对象,我们可以利用【扩展运算符(...)】这样做

var arrObj = { ...arr };

image-20210810201107595

用数据填充数组

当我们创建一个数组时,有一些情况,我们想用一些数据填充它,或者我们需要一个具有相同值的数组,在这种情况下, .fill() 方法提供了一个简单而干净的解决方案。

var newArray = new Array(5).fill("Axjy");

image-20210810201241611

合并数组

你知道如果不使用 .concat() 方法怎么将数组合并为一个数组吗?

有一种简单的方法可以将任意数量的数组合并为一行代码,就是利用【扩展运算符 (...) 】。

var arr = [...arr1,...arr2,...arr3]

image-20210810201520148

求两个数组的交集

这也是在任何 Javascript 面试中都可能面临的最流行的挑战之一,因为它表明你是否可以使用数组方法以及您的逻辑是什么。

为了找到两个数组的交集,我们将使用本文前面展示的方法以确保我们正在检查的数组中的值不重复;

我们将使用 .filter 方法和 .includes 方法。结果,我们将获得包含在两个数组中都存在的值的数组。

var duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item));

image-20210810201728784

从数组中删除假值(*)

首先,让我们定义假值。在 Javascript 中,假值是 false、0、“”、null,NaN,、undefined。我们可以使用 .filter() 方法来过滤这些假值。

var trueArr = mixedArr.filter(Boolean);

image-20210810201958592

从数组中获取随机值

有时我们需要从数组中随机选择一个值。为了以简单、快速和简短的方式创建它并保持我们的代码干净,我们可以根据数组长度获得一个随机索引号。

var ArrItem = Arr[(Math.floor(Math.random() * (Arr.length)))]

image-20210810202219024

你还可以做一个封装

Array.prototype.random = function () {
    return this[Math.floor(Math.random() * this.length)];
}

这样就可以直接使用了 :
[ 1, 2, 19, 769 ].random()

反转数组

当我们需要翻转我们的数组时,不需要通过复杂的循环和函数来创建它,有一种简单的数组方法,只需一行代码,我们就可以反转我们的数组。

会改变原来的数组

var reversedArrs = Arr.reverse();

image-20210810202942210

不会改变原数组的写法

var reversedArrs = [...Arr].reverse();

image-20210810202901399

.lastIndexOf() 方法

在 Javascript 中,有一个有趣的方法可以找到给定元素最后一次出现的索引。例如,如果我们的数组有重复值,我们可以找到它最后一次出现的位置。

var lastIndex = nums.lastIndexOf(5);

image-20210810202509770

对数组中的所有值求和

这也是在 Javascript 工程师面试中经常出现的问题。它可以在一行代码中使用 .reduce 方法解决

var sum = nums.reduce((x, y) => x + y);

image-20210810202629219

还可以做所有值的减法或乘法

var sub  = nums.reduce((x, y) => x - y);
var mul  = nums.reduce((x, y) => x * y);

image-20210810205136397

清空数组

想要清空数组,你可以使用这几个方案

  • 直接赋值为空

  • length 改为0

  • splice方法

  • pop方法

    Arr = []
    
    Arr.length = 0;
    
    Arr.splice(0);
    
    while (Arr.length > 0) {
        Arr.pop();
    }
    

    image-20210810204438749

找出数组最大值

要在数字数组中找到最大值,我们可以这样做

let max = Math.max(...numbers);

image-20210810205307103

找出数组最小值

我们可以使用min找出最小值,上面同时还用到了【扩展运算符】,我们现在换一种

let min = Math.min.apply(null, numbers);

image-20210810205536559

apply传入的是一个数组

结语

在本文中,向你展示了 15 个技巧和窍门,希望它们可以帮助你进行编码并保持您的代码简洁干净。另外,在 Javascript 中还有许多值得探索的不同技巧,不仅涉及数组,还涉及不同的数据类型。如果你还有更好的办法,欢迎留言讨论。

参考:

13 useful JavaScript array tips and tricks you should know


如果有收获的话就随手留个赞吧!😘