桌面手册1：JS数组处理秘籍

1. 背景

• “前端知识那么多,一些很基础的东西经常脑子短路，动不动还要百度，乱七八糟的广告、网络延迟烦死了！！”
• “一些常用的东西，有时候偷懒想复个习都没地方！”
• “开发中，突然卡壳是真的难受！”

是的，这是我之前带团队的时候，经常会听到的抱怨！也是前期做开发的时候，我经常头秃的问题！
尽管我尝试过写一两个vscode插件，边开发边提示，但总觉得路线不对。

于是写了一个简单的桌面增效软件（这个有兴趣的后面开源时会单独加个文章细说）

这也是本文的来源：增效软件里包含了上万篇由浅入深的总结，从前端的各类编程、数据库、后端、常用的框架、插件、npm报、脚手架，甚至是产品等内容。

当然，本文不止是分享，还想打开思路，让更多的人参与内容的补充和更高阶技巧的总结！
让写代码就像弹钢琴一样，轻松愉快！

2. 主要内容

在JavaScript中，数组是最常用的数据结构之一。为了高效地处理数组，JavaScript提供了丰富的数组方法。下面是JavaScript数组处理方法的一个完整总结，涵盖了创建、遍历、操作和转化数组的常用方法。

1. 创建数组

let arr = [1, 2, 3]; // 使用字面量创建数组
let arr2 = new Array(3); // 创建一个长度为3的数组
let arr3 = Array.of(4, 5, 6); // 创建一个包含给定元素的数组
let arr4 = Array.from([1, 2, 3]); // 从类数组或可迭代对象创建数组

2. 数组基本属性

let length = arr.length; // 数组的长度

3. 遍历数组

arr.forEach((item, index) => { console.log(item, index); }); // 遍历数组元素

for (let item of arr) { console.log(item); } // 使用 for...of 遍历数组

for (let index in arr) { console.log(index, arr[index]); } // 使用 for...in 遍历数组索引

4. 数组操作方法

4.1 添加/删除元素

arr.push(4); // 在数组末尾添加元素，返回新长度
arr.pop(); // 删除数组末尾的元素，返回删除的元素

arr.unshift(0); // 在数组开头添加元素，返回新长度
arr.shift(); // 删除数组开头的元素，返回删除的元素

4.2 数组截取、拼接、删除

let slicedArr = arr.slice(1, 3); // 截取数组(不包括索引3)
arr.splice(1, 2, 'a', 'b'); // 删除从索引1开始的2个元素，并插入'a', 'b'
let combinedArr = arr.concat([4, 5]); // 连接两个数组

4.3 查找元素

let firstIndex = arr.indexOf(2); // 查找元素2的第一个索引位置
let lastIndex = arr.lastIndexOf(2); // 查找元素2的最后一个索引位置
let includesElement = arr.includes(3); // 判断数组是否包含元素3
let found = arr.find(item => item > 2); // 查找第一个符合条件的元素
let foundIndex = arr.findIndex(item => item > 2); // 查找第一个符合条件的元素的索引

5. 数组排序和反转

arr.reverse(); // 反转数组顺序
arr.sort((a, b) => a - b); // 对数组按升序排序

6. 数组转化

6.1 遍历并生成新数组

let mappedArr = arr.map(item => item * 2); // 创建一个基于原数组的映射数组

6.2 过滤数组

let filteredArr = arr.filter(item => item > 2); // 创建一个符合条件的元素组成的数组

6.3 合并数组元素

let sum = arr.reduce((acc, curr) => acc + curr, 0); // 将数组中的元素累加为一个值
let flattenedArr = [[1, 2], [3, 4]].flat(); // 将嵌套的数组拍平成一维数组

6.4 将数组转为字符串

let joined = arr.join(', '); // 将数组元素用指定分隔符连接成字符串
let str = arr.toString(); // 将数组转为字符串

7. 数组的ES6+方法

7.1 填充数组

arr.fill(0, 1, 3); // 从索引1到索引3（不包括3）用0填充

7.2 创建指定长度和内容的数组

let filledArr = Array(5).fill(1); // 创建一个长度为5的数组，所有元素都是1

7.3 扁平化多维数组

let flatArr = [1, [2, 3], [4, [5]]].flat(2); // 扁平化2层嵌套的数组

7.4 按条件测试数组

let allGreater = arr.every(item => item > 0); // 检查是否所有元素都大于0
let someGreater = arr.some(item => item > 2); // 检查是否存在元素大于2

8. 其他有用方法

let arrKeys = arr.keys(); // 返回包含数组索引的迭代器
let arrValues = arr.values(); // 返回包含数组值的迭代器
let arrEntries = arr.entries(); // 返回包含索引和值的迭代器

9. 数组去重

let uniqueArr = [...new Set(arr)]; // 使用 Set 去重

3. 总结图表

为了方便理解，可以将上面的方法分为几类：

• 创建和基本操作：Array(), Array.of(), Array.from(), length
• 遍历：forEach(), for...of, for...in
• 增删改查：push(), pop(), unshift(), shift(), splice(), slice(), concat(), indexOf(), find(), includes()
• 排序和转换：reverse(), sort(), map(), filter(), reduce(), flat(), join(), toString()
• 测试和迭代：every(), some(), keys(), values(), entries()

这些方法涵盖了绝大多数与数组相关的操作，能够帮助你在开发中轻松处理数组。

---

是了，这又会是一个很长很长的系列，希望这篇文章能够帮助你更好地理解和使用好数组，如果有任何问题或建议，欢迎在评论区讨论！