js 中常用的15种数组的操作

数组的遍历
1.1 for……of 循环
for(const items of item ) 循环遍历数组项；

image.png

1.2 for 循环
for(let i =0;i<items.length;i++)循环使用递增的索引变量遍历数组项；

image.png

方法：
1.3 array.forEach（）方法
array.forEach(callback) 方法通过每个数组项上调用callback 函数来遍历数组项
callback(item,index,items) :当前遍历项，当前遍历项的索引，当前遍历的数组本身；

image.png

2 . 数组的映射
2.1 array.map(callback)方法通过在每个数组项上使用callback 调用结果来创作一个新数组

image.png

注意： array.map() 方法创建一个新的映射数组，不改变原数组 ;
2.2 array.form() 方法通过在每个数组项上使用callback 调用结果来创作一个新数组

image.png

注意： Araay.from() 方法创建一个新的映射数组，不改变元素组 ;
Araay.from() 方法更适合从类似数组的对象进行映射；
3 数据的简化
3.1 array.reduce() 方法通过调用callback函数将一个数组简化成一个值；
callback(total,item,index,items) : 累加器，当前数组的项，当前数项的索引，当前数组最终返回的是累加器的值；

image.png

注意: reduce() 对于空数组不会执行回调函数 ;
reduceRight() 使用的方法和reduce() 一样，不同的是reduceRight() 从数组的末尾向前累加数组中的每一项；
4 数据的连接

4.1 array.concat() 方法：将一个或者多个数组连接到原始数组；
es6 中展开运算符和数组字面量... [...arr1,..arr2]

image.png

5 获取数组的片段
5.1 array.slice(startIndex,endIndex) 方法 :startIndex 数组中开始位置的索引，endIndex 结束位置的索引（截取不包括结束位置索引所在的项）返回截取的元素不改变原始数组的值；

image.png

注意： array.slice(0) : 只有一个参数默认从当前索引所在的元素截取当前数组剩下的所有元素；
6 数组的拷贝
6.1 数组的拷贝最简单的一种方法就是es6 中的展开运算符 [...arr]

image.png

6.2 [].concat(array) : 是另一种拷贝数组的方法

image.png

6.3 array.slice() 方法：也可以浅拷贝一个数组；

image.png

注意： array.slice() === 等价于 array.slice(0)

查找数组
7.1 array.includes() 方法 :
array.includes(itemTosearch,fromIndex) : itemTosarch 需要查找的元素，fromIndex 当前查找位置的索引默认值为0; 返回值是一个布尔值满足true 不满足false

image.png

7.2 array.indexOf() 方法 : 参数和includes 中的参数一样值存在返回当前元素所在的索引不存在则返回的是-1

image.png

7.3 array.find(callback) 方法：返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

image.png
查询数组
8.1 array.every() 方法：参数是一个回调函数 callback(item,index,items) : item 当前遍历项，遍历项对应的索引,当前遍历数组本身；返回值是一个布尔值：当数组中的每一项都满足该函数条件时返回true ,其中有一个项不满足时就返回false ;

image.png

8.2 array.some() 方法：参数于every() 相同返回值是布尔值；不同的是遍历的数组中有一项满足该回调函数则返回true ，都不满足的时候返回false

image.png
数组的过滤
9.1 array.filter() 方法
array.filter(func) : 创建一个新的数组 func(item,index,items) item 当前遍历项，索引和数组本身返回值是满足当前函数的元素组成的数组

image.png

注意： array.filter() 创建一个新的数组，不改变原始数组；
数组的插入
10.1 array.push() 方法：将一个或者多个项追加到数组的末尾，并返回新数组的长度

image.png

展开操作符向数组后面添加元素

image.png

注意： array.push() 会改变原数组可以添加多个元素
10.2 array.unshift() 方法：将一个或多项追加到数组的开头,返回新数组的长度；es6 中展开操作符一样可以应用；
10.2 在任何位置添加元素实现方法：

image.png

删除数组
11.1 array.pop() 方法：从数组中删除最后一个元素，返回是删除的元素会改变元素组
11.2 array.shift() 方法：从数组中删除第一个元素返回删除的元素会改变元素组 ;
11.3 array.splice(fromIndex，removeCount，addItem) : 开始删除的元素索引，删除元素的个数，插入的元素会改变原数组 ;
清空数组
12.1 array.length = 0 ;
12.2 array.splice(0)
填充数组
13.1 array.fill(fromIndex,item)方法： fromIndex开始填充的位置，item 填充的数据会改变原数组
注意： Array(length).fill() : 来初始化数组的特定长度和初始值的数组 ;
13.2 Array.form() 函数
Array.form() 有助于初始化带有对象的特定长度的数组

image.png
数组的扁平化
14.1 array.flat() 方法：通过递归扁平属于数组的项直到一定的深度来创建数组 ; 创建一个新数组,不会改变原始数组;
数组的排序
15.1 array.sort() 方法：对数组的元素进行排序。会改变原数组；
Array.of() : 将一组值转换成数组

Array.of("3","4","7") // ["3","4","7"]
Array.of(3).length // 1

17.将类数组转化成数组 Array.from()

const fromObj={
  "0":"你好",
  "1":"世界",
length：2
}
const es5Arr = [].slice.call(fromObj) // ["你好", "世界"]
const es6Arr = Array.from(fromObj) // ["你好", "世界"]