【Javascript修炼篇】你需要知道的30个数组操作

让我们一起探索JavaScript数组操作的奇妙世界吧！想象一下，你手里握着一个装满数字的小盒子，那就是我们的数组 const array = [1,2,3,4,5];。现在，让我们解锁它的潜力，看看能用它做什么吧！

1. 找出盒子里的第一个宝贝

只需一句 console.log(array[0]);，你就能发现藏在最前面的数字了，结果是：1

2. 探索盒子的秘密结尾

想知道最后一个数字是什么？console.log(array[array.length - 1]); 就能揭晓，答案是：5

3. 数字们的总和大冒险

用 reduce 方法把所有数字加起来试试看：console.log(array.reduce((previousValue, currentValue) => previousValue += currentValue, 0));，最终的总和是：15

4. 数字降序排列的魔法

想要让数字们按从大到小的顺序站队？console.log(array.sort((a,b) => b-a));，这样排列后就是：[5,4,3,2,1]

5. 数字升序排列的奥秘

反过来，如果想让数字们从小到大排队，console.log(array.sort((a, b) => a-b));，这样就是：[1,2,3,4,5]

6. 向数组尾部添加新成员

使用 push 方法给数组添个小伙伴：array.push(6);，现在看看数组的样子：[1,2,3,4,5,6]

7. 踢走数组里的最后一位

array.pop(); 可以移除最后的数字，现在数组变回了：[1,2,3,4,5]

8. 给数组头部找个朋友

使用 unshift 方法，在数组开始的位置添加元素：array.unshift(0);，现在的数组变成了：[0,1,2,3,4,5]

9. 移除数组的头号人物

用 shift 方法移除第一个元素：array.shift();，现在的数组又变回了：[1,2,3,4,5]

10. 切片：从第三个数字开始截取

console.log(array.slice(3));，只截取了：[4]

10. 切片：在指定范围截取

console.log(array.slice(3, 4));，这次只截取了一个数字：[4]

11. 更新第三个位置的数字为0

使用 splice 方法替换掉第三个数字：array.splice(3, 1, 0);，更新后的数组是：[1,2,3,0,5]

12. 把数组变成逗号分隔的字符串

使用 toString 方法，将数组转换为：‘1,2,3,0,5’

13. 使用数组方法转换为逗号分隔的字符串

使用 join 方法，同样可以得到：‘1,2,3,0,5’

14. 转换数组为下划线分隔的字符串

console.log(array.join('_'));，这下变成了：‘1_2_3_0_5’

15. 更新索引3处的值为4

直接通过 array[2] = 4; 更改第三个数字，现在的数组是：[1,2,3,4,5]

16. 合并两个数组

创建另一个数组 const newArr = [6,7,8,9];，然后使用 concat 方法合并：console.log(array.concat(newArr));，合并后的数组是：[1,2,3,4,5,6,7,8,9]

17. 找出数组中的最大值

利用 Math.max(...array)，找出最大的数字：9

18. 寻找数组中的最小值

使用 Math.min(...array)，找出最小的数字：1

19. 查找给定数字在数组中的位置

想知道4在哪吗？console.log(array.indexOf(4));，位置是：3

20. 查找给定数字在数组中的最后位置

再找一次4，但这次是从后往前数：console.log(array.lastIndexOf(4));，依然是：3

21. 检查每个元素是否都大于-1

使用 every 方法确认：console.log(array.every(item => item > -1));，结果是：true

22. 验证至少有一个元素大于1

使用 some 方法检查：console.log(array.some(item => item > 1));，确实如此：true

23. 把最后两个元素填充为1

使用 fill 方法，让最后两个数字都变成1：console.log(array.fill(1, 5));，现在的数组是：[1,2,3,4,5,1,1,1,1]

24. 筛选大于2的元素

使用 filter 方法筛选出大于2的数字：console.log(array.filter(item => item > 2));，结果是：[3,4,5]

25. 原地反转数组

使用 reverse 方法，让数组倒过来：console.log(array.reverse());，现在是：[1,1,1,1,5,4,3,2,1]

26. 清除数组中的假值

向数组里添加一些假值，然后用 filter 方法清除它们：array.push(false, null, 0, undefined);，现在数组是：[1,2,3,4,5,1,1,1,1,false, null, 0, undefined]。再用 filter(Boolean) 清理一下，干净了：[1,2,3,4,5,1,1,1,1]

27. 让每个元素都翻倍

使用 map 方法，让每个数字都乘以2：console.log(array.map(item => item = item * 2));，结果是：[2,4,6,10,2,2,2,2]

28. 清除数组中的重复元素

使用 Set 和扩展运算符，去除重复项：console.log(...new Set(array));，现在只有：[1,2,3,4,5]

29. 只提取数组中的整数

先向数组添加些非整数：array.push(1.23, 2.34);，现在的数组是：[1,2,3,4,5,1,1,1,1,1.23,2.34]。再使用 filter 方法，只留下整数：console.log(array.filter(item => Number.isInteger(item)));，结果是：[1,2,3,4,5,1,1,1,1]

30. 分割数组为小块

使用循环和 slice 方法，将数组分割为小块：const firstArray = [1,2,3,4,5]; 创建一个空数组 chunks，然后用循环分割原数组：for (let i = 0; i<firstArray.length;i+=2) { chunks.push(firstArray.slice(i, i+2)); }，最后我们得到了：[[1,2][3,4][5]]

如果还需要更多实用的数组功能，记得留言告诉我哦！我总是乐于更新我的文章，分享更多好玩的东西。希望你喜欢这篇文章，也欢迎你在评论区留下你的想法和建议。如果你觉得这篇文章对你有帮助，不妨点赞、评论、分享或者关注我，你的支持是我持续创作的动力！