前端碎知识点

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++，就是NaN
  a[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

由于return Promise.resolve(4)；返回的是Promise，会去调用这个promise的then方法；
将返回的Promise.resolve(4)叫做p4
p4.then(() => 完成p0) ；在p4里面完成p0，这件事会放在微队列进行；

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