数组基本操作可以归纳为 增 删 改 查。
需要留意的是哪些方法会对原数组产生影响，哪些方法不会。
## 增
**push、unshift、splice、concat。**
下面前三种是对原数组产生影响的增添方法，**第四种则不会对原数组产生影响**。
- push()
push()方法接收任意数量的参数，并将它们添加到数组末尾。返回数组的最新长度。
```js
let colors = [];
let count = colors.push("red", "yellow", "blue");
console.log(count); // 3
```
- unshift()
unshift()在数组开头添加任意多个值。返回数组的最新长度。
```js
let fruit = ["apple", "banana", "pear"];
let count = fruit.unshift("peach", "strawberry", "pineapple");
console.log(fruit); // ["peach", "strawberry", "pineapple", "apple", "banana", "pear"]
console.log(count); // 6
```
- splice()
传入三个参数，分别是开始位置、要删除的元素数量、插入的元素，**返回[]**。
```js
// 1 push
let fruit = ["apple", "banana", "pear"];
let removed = fruit.splice(fruit.length, 0, "a", "b");
console.log(fruit); // ["apple", "banana", "pear", "a", "b"]
console.log(removed); // []
// 2 unshift
let fruit = ["apple", "banana", "pear"];
let removed = fruit.splice(0, 0, "a", "b");
console.log(fruit); // ["a", "b", "apple", "banana", "pear"]
console.log(removed); // []
// 3 在中间 某个位置 插入数据
let fruit = ["apple", "banana", "pear"];
let removed = fruit.splice(1, 0, "a", "b");
console.log(fruit); // ["apple", "a", "b", "banana", "pear"]
console.log(removed); // []
```
- concat()
首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组。
```js
let arr = [1, 2, 3];
let arr2 = ["a", "b", "c"];
let newArr = [].concat(arr, arr2, ["red", "yellow", "blue", "green"]);
console.log(newArr); // [1, 2, 3, "a", "b", "c", "red", "yellow", "blue", "green"]
```
## 删
下面三种都会影响原数组，最后一项不影响原数组。
**pop、shift、splice、slice。**
- pop()
pop()方法用于删除数组的最后一项，同时减少数组的`length`值，返回被删除的项。
```js
let colors = ["red", "green", "blue", "pink"];
let item = colors.pop(); // 取得最后一项
console.log(item); // pink
console.log(colors.length); // 3
```
- shift()
shift()方法用于删除数组的第一项，同时减少数组的`length` 值，返回被删除的项。
```js
let colors = ["red", "green", "blue", "pink"];
let item = colors.shift(); // 取得第一项
console.log(item) // red
console.log(colors.length) // 3
```
- splice()
传入两个参数，分别是开始位置，删除元素的数量，**返回包含删除元素的数组**.
```js
// 4 删除从第一个位置到第二个位置的数据，中间2个数据
let fruit = ["apple", "banana", "pear"];
let removed = fruit.splice(1, fruit.length - 1, "a", "b");
console.log(fruit); // ["apple", "a", "b"]
console.log(removed); // ["banana", "pear"]
// 5 删除数据
let fruit = ["apple", "banana", "pear"];
let removed = fruit.splice(0, fruit.length, "a", "b");
console.log(fruit); // ["a", "b"]
console.log(removed); // ["apple", "banana", "pear"]
// 6 删除元素
let fruit = ["apple", "banana", "pear"];
let removed = fruit.splice(0, 1);
console.log(fruit); // ["banana", "pear"]
console.log(removed); // ["apple"]
```
- slice()
slice()用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组。
```js
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
let colors2 = colors.slice(1); // ["orange", "yellow", "green", "cyan", "blue", "purple"] 切片：[第一个, 最后)
let colors3 = colors.slice(1, 4); // ["orange", "yellow", "green"] 切片：[第一个, 第4个)
```
## 改
即修改原来数组的内容, 常用 splice。
```js
// 7 第0个位置的 apple 改成 peach
let fruit = ["apple", "banana", "pear"];
let updated = fruit.splice(0, 1, "peach");
console.log(fruit); // ["peach", "banana", "pear"]
console.log(updated); // ["apple"]
```
## 查
即查找元素，返回元素坐标或者元素值。
- indexOf()
返回要查找的元素在数组中的位置，如果没有找到则返回-1。
```js
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
colors.indexOf("yellow"); // 2
```
- includes()
返回要查找的元素在数组中的位置，找到返回true，否则false。
```js
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
colors.includes("red"); // true
```
- find()
返回第一个匹配的元素。
```js
let colors = [
{color: "red", name: "a"},
{color: "orange", name: "b"},
{color: "yellow", name: "c"},
{color: "green", name: "d"},
{color: "cyan", name: "e"},
{color: "blue", name: "f"},
{color: "purple", name: "g"}
];
colors.find((element, index, array) => element.color === "cyan"); // {color: "cyan", name: "e"}
```
## 排序
数组有两个方法可以用来对元素重新排序：reverse 和 sort 。
- reverse()
顾明思议，将数组元素方向排列。
```js
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
colors.reverse();
console.log(colors); // ["purple", "blue", "cyan", "green", "yellow", "orange", "red"]
```
- sort()
sort()方法接受一个比较函数，用于判断哪个值应该排在前面。
```js
// 1 字母
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
colors.sort();
console.log(colors); // ["blue", "cyan", "green", "orange", "purple", "red", "yellow"]
// 2 数字比较
let numbers = [12, 23, 1, 2, 3, 4, 5, 6, 8, 8, 99, 54, 789, 33, 1, 22, 0];
numbers.sort();
console.log(numbers); // [0, 1, 1, 12, 2, 22, 23, 3, 33, 4, 5, 54, 6, 789, 8, 8, 99]
numbers.sort((a, b) => a - b);
console.log(numbers); // [0, 1, 1, 2, 3, 4, 5, 6, 8, 8, 12, 22, 23, 33, 54, 99, 789]
```
## 转换方法
常见的转换方法有：join。
- join()
join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串。
```js
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
console.log(colors.join("、")); // red、orange、yellow、green、cyan、blue、purple
console.log("《" + colors.join("》《") + "》"); // 《red》《orange》《yellow》《green》《cyan》《blue》《purple》
```
## 迭代方法
常用来迭代数组的方法（都不改变原数组）有如下：
1. some()
2. every()
3. forEach()
4. filter()
5. map()
6. reduce()
### some()
对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。
```js
let colors = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
let someResult = colors.some((item, index, array) => item.includes("e"));
let someResult2 = colors.some((item, index, array) => {
console.log(item);
return item.includes("ell1");
});
console.log(someResult, someResult2); // true false
```
### every()
对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true。
```js
let colors = ["red", "orange", "yellow", "green", "cyan-e", "blue", "purple"];
let someResult = colors.every((item, index, array) => item.includes("e"));
let someResult2 = colors.every((item, index, array) => {
console.log(item);
return item.includes("ell1");
});
console.log(someResult, someResult2); // true false
```
### forEach()
对数组每一项都运行传入的函数，没有返回值。
```js
let colors = ["red", "orange", "yellow", "green", "cyan-e", "blue", "purple"];
let colors2 = [];
colors.forEach((item, index, array) => {
colors2.push(item + index);
});
console.log(colors2);
/*
['red0', 'orange1', 'yellow2', 'green3', 'cyan-e4', 'blue5', 'purple6']
*/
```
### filter
对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。
```js
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // [3, 4, 5, 4, 3]
```
### map()
对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
```js
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.map((item, index, array) => item * 2);
console.log(filterResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
```
### reduce()
累加器。
```js
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let addResult = numbers.reduce((prev, next, index, array) => {
return prev + next;
}, 100);
console.log(addResult); // 125
```
