(前端)一文掌握业务开发中的数组

前言
在正常的业务代码中，最常用的一种数据结构就是数组了，基本涉及到多个相同类型的元素都会有数组的存在。而javascript中的数组本身就带有很多操作方法，比如说迭代一个数组，插入一个元素，删除一个元素等等，对于一个数组对象的迭代比较有用的方法，有array.forEach(),array.map() 等等。在日常的业务开发时，笔者经常对操作数组有时候会忘记，就得去百度，查文档，所以笔者觉得有必要对数组的属性方法进行一次总结，这样也有利于我们的业务开发效率
数组操作的清单
- Iterate 迭代
  - for of cycle 遍历循环数组元素
    - 格式：for(const item of items)
    - 实例：
      
      注：这个循环你是可以break结束掉的。下面讲forEach，它是不能break结束的。
  - for cycle 用下标循环遍历数组元素
    - 格式：for(let i;i<array.length;i++)
    - 实例：
      
      index 会从O 叠加到colors.length-1，它的值我们是colors[index] 获取的注：这个循环也是可以break结束掉的
  - array.forEach() method 通过回调函数遍历数组中的每一个项
    - 格式：array.forEach(callback)
      callback中的参数有item元素，index下标还有这个数组本身self
    - 实例：
      
      注：这个遍历迭代是不可以被break结束的
- Map
  - array.map() method 该方法会创建一个新的数组，这个数组是每个数组项的结果
    - 格式：array.map(callback)
      同样的callback中包含三个参数，item 必写项，index跟array可选项
    - 实例：
      
      注：创建一个新数组，不改变原来数组元素
  - Array.from() function 同样该方法会创建一个新数组，这个数组是每个数组项的结果
    - 格式：Array.from(callback)
    - 实例：
      
      注：array.from() 创建一个映射数组，不改变原来数组，适用于一个数组对象
- Reduce
  - array.reduce() method 将数组多个元素缩减成一个值
    - 格式：array.reduce(callback[,initialValue]) 可选参数有：累加器当前值下标数组本身
      这个callback函数我们可以理解成返回这个迭代器
    - 实例：
      
      注：如果你没有设置initialValue参数的话，那么数组的第一个元素就是初始值
- Concat 合并数组
  - array.concat() method 可以合并一个或者多个数组
    - ... 点位分割符
    - 格式：array.concat(array1[,array2,...])
    - 实例：
      
      注：该方法会创建一个新数组，不会改变原数组，同时支持合并多个数组类似这样的应用[...arr1,...arr2,...arr3]
- Slice 切割数组
  - array.slice() method 切割开始下标到结束下标并返回一个数组，不会改变原来数组
    - 格式：array.slice(fromIndex,toIndex)
    - 实例：
      
      注： names.slice(0,2) 返回切割 0 1 下标的元素组成的数组 names.slice(2) 返回从1开始的下标，到数组array.length-1
- Clone 克隆数组
  - Spread operator
    - 格式：const clone = [...array]
    - 实例:
      
      注：浅拷贝了一个数组。
  - array.concat() method
    有人比较疑惑，这里为啥是copy数组呢，我们可以用一个空数组合并一个已有元素的数组这样也能做到copy的作用
    - 格式：[].concat(array)
    - 实例:
      
      注：这个也是浅拷贝
  - array.slice() method
    - 格式：colors.slice() 切割一整个会自动创建一个数组
    - 实例：
      
      注：这里也是浅拷贝
- Search 搜索
  - array.includes() method
    - 格式：array.inculdes(itemToSearch[,fromIndex]) 返回一个布尔值，是否包含该元素的布尔值，可以指定从某个下标位置开始搜索
    - 实例：
  - array.find() method
    - 格式：array.find(predicate) 返回符合predicate方法的数组中的第一个元素
    - 实例：
      
      注：如果 numbers.find(predicate) 没有找到对应条件的元素，那么返回undefined
  - array.indexOf() method
    - 格式：array.indexOf(itemToSearch[,fromIndex]) 返回的是查找到的元素的第一个下标，fromIndex是从哪一个下标开始搜索
    - 实例：
      
      注：如果没有找到元素，会返回-1 array.findIndexOf(predicate) 类似参数是个函数
- Query 查询（检测）
  - array.every() method
    - 格式：array.every(predicate) 遍历数组并且做predicate的检测，假如每个元素都通过了检测，就返回true，否则就false
    - 实例：
  - array.some() method
    - 格式：array.some(predicate) 遍历数组只要元素有一个符合条件就返回true
    - 实例:
- Filter 过滤
  - array.filter()
    - 格式：array.filter(predicate) 返回一个新数组，数组中的每个元素都是原数组通过predicate检测
    - 实例：
      
      注：创建一个新数组不会影响，旧数组
- Insert 插入
  - array.push() method
    - 格式:array.push(item) 往数组最后添加一个或者多个元素
    - 实例：
  - array.unshift() method
    - 格式:arrya.unshift(item) 往数组最前面添加一个元素或者多个元素
    - 实例：
  - Spread operator
    - 最后添加数组
    - 最前面添加数组
- Remove 删除
  - array.pop() method
    - 格式：array.pop() 移除数组中最后一个元素，并且返回该元素
    - 实例：
  - array.shift() method
    - 格式：array.shift() 移除数组中第一个元素，并且返回该元素
    - 实例：
  - array.splice() method
    - 格式：array.splice(fromIndex,removeCount) 移除元素并且替换元素
    - 实例：
      - 移除元素
      - 移除元素并且插入元素
  - Spread operator
- Empty 清空数组
  - array.length property
    - 格式：array.length =0,数组长度属性支持改写的，这样它会清空数组
    - 实例：
  - array.splice() method
    - 格式：array.splice(0) 这样也是清空所有数组
    - 实例：
- Fill 填充
  - array.fill() method
    - 格式：array.fill(value,fromIndex,toIndex) 默认是从0到array.length的填充
    - 实例：
    - 它不仅仅可以做填充，还可以初始化一个固定长度拥有初始值的代码
  - Array.from() function
    - 格式：Array.from() 也能够创建一个固定长度拥有初始值的数组
    - 实例：
- Flatten 展开
  - array.flat() method 将嵌套的数组元素展平并生成一个新数组
    - 格式：array.flat([depth]) 展开深度，默认不填展开所有
    - 实例：
      
      注：不影响原来数组，创建一个新的数组
- Sort 排序
  - array.sort() method
    - 格式：array.sort([compare])
      - compare(item1,item2) 是一个回调函数，需要我们定义并且返回-1 1 0 三选一
        如果是-1 那么 item1 就会排在item2 后面
        如果是1 那么item2 就会排在item1 后面
        如果是0 就不需要改变数组元素的位置
    - 实例：
      - 升序排序
      - 通过排序，让奇数放在偶数后面并且降序排序