美文网首页
一些简洁的JS写法

一些简洁的JS写法

作者: laogui_ | 来源:发表于2022-02-23 21:12 被阅读0次

    1、从数组中删除重复项
    Set是一个集合,允许存储唯一的值,可用户删除任何重复的值。

    const num = [0,0,1,2,3,4,4,5]
    const newNum = [...new Set(num)] ; //[0,1,2,3,4,5]
    ...是展开运算符,将任何可迭代的对象转化成数组。

    2、较短if-else 的简写
    1)三目运算
    2)合并操作??(如果没有定义则返回右侧,反之返回左测)

    let a ;
    a??"nothing" ; //"nothing"
    a= 1;
    a??"nothing"; //1

    3、防止字段未定义时代码奔溃的可选择链
    如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。
    在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。

    const array= {
    id: 01,
    code: 0001,
    param: {
    name: "JJ"
    },
    };

    如果需要判断param中的name参数是否存在需要写:array && array.param && array.param.name,此时可用选择链判断:array?.param?.name
    二者对比如果在参数层级比价多的时候,选择链无疑是较好的选择;

    4、交换2个变量的值
    没有第三个变量的情况下,可用解构数组拆分值交换变量值

    let x=1,y=2;
    [x,y]=[y,x]
    //x=2,y=1

    5、将任意值转换成布尔值
    !!true // true
    !!2 // true
    !![] // true
    !!"Test" // true

    !!false // false
    !!0 // false
    !!"" // false
    !!null //false

    6、使用扩展运算符将剩余元素分配给变量

    let student1 = {
    name: "Matt",
    age: 27,
    address: {
    state: "New York"
    },
    };
    const {name,...info} = student1;
    console.log(name); // "Matt"
    console.log(info); // { address: {state: "New York"},age: 27,name: "Matt"}

    7、默认功能参数

    一般写法:
    function pickUp(fruit) {
    if(fruit === undefined){
    console.log("I picked up a Banana");
    } else {
    console.log(I picked up a ${fruit});
    }
    }

    修改后:
    function pickUp(fruit = "Banana") {
    console.log(I picked up a ${fruit})
    }

    pickUp("Mango"); // -> I picked up a Mango
    pickUp(); // -> I picked up a Banana

    8、将对象的键名/值 收集到数组中
    const data = { name: "Matt", country: "Finland", age: 35 };
    Object.values(data) ; //->["Matt", "Finland", 35]
    Object.keys(data); //->["name", "country", "age"]

    9、快速将string类型的数字 转化为 number

    +"0"
    0
    +"2"
    2
    +"null"
    NaN
    +null
    0
    +undefined
    NaN
    +""
    0

    10、压缩多个|| (或)条件

    const num = 1;

    // 常规写法
    if(num == 1 || num == 2 || num == 3){
    console.log("yes");
    }

    // 简洁写法
    if([1,2,3].includes(num)){
    console.log("yes");
    }

    11、指数运算符号
    Math.pow()可以把数字提高到一个幂,**运算符也可以做到
    // 常规写法
    Math.pow(4,2); // 16
    Math.pow(2,3); // 8

    // 简洁写法
    42 // 16
    2
    3 // 8

    12、Math.floor()简写
    Math.floor(5.25) // -> 5.0
    ~~5.25 // -> 5.0

    13、用一行代码分配多个值
    使用解构语法:
    let q,w,e;
    [q,w,e]=[1,2,3];
    q=1,w=2,e=3;

    相关文章

      网友评论

          本文标题:一些简洁的JS写法

          本文链接:https://www.haomeiwen.com/subject/atcalrtx.html