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

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

从数组中删除重复项

这是一个非常流行的关于 Javascript 数组的面试问题，如何从 Javascript 数组中提取唯一值。以下提供两种针对此问题的

快速简便的解决方案。

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

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

 	var arr=[1,2,2,3,4,'Axjy','Axjy'];
    var uniqueArr=Array.from(new Set(arr));
    console.log('方案一',uniqueArr);
    var uniqueArr2=[...new Set(arr)];
    console.log('方案一',uniqueArr2);

替换数组中的特定值

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

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

• 【start】指定我们要开始【添加/删除】的位置（如果为负数，则是从数组结尾处规定位置）
• 【value to remove】要删除的项目数量
• 【....., valueToAdd】以及向数组添加的新项目

正数👉arr1.splice(0, 2, "Hi", "good");

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

	var arr1=[1,2,2,3,4,'Axjy','Axjy'];
    arr1.splice(2,3,'Hi',"good");
    console.log('arr1结果:',arr1);
    var arr2=[1,2,2,3,4,'Axjy','Axjy'];
    arr2.splice(-1,3,'Hi',"good");
    console.log('arr2结果:',arr2)

如果想要替换某个指定值

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

var Arr = ['你','好','呀','!'];

let replaceIndex = Arr.indexOf("呀");

if (replaceIndex > -1) { Arr[replaceIndex] = "哦"; }

console.log(Arr)

对象转数组

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

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

 var friends=[
        {name:'John',age:22},
        {name:'Peter',age:23},
        {name:'Mark',age:24},
        {name:'Maria',age:22},
        {name:'Monica',age:21},
        {name:'Martha',age:19},
    ]
    var friendNames=Array.from(friends,({name})=>name);
    console.log(friendNames)

将数组转为对象

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

	var arrObj = { ...arr };

	var arr=['你','好','呀','!'];
    var arrObj={...arr};
    console.log(arrObj)

用数据填充数组

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

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

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

合并数组

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

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

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

var arr1=['你','好','呀','!'];
    var arr2=[1,2,3];
    var arr3=['Hi','Axjy'];

    var arr=[...arr1,...arr2,...arr3];
    console.log(arr)

求两个数组的交集

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

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

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

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

	var numOne=[0,2,4,6,8,8];
    var numTwo=[1,2,3,4,5,6];
    var duplicatedValue=[...new Set(numOne)].filter(item=>numTwo.includes(item));
    console.log(duplicatedValue)

从数组中删除假值（*）

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

var trueArr = mixedArr.filter(Boolean);

var mixedArr=[0,"A","",NaN,9,true,undefined,"B",false];
    var trueArr=mixedArr.filter(Boolean);
    console.log(trueArr)
    // ['A', 9, true, 'B']

从数组中获取随机值

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

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

var Arr=["你",'好','啊','中','华','人','民','共','和',"国"];
    var ArrItem=Arr[(Math.floor(Math.random()*(Arr.length)))]
    console.log('随机值:',ArrItem)

比还可以做个封装

Array.prototype.random = function ()

{ return this[Math.floor(Math.random() * this.length)]; }

Array.prototype.random=function(){
        return this[Math.floor(Math.random()*this.length)];
    }
    console.log([1,2,5,6,769].random())

反转数组

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

我们就可以反转我们的数组。

[会改变原来的数组]

var reversedArrs = Arr.reverse();

var arr=["你",'好','啊','中','华','人','民','共','和',"国"];
    var reversedArrs=Arr.reverse();
    console.log('原数组:',arr)
    console.log('新数组:',reversedArrs)

[不会改变原来的数组]

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

var arr1=["你",'好','啊','中','华','人','民','共','和',"国"];
    var reversedArrs1=[...arr1].reverse();
    console.log('原数组:',arr1)
    console.log('>>1',[...arr1])
    console.log('新数组:',reversedArrs1)

.lastIndexOf() 方法

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

var lastIndex = nums.lastIndexOf(5);

var nums=[1,5,2,6,3,5,2,3,6,5,2,7];
    var lastIndex=nums.lastIndexOf(5)
    console.log('>>last',lastIndex)

对数组中的所有值求和

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

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

 var nums=[1,5,2,6]
    var sum=nums.reduce((x,y)=>x+y);
    console.log(sum)

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

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

 var nus=[1,5,2,8]
    var sub=nums.reduce((x,y)=>x-y);
    var mul=nums.reduce((x,y)=>x*y);
    console.log(sub);
    console.log(mul);

清空数组

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

• 直接赋值为空
• length 改为0
• splice方法
• pop方法

Arr = []

Arr.length = 0;

Arr.splice(0);

while (Arr.length > 0)

{ Arr.pop(); }

    // var Arr=['你','好','呀','!']
    // Arr=[]
    // Arr.length=0;
    // Arr.splice(0);
    // while(Arr.length>0){
    //     Arr.pop()
    // }
    // console.log(Arr)

找出数组最大值

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

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

let numbers=[100,200,300];
    let max=Math.max(...numbers);
    console.log(max)

找出数组最小值

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

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

    let numbers=[100,200,300];
    let min=Math.min.apply(null,numbers);
    console.log(min)

链接：https://juejin.cn/post/6994786292026327076