javascript - 数组常用方法总结(一)

数组常用方法感兴趣的可以查看MDN文档里面很细Array - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

简单对这些方法进行分类 :

• 创建数组 : Array.from , Array.of
• 迭代器 : keys , values, entries
• 复制和填充 : copyWithin, fill
• 转换方法 : toLocaleString, toString
• 数组的增加和删减 : push, pop, shift, unshift, concat,
• 排序方法 : reverse, sort
• 获取数组索引 : indexOf, lastIndexof, findIndex
• 遍历方法 : forEach, filter, map, some, every, find, reduce
• 判断是否是数组 : Array.isArray, instanceof()
• 扁平化数组 :flat, reduce

接下来一一说明 : 

一. 创建数组 

1. Array.from 

用于将伪数组结构转换为真数组,也就是数组的实例 . 

参数 : 1. 伪数组结构(可以是任意可迭代的结构包括迭代器, 字符串等等)  2. 映射函数

    const arr = {
      0: 1,
      1: 2,
      2: 3,
      3: 4,
      length: 4
    }
    const res = Array.from(arr, item => item ** 2) //  [1, 4, 9, 16]
    const strArr = Array.from('abcde') //  ['a', 'b', 'c', 'd', 'e']

2. Array.of

用于将一组参数转换为数组, 换句话说就是把你传的东西装在数组中输出出来

    const res = Array.of(1, 2, 3123, 'a', 'c', [], {})
    console.log(res);  // [1, 2, 3123, 'a', 'c', Array(0), {…}]

二. 迭代器

数组的原型上暴露了三个方法可以访问数组的迭代器 , keys方法返回数组索引的迭代器, values方法返回数组元素的迭代器, entries方法返回数组索引对应值的迭代器, 可以通过Array.from转成数组看看长啥样

    const arr = [1, 2, 3, 4, 5]
    const keysArr = Array.from(arr.keys())
    const entriessArr = Array.from(arr.entries())
    const valuesArr = Array.from(arr.values())

 最终的输出结果就是下图

 三. 复制和填充

1. copyWithin 复制

MDN给出的概念 : 此方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

参数 : 1. 复制基底索引(复制到哪)  2. 开始索引(从哪开始复制)  3. 结束索引(到哪结束)

    const arr = ['a', 'b', 'c', 'd', 'e']
    const arr2 = ['a', 'b', 'c', 'd', 'e']
    // 用大白话来解释下面的操作 : 将数组中的第一项到第三项不包括第三项 => b c 插入到索引为 0的位置 把原先的 a b 就改成了 b c 
    console.log(arr.copyWithin(0, 1, 3)); // ['b', 'c', 'c', 'd', 'e']
    console.log(arr); // ['b', 'c', 'c', 'd', 'e']
    // copyWithin 方法会修改原数组
    // 如果不希望修改原数组
    console.log([...arr2].copyWithin(0, 1, 3)); // ['b', 'c', 'c', 'd', 'e']
    console.log(arr2); // ['a', 'b', 'c', 'd', 'e']

1. fill 填充

fill方法将一个值填充到数组的某个位置

参数: 1. 填充值  2. 填充的开始位置(索引) 3.填充的结束位置(索引)

解释一下 : 创建了一个空数组但是它的长度为0, 于是修改了它的的长度, 将10填充到数组中的索引为0到索引为9. 

    const arr = []
    arr.length = 10
    console.log(arr.fill(10, 0, 10)); // [10, 10, 10, 10, 10, 10, 10, 10, 10, 10]

再举一个例子, 创建一个0-100的数组

    const arr = []
    arr.length = 100
    for (let i = 0; i < arr.length; i++) {
      arr.fill(i + 1, i, i + 1)
    }
    console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]

剩下的明天再说.........