js数组操作技巧

这篇博客总结了JavaScript中常见的数组操作方法,包括数组去重、替换特定值、映射、清空、转换为对象、填充、合并、求交集、删除假值、随机取值、反转、查找元素索引以及计算数组元素之和。这些技巧在面试和日常开发中都非常实用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 数组去重

这是一个非常流行的关于Javascript数组的采访问题,数组去重。这里有一个快速简单的解决方案,可以使用一个新的Set()。我想向您展示两种可能的方法,一种是使用.from()方法,另一种是使用spread操作符(…)。

const arr = ["aa", "bb", "cc", "cc", "aa", "dd", "bb", "ee"];
// 第一种方法
const uniqueArr = Array.from(new Set(arr));
console.info(uniqueArr);
// return ["aa", "bb", "cc", "dd", "ee"]

// 第二种方法
const uniqueArr2 = [...new Set(uniqueArr)];
console.info(uniqueArr2);
// return ["aa", "bb", "cc", "dd", "ee"]

2. 替换数组中的特定值

有时在创建代码时需要替换数组中的特定值,有一种很好的简单的方法可以做到这一点,我们可以使用.splice(start、valueToRemove、valueToAdd),并将所有三个参数传递给它,这些参数可以指定我们希望从哪里开始修改、希望修改多少值和新值。

const arr = ["aa", "bb", "cc", "cc", "aa", "dd", "bb", "ee"];
arr.splice(0, 2, "aa", "wu123");
console.log(arr);
// return ["aa", "wu123", "cc", "cc", "aa", "dd", "bb", "ee"]

3. 没有map()的映射数组

也许每个人都知道数组的map()方法,但是有一个不同的解决方案,它可以用来获得类似的效果和非常干净的代码。我们可以使用.from()方法。

const arr = [
  { id: 1, title: '标题1' },
  { id: 2, title: '标题2' },
  { id: 3, title: '标题3' },
  { id: 4, title: '标题4' },
  { id: 5, title: '标题5' },
]
const arrTitle = Array.from(arr, ({title}) => title);
console.log(arrTitle);
// return ["标题1", "标题2", "标题3", "标题4", "标题5"]

4. 空数组

您是否有一个满是元素的数组,但是您需要出于任何目的对其进行清理,并且您不想逐个删除项? 很容易就可以在一行代码中完成。要清空一个数组,您需要将数组的长度设置为0,就是这样!

const arr = ["aa", "bb", "cc", "cc", "aa", "dd", "bb", "ee"];
arr.length = 0;
console.log(arr);
// return []

5. 将数组转换为对象

我们有一个数组,但出于某种目的,我们需要一个对象来处理这些数据,而将数组转换为对象的最快方法是使用众所周知的spread运算符(…)。

const arr = ["banana", "apple", "orange", "watermelon"];
const arrObj = { ...arr };
console.log(arrObj);
// return {0: "banana", 1: "apple", 2: "orange", 3: "watermelon"}

6. 用数据填充数组

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

const arr = new Array(10).fill("aa");
console.log(arr);
// return  ["aa", "aa", "aa", "aa", "aa", "aa", "aa", "aa", "aa", "aa"]

7. 合并数组

您知道如何不使用.concat()方法将数组合并到一个数组中吗?有一种简单的方法可以用一行代码将任意数量的数组合并。正如您可能已经意识到的,spread操作符(…)在处理数组时非常有用,在本例中也是如此。

const arr1 = ["1", "2", "3"];
const arr2 = ["a", "b", "c"];
const arr3 = ["11", "22", "3"];
const arr = [...arr1, ...arr2, ...arr3];
console.log(arr);
// return ["1", "2", "3", "a", "b", "c", "11", "22", "3"] 

8. 求两个数组的交集

这也是Javascript面试中最受欢迎的题目之一,因为它考察了你是否可以使用数组方法以及你的逻辑是什么。为了找到两个数组的交集,我们将使用本文前面展示的方法之一,以确保数组中的值不重复,并使用.filter方法和.include方法。最后,将得到两个数组的交集。例:

const arr1 = [1,2,3,4,5,6,10,20];
const arr2 = [1,2,3,4,5,6,10,20.30,40];
const arr = [...new Set(arr1)].filter(item => arr2.includes(item));
console.log(arr);
// return [1, 2, 3, 4, 5, 6, 10]

9. 从数组中删除假值

首先,让我们定义假值。在Javascript中,假值是false, 0, " ", null, NaN, undefined。现在我们可以来看看如何从数组中删除这类值。为此,我们将使用.filter()方法。

const arr = [0, "aa", "", NaN, 1, true, undefined, "bb", false];
const trueArr = arr.filter(Boolean);
console.log(trueArr);
// return ["aa", 1, true, "bb"]

10. 从数组中获取随机值

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

const arr = ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "ii", "jj"];
const randomArr = arr[(Math.floor(Math.random() * (arr.length  )))]
console.log(randomArr)

11. 数组反转

当我们需要反转我们的数组时,没有必要通过复杂的循环和函数来创建它,有一个简单的数组方法可以为我们做所有的事情,只需一行代码,我们就可以使我们的数组反转。让我们检查一下:

const arr = ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "ii", "jj"];
const reversedArr = arr.reverse();
console.log(reversedArr)
// return ["jj", "ii", "hh", "gg", "ff", "ee", "dd", "cc", "bb", "aa"]

12. .lastIndexOf()方法

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

const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
const lastIndex = nums.lastIndexOf(5);
console.log(lastIndex);
// return 9

13. 将数组中的所有值相加

这个也是面试中经常被问到的问题,将数组中的所有值相加;它可以在一行代码中使用.reduce方法来解决。让我们看看代码:

const arr = [1,2,3,4,5,6,7,8,9,10];
const sum = arr.reduce((x, y) => x + y);
console.log(sum);

参考:https://mp.weixin.qq.com/s/3or0d2kPXPsjJV9G96NqRQ

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值