JavaScript 数组常用操作技巧与避坑指南

数组去重

在处理字符串或数值型数组时，去重是常见需求。以下两种 ES6+ 方法是实现去重的标准做法：

第1步：使用 Array.from() 叠加 new Set()

目的：将 Set 对象转换为数组。

操作：Set 数据结构本身只允许唯一值，将其作为参数传入 Array.from 即可得到去重后的新数组。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var uniquePlants = Array.from(new Set(plants));
console.log(uniquePlants); 
// 输出: [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]

第2步：使用扩展运算符 (...)

目的：利用展开语法快速创建包含 Set 内容的数组。

操作：直接在函数调用或字面量中使用 ... 解构 Set。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var uniquePlants = [...new Set(plants)];
console.log(uniquePlants);
// 输出: [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]

替换或删除数组中的特定值

风险提醒：splice() 方法会直接改变原始数组。在使用前请确认是否需要保留原数组，必要时先复制一份。

操作入口：数组实例方法 array.splice(index, howmany, item1, ..., itemX)

动作说明：index 指定开始位置，howmany 指定删除的项目数量，后续参数为插入的新元素。该方法返回被删除的项目组成的数组。

// 从索引 2 开始，删除 1 个项目，并插入新值
var plants = ['Saturn', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var result = plants.splice(2, 1, 'NewPlanet');
console.log(plants); 
// 原始数组变为: [ 'Saturn','Uranus','NewPlanet','Mercury','Venus','Earth','Mars','Jupiter' ]

console.log(result); 
// 返回被删除的元素: [ 'Mercury' ]

不使用 map 映射数组元素

map() 方法通常用于将数组每个元素映射为新值，但它不改变原数组。如果需要类似效果但想用其他方法，可以使用 Array.from()。

操作：通过 Array.from(arrayLike, mapFunction) 第二个参数传入回调函数。

var plants = [
    { name: "Saturn" },
    { name: "Uranus" },
    { name: "Mercury" },
    { name: "Venus" },
];

// 提取 name 字段组成新数组
var plantsName = Array.from(plants, ({ name }) => name);
console.log(plantsName); 
// 输出: [ 'Saturn', 'Uranus', 'Mercury', 'Venus' ]

清空数组

若需清空一个数组，最简单的方法是将 length 属性设置为 0。这将重置数组长度并移除所有元素。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
plants.length = 0;
console.log(plants); // []

将数组转换为对象

利用扩展运算符可以将数组的索引转换为对象的键，值保持不变。注意这仅适用于稀疏数组或连续整数的键，且数字键会自动转为字符串。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plantsObj = {...plants};
console.log(plantsObj);
// 输出: {'0': 'Saturn','1': 'Earth', '2': 'Uranus','3': 'Mercury','4': 'Venus','5': 'Earth','6': 'Mars','7': 'Jupiter'}

用数据填充数组

当需要创建一个初始值固定长度的数组时，可使用 fill() 方法。

// 创建包含 8 个 '8' 字符的数组
var plants = new Array(8).fill('8');
console.log(plants); 
// 输出: ['8', '8', '8','8', '8', '8','8', '8']

合并数组

除了传统的 concat() 方法，使用扩展运算符合并多个数组更加简洁直观。

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury'];
var plants2 = ['Venus', 'Earth', 'Mars', 'Jupiter'];
var mergedPlants = [...plants1, ...plants2];
console.log(mergedPlants); 
// 输出: ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']

获取两个数组的交集

要找出两个数组中共有的元素，可先对其中一个数组去重，再过滤出存在于另一个数组中的项。

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plants2 = ['Saturn', 'Earth', 'Uranus'];

// 步骤：1. plants1去重 -> 2. filter检查是否包含在plants2中
var commonPlants = [...new Set(plants1)].filter(item => plants2.includes(item));
console.log(commonPlants); 
// 输出: [ 'Saturn', 'Earth', 'Uranus' ]

删除数组中的假值

Javascript 中的“假值”（Falsy values）包括：false, 0, "", null, NaN, undefined。使用 Boolean 构造函数作为过滤器可以高效剔除这些值。

var plants = ['Saturn', 'Earth', null, undefined, false, "", NaN, 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var trueArr = plants.filter(Boolean);
console.log(trueArr); 
// 输出: ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']

获取数组中的随机值

通过生成一个小于数组长度的随机整数作为索引，可以从数组中随机选取元素。

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
// Math.random() 生成 [0, 1) 之间的数，乘以长度后向下取整
var randomPlant = plants[Math.floor(Math.random() * plants.length)];
console.log(randomPlant);

修正说明：原文本中此处标题为“获取随机值”，但代码块使用的是 reduce 累加求和，且注释也指向 reduce。根据标题意图，上方提供了正确的随机取值代码。下方列出 reduce 求和的独立章节。

lastIndexOf() 查找最后出现位置

lastIndexOf() 方法返回指定元素在数组中最后一次出现的索引，如果没有找到则返回 -1。

var fruits = ['Apple', 'Banana', 'Mango', 'Banana'];
var lastIndex = fruits.lastIndexOf('Banana');
console.log(lastIndex); // 输出: 3

将数组中的所有值相加

reduce() 方法接收一个累加器函数，从左到右依次处理数组元素，最终合并为一个单一返回值。常用于求和、求积或扁平化数组。

var nums = [1, 2, 3, 4, 5];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // 输出: 15

以上就是 JavaScript 数组常用操作技巧与避坑指南的详细内容，更多关于 JavaScript 数组处理的知识请关注本站其它相关文章！