简洁的JS代码

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