实用 JS 高程笔记:数组实例方法

122 阅读3分钟

本文归纳了 JavaScript 十四类常见数组实例方法:并、展、排、归;增、删、改、截;填、判、位、选;迭、转

并、展、排、归

合并方法 (concat & ...)

let arr = ["foo","bar"] let str = "baz" let morArr = ["baz", "mor"]

....concat() 方法

将值或数组并入原数组组成一个新数组(忽略二维数组结构)

  • ... 扩展操作符(常用)
    • let newArr = [...arr, str] // [foo, bar, baz]
    • let newArr = [...arr, ...morArr) // ["foo", "bar", "baz", "mor"]
  • .concat() 方法
    • let newArr = arr.concat(str) // ["foo", "bar", "baz"]
    • let newArr = arr.concat(morArr) // ["foo", "bar", "baz", "mor"]

Symbol.isConcatSpreadable

合并一个二维数组(保留二维数组结构)

  • morArr[Symbol.isConcatSpreadable] = false
  • arr.concat(morArr) 输出 ["foo", "bar", ["baz", "mor"]]

展平方法 (flat & flatMap)

数组的扩展 - ECMAScript 6入门 (ruanyifeng.com)

flat()

默认展平一层

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

flatMap()

相当于 map() + flat() ,但只能展开一层数组

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

排序方法 (sort & reverse)

let arr = [1, 0, 5, 10]

按 数值大小 升序排列 (ascend)

  • .sort((a, b) => a - b); // 0, 1, 5, 10

按 字符串值顺序 升序排列

  • .sort() // 0, 1, 10, 5

按 数值大小 逆序 (reverse)

  • .reverse() // 10, 5, 1,0

归并方法 (reduce)

求数组值的和

  • .reduce((prev, cur) => prev + cur) 从左往右加
  • .reduceRight((prev, cur) => prev + cur) 从右往左加

接收参数:

  • 回调函数
  • 归并初始值(可选)

增、删、改、截

pop() & push()

  • 移除并返回末位元素:
    • .pop()
  • 末位增加元素并返回新数组长度:
    • .push()

shift() & unshift()

  • 移除并返回首位元素:
    • .shift()
  • 首位增加元素并返回新数组长度:
    • .unshift()

slice()

不改变原数组,从原数组截取部分返回新数组

  • 截取第 4 位起之后的元素:
    • slice(4)
  • 截取第 4 位起至第 7 位前的元素:
    • slice(4, 7)
  • 获取末位元素:
    • .slice(-1)

splice()

改变原数组,返回移除元素

  • 从第一位起删除两个元素:
    • .splice(1, 2)
  • 从第二位插入两个元素:
    • .splice(2, 0, "foo", "bar") // 第二个参数为 0,即移除元素个数为 0,返回空数组
  • 替换第二位一个元素:
    • .splice(2, 1,"foo","bar")

填、判、位、选

填充方法 (fill & copyWithin)

fill()

  • 用 5 填充整个数组:
    • .fill(5)
  • 用 5 填充第三位之后的值:
    • .fill(5, 3)
  • 用 5 填充第三位起,第七位前的值:
    • .fill(5, 3, 7)
  • 用 5 填充倒数第四位起,末位前的值:
    • .fill(5, -4, -1)

copyWithin()

let arr = [0,1,2,3,4,5]

  • 用第 3 位前的元素从第 3 位起填充数组
    • .copyWithin(3) // [0,1,2,0,1,2]
  • 用第 3 位起的元素从第 0 位起填充数组
    • .copyWithin(0, 3) // [3,4,5,3,4,5]
  • 用首位至第 3 位前的元素从第 4 位起填充数组
    • .copyWithin(4, 0, 3) // [0,1,2,3,0,1]

判断方法 (includes, some, every)

返回 true/ false

includes()

判断某元素是否 包含 在数组内(严格相等/全等比较)

some()

判断数组内的 某些 元素值是否满足特定条件

every()

判断数组内的 每一 元素值是否满足特定条件

查找元素位置 (indexOf, lastIndexOf, findIndex)

indexOf()

返回某元素在数组首先出现的位置,不存在返回 -1

lastIndexOf()

返回某元素在数组最后出现的位置,不存在返回 -1

findIndex()

返回符合给定条件元素首先出现的位置,不存在返回 -1

筛选查找元素 (filter, find)

find()

找出满足小于 0 的第一个元素,并返回该元素

  • find(el => el < 0)

filter()

筛选满足小于 0 的所有元素,并返回含这些元素的数组

  • filter(el => el < 0)

迭、转

循环迭代方法

  • .map()
  • .forEach()
  • for (...of...)

数组或对象转字符串方法

  • .toString()
  • .valueOf()
  • .join(",")
  • .toLocaleString()

image.png