【JavaScript】零碎知识点汇总

1. Symbol

Symbol（符号）是一种原始数据类型，它用于创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。例如：

const key = Symbol('key');
const obj = {
  [key]: 'value'
};
console.log(obj[key]); // 输出 'value'
1
2
3
4
5

2. BigInt

BigInt（大整数）是在 ECMAScript 2020 中引入的一种新的原始数据类型，它用于表示任意精度的整数。与 JavaScript 中的 Number 类型相比，BigInt 可以表示的整数范围更大，没有位数限制，可以安全地存储和操作大整数。BigInt 值以后缀 “n” 结尾。例如：

const bigIntValue = 1234567890123456789012345678901234567890n;
console.log(bigIntValue); // 输出 1234567890123456789012345678901234567890n
1
2

3. 统计字符串中字符的个数

// 常规写法：
let str = 'sfgsdfgsd'
let result = {}
for(let i = 0; i < str.length; i++) {
    if (result[str[i]]) {
        result[str[i]]++
    } else {
        result[str[i]] = 1
    }
}
console.log(result)
1
2
3
4
5
6
7
8
9
10
11

// 简洁写法：
let str = 'sfgsdfgsd'
let result = str.split('').reduce((a,b)=>(a[b]++ || (a[b]=1),a),{})
console.log(result)
1
2
3
4

4. 如何更好地二次封装 localStorage？

1. key 的命名
   同域名下 localStorage 可以进行共享，因此可能造成同域名下两个子项目的数据互相污染，所以可以给 key 加一个前缀或者后缀。
2. 时效性
   存储的时候加一个时间戳，等到取数据的时候本地系统时间戳和存储时的时间戳进行对比，确保数据未失效。
3. 将信息加密
   存储数据不希望被用户看到，可以将信息加密，取数据的时候需要解密。
4. 存储大小
   localStorage 只有 5M ，可以使用 indexedDB 这种本地存储方式进行存储；或者可以安装 sunshine-storage 等 npm 库进行处理。
5. 兼容服务端渲染
   声明一个对象去检测，模拟 localStorage。
6. 版本迭代容错
   key 的命名上加上版本号，方便版本迭代处理数据。

5. 使用 Set 求数组的并集、交集和差集

const arr1 = [33, 22, 55, 33, 11, 66]
const arr2 = [22, 55, 44, 88, 88, 99]
// 以下都去重
// 并集
const union = [...new Set([...arr1, ...arr2])]
console.log(union)
// 交集
const cross = [...new Set(arr1)].filter(item => arr2.includes(item))
console.log(cross)
// 差集
const diff = union.filter(item => !cross.includes(item))
console.log(diff)
1
2
3
4
5
6
7
8
9
10
11
12