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

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

   
   
   image.png
   
   

   1.2 for 循环
   for(let i =0;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. 查找数组
   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. 查询数组
   8.1 array.every() 方法 ： 参数是一个回调函数 callback(item,index,items) : item 当前遍历项 ，遍历项对应的索引,当前遍历数组本身 ；返回值是一个布尔值： 当数组中的每一项都满足该函数条件时 返回true ,其中有一个项不满足时就返回false ;

   
   
   image.png
   
   

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

   
   
   image.png

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

   
   
   image.png
   
   

   注意 ： array.filter() 创建一个新的数组，不改变原始数组 ；

10. 数组的插入
    10.1 array.push() 方法 ：将一个或者多个项追加到数组的末尾，并返回新数组的长度

    
    
    image.png
    
    

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

    
    
    image.png

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

image.png

11. 删除数组
    11.1 array.pop() 方法 ：从数组中删除最后一个元素，返回是删除的元素 会改变元素组
    11.2 array.shift() 方法 ： 从数组中删除第一个元素 返回删除的元素 会改变元素组 ;
    11.3 array.splice(fromIndex，removeCount，addItem) : 开始删除的元素索引，删除元素的个数，插入的元素 会改变原数组 ;
12. 清空数组
    12.1 array.length = 0 ;
    12.2 array.splice(0)

13. 填充数组
    13.1 array.fill(fromIndex,item)方法 ： fromIndex开始填充的位置 ，item 填充的数据 会改变原数组
    注意 ： Array(length).fill() : 来初始化数组的特定长度和初始值的数组 ;
    13.2 Array.form() 函数
    Array.form() 有助于初始化带有对象的特定长度的数组

    
    
    image.png
14. 数组的扁平化
    14.1 array.flat() 方法 ： 通过递归扁平属于数组的项直到一定的深度来创建数组 ; 创建一个新数组,不会改变原始数组;
15. 数组的排序
    15.1 array.sort() 方法 ： 对数组的元素进行排序 。会改变原数组 ；
16. 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) // ["你好", "世界"]