目录
超实用的Javascript小技巧（开发常见问题整理）
目录
获取一个月有多少天
需求：已知月份，得到这个月的第一天和最后一天作为查询条件查范围内的数据
new Date(year, month, date, hrs, min, sec)，new Date 可以接受这些参数创建一个时间对象 其中当我们把 date 设置为 0 的时候，可以直接通过 getDate() 获取到最后一天的日期然后得到我们要的最后一天。
new Date(2022, 1, 0).getDate(); // 31
new Date(2022, 2, 0).getDate(); // 28
console.log(new Date(2022, 1, 0).getDate(), new Date(2022, 2, 0).getDate());//31 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 属性
关于函数的 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); // 2void 运算符
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 很像
（1）为数组
当 replacer 是一个数组时，那么他必须是一个字符串数组，其中包含序列化要处理的对象的属性名称，除此之外的属性就会被忽略
const obj = {
a: 42,
b: 30,
c: 100,
};
JSON.stringify(obj, ['a', 'c']); // {"a":42,"c":100}（2）为函数
当 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}".toString 的问题
有时候我们看到别人的代码中会写到数字调其他类型的方法的时候会写成 1..toString() 这样的写法
因为直接用整数型数字调方法就会报错，但是如果是一个浮点数的话就不会报错了
因为可能在 . 上面存在争议，一个数字后面加点，解释器他不知道你这是小数还是要调取方法，所以就跑异常了
1.toString() // Uncaught SyntaxError: Invalid or unexpected token
1..toString() // '1'
1.2.toString() // '1.2'一元运算符
我们都知道一个字符串转换为数字，可以使用 + "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
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实现
可以写一个方法，加个回调函数，等数据全部回来之后，触发回调函数传入得到的数据，那么数据全部回来的就是我们要考虑的核心问题，我们可以用个数组或者对象，然后判断一下数组的 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
奇偶数判断
可能会遇到一个做奇偶数判断的方法吧，反正我遇到了，一句话搞定
const isEven = num => num % 2 === 0;数组分组
开发移动端的时候，遇到一个首页菜单改版的需求，首页菜单根据权限控制显隐，而菜单每页展示八个小菜单，超过八个做 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';
};脱敏处理
在一些涉及到用户隐私情况下，可能会遇到对用户的手机号身份证号之类的信息脱敏，但是这个脱敏数据的规则是根据用户信息要脱敏字段动态的生成的，此时我们动态拼接正则来实现一个动态脱敏规则
const encryptReg = (before = 3, after = 4) => {
return new RegExp('(\\d{' + before + '})\\d*(\\d{' + after + '})');
};
// 使用：'13456789876'.replace(encryptReg(), '$1****$2') -> "134****9876"格式化金钱
项目中我们经常会遇到金钱格式化需求，或者说数字格式化一下，方便阅读（数字比较大的情况下）比如说 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.00toLocaleString 可以接收两个可选参数：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);
};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 }async
async 函数的含义和用法_勇往直前的专栏-CSDN博客_函数前面加上async
❤️ 谢谢支持
持续记录中...
以上便是本次分享的全部内容，希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦～。
1406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
