参考：
https://dev.to/duomly/13-usef…

在前端开发中，Javascript 数组常用于数据的处理，同时在前端面试中也经常考察数组的运用，在这里介绍一些关于数组的实用技巧

实际开发中肯定不止文中介绍的，后续还会不定期收集整理相关的内容

1. 删除数组中重复的元素

最常见的一个问题，就是如何删除数组中的重复元素，比较常用的方法是 new Set()，这里介绍两种使用 Set 不同的方式，一种是.from()，一种是 (…) 操作符

var fruits = [“banana”,“apple”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”];
// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”,“apple”,“orange”,“watermelon”,“grape”]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”,“apple”,“orange”,“watermelon”,“grape”]

2. 替换数组中指定的值

有时候，我们需要替换数组中指定的数据，可以使用.splice(start , remove , [add1 , [add2], ….])

• start 开始查找的下标
• remove 删除元素的位置（值 =start + remove）
• [add1 , [add2]] 替换的元素（即添加的元素）

大致原理：从下标 [start] 开始查找，找到第 [remove] 个元素，将这个元素删除掉，然后在当前这个位置插入指定替换的内容（即[add1 , [add2]]）

var fruits = [“banana”,“apple”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”];
fruits.splice(0, 2,“potato”,“tomato”);
console.log(fruits); // returns [“potato”,“tomato”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”]

3. 提取对象中的内容，并组成一个新的数组

var friends = [{ name:‘John’, age: 22},
    {name:‘Peter’, age: 23},
    {name:‘Mark’, age: 24},
    {name:‘Maria’, age: 22},
    {name:‘Monica’, age: 21},
    {name:‘Martha’, age: 19},
]


var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”,“Peter”,“Mark”,“Maria”,“Monica”,“Martha”]

4. 清空数组

当你想要清空数组时，又不想一个个元素删除，有一个简单的方法就是直接将.length 赋值为 0

var fruits = [“banana”,“apple”,“orange”,“watermelon”,“apple”,“orange”,“grape”,“apple”];

fruits.length = 0;
console.log(fruits); // returns []

5. 使用 (…) 操作赋将数组转换为对象

var fruits = [“banana”,“apple”,“orange”,“watermelon”];
var fruitsObj = {…fruits};
console.log(fruitsObj);
// returns {0:“banana”, 1:“apple”, 2:“orange”, 3:“watermelon”, 4:“apple”, 5:“orange”, 6:“grape”, 7:“apple”}

6. 使用.fill()填满所有数组元素

var newArray = new Array(10).fill(“1”);
console.log(newArray);
// returns [“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”,“1”]

7. 使用 (…) 合并数组

var fruits = [“apple”,“banana”,“orange”];
var meat = [“poultry”,“beef”,“fish”];
var vegetables = [“potato”,“tomato”,“cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food);
// [“apple”,“banana”,“orange”,“poultry”,“beef”,“fish”,“potato”,“tomato”,“cucumber”]

8. 查找两个数组中重复的元素

var fruits = [“apple”,“banana”,“orange”];
var meat = [“poultry”,“beef”,“fish”];
var vegetables = [“potato”,“tomato”,“cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food);
// [“apple”,“banana”,“orange”,“poultry”,“beef”,“fish”,“potato”,“tomato”,“cucumber”]

9. 删除数组中 false 类型的元素

var mixedArr = [0,“blue”,“”, NaN, 9, true, undefined,“white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr);
// returns [“blue”, 9, true,“white”]

10. 随机获取数组中的元素

var colors = [“blue”,“white”,“green”,“navy”,“pink”,“purple”,“orange”,“yellow”,“black”,“brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

11. 反转数组中的元素

var colors = [“blue”,“white”,“green”,“navy”,“pink”,“purple”,“orange”,“yellow”,“black”,“brown”];
var reversedColors = colors.reverse();
console.log(reversedColors);
// returns [“brown”,“black”,“yellow”,“orange”,“purple”,“pink”,“navy”,“green”,“white”,“blue”]

12. 使用 lastIndexOf 查找元素最后一次出现在数组中的位置

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

13. 数组求和

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14