5 个你不知道的 JS 数组技巧

184 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情


看完本文,你将学到以下知识点,并且含有详细解释。

  • 快速生成 26 个字母
  • 生成指定范围的数组
  • 去除数组中无效值
  • 比较两个数组中的元素是否完全相同
  • 获取数组中某个元素的数量

1. 快速生成 26 个英文字母

大写字母版:

const letters = Array(26)
  .fill('')
  .map((e, i) => String.fromCharCode('A'.charCodeAt(0) + i))
  .join('')
console.log(letters)
// ABCDEFGHIJKLMNOPQRSTUVWXYZ

解释:

  1. Array(26).fill('') 创建长度为 26 的数组,使用空串 '' 填充,因为 map 无法遍历空 empty 值,所以需要其他值填充。
  2. map((e, i)) 对数组中的元素进行映射操作,其中第二个参数 i 是数组索引,从 0 开始。
  3. String.fromCharCode() 是将 UTF-16 编码的单元序列转换成相应的字符串。例如 65-90A-Z97-122a-zchr.charCodeAt(0) 是返回 chr 第一个字符的 UTF-16 编码序列。所以这里是先获取 A 的编码序列,然后逐渐自增,得到 A-Z

小写字母版:

const letters = Array(26)
  .fill('')
  .map((e, i) => String.fromCharCode('a'.charCodeAt(0) + i))
  .join('')
console.log(letters)
// abcdefghijklmnopqrstuvwxyz

2. 生成指定范围的数组

例如,range(2, 10) 将生成: [2, 3, 4, 5, 6, 7, 8, 9],范围是 前开后闭

const range = (a, b) =>
  Array(b - a)
    .fill('')
    .map((e, i) => i + a)

console.log(range(2, 10))
// [2, 3, 4, 5, 6, 7, 8, 9]

解释:首先根据要求创建长度为 b-a 的数组,然后填充 ''(防止map遍历不到)。利用 map((e, i)=>{}) 的回调函数的第二个参数 i 的妙用。

3. 去除数组中 falsy

falsy,不只是指 false,是指能够通过 Boolean() 转换后的值为 false 的值类型,例如 false0''nullundefinedNaN 等等。

arr = arr.filter(Boolean)

解释:arr.filter(callback) 接收一个回调函数,这个回调函数会对数组中的元素一一执行,而 Boolean() 是一个构造函数,所以能够过滤掉所有 falsy 的值。

4. 比较两个数组中的元素是否完全相同

例如以下例子,直接使用 === 或者 == 都是无效的。

let a = [1, [2, 3], 4, [5]]
let b = [1, [2, 3], 4, [5]]

巧用 JSON.stringfy 实现:

const arrayEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b)

解释:JSON.stringify(arr) 会将数组转换字符串,字符串比较是按照对于位置字符比较的。

使用 Array.prototype.toString() 实现:

const arrayEqual = (a, b) => a.toString() === b.toString()

解释:数组的 toString() 会将数组拍平,变为类似 '1,2,3,4,5 的形式。

5. 获取数组中某个元素的数量

const counter = (arr, chr) => 
    arr.reduce((pre, cur) => (cur === chr ? pre + 1 : pre), 0)

counter(['a', 'b', 'c', 'c', 'c'], 'c') // 3