这是大冰块2021年第12篇原创文章，和大冰块一起在前端领域努力吧！！！💪
写在前面
今天整理了一些日常开发中常用的JavaScript小技巧，都是经常使用的，写出来整理一下供大家参考。
1. 基本类型转换 —— + 和 ！
使用场景：
- 给后端传值，后端给的是string（number），再传给后端的时候，后端要求这个值传参类型为number（string）。
- 拿到后端给的string（number）值之后，前端展示需要当作number（string）处理。
使用方法：
吾有真言如下：
类型转换不可怕，使用 + 号走天下。!号还能转布尔，下次一定要用它。
- string类型+number类型会拼接成string类型
- +string类型会转为number类型
- number类型 + '' 会转为string类型
- !取反，!!取反再取反，对0， ""，null，undefined，NAN取反为true，其它取反均为false
代码案例：
let a = "1.2"
let b = 1
let c = "0"
let d = 0
a+b // "1.21"
+a // 1.2
b+'' // "1"
!a // false
!!a // true
!d // true
!!d // false
2. 逻辑运算符 —— && 和 ||
使用场景：
- if嵌套过多，多个条件判断有依赖关系
使用方法：
- && 左边成立才会执行右边的，左边的是必定执行的。如果左边成立会继续执行右边的；左边不成立则右边的就不再执行。左右两边都为 true 则返回 ture ，任一边返回 false 则返回 false。
- || 左边执行完就会执行右边的，左边的是必定执行的。如果左边成立则右边的就不再执行；左边不成立则会继续执行右边的。左右两边任一边返回 ture 则返回 ture ，两边都为false 时才返回false。
代码案例：
if(obj){
if(obj.id){
if(obj.id === xxx){
// doSomething
}
}
if(obj.uid){
// doSomething
}
}
// 可改为：
if(obj && ((obj.id && obj.id === xxx) || obj.uid)){
// doSomething
}
// 或者配合三元表达式：（注意：三元表达式里不能写return语句，只能写表达式）
(obj && ((obj.id && obj.id === xxx) || obj.uid)) ? doSomething : ''
3. 解构赋值 —— [ ] 和 { }
使用场景：
- 给元素赋对象或数组的值
- 变量交换
使用方法：
- 针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
- 对数组模型解构
- 对对象模型解构
代码案例：
数组模型解构
let [a, b, c] = [1, 2, 3]
// a = 1
// b = 2
// c = 3
// 嵌套也可以哦
let [a, [[b], c]] = [1, [[2], 3]]
// a = 1
// b = 2
// c = 3
// 可忽略
let [a, , b] = [1, 2, 3]
// a = 1
// b = 3
// 不完全解构
let [a = 1, b] = []
// a = 1
// b = undefined
// 剩余运算符
let [a, ...b] = [1, 2, 3]
//a = 1
//b = [2, 3]
// 可遍历对象
let [a, b, c, d, e] = '嘻！你好啊'
// a = '嘻'
// b = '！'
// c = '你'
// d = '好'
// e = '啊'
// 设置解构默认值
let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
// 变量交换
let {a,b} = {a:1, b:2}
[a,b] = [a,b]
对象模型解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' }
// foo = 'ddd'
// 嵌套也可以哦
let obj = {p: ['hello', {y: 'world'}] }
let {p: [x, { y }] } = obj
// x = 'hello'
// y = 'world'
// 可忽略
let obj = {p: ['hello', {y: 'world'}] }
let {p: [x, { }] } = obj
// x = 'hello'
//不完全解构
let obj = {p: [{y: 'world'}] }
let {p: [{ y }, x ] } = obj
// x = undefined
// y = 'world'
// 剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// a = 10
// b = 20
// rest = {c: 30, d: 40}
// 设置解构默认值
let {a = 10, b = 5} = {a: 3}
// a = 3; b = 5
let {a: aa = 10, b: bb = 5} = {a: 3}
// aa = 3; bb = 5
4. 高级解构使用 —— [ ] 和 { }
这个其实还是属于解构赋值，只是更有技巧一些，用到的也多，所以单独列出来写一下。
使用场景：
- 把数组项赋值给特定的变量
使用方法：
{0:a, 1:b} = [1,2]
代码案例：
把数组下标为 0 的值 "今天" 赋给变量 today， 下标为 2 的值 "明天" 赋给变量 afterTomorrow。
let arr = ["今天","明天","后天"]
let { 0: today, 2: afterTomorrow } = arr
console.log(today) // "今天"
console.log(today) // "后天"
5. 模板字符串 —— ``
使用场景：
- 字符串的拼接，变量的拼接，路径的拼接等
使用方法：
${}
代码案例：
let a = "(●'◡'●)"
let b = "昨天的月亮一点也不亮，"
let c = "因为不是从你的窗子里看到的。"
let d = `${a}${b}${c}`
// "(●'◡'●)昨天的月亮一点也不亮，因为不是从你的窗子里看到的。"
6. 数组截取 —— length
使用场景：
- 后端返回m条数据，只需展示前n个
使用方法：
Array.length = n
代码案例：
let arr = [1,2,3,4,5,6,7,8,9]
arr.length = 3
// [1,2,3]
7. 数组去重 —— Set
使用场景：
- 对后端返回数组数据去重
- 前端添加tag标签时去重处理
使用方法：
只使用Set 和展开运算符，就可以轻松实现数组去重 : [...new Set(arr)]
代码案例：
let arr = [11,'嘻嘻',11,22,'哈哈','哈哈',true,true]
let formatArr = [...new Set(arr)]
// [11, "嘻嘻", 22, "哈哈", true]
8. 格式化 JSON 代码 —— JSON.stringify
使用场景：
- 在打印台检查当前json字符串是否正确，格式化 JSON 的输出。
使用方法：
JSON.stringify(value, replacer, space)
value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
代码案例：
let obj1 = {
obj2: {
arr: [1, 2, 3, 4],
obj3: { a: 1, b: '2' }
}
}
JSON.stringify(obj1, null, 4)
// "{
// "obj2": {
// "arr": [
// 1,
// 2,
// 3,
// 4
// ],
// "obj3": {
// "a": 1,
// "b": "2"
// }
// }
// }"
9. 扁平化多维数组 —— (...Array)
使用场景
- 多重嵌套数组的展开提取
使用方法
(...Array)
代码案例
const arr = [11, [22, 33], [44, 55], 66]
const flatArr = [].concat(...arr)
//=> [11, 22, 33, 44, 55, 66]
如果想操作多维数组，可以通过递归来解决：
function formatArray(arr) {
let flattened = [].concat(...arr)
return flattened.some(item => Array.isArray(item)) ?
formatArray(flattened) : flattened
}
let arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]]
let flatArr = formatArray(arr)
// [11, 22, 33, 44, 55, 66, 77, 88, 99]
10. 向上向下取整 —— ~~
使用场景
数字向上向下取整
使用方法
~ 先向下取整，再加1，再取反。即：~(A) = -(A+1)
~~ 取绝对值，再向下取整。
代码案例
let a = 11
let b = 11.11
let c = 11.89
let d = -11
let e = -11.11
let f = -11.89
~a // -12
~b // -12
~c // -12
~d // 10
~e // 10
~f // 10
~~a // 11
~~b // 11
~~c // 11
~~d // 11
~~e // 11
~~f // 11
总结
这些都是常用的方法技巧，平时多用学写自然就记住了，一起加油吧~
如果你看完觉得意犹未尽，可以看看大冰块《看完就懂系列》的文章，《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。欢迎大家点击一起讨论学习：
- 《看完就懂系列》聊聊CSS3的 calc() 函数
- 《看完就懂系列》答应我，看完就开始用Symbol好吗？
- 《看完就懂系列》谈谈数据埋点的原理与实现
- 《看完就懂系列》Ajax是不是凭一己之力造就了整个前端的生态圈？
- 《看完就懂系列》项目中的权限管理复杂吗？
- 《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~
- 《看完就懂系列》15个方法教你玩转字符串
- 《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法
原创不易，如有错误，欢迎指正。
如果有帮助到你，请给大冰块悄悄点赞关注，你的点赞关注就是我写下去的动力。
让我们一起在前端的路上进步吧~🤭
