JavaScript 数组(Arrays),一份权威的备忘清单 – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第20节,你可以查看该手册的完整目录。

随着时间的推移,JavaScript 数组有了越来越多的功能,有时候想知道何时应该使用何种方法是个很棘手的问题。本节旨在解释您应该在什么场景下使用什么方法,截至2018年。

初始化数组

const a = []
const a = [1, 2, 3]
const a = Array.of(1, 2, 3)
const a = Array(6).fill(1) // 初始化一个包含6项元素的数组,每项使用 1 填充,即:[1, 1, 1, 1, 1, 1]

不要使用旧语法(只是将它用于类型化数组)

const a = new Array() //never use
const a = new Array(1, 2, 3) //never use

获取数组长度

const l = a.length

使用 every 迭代数组

a.every(f)

迭代 a 直到 f() 返回 false

使用 some 迭代数组

some() 方法测试数组中的某些元素是否通过由指定函数的真值测试。

a.some(f)

迭代 a 直到 f() 返回 true

遍历数组并返回函数结果组成的新数组

const b = a.map(f)

遍历 a,返回每一个 a 元素执行 f() 产生的结果数组。

过滤数组

const b = a.filter(f)

遍历 a,返回每一个 a 元素执行 f() 都为 true 的新数组。

Reduce

a.reduce((accumulator, currentValue, currentIndex, array) => {
  //...
}, initialValue)

reduce() 对数组中每一项都调用回调函数,并逐步计算计算结果。如果 initaiValue 存在,accumulator 在第一次迭代时等于这个值。

示例:

;[1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator * currentValue
}, 1)

// iteration 1: 1 * 1 => return 1
// iteration 2: 1 * 2 => return 2
// iteration 3: 2 * 3 => return 6
// iteration 4: 6 * 4 => return 24

// return value is 24

forEach

ES6 新增。

a.forEach(f)

遍历 a 执行 f,中途不能停止。

示例:

a.forEach(v => {
  console.log(v)
})

for..of

ES6 新增。

for (let v of a) {
  console.log(v)
}

for

for (let i = 0; i < a.length; i += 1) {
  //a[i]
}

遍历 a,可以通过 return 或者 break 中止循环,通过 continue 跳出循环。

@@iterator

ES6 新增。

获取数组迭代器的值:

const a = [1, 2, 3]
let it = a[Symbol.iterator]()

console.log(it.next().value) //1
console.log(it.next().value) //2
console.log(it.next().value) //3

.entries() 返回一个键值对的迭代器:

let it = a.entries()

console.log(it.next().value) //[0, 1]
console.log(it.next().value) //[1, 2]
console.log(it.next().value) //[2, 3]

.keys() 返回包含所有键名的迭代器:

let it = a.keys()
console.log(it.next().value) //0
console.log(it.next().value) //1
console.log(it.next().value) //2

数组结束时 .next() 返回 undefined。你可以通过 it.next() 返回的 value, done 值检测迭代是否结束。当迭代到最后一个元素时 done 的值始终为 true

在数组末尾追加值

a.push(4)

在数组开头添加值

a.unshift(0)
a.unshift(-2, -1)

移除数组中的值

删除末尾的值

a.pop()

删除开头的值

a.shift()

删除任意位置的值

a.splice(0, 2) // 删除前2项元素
a.splice(3, 2) // 删除从索引 3 开始的 2 个元素

不要使用 remove() ,因为它会留下未定义的值。

移除并插入值

a.splice(2, 3, 2, 'a', 'b') 
// 删除从索引 2 开始的 3 个元素, 
// 并且从索引 2 开始添加 2 元素('a', 'b')

合并多个数组

const a = [1, 2]
const b = [3, 4]
a.concat(b) // 1, 2, 3, 4

查找数组中特定元素

ES5 写法:

a.indexOf()

返回匹配到的第一个元素的索引,元素不存在返回 -1

a.lastIndexOf()

返回匹配到的最后一个元素的索引,元素不存在返回 -1

ES6 写法:

a.find((element, index, array) => {
  //return true or false
})

返回符合条件的第一个元素,如果不存在返回 undefined。

通常这么用:

a.find(x => x.id === my_id)

上面的例子会返回数组中 id === my_id 的第一个元素。

findIndex 返回符合条件的第一个元素的索引,如果不存在返回 undefined

a.findIndex((element, index, array) => {
  //return true or false
})

ES7 写法:

a.includes(value)

如果 a 包含 value 返回 true

a.includes(value, i)

如果 a 从位置 i 后包含 value 返回 true

获取数组的一部分

a.slice()

数组排序

按字母顺序排序(按照 ASCII 值 – 0-9A-Za-z):

const a = [1, 2, 3, 10, 11]
a.sort() //1, 10, 11, 2, 3

const b = [1, 'a', 'Z', 3, 2, 11]
b = a.sort() //1, 11, 2, 3, Z, a

自定义排序

const a = [1, 10, 3, 2, 11]
a.sort((a, b) => a - b) //1, 2, 3, 10, 11

逆序

a.reverse()

数组转字符串

a.toString()

返回字符串类型的值

a.join()

返回数组元素拼接的字符串。传递参数以自定义分隔符:

a.join(',')

复制所有值

const b = Array.from(a)
const b = Array.of(...a)

复制部分值

const b = Array.from(a, x => x % 2 == 0)

将值复制到本身其它位置

const a = [1, 2, 3, 4]
a.copyWithin(0, 2) // [3, 4, 3, 4]
const b = [1, 2, 3, 4, 5]
b.copyWithin(0, 2) // [3, 4, 5, 4, 5]
// 0 是拷贝的值插到哪里
// 2 从哪里开始拷贝
const c = [1, 2, 3, 4, 5]
c.copyWithin(0, 2, 4) // [3, 4, 3, 4, 5]
//4 是结束索引

拷贝几个元素,就从插入位置开始替换几个元素。


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(0) 打赏
未经允许不得转载:WEB前端开发 » JavaScript 数组(Arrays),一份权威的备忘清单 – JavaScript 完全手册(2018版)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    拓展运算符…应该也可以合并数组 let arr = […[],…[]]

    Y丶2周前 (12-03)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏