JS代码语句优化小片段总结（1）

1. 单行 `if else`语句

常见的 if else 语句

cosnt flag = true
if(flag){
    console.log(`${flag} is true`)
}else{
    console.log(`${flag} is false`)
}

使用三元运算符更简洁明了

cosnt flag = true
flag ？console.log（“True”）：console.log（“False”）

2. 合并数组

使用扩展运算符（...）将一个数组的元素扩展为另一个数组

    
    const list = [10, 20, 30, 40];
    const newList = [...list, 50, 60, 70, 80];
    consele.log(newList)    // 打印 [10, 20, 30, 40, 50, 60, 70, 80]

3. 数组删除重复项

    cosnt list = [1,1,2,3,4,4,5]
    const newList = [...new Set(list)]
    console.log(newList)    // 打印 [1,2,3,4,5]

4. 转化 `boolean`值

除了true和false之外，JavaScript还将其他类型视为真或假。

0，""，null，undefined，NaN，和false总是假。
其他一切都是真的。

使用一元运算符（!）取反。

    console.log(!undefined)    // true
    console.log(!null)         // true
    console.log(!NaN)          // true
    console.log(!'')           // true
    console.log(!0)            // true
    console.log(!false)        // true
    console.log(!true)        // flase
    console.log(!'0')        // false

5. 不使用第三个变量交换两个变量的值

    let x = 1;
    let y = 2;
    [x, y] = [y, x];
    console.log(x, y);      // 2,1

6. `Number` 转化 `String`

const num = 1 +“”;
console.log（typeof num）;      // string
console.log（num）;       // 1

7.字符串转换为数字


const numStr = "1";
const num = +numStr;
console.log(typeof num);     // number
console.log(num);            // 1

8.使用模版字符串

原来的写法
const age = 14;
const info = 'I'm' + age + 'years old';
console.log(info)       //  打印 I'm 14 years old

优化写法

const info = `I'm ${age} years old`;
console.log(info);       // 打印 I'm 14 years old

9.使用扩展运算符（...）将字符串拆分为数组

const str = "string"
console.log(str)       // 打印 ['s','t','r','i','n','g']

10. 使用 `es2020`可选链

假设你有一个data对象代码如下

const data = {
    info: {
        age: 11,
    }
}

在我们获取 age 之前我们要判断 info 是否存在。如果 info 不存在我们代码汇发生报错。因为你无法读取 undefined 属性。于是我们就有了一些的代码：

// 原本代码
const data = {info：{age：1}}
if（data && data.info）{ 
   console.log（data.info.age）;      // 11
}

// 优化代码
const value = data?.info?.age;
console.log(value)     // 11

tips：由于是最新的 es 提案标准，目前很多浏览器均未支持可选链 (?.) 操作符。但是我们可以通过安装 balel 来配置使用。

11.多个`if`条件的判断

// 原来代码
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
 // do something
 }
 
 // 优化代码
 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
    // do something
 }

12. 同时声明多个变量

// 原来代码
 let test1;
 let test2 = 1;
 
 // 优化代码
 let test1, test2 = 1;
 
 // 声明且赋值 原来代码
 let a = 1
 let b = 2
 
 //优化代码 使用解构赋值
 let [a,b] = [1,2]

13.空值合并操作符


const foo = null ?? 'default string';
console.log(foo);     // 打印 default string

const value = undefined ?? 'string'
console.log(value).   //打印 string

const age = 0 ?? 12
console.log(age)    // 打印 0

14.`true`状态下调用函数

// 原来代码
if (test1) {
   callMethod(); 
} 

// 优化代码
test1 && callMethod();

15. 简短的函数调用语句

function test1() {
    console.log('test1');
};

 function test2() {
     console.log('test2');
 };
 
 var test3 = 1;
 
 if (test3 == 1) {
   test1();
 } else {
   test2();
 }
 
 // 优化代码
 test3 === 1? test1():test2();
 or
 (test3 === 1? test1:test2)();

JS代码语句优化小片段总结 （1）

1. 单行 if else语句