js数组技巧

1、数组去重

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。

可以使用两种方法，一种使用.from()方法，第二种使用展开运算符(...)。

var arrStr = ["Java","C++","JavaScript","C语言","C++","Java"];

// 第一种方法
var uniqueArr1 = Array.from(new Set(arrStr));
console.log(uniqueArr1); // ["Java", "C++", "JavaScript", "C语言"]

// 第二种方法
var uniqueArr2 = [...new Set(arrStr)];
console.log(uniqueArr2); // ["Java", "C++", "JavaScript", "C语言"]

2、替换特定值

我们可以使用.splice(start, valueToRemove, valueToAdd)，并在其中传递这三个参数，这些参数指定了要在哪里开始修改，要更改多少个值以及增加新值。

var arrStr = ["Java","C++","JavaScript","C语言","C++","Java"];
arrStr.splice(0,1,"Python","PHP");
console.log(arrStr); // ["Python","PHP", "C++", "Javascript", "C语言","C++","Java"]

3、没有.map()的Map数组

map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。

我们可以使用.from()方法来达到相似的效果并且代码非常简洁。

var student = [
	{ name: "小花", age: 22 },
    { name: "小明", age: 23 },
    { name: "小林", age: 24 },
    { name: "小李", age: 22 }
];

var studentName = Array.from(student, ({name}) => name);
console.log(studentName); // ["小花", "小明", "小林", "小李"]

4、清空数组

可以使用三种方法，一种使用splice函数，第二种给数组的length赋值为0，第三种直接赋予新数组 [ ]。

var arrStr = ["Java","C++","JavaScript","C语言","C++","Java"];

// 第一种方法
arrStr.splice(0);
console.log(arrStr); // []

// 第二种方法
arrStr.length = 0;
console.log(arrStr); // []

// 第三种方法
arrStr = [];
console.log(arrStr); // []

5、数组转换为对象

将数组转换为对象的最快方法是使用众所周知的展开运算符(...)。

var arrStr3 = ["Java","C++","JavaScript","C语言","C++","Java"];
var arrObj = { ...arrStr3 };
console.log(arrObj); // {0: "Java", 1: "C++", 2: "JavaScript", 3: "C语言", 4: "C++", 5: "Java"}

6、合并数组

合并数组，可以合并一个或多个数组，会返回合并数组之后的数据，不会改变原来的数组。

可以使用三种方法，一种使用.concat()方法，第二种使用展开运算符(...)。

var arrStr1 = ["Java", "C++", "JavaScript"];
var arrStr2 = ["Python", "PHP"];
var arrStr3 = ["C#", "SQL"];

// 第一种方法
var arrStrs1 = [...arrStr1, ...arrStr2, ...arrStr3];
console.log(arrStrs1);// ["Java", "C++", "JavaScript", "Python", "PHP", "C#", "SQL"]

// 第二种方法
var arrStrs2 = arrStr1.concat(arrStr2,arrStr3);
console.log(arrStrs2); // ["Java", "C++", "JavaScript", "Python", "PHP", "C#", "SQL"]

7、数组过滤

从数组中删除假值，或根据条件过滤某些数据，我们将使用.filter()方法。

// 第一种，删除假值 假值为false，0，''，null，NaN，undefined
var mixedArr = [0, "小明", "", NaN, 9, true, undefined, "white", false];
var filterArr1 = mixedArr.filter(Boolean);
console.log(filterArr1); // ["小明", 9, true, "white"]

// 第二种，根据条件过滤
var numArr = [22, 3, 40, 12, 6];
var filterArr2 = numArr.filter(item=>item>10);
console.log(filterArr2); // [22, 40, 12]

8、判断数组是否存在某值

如果数组存在某个元素，.includes()方法返回true，否则返回false。

var arrStr = ["Java","C++","JavaScript","C语言"];

var arrStr1 = arrStr.includes("Java");
var arrStr2 = arrStr.includes("PHP")
console.log(arrStr1) // true
console.log(arrStr2) // false