开发中经常遇到的JavaScript问题整理(超实用)
共 24816字，需浏览 50分钟
·
2021-04-04 05:29
作者 @chengyuming
原文地址：https://chengyuming.cn/views/basis/issue.html
获取一个月有多少天
今天遇到一个需求，已知月份，得到这个月的第一天和最后一天作为查询条件查范围内的数据
new Date(year, month, date, hrs, min, sec)，new Date 可以接受这些参数创建一个时间对象
其中当我们把 date 设置为 0 的时候，可以直接通过 getDate() 获取到最后一天的日期然后得到我们要的最后一天
new Date(2019, 12, 0).getDate(); // 31
new Date(2018, 2, 0).getDate(); // 28
// 根据这个我们可以得到一个方法
function getMonthLength(month) {
const date = new Date(month);
const year = date.getFullYear();
// 月份是从 0 开始计算的
const _month = date.getMonth() + 1;
return new Date(year, _month, 0).getDate();
}
关于函数的 length 属性
360 面试过程遇到一个很有趣的问题，是关于函数的 length 属性的，题简写如下
(() => 1).length === 0; // 输出什么
我所理解的拥有 length 的对象一般都是数组或者类数组对象，或者定义了 length 属性的对象，所以我回答说这个应该是 false 吧，后来面试告诉我函数是有 length 属性的，函数的 length 属性就是函数参数的个数，瞬间我恍然大悟，函数的参数就是 arguments，而 arguments 也是一个类数组对象所以他是有 length 属性的
// so
(() => 1).length === 0; // 输出 true
(a => a).length; // 输出 1
数组中字符串键值的处理
在 JavaScript 中数组是通过数字进行索引，但是有趣的是他们也是对象，所以也可以包含 字符串 键值和属性，但是这些不会被计算在数组的长度（length）内
如果字符串键值能够被强制类型转换为十进制数字的话，它就会被当做数字索引来处理
const arr = [];
arr[0] = 1;
arr['1'] = '嘿嘿';
arr['cym'] = 'cym';
console.log(arr); // [1, '嘿嘿', cym: 'cym']
console.log(arr.length); // 2
void 运算符
undefined 是一个内置标志符，它的值为 undefined（除非被重新定义过），通过 void 运算符即可得到该值
在 void 之后的语句或表达式都将返回 undefined。void 并不会改变表达式的结果，只是让表达式不返回值
void true; // undefined
void 0; // undefined
void 运算符在其他地方也可以派上用场，比如不让表达式返回任何结果。
// 该函数不需要有任何返回结果
function doSomething(sign) {
if (!sign) {
return void setTimeout(doSomething, 100);
}
}
// 或许你经常向下面一样这么写
function doSomething(sign) {
if (!sign) {
setTimeout(doSomething, 100);
return;
}
}
关于 JSON.stringify
JSON.stringify 和 toString() 效果基本相同，只不过序列化的结果总是字符串
JSON.stringify(42); // "42"
JSON.stringify('42'); // ""42""（含有双引号的字符串）
JSON.stringify(null); // "null"
JSON.stringify(true); // "true"
不安全的 JSON 值
所有安全的 JSON 值都可以使用 JSON.stringify 序列化，不安全的 JSON 值有：undefined、function、symbol 和 循环引用。JSON.stringify
在对象中遇到这些不安全的 JSON 值的时候会自动将其忽略，在数组中遇到则会返回 null，以保证数组成员位置不变
JSON.stringify(undefined); // null
JSON.stringify(function () {}); // null
JSON.stringify([1, undefined, 2, function () {}, 3]); // "1, null, 2, null, 3"
JSON.stringify({ a: 2, b: function () {} }); // "{"a":2}"
toJSON 方法
如果对象中定义了 toJSON 方法，那么在 JSON 序列化的时候优先调用该方法，主要是为了处理循环引用的时候，我们让其返回一个合理的值
也就是说 toJSON 方法应该返回一个能够被字符串安全化的 JSON 值
const o = {
a: 'cym',
toJSON() {
return { c: 'b' };
},
};
JSON.stringify(o); // {"c":"b"}
JSON.stringify 的第二个参数
我们可以向 JSON.stringify 中传递一个可选参数 replacer，他可以书数组也可以书函数，用来指定对象序列化的时候哪些属性应该被处理，哪些应该被排除，和 toJSON 很像
当 replacer是一个数组时，那么他必须是一个字符串数组，其中包含序列化要处理的对象的属性名称，除此之外的属性就会被忽略
const obj = {
a: 42,
b: 30,
c: 100,
};
JSON.stringify(obj, ['a', 'c']); // {"a":42,"c":100}
当 replacer是一个函数时，他会对对象本身调用一次，然后在对对象中的每个属性各调用一次。每次传递两个参数（对象的键和值）。如果要忽略某个键就返回undecided，否则就返回指定的值
const obj = {
a: 42,
b: 30,
c: 100,
};
JSON.stringify(obj, (k, v) => {
// 注意：第一次 k 是 undefined，v 是原对象
if (k !== 'c') return v;
}); // "{"a":42,"b":30}"
一元运算符
我们都知道一个字符串转换为数字，可以使用 + "12" 转换为数字 12，也可以使用 -，这样的 +、- 是一元运算符，这样将数字转换为字符串的方法属于显示转换
- 运算符还有反转符号位的功能，当然不能把一元操作符连在一起写，不然会变成 --，当做递减运算符号来计算了，我们可以理解为 - 运算符出在单数次数会转符号位，出现双次数会抵消反转，比如说 1 - - 1 === 2
# 这是 js 代码哦，不是 python
1 + - + - + - 1 # 0
1 - - 1 # 2
1 - - - 1 # 0
字位反转操作符 ~
~ 返回 2 的补码，~x 大致等同于 -(x+1)
~42; // -(42+1) ===> -43
在 -(x+1) 中唯一能够得到 0（或者严格来说时候 -0）的 x 值是 -1，也就是说 ~ 和一些数字在一起会返回一个假值 0，其他情况下则返回真值
-1 是一个 哨位值，哨位值是那些在各个类型中被赋予了特殊含义的值。在 C 语言中 -1 代表函数执行失败，大于等于 0 的值代表函数执行成功
比如在 JavaScript 中字符串的 indexOf 方法也遵循这一惯例，该方法在字符串中搜索指定的字符串，如果找到就返回该子字符串所在的位置，否则返回 -1
~ 的用途
我们知道在 JavaScript 中假值有：undefined、null、false、+0、-0、NaN、''，其他都为真值，所以负数也是真值，那么我们就可以拿着 ~ 和 indexOf 一起检结果强制类型转换为 真/假 值
const str = 'hello world';
~str.indexOf('lo'); // -4，真值
if (~str.indexOf('lo')) {
// true
// 找到匹配
}
~str.indexOf('ol'); // 0，假值
!~str.indexOf('ol'); // true
if (!~str.indexOf('ol')) {
// true
// 没有找到匹配
}
~ 要比 >=0 和 == -1 更简洁
字位截除
我们经常使用 ~~ 来截取数字值的小数部分，以为这是和 Math.floor 效果是一样的，实际上并非如此
~~ 中第一个 ~ 执行 ToInt32 并反转字位，然后第二个在进行一次字位反转，就是将所有的字位反转回原值，最后得到的结果仍是 ToInt32 的结果
~~ 只适用于 32 位的数字，更重要的是他对负数的处理与 Math.floor 不同，所以使用时要多加注意
Math.floor(1.9); // 1
~~1.9; // 1
// 操作负数
Math.floor(-1.9); // -2
~~-1.9; // -1
~~x 能将值截除为一个 32 位的整数，x | 0 也可以，而且看起来更简洁哦，不过出于对运算符优先级的考虑，我们更倾向于使用 ~~x
~~1.9; // 1
1.9 | 0; // 1
~~-1.9; // -1
-1.9 | 0; // -1
给定一组 url 实现并发请求
原题是这样的：给定一组 url，利用 js 的异步实现并发请求，并按顺序输出结果
Promise.all
首先我们可以想到的是利用 Promise.all 来实现，代码实现如下
const urls = ['./1.json', './2.json', './3.json'];
function getData(url) {
// 返回一个 Promise 利用 Promise.all 接受
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.response);
}
}
};
xhr.open('GET', url, true);
xhr.send(null);
});
}
function getMultiData(urls) {
// Promise.all 接受一个包含 promise 的数组，如果不是 promise 数组会被转成 promise
Promise.all(urls.map(url => getData(url))).then(results => {
console.log(results);
});
}
不用 Promise
原题是不用 Promise 来实现，我们可以写一个方法，加个回调函数，等数据全部回来之后，触发回调函数传入得到的数据，那么数据全部回来的就是我们要考虑的核心问题，我们可以用个数组或者对象，然后判断一下数组的 length 和传入的 url 的长度是否一样来做判断
使用对象做映射
const urls = ['./1.json', './2.json', './3.json'];
function getAllDate(urls, cd) {
const result = {};
function getData(url, idx) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
result[idx] = xhr.response;
// 如果两者 length 相等说明都请求完成了
if (Object.keys(result).length === urls.length) {
// 给对象添加length属性，方便转换数组
result.length = urls.length;
cd && cd(Array.from(result));
}
}
}
};
}
// 触发函数执行
urls.forEach((url, idx) => getData(url, idx));
}
// 使用
getAllDate(urls, data => {
console.log(data);
});
使用数组实现
和上面的基本思路差不多，不过这次换成了数组，也可以给个信号量来做判断
function getGroupData(urls, cb) {
const results = [];
let count = 0;
const getData = url => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
results.push(xhr.response);
if (++count === urls.length) {
cb && cb(results);
}
}
}
};
xhr.open('GET', url, true);
xhr.send(null);
};
urls.forEach(url => getData(url));
}
getGroupData(urls, data => {
console.log(data);
});
类型转换问题
原题：如何让 (a == 1 && a == 2 && a == 3) 的值为 true?
这个问题考查的数据类型转换，== 类型转换有个基本规则
NaN与任何值都不相等，包括自己本身undefined与null相等(==)，其他都不等对象与字符串类型做比较，会把对象转换成字符串然后做比较 其他类型比较都要转换成 数字做比较
那么这个问题我们重写 toString 或者 valueOf 方法就可以了
const a = {
val: 1,
toString() {
return this.val++;
},
};
if (a == 1 && a == 2 && a == 3) {
console.log('ok');
}
还有一种方法实现
var i = 1;
Object.defineProperty(window, 'a', {
get() {
return i++;
},
});
if (a == 1 && a == 2 && a == 3) {
console.log('OK');
}
拓展一下 [] == ![] 为什么是 true
上面隐式类型转换规则中提到，其他类型比较都要转换成数字做比较，这个就是对应那条规则的
首先 [].toString()会得到一个''字符串![]得到一个布尔值false''与false比较肯定要转换成数字比较那么 ''转换则为0，false转换也是0所以这道题就是 true
1..toString 的问题
有时候我们看到别人的代码中会写到数字调其他类型的方法的时候会写成 1..toString() 这样的写法
因为直接用整数型数字调方法就会报错，但是如果是一个浮点数的话就不会报错了
因为可能在 . 上面存在争议，一个数字后面加点，解释器他不知道你这是小数还是要调取方法，所以就跑异常了
1.toString() // Uncaught SyntaxError: Invalid or unexpected token
1..toString() // '1'
1.2.toString() // '1.2'
Generator
对象增加迭代器
类数组对象的特征：必须有长度、索引、能够被迭代，否则这个对象不可以使用 ... 语法转数组，我们可以使用 Array.from 转，当然我们也可以给对象添加一个迭代器
const obj = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4,
[Symbol.iterator]() {
let idx = 0
return {
next() {
return {
value: obj[idx],
done: idx++ >= obj.length,
}
}
}
}
}
// 此时对象就被添加了迭代器
[...obj] // 1 2 3 4
for (const val of obj) {
console.log(val) // 1 2 3 4
}
上面的问题可以字节使用生成器来实现，生成器返回一个迭代器，迭代器有 next 方法，调用 next 方法可以返回 value 和 done
const obj = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4,
[Symbol.iterator]: function* () {
let idx = 0
while (idx !== this.length) {
yield this[idx++]
}
}
实现一个字符串的迭代器
实现一个字符串的迭代器：传入一组字符串并返回单个字符的范例。一旦更新的字符串，输出也跟着替换掉旧的
function generator(str) {
let idx = 0;
return {
next() {
return {
value: str[idx],
done: idx++ >= str.length,
};
},
};
}
// 测试
const str = 'as';
let gen = generator(str);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
gen = generator('str');
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
// { value: 'a', done: false }
// { value: 's', done: false }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: 's', done: false }
// { value: 't', done: false }
// { value: 'r', done: false }
// { value: undefined, done: true }
简单模拟 co
模拟一下 co 的实现
首先来看一则例子
const fs = require('fs');
const path = require('path');
const { promisify } = require('util');
const readFile = promisify(fs.readFile);
function* read() {
const name = yield readFile(path.resolve(__dirname, 'name.txt'), 'utf8');
const age = yield readFile(path.resolve(__dirname, name), 'utf8');
return age;
}
const it = read();
let { value, done } = it.next();
value.then(data => {
let { value, done } = it.next(data);
// console.log(data, '???')
value.then(data => {
let { value, done } = it.next(data);
console.log(value);
});
});
使用 co 库可以很容易解决这个问题
const co = require('co');
// co 接受一个生成器
co(read()).then(data => {
console.log(data);
});
// 那模拟一下
function _co(it) {
// 首先返回一个 promise
return new Promise((resolve, reject) => {
// 因为可以传值的原因，不可以直接使用循环实现，需要使用 递归
function next(data) {
const { value, done } = it.next(data);
if (done) return resolve(value);
// 保证值是一个 promise
Promise.resolve(value).then(data => {
next(data);
}, reject);
}
next();
});
}
菲波那切数列
今天新东方的面试还提到了菲波那切数列，其实这个东西蛮很有趣，简单介绍一下 1、1、2、3、5、8、13、21、34 .... 这道题有个规律，第一项加上第二项永远等于第三项：1 + 1 = 2；1 + 2 = 3；2 + 3 = 5；3 + 5 = 8 .... 要求是传入第几项，得到该值，根据这个规律来实现一下
简单写法
function fibonacci(n) {
// 第一项和第二项都返回1
if (n === 1 || n === 2) return 1;
// 我们只要返回 n - 1（n的前一项）与 n - 2（n的前两项）的和便是我们要的值
return fibonacci(n - 1) + fibonacci(n - 2);
}
优化版本
上面的写法，求 20 次以内的总和运行会很快，50 次以上特别慢，100 次 以上可能就爆栈了，所以我们需要优化写法，缓存每次计算后的值
function feibo(n, sum1 = 1, sum2 = 1) {
if (n === 1 || n === 2) return sum2;
return feibo(n - 1, sum2, sum1 + sum2);
}
这种写法缓存了，每次计算后的值，执行效率会很高，100 次以上也会秒返回结果，这个也叫作尾递归优化
观察者与发布订阅
一直以来，我以为发布订阅和观察者是一个思路，一次偶然的机会我发现他们是两种不同的设计思路
虽然他们都是实现了对象的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得倒通知，然后自动更新。但是他们之间是有一定区别的。
观察者模式
观察者模式会有 观察者 与 被观察者(观察目标) 两个对象存在，观察者可以有多个，观察目标可以添加多个观察者，可以通知观察者。观察者模式是面向与目标和观察者编程的，耦合目标和观察者
// 被观察者
class Subject {
constructor() {
this.subs = [];
}
add(observer) {
this.subs.push(observer);
}
notify(...args) {
this.subs.forEach(ob => ob.update(...args));
}
}
// 观察者
class Observer {
update(...args) {
console.log('Observer -> update -> args', args);
}
}
// 使用
const o1 = new Observer();
const o2 = new Observer();
const o3 = new Observer();
const o5 = new Observer();
const sub = new Subject();
// 添加观察者
sub.add(o1);
sub.add(o2);
sub.add(o3);
// 通知观察者
sub.notify('嘿嘿嘿');
发布订阅模式
发布订阅模式会有一个调度中心的概念。是面向调度中心编程的，对发布者与订阅者解耦
class PubSub {
constructor() {
this.handlers = {};
}
subscribe(type, fn) {
if (!this.handlers[type]) {
this.handlers[type] = [];
}
this.handlers[type].push(fn);
}
publish(type, ...args) {
if (!this.handlers[type]) return;
this.handlers[type].forEach(fn => fn(...args));
}
}
const ps = new PubSub();
ps.subscribe('a', console.log);
ps.subscribe('a', console.log);
ps.subscribe('a', console.log);
ps.subscribe('a', console.log);
ps.publish('a', 'hello world');
字符串转 txt 文件（blob）
有个要求：纯前端实现，不可以使用 nodejs
实现原理也很简单，就像我们平时下载一个本地文件一样，可以动态的创建一个可以下载的 a 标签，给它设置 download 属性，然后把下载的内容转 blob 创建下载链接下载即可
具体实现如下：
function exportTxt(text, filename) {
const eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 将内容转为 blob
const blob = new Blob([text]);
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
}
奇偶数判断
可能会遇到一个做奇偶数判断的方法吧，反正我遇到了，一句话搞定
const isEven = num => num % 2 === 0;
格式化金钱
项目中我们经常会遇到金钱格式化需求，或者说数字格式化一下，方便阅读（数字比较大的情况下）
比如说 999999999，直接阅读很不直观，格式化后 999,999,999
通常我们会使用正则来处理
function formatPrice(price) {
return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
也可以不使用正则然后优雅的处理
function formatPrice(price) {
return String(price)
.split('')
.reverse()
.reduce((prev, next, index) => {
return (index % 3 ? next : next + ',') + prev;
});
}
上面是两种提到的比较常用的方案，但是 js 还有个比较牛逼的 API 可以直接实现这个需求哦，它就是 toLocaleString，我们可以直接数字调用这个方法就可以实现，金额的格式化
(999999999).toLocaleString(); // 999,999,999
// 当然还可以更秀一点
const options = {
style: 'currency',
currency: 'CNY',
};
(123456).toLocaleString('zh-CN', options); // ¥123,456.00
toLocaleString 可以接收两个可选参数：locales 和 options，而且这个 api 在各大浏览器通用不存在兼容问题并且这个 api 不止存在 Number 的原型上，Array、Object、Date 原型上都有这个 api，并且格式化出来的值可以根据我们传入的参数出现各种结果
参数及用法可以参考 MDN
深度冻结对象
在 vue 项目开发中，有些不变的常量，我们不想 vue 为他做双向绑定，以减少一些性能上消耗，我们可以把使用 Object.freeze 将对象冻结，此时 vue 将不会对这个对象进行冻结，但是这个冻结只是冻结对象第一层，所以遇到对象层级比较深的话，我们可以写个深度冻结的 api，来对常量对象做一些冻结优化
const deepFreeze = o => {
const propNames = Object.getOwnPropertyNames(o);
propNames.forEach(name => {
const prop = o[name];
if (typeof prop === 'object' && prop !== null) {
deepFreeze(prop);
}
});
return Object.freeze(o);
};
脱敏处理
在一些涉及到用户隐私情况下，可能会遇到对用户的手机号身份证号之类的信息脱敏，但是这个脱敏数据的规则是根据用户信息要脱敏字段动态的生成的，此时我们动态拼接正则来实现一个动态脱敏规则
const encryptReg = (before = 3, after = 4) => {
return new RegExp('(\\d{' + before + '})\\d*(\\d{' + after + '})');
};
// 使用：'13456789876'.replace(encryptReg(), '$1****$2') -> "134****9876"
树遍历
对于树结构的遍历一般有深度优先和广度优先
广度优先和深度优先的概念很简单，区别如下：
深度优先，访问完一颗子树再去访问后面的子树，而访问子树的时候，先访问根再访问根的子树，称为先序遍历；先访问子树再访问根，称为后序遍历。 广度优先，即访问树结构的第 n+1 层前必须先访问完第 n 层
深度优先
先序遍历
const treeForEach = (tree, func) => {
tree.forEach(data => {
func(data);
data.children && treeForEach(data.children, func);
});
};
后序遍历，只需要调换一下节点遍历和子树遍历的顺序即可
const treeForEach = (tree, func) => {
tree.forEach(data => {
data.children && treeForEach(data.children, func);
func(data);
});
};
广度优先
广度优先的思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空。取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。
const treeForEach = (tree, func) => {
let node,
list = [...tree];
while ((node = list.shift())) {
func(node);
node.children && list.push(...node.children);
}
};
数组分组
开发移动端的时候，遇到一个首页菜单改版的需求，首页菜单根据权限控制显隐，而菜单每页展示八个小菜单，超过八个做 swipe 滑动切换，当时项目用了 vant 做的 UI 框架，菜单那模块就选择了他的轮播插件，菜单做成了一个扁平化的 list 配置，首先根据权限过滤出所有有权限的菜单项，然后每八个一分组，处理成一个二维数据来遍历菜单
const arrayGroupBySize = (arr, size = 2) => {
const result = [];
for (let i = 0, len = arr.length; i < len; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
};
下划线与驼峰
做一些数据持久化的工作的时候经常会出现下划线命名和驼峰命名的转化，因为在前端处理中规范是驼峰命名，而像 mysql 之类的规范是下划线命名，所以在处理后返回给前端的数据需要转换为驼峰命名，而对数据库的读写需要下划线命名
const toHump = name => {
return name.replace(/\_(\w)/g, function (all, letter) {
return letter.toUpperCase();
});
};
const toLine = name => {
return name.replace(/([A-Z])/g, '_$1').toLowerCase();
};
校验时间格式
业务中遇到一个校验一下传入时间格式是否为一个时间格式，下面的方法可以完美校验
const isDate = str => {
return typeof str !== 'number' && str !== null && new Date(str) !== 'Invalid Date';
};
持续记录中...
最后
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
欢迎加我微信「qianyu443033099」拉你进技术群，长期交流学习...
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
