JS 数组的奇技淫巧大揭秘

引言

在 JavaScript 领域，数组是我们日常使用的一种重要数据结构。从简单的列表操作到复杂的数据处理，数组无处不在。本文将带你领略数组操作的精妙之处，从常用方法到鲜为人知的奇技淫巧，帮助你解锁数组操作的新高度。

数组的基本操作

1. 创建数组

// 字面量语法
const myArray = [1, 2, 3, 4, 5];

// 数组构造函数
const myArray = new Array(1, 2, 3, 4, 5);

2. 访问元素

// 索引访问
const firstElement = myArray[0]; // 1

// length 属性
const arrayLength = myArray.length; // 5

3. 添加元素

// push() 方法
myArray.push(6); // [1, 2, 3, 4, 5, 6]

// unshift() 方法
myArray.unshift(0); // [0, 1, 2, 3, 4, 5, 6]

4. 删除元素

// pop() 方法
const lastElement = myArray.pop(); // 6

// shift() 方法
const firstElement = myArray.shift(); // 0

奇技淫巧

1. 数组扁平化

// reduce() 方法
const flatArray = myArray.reduce((acc, curr) => acc.concat(curr), []); // [0, 1, 2, 3, 4, 5, 6]

2. 数组去重

// Set() 构造函数
const uniqueArray = [...new Set(myArray)]; // [0, 1, 2, 3, 4, 5, 6]

3. 数组排序

// sort() 方法
myArray.sort((a, b) => a - b); // [0, 1, 2, 3, 4, 5, 6]

// 自定义排序
myArray.sort((a, b) => b - a); // [6, 5, 4, 3, 2, 1, 0]

4. 数组分组

// reduce() 方法
const groupedArray = myArray.reduce((acc, curr) => {
  if (!acc[curr]) acc[curr] = [];
  acc[curr].push(curr);
  return acc;
}, {}); // { 0: [0], 1: [1], 2: [2], 3: [3], 4: [4], 5: [5], 6: [6] }

5. 数组交集和差集

// reduce() 和 filter() 方法
const intersection = myArray.reduce((acc, curr) => (mySet.has(curr) ? acc.concat(curr) : acc), []); // [1, 2, 3, 4, 5, 6]
const difference = myArray.filter(item => !mySet.has(item)); // []

6. 数组随机化

// Math.random() 和 sort() 方法
myArray.sort(() => Math.random() - 0.5); // [5, 2, 1, 3, 4, 6, 0]

7. 数组分页

// slice() 方法
const pageSize = 3;
const pages = [];
for (let i = 0; i < myArray.length; i += pageSize) {
  pages.push(myArray.slice(i, i + pageSize));
} // [[0, 1, 2], [3, 4, 5], [6]]

误区

1. 使用 forEach() 方法进行数组修改

// 错误示范
myArray.forEach(item => item++); // 无效

// 正确示范
myArray = myArray.map(item => item++); // [1, 2, 3, 4, 5, 6, 7]

2. 混淆索引和 length

// 索引从 0 开始，而 length 属性从 1 开始
myArray[myArray.length] = 7; // 错误

// 正确示范
myArray.push(7); // [0, 1, 2, 3, 4, 5, 6, 7]

结语

通过本文的介绍，你已经掌握了数组操作的精髓，从基础方法到巧妙技巧。在实际开发中，灵活运用这些技术将大大提升你的代码效率和可维护性。记住，实践出真知，在不断地探索和尝试中，你将成为一位 JS 数组操作大师。