1.通过条件判断给变量赋值布尔值
// 一般可能会这么写
if(m==='m'){
n = true
}else{
n = false
}
// 简洁写法
n = m === 'm'
2.判断数组长度不为0
// 常见写法
if(arr.length !==0){
//
}
// 简洁写法
if(arr.length){
//
}
// 同理,判断数组长度为0
if(!arr.length){
//
}
3.使用三元表达式替代if判断
// if写法
if(x === 'x'){
y = x
}else{
y = z
}
// 三元表达式
y = x === 'x' ? x : z
4.使用数字分隔符提高数字可读性
const num = 1_000_000_000_000
console.log(num) // 1000000000000
5.简写条件判断语句
// 如果判断条件为true时执行函数,可以用 && 简写
if(flag){
funA()
}
// 简写
flag && funA()
6.数组去重
const numbers = [2, 3, 4, 4, 2];
console.log([...new Set(numbers)]); // [2, 3, 4]
7.字符串与数字之间转化
// 字符串转数字
const str = '100'
console.log(+str) // 100
// 数字转字符串
const num = 101
console.log(num+'') // '101'
8.从数组中过滤所有虚值
const myArray = [10, undefined, NaN, 2, null, '@boyqq.com',50, true, false,100];
console.log(myArray.filter(Boolean)); // [10, 2, "@boyqq.com", 50,true,100]
9.巧妙使用includes简化if判断
// 使用if
if(x===1 || x===2 || x===3 || x===4){
funcA()
}
// 使用includes
let arr = [1,2,3,4]
if(arr.includes(x)){
funcA()
}
9.使用 dataset 属性访问元素的自定义数据属性
<div id="fruit" data-name="apple" data-color="red" data-price="5">
apple
</div>
<script>
const fruit = document.getElementById('fruit');
console.log(fruit.dataset); // { name: "apple", color: "red", price: "5" }
console.log(user.dataset.name); // "apple"
console.log(user.dataset.color); // "red"
console.log(user.dataset.price); // "5"
</script>
10.|| 短路符设置默认值
let person = {
name: '猪八戒',
age: 3000
}
let name = person.name || '佚名'
11.&& 短路符判断依赖的键是否存在防止报错" xxx of undefined"
let dogs = {
name: '大黄',
age: 12,
son: {
name: '小黑'
}
}
let sonName = person.son && person.son.name