前端碎知识点

1 统计字符串中每个字符出现的频率

const str = 'fgasdfadfdasd';const result = str.split('').reduce((a, b) => {if (a[b]) {a[b]++;} else {a[b] = 1;}return a;
}, {});const resultNew = str.split('').reduce((a, b) => {// undefined++，就是NaNa[b]++ || (a[b] = 1);return a;
}, {});const resultNew2 = str.split('').reduce((a, b) =>(a[b]++ || (a[b] = 1), a), {});// { f: 3, g: 1, a: 3, s: 2, d: 4 }

2 类型转化

const res = ++[[]][+[]] + [+[]];
// 使用优先级最低的进行分割，优先级最低的是 + 1. 分解
++[[]][+[]] 
+
[+[]] 2. 分解 ++
++   [[]][+[]] 
+
[+[]] 3. 计算 [[]][+[]] 
[[]]，创建了数组，数组只有一个元素[]
+[]，首先调用[].valueOf()，得到的结果还是[]；
+[]，接着调用[].toString()，得到的结果是''；
+[]，最终结果为 0；
表达式相当于 [[]][0]，即[]4. 计算 ++[]
结果为1；5. 计算 [+[]]
+[]为0， [+[]]为[0]6. 最终结果
最终结果变为 1 + [0]
[0]转化为'0'，最终结果是'10'；

3 复合属性

backgroud属于复合属性，包括url背景，尺寸等等；
如果在关闭背景closed样式中直接更改backgroud，那么之前的backgroud样式将被全部覆盖；

正确的做法：只更改backgroud-img样式，其他样式正常使用；

正常背景
<div class="head-music"></div>
.head-music {backgroud: url(../asset/music.png)width: 30px;height: 30px;
}关闭背景
<div class="head-music closed"></div>
.head-music.closed {backgroud: url(../asset/closed.png);
}正确关闭背景
<div class="head-music closed"></div>
.head-music.closed {backgroud-image: url(../asset/closed.png);
}

4 算法

给定一个仅包含数字2-9的字符串，返回所有它能表示的字母组合；答案可以按任意顺序返回。
给出数字到字母的映射如下：
2：abc
3：def
4：ghi
5：jkl
6：mno
7：pqrs
8：tuv
9：wxyz

function _compose(arr1, arr2) {let r = []; // 组合结果if (arr1.length === 0) return arr2;if (arr2.length === 0) return arr1;for (let i = 0; i < arr1.length; i++) {for (let j = 0; j < arr2.length; j++) {r.push(arr1[i] + arr2[j]);}}return r;
};const keyboardMap = (digits) => {let result = [];const map = [, , 'abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz'];for (let i = 0; i < digits.length; i++) {result = _compose(result, map[digits[i]]);}return result;
}const res = keyboardMap('2345');
console.log('===>res', res);

5 Promise

Promise调用then方法，会产生新的promise

Promise.resolve().then(() => {console.log(0);return Promise.resolve(4);}).then((res) => {console.log('res', res);});Promise.resolve().then(() => {console.log(1);}).then((res) => {console.log('===>res', res);console.log(2);}).then(() => {console.log(3);}).then(() => {console.log(5);}).then(() => {console.log(6);});// 0
// 1
// ===> res undefined
// 2
// 3
// res 4
// 5
// 6