// 必须给对象参数设置默认值, 不然传参数时因为没有解构对象会报错 const getUsers = ({ offset=0, limit=1, orderBy="salary" }={}) => { // 根据条件查询数据库返回用户数据 console.log({ offset, limit, orderBy }); } getUsers({ offset: 10, limit: 20,orderBy: 'age' }); // => { offset: 10, limit: 20, orderBy: 'age' } getUsers();// => { offset: 0, limit: 1, orderBy: 'salary' }
使用 !! 将其它类型转换成 bool 型
console.log(!!{}); // true console.log(!!0); // false console.log(!![]); // true console.log(!!undefined); // false const httpGet = (url, retry) => { if (!!retry) { // 超时重发 } }
JSON.stringify
深度克隆
使用先序列化再反序列化这种方式来深度克隆对象在一般情况下很方便，缺点就是无法克隆函数以及继承的属性。
如果还要克隆函数属性，推荐使用 lodash 的 cloneDeep。
const me = { name: 'lyreal666', age: 23, speak() { console.log(`Hello, I'm ly!`); } } const clonedMe = JSON.parse(JSON.stringify(me)); console.log(clonedMe); // => { name: 'lyreal666', age: 23 } console.log(clonedMe.speak === undefined); // => true
使用第二个和第三参数
JSON.stringify 的第二个参数是用来对属性值进行处理的，第三个参数则是用来指定输出的 json 字符串的缩进长度，可以传数字也可以传字符串。
const me = { name: 'lyreal666', age: 23, speak() { console.log(`Hello, I'm ly!`); } } const jsonStr = JSON.stringify(me, (key, value) => key === 'name' ? '老余' : value, 2); console.log(jsonStr); /* => { "name": "老余", "age": 23 } */
优雅的遍历对像
使用解构赋值和 Object.entries。
const me = { name: 'lyreal666', age: 23, speak() { console.log(`Hello, I'm ly!`); } } for (const [key, value] of Object.entries(me)) { console.log(`${key}: ${value}`); } /* => name: lyreal666 age: 23 speak: speak() { console.log(`Hello, I'm ly!`); } */
清空数组的最快方法
评论区有人说这种直接修改 length 的做法是有问题的, 我之前也看过关于清空数组的方法的讨论, 但是我觉得一般情况下这样用是没什么问题的, 既简单, 又不用重新分配内存给新数组。
const array = [1, 2, 3, 4]; array.length = 0; console.log(array); // => [] // 网友指出可以更好的方式是直接赋值空数组 let array = [1, 2, 3, 4]; array = [];
判断一个整数是否是 -1
// ~ 操作符的运算规律可以简单记作将加一的结果取反 console.log(~1); // => -2 console.log(~0); // => -1 console.log(~(-3)); // => 2 console.log(~(-1)); // => 0 const number = -2; // 判断一个数是否为 -1 if (!~number) { // 当 number 是 -1 的操作... }
立即执行函数
立即执行函数可以让我们的代码中的变量不污染外部变量，常见的使用方式是像下面这样的。
// 使用括号将函数括起来调用 (function(window, $) { // 内部代码 }) (window, jQuery)
更优雅的方式是下面这种，事实上很多其它的算术运算符比如 +, -, *, ~ 等也是可以的。
! function(window, $) { // 内部代码 } (window, jQuery) // 还可以使用 +, -, * 等 + function(window, $) { // 内部代码 } (window, jQuery) // 更神奇的是还可以用 new, typeof 等操作符 new function(window, $) { // 内部代码 } (window, jQuery)；
使用 set 来对数组去重复
console.log([...new Set([1, 3, 1, 2, 2, 1])]); // => [ 1, 3, 2 ]
使用 reduce 连乘或连加
const array = [ 1, 2, 3, 4]; // 连加 console.log(array.reduce((p, c) => p + c)); // => 10 // 连乘 console.log(array.reduce((p, c) => p * c)); // => 24
取整
Math 中的一堆取整函数这里就不说了，主要是提一些比较巧妙地取整方式。
console.log(~~3.14); // => 3 console.log(~~(-2.5)); // => -2 console.log(6.18 | 0); // => 6 console.log(-3.6 | 0); // => -3 console.log(9.9 >> 0); // => 9 console.log(-2.1 >> 0); // => -2 // superagent 是一个很实用的发送 http 请求的 node 模块，它对返回码的处理就用到了 | var type = status / 100 | 0; // status / class res.status = status; res.statusType = type; // basics res.info = 1 == type; res.ok = 2 == type; res.clientError = 4 == type; res.serverError = 5 == type; res.error = 4 == type || 5 == type;
使用 + 将其它类型转换成 number 类型