hongyangwu

主题

Array ​

创建数组 ​

1. Array 构造函数 ​
  • 传入一个参数，且为数值，则创建数值长度的数组
  • 传入一个参数，不为数值。或传入多个参数。则创建包含传入参数的数组
js
new Array(5)     // [empty × 5]
new Array('5')   // ['5']
new Array(5, 5)  // [5, 5]
2. 字面量 ​
  • 在中括号中包含以逗号分隔的元素列表
  • 最后的值可以带有逗号
js
[1, 2]  // [1, 2]
[2, 3,] // [2, 3]
3. Array.from() ​
  • 将类数组结构转换为数组实例
  • 第一个参数：类数组对象，即任何可迭代的结构。domList、Map、Set 等
  • 第二个参数：映射函数，可直接改造数组的值，用法与 Array.from().map() 类似（可选）
  • 第三个参数：指定映射函数中 this 的值，但如果映射函数是箭头函数，则会取不到（可选）
js
const s = '123'

Array.from(s)              // ["1", "2", "3"]
Array.from(s, x => x ** 2) // [1, 4, 9]
Array.from(s, function(x){ return x ** this.n }, {n: 3}) // [1, 8, 27]
4. Array.of() ​
  • 把一组参数转换为数组
  • 解决 new Array() 留下的，不能创建包含一个数值的数组，这个问题
js
Array.of(3) // [3]
Array.of('red', 2, {}) // ['red', 2, {}]

空位与索引 ​

1. 空位：使用一串逗号来创建空位 ​
js
const arr = [1,,,,5]

空位在 ES5 和 ES6 表达含义不统一，所以不建议使用空位，一定要创建空位，可以使用值 undefined

2. 索引 ​
  • 通过中括号并提供相应值的数字索引，来获取或设置数组的值
  • 如果索引超出数组长度，则数组会自动扩充到到（索引+1）的长度
  • 改变数组长度( length )，会动态裁剪或扩充数组

valueOf() toString() join() ​

  • valueOf()：返回数组本身
  • toString()：返回数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串
  • join()：返回数组中每个值的等效字符串拼接而成的一个指定符号分隔的字符串
js
const arr = [1, 2, 3, 4, 5]
arr.valueOf()  // [1, 2, 3, 4, 5]
arr.toString() // "1,2,3,4,5"
arr.join("|")  // "1|2|3|4|5"

如果某一项为 null 或 undefined，则返回结果会以空字符串表示

检测数组 / 区别数组 ​

  1. instanceof

    js
    [] instanceof Array // true

  2. construcor

    js
    arr.constructor === Array; // true

  3. Object.prototype.toString

    js
    Object.prototype.toString.call(arr) === '[object Array]'; // true

  4. Array.isArray()（推荐）

    js
    Array.isArray(arr); // true

迭代器方法 ​

  • keys() 返回数组索引的迭代器
  • values() 返回数组元素的迭代器
  • entries() 返回索引/值对的迭代器
js
const arr = ['a', 'b', 'c']
arr.keys()    // [0, 1, 2]
arr.values()  // ['a', 'b', 'c']
arr.entries() // [[0, 'a'], [1, 'b'], [2, 'c']]

可以配合 for-of 、for-in 使用

js
for (const [index, value] of arr) {
    console.log(index, value)
}
// 0, 'a'
// 1, 'b'
// 2. 'c'

填充方法 fill() ​

向一个已有的数组填充全部或部分相同的值

  • 第一个参数：填充的数据
  • 第二个参数：开始填充的索引（可选）
  • 第三个参数：结束填充的索引，若无，则填充至末尾（可选）（填充不包括此索引）
  • 返回：填充后的数组，会改变原始数组
js
const arr = new Array(5).fill(0) // 【0, 0, 0, 0, 0】
arr.fill(3, 1, 3) // [0, 3, 3, 0, 0]

复制方法 copyWithin() ​

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

  • 第一个参数：复制后，开始填充的位置
  • 第二个参数：开始复制的索引，若无，则从 0 开始复制（可选）
  • 第三个参数：结束复制的索引，若无，则复制到末尾或第一个参数的位置（可选）（复制不包括此索引）
  • 返回：复制后的数组，会改变原始数组
js
let arr = null
function reset() {
	arr = Array.from(new Array(10), (value, index) => index) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}

reset()
arr.copyWithin(5) // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]

reset()
arr.copyWithin(3, 4, 6) // [0, 1, 2, 4, 5, 5, 6, 7, 8, 9]

栈和队列方法 ​

  • push()：接受任意数量的参数，并将他们添加到数组末尾，返回数组的最新长度
  • pop()：删除数组的最后一项，同时数组 length 减一，返回被删除的项
  • shift()：删除数组的第一项，同时数组 length 减一，返回被删除的项
  • unshift()：接受任意数量的参数，并将他们添加到数组的头部，返回数组的最新长度

均会改变原始数组

排序方法 ​

  • reverse()：将数组元素反向排列

    js
    [1, 2, 3].reverse() // [3, 2, 1]

  • sort()：每项调用其 toString() 方法，已从大到小的顺序排序。许多时候直接调用并不适用

    js
    [1, 5, 15].sort() // [1, 15, 5]
    • 参数：比较函数
    • 第一个参数应该排在第二个参数前面，则返回负值
    • 两个参数应该相等，则返回 0
    • 第一个参数应该排在第二个参数后面，则返回正值
    js
    [1, 5, 15].sort((a, b) => a - b) // [1, 5, 15]

均会改变原始数组

合并方法 concat() ​

  • 浅拷贝数组副本，把参数添加到数组副本末尾，返回数组副本。不会改变原始数组
  • 若参数不为数组，则直接添加到末尾
  • 若参数为数组，则会打平数组第一层，并把打平后的结果添加到末尾
js
[1, 2].concat(3, [4, [5, 6]]) // [1, 2, 3, 4, [5, 6]]

获取子数组方法 slice() ​

  • 创建一个包含全部或部分元素的新数组。不会改变原始数组
  • 第一个参数：返回元素的开始索引（包括）
  • 第二个参数：返回元素的结束索引（不包括），若不传，则直至末尾
js
[1, 2, 3, 4, 5].slice(1, 3) // [2, 3]

操作数组方法 splice() ​

  • 会改变原数组

  • 删除：传两个参数，要删除的第一个元素的位置、删除元素的数量，返回删除的元素

    js
    const arr = [1, 2, 3, 4, 5]
arr.splice(1, 2)   // [2, 3]
console.log( arr ) // [1, 4, 5]

  • 插入：传三个及以上参数，开始插入位置、0（不删除元素）、要插入的元素，返回删除的元素

    js
    const arr = [1, 2, 3, 4, 5]
arr.splice(5, 0, 6, 7)   // []
console.log( arr ) // [1, 2, 3, 4, 6, 7, 5]

  • 替换：传入三个及以上参数，开始替换位置、删除的元素数量、插入任意多个元素，返回删除的元素

    js
    const arr = [1, 2, 3, 4, 5]
arr.splice(2, 3, 2, 2, 2)   // [3, 4, 5]
console.log( arr ) // [1, 2, 2, 2, 2]

搜索方法 ​

1. 严格相等：使用 === 比较 ​
  • 参数：搜索的子元素。开始查找的位置（可选）
  • 返回
    1. indexOf()：从数组前头开始搜索，返回搜索元素的索引，没有找到则返回 -1
    2. lastIndexOf()：从数组前头开始搜索
    3. includes()：返回布尔值
2. 断言相等：可以自定义 ​
  • 参数：断言函数，其接受三个参数，元素、索引、数组本身。指定断言函数的 this 值（可选）
  • 返回
    1. find()：第一个匹配元素本身
    2. findIndex()：第一个匹配元素索引
js
const arr = [1, 2, 3, 4, 5]
arr.indexOf(3)                       // 2
arr.lastIndexOf(3)                   // 2
arr.includes(3)                      // true
arr.find(value => value === 3)       // 3
arr.findIndex(value => value === 3)  // 2

迭代方法 ​

均接受以下两个参数

  1. 以每一项为参数运行的函数
    • 数组元素、元素索引、数组本身
  2. 指定函数运行的 this 对象（可选）

但方法不同，返回值也不同

1. forEach() ​
  • 遍历数组
  • 不返回任何值
2. map() ​
  • 对每一项做映射
  • 把映射完后返回的每一项组成一个新数组，并返回
js
[1, 2, 3].map(item => item ** 2) // [1, 4, 9]
3. filter() ​
  • 筛选每一项
  • 把返回值为 true 的所有选组合成一个新的数组，并返回
js
[1, 2, 3].filter(item => item % 2 === 1) // [1, 3]
4. some() ​
  • 有一项满足条件则返回 true
js
[1, 2, 3].some(item => item === 2) // true
5. every() ​
  • 全部项都满足条件才返回 true
js
[1, 2, 3].some(item => item === 2) // false

函数内部不能用 break 和 continue

归并方法 ​

接受以下两个参数

  1. 对每一项都会运行的归并函数
    • 上一个归并值、当前项、当前项索引、数组本身
  2. 归并的初始值，不传则以包含第一项的数组作为初始值，并且第一次迭代从第二项开始

reduce() 和 reduceRight() 均返回归并后的结果

js
[1, 2, 3].reduce((total, item) => total + item, 0) // 6

Copyright © 2021-2024 hongyangwu