前言
初衷：?整理一下工作中常用的JavaScript小技巧分享给大家，希望能帮助到各位小伙伴们，在工作中提升开发效率。
适合人群：?前端初级开发，大佬绕道。
1.函数参数默认值
在Es6之前，我们要写参数默认值的话，还需要在函数体内写一堆判断逻辑，而Es6之后新出参数默认值语法，我们来看一下。
function person(name, age, sex = "male") {
console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)
2.数组求和使用reduce
之前我们都使用for循环进行遍历求和，也可以使用reduce方法进行求和，简洁代码。
let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)
3.废弃if?else侠
我们写判断时，都会使用if?else但当业务越来越庞大时有好几种状态时，这样代码太冗余了，我们做一下简化。
if(xxx = 1) {
xxx = "启用"
} else if(xxx = 2) {
xxx = "停用"
}
// ...省略
// 废除以上写法
let operation = {
1: "启用",
2: "停用"
3: "注销",
4: "修改"
5: "详情"
}
xxx = operation[status] // 代码简洁清晰
4.交换变量
在Es6之前，我们交互变量值时得使用第三个变量，当Es6出现解构赋值时，我们可以非常快速的交换变量。
let x = 10;
let y = 20;
[x, y] = [y, x];
5.数组去重
在Es6之前，我们数组去重都使用for循环遍历或者indexOf等，但Es6出现了Set结构，非常便捷。
let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434
6.快速获取URL地址栏参数
有时候我们想获取地址栏上参数，都是手写方法，有一个Api实用的方法来处理 URL 的查询字符串。
let params = new URLSearchParams(location.search);
params.get("xxx") // 获取地址栏参数
7.生成随机Id
有些情况下我们想要获取随机不重复的字符串，就可以使用如下方法
Math.random().toString(36).substr(2)
8.获取对象key键值
快速获取对象的key值
let person = {name: "蛙人", age: 24};
console.log(Object.keys(person)) // ["name", "age"]
9.获取对象value值
快速获取对象的value值
let person = {name: "蛙人", age: 24};
console.log(Object.values(person)) // ["蛙人", 24]
10.模板字符串表达式
在Es6之前，我们字符串拼接变量，都是使用 + 号来拼接，这样拼接还好，要是拼接html标签就非常的难受，稍不注意就报错符号问题。Es6出现了模板字符串使用 ``，然后${}里面绑定变量，使我们开发非常的便捷。
let name = "蛙人"
console.log(`hello ${name}`)
console.log(`<p>${name}</p>`)
11.获取对象里指定的值
使用对象解构获取对象值非常简洁，不用在向传统那样使用.语法一个一个去获取
const person = {name: "蛙人", age: 24, sex: "male"};
let { age, sex } = person
console.log(age, sex) // 24 male
12.快速将字符串转换为数组
不再使用字符串split方法，使用扩展运算符可以快速转换为数组。
let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]
13.使用三目运算判断值
如果只有两种状态的情况强烈推荐使用三目运算，抛弃if else。
let status = 1;
status = status == 1 ? "男" : "女"
14.??运算符
??运算符只有前面的值是undefined?or?null才会执行，工作中有的情况下使用，我们来看一下。
let status = undefined;
let text = status ?? "暂无"
console.log(text) // 暂无
15.?.运算符
?.运算符这在有时候处理对象时非常有用，看下面案例，person.name返回undefined然后在调用toString这时肯定会报错，这时使用?.运算符就不会产生错误，?.运算符是只有在当值不是undefined时才会调用toString方法。
let person = {}
console.log(person.name.toString()) // 报错
console.log(person.name?.toString()) // undefined
如果你想开发小程序或者了解更多小程序的内容，可以通过第三方专业开发平台，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序定制开发、APP开发、网站开发、H5小游戏开发
|