【JS】【基础】Array相关API

2021-08-25 本文已影响0人今夜相思又几许

数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组

1. Array.prototype.concat(array|value...)

方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
不会改变原数组
参数：array[] | value....多个
返回：添加元素后的新数组

2. Array.prototype.copyWithin(targetIndex, startIndex, endIndex)

从 startIndex 至 endIndex 复制元素到 targetIndex 处开始。
会改变原数组，不会改变长度
参数： targetIndex, startIndex, endIndex
返回：已经改变后的原数组

{
  const list = [1, 2, 3, 4, 5, 6]
  console.log(list.copyWithin())
  console.log(list.copyWithin(0, 2)) // [3, 4, 5, 6, 5, 6]
  // 需求：把前两个挪动到最后
  const list2 = list.copyWithin(list.length - 2, 0, 2) // [3, 4, 5, 6, 3, 4]
  console.log(`原数组`, list)
  console.log(`挪动后数组`, list2)
}

3. Array.prototype.entries()

将数组转化为 Array iterator
不会改变原数组

4. Array.prototype.every(v=>boolean)

判断数组中 所有元素都满足 条件
不会改变原数组
参数：Function v=>boolean
返回：boolean
注意：被检测的是空数组则返回 true

5. Array.prototype.fill(value, startIndex, endIndex)

将 value 填充到数组 startIndex 至 endIndex 元素
会改变原数组
参数：value=undefined, startIndex=0, endIndex = length
返回：已被修改的原数组
注意：参数为空，数组中所有元素被填充为了 undefined

6. Array.prototype.filter()

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
不会改变原数组
参数： function: v=>boolean
返回：满足条件的数组元素新数组

7. Array.prototype.find()

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
不会改变原数组
参数： function: v=>boolean
返回：满足条件的第一个元素 | undefine

8. Array.prototype.findIndex()

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
不会改变原数组
参数：function: v=>boolean
返回：元素在数组中的索引 | -1

9. Array.prototype.flat()

数组扁平化，按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
不会改变原数组
参数： depth: number = 1 展开的层级，默认值为 1
返回：新数组
数组扁平化实现方法

递归 + for + concat

function flatten(list = []) {
  let result = []
  for (let i = 0; i < list.length; i++) {
    const item = list[i]
    if (Array.isArray(item)) {
      result = result.concat(flatten(item))
    } else {
      result.push(item)
    }
  }
  return result
}

递归 + for + push

function flatten(list = []) {
  let result = []
  for (let i = 0; i < list.length; i++) {
    const item = list[i]
    if (Array.isArray(item)) {
      result.push(...flatten(item))
    } else {
      result.push(item)
    }
  }
  return result
}

while 循环遍历

function flatten(list = []) {
  while (list.some((v) => Array.isArray(v))) {
    list = [].concat(...list)
  }
  return list
}

递归 + reduce

function flatten(list = []) {
  return list.reduce((res, item) => {
    return res.concat(Array.isArray(item) ? flatten(item) : item)
  }, [])
}

中间变量暂存

function flatten(list = []) {
  const stack = [...list]
  const result = []
  while (stack.length) {
    const first = stack.shift()
    Array.isArray(first) ? stack.unshift(...first) : result.push(first)
  }
  return result
}

10. Array.prototype.flatMap()

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
不会改变原数组
参数：callback(function(current, index, array){}), thisArg
返回：新数组

11. Array.prototype.forEach()

对数组的每个元素执行一次给定的函数。
不会改变原数组
参数：function(ele, index, array){}
返回：undefined
注意：forEach 不会跳出循环，如果需要跳出循环，可使用 every、some、find、findIndex

12. Array.from()

一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
参数：类似数组|可迭代对象
返回：新数组对象

{
  // 需求：获取html所有节点
  const elements = document.querySelectorAll('*')
  console.log(Array.isArray(elements)) // false 得到的并不是一个真的数组
  console.log(elements) //
  const elementsArray = Array.from(elements) // 将类数组转换为数组
  console.log(Array.isArray(elementsArray)) // true
  console.log(elementsArray)
}

13. Array.prototype.includes()

方法用来判断一个数组是否包含一个指定的值
不会改变原数组
参数：value
返回：boolean

14. Array.prototype.indexOf()

方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
不会改变原数组
参数：value, fromIndex = 0
返回：index | -1
注意：如果 fromIndex 是个负值，则 fromIndex = this.length + fromIndex

15. Array.isArray()

用于确定传递的值是否是一个 Array。
参数：value 需要检测的值
返回：boolean

16. Array.prototype.join()

方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
不会改变原数组
参数：(separator?=',')
返回：string

17. Array.prototype.keys()

返回一个包含数组中每个索引键的 Array Iterator 对象。
不会改变原数组
参数：无
返回：Array Iterator 对象

18. Array.prototype.values()

方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
不会改变原数组
参数：无
返回：Array iterator 对象

19. Array.prototype.lastIndexOf()

从数组的后面向前查找，从 fromIndex 处开始。
不会改变原数组
参数：(value?, fromIndex?=this.length-1)
返回：1|-1
注意：如果 fromIndex > 0，则会从索引往前查找；如果 fromIndex < 0，fromIndex = this.length + fromIndex

20. Array.prototype.map()

方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
不会改变原数组
参数：(function(v,index, array){})
返回：新生成的数组

21. Array.of()

方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
参数：(value...)
返回：数组实例

22. Array.prototype.pop()

数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
会改变数组
参数：无
返回：被删除的元素

23. Array.prototype.push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
会改变数组
参数：(element....)
返回：数组最新长度

24. Array.prototype.reduce()

对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回
不会改变原数组
参数：(callback(res, item, index, array), initialValue)
返回：新值 initialValue

25. Array.prototype.reverse()

颠倒数组
会改变原数组
参数：无
返回：调到后的新数组

26. Array.prototype.shift()

方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
会改变原数组
参数：无
返回：被删除的元素

27. Array.prototype.slice()

方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）。原始数组不会被改变。
不会改变原数组
参数：(begin 包含，end 不包含)
结果：新数组的拷贝
类似于 string.slice(start, end)

28. Array.prototype.some()

方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。
不会改变原数组
参数：callback((ele, index, array)=>{}): condition
返回：boolean
注意：空数组在任意情况下都返回 false

29. Array.prototype.sort()

数组排序
会改变原数组
参数：((v1,v2)={})
返回：排序后的原数组
注意：参数返回-1 升序；1 降序

30. Array.prototype.splice()

方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
会改变原数组
参数：(begin?=0, count?, values)
返回：被删除的元素数组

31. Array.prototype.toString()

Array 对象覆盖了 Object 的 toString 方法。对于数组对象，toString 方法连接数组并返回一个字符串，其中包含用逗号分隔的每个数组元素。
不会改变原数组
参数：无
返回：字符串，用,分割

32. Array.prototype.unshift()

方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
会改变原数组
参数：value...
返回：number: 最新数组的长度