一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情。
看完本文,你将学到以下知识点,并且含有详细解释。
- 快速生成 26 个字母
- 生成指定范围的数组
- 去除数组中无效值
- 比较两个数组中的元素是否完全相同
- 获取数组中某个元素的数量
1. 快速生成 26 个英文字母
大写字母版:
const letters = Array(26)
.fill('')
.map((e, i) => String.fromCharCode('A'.charCodeAt(0) + i))
.join('')
console.log(letters)
// ABCDEFGHIJKLMNOPQRSTUVWXYZ
解释:
Array(26).fill('')创建长度为 26 的数组,使用空串''填充,因为map无法遍历空empty值,所以需要其他值填充。map((e, i))对数组中的元素进行映射操作,其中第二个参数i是数组索引,从0开始。String.fromCharCode()是将 UTF-16 编码的单元序列转换成相应的字符串。例如65-90是A-Z,97-122是a-z。chr.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 的值类型,例如 false、0、''、null、undefined、NaN 等等。
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