JavaScript引用类型之Array

JSON是前后端交换文本信息的语法，应用广泛。基于这种语法的特点，后端接口返回得前端渲染的数据不是数组形式的就是对象形式的，所以熟练使用数组和对象的操作方法很重要。

一、不改变原数组的方法

（一）检测方法（非常重要）

可以理解为对数组进行遍历，达到检测目标值终止遍历。检测存在某项达到条件，可以用find()、findIndex和some；检测所有项目都达到条件，使用every()。而这些方法的回调函数，都可以是(item)=>{对item进行检测}的形式。下面这些检测方法，不会改变原数组。

1、find(）：返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。

2、findIndex()：返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

3、some()：对数组的每一项运行给定函数，如果该函数对任意一项都返回true，则返回true。

4、every()：对数组的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

（二）迭代方法（非常重要）

特别是做react的项目，几乎是一定会用到数组的迭代方法的，下面这些迭代方法，不会改变原数组。

1、forEach():对数组的每一项运行给定函数，没有返回值。

2、filter():对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组。

3、map():对数组的每一项运行给定函数，返回每次调用结果组成的数组。

some()和every()也是迭代方法，归入检测方法就不再列举。过滤数组用filter，重整数据用map，只是想操作值用forEach。

（三）拼接剪切方法

1、colors.concat(“yellow”)，返回新数组，将接收到的参数添加到当前数组副本的末尾 。

2、colors.slice(1,3)，返回新数组，起始和结束位置之间的项但不包括结束位置的项 。

二、改变数组的方法（非常重要）

react中不直接改变state中的数据，常用不改变原数组的方法。而vue中是可以直接改变data的数据的，使用改变原数组的方法反而更简便。以下这些方法都是改变数组本身的。

(一）操作方法

1、colors.push(“yellow”)，在数组前末尾添加项并返回新数组长度 。

2、colors.pop()，移除数组末项并返回该项。

3、colors.shift() ，移除数组第一项并返回该项 。

4、colors.unshift(“yellow”) ，在数组前端添加项并返回新数组长度 。

5、colors.splice(起始位置、删除项数、插入的项）：这个方法很强大，可以删除、插入或者替换数组元素。

（二）排序方法

1、colors.reverse()，反转数组项顺序 。

2、colors.sort()，默认情况下调用每个数组项的toString()方法转型，比较得到的字符串（字符编码），按升序排序。一般会传入比较方法。

三、归并方法reduce

这个方法很特殊，遍历数组所有项，然后构建一个最新返回的值，这个方法在前端渲染工作中用的比较少。

引用自：developer.mozilla.org/zh-CN/docs/…

reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

• accumulator 累计器

• currentValue 当前值

• currentIndex 当前索引

• array 数组

回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

四、解构赋值用来进行数组合并和拷贝（非常重要）

使用解构赋值进行数组的合并和拷贝不会影响原数组。

1、数组拷贝

拷贝的效果是深拷贝，就是在堆内存中创建了一个新数组，和原数组不是同一个。这个引用类型的简单复制是不一样的。

2、数组合并