20个简洁的js代码片段

转自：https://mp.weixin.qq.com/s/w7_ATf5PzHqjQ0OdKc5xBw

<!-- https://mp.weixin.qq.com/s/l1isGENvKOQOUUjJssI1nA -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20个简洁的 JS 代码片段</title>
    <script type="text/javascript">
        // 1.单行IF-ELSE
        const age = 12;
        let ageGroup;
        // LONG FORM
        if (age > 18) {
        ageGroup = "An adult";
        } else {
        ageGroup = "A child";
        }

        // SHORTHAND
        ageGroup = age > 18 ? "An adult" : "A child";

       // 2.从数组中删除重复项
       // 在 JavaScript 中，Set 是一个集合，它允许你仅存储唯一值。这意味着删除任何重复的值。
       // 因此，要从数组中删除重复项，你可以将其转换为集合，然后再转换回数组。
       const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
       const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

    //    1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
    //    2）、展开运算符...将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]
       
    // 3.较短的 If-Else 的空合并
    let maybeSomething;
    // LONG FORM
    if(maybeSomething){
    console.log(maybeSomething)
    } else {
    console.log("Nothing found")
    }

    //SHORTHAND
    console.log(maybeSomething ?? "Nothing found")

    // 4.防止崩溃的可选链
    //如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。
    // 在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。
     
     const student ={
        name: "Matt",
        age:27,
        address:{
            state: "New York"
        },
     };
     
     // LONG FORM
     console.log(student && student.address && student.address.ZIPCode);// 不存在则返回undefined

     // SHORTHAND
     console.log(student?.address?.ZIPCode);// 不存在返回undefined

     //5.在没有第三个变量的情况下交换两个变量
     // 在javascript中，可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个
     let x=1;
     let y =2;

     // LONGER FORM
     let temp =x;
     x=y;
     y = temp;

     //SHORTHAND
     [x,y] = [y,x];// 可以使用解构交换两个变量的值

     // 6.将任何值转换为布尔值:使用！！在JS中将任何内容转换为布尔值
     !!true // true
     !!2    // true
     !![] // true
     !!"Test" // true
     
     !!false   // false
     !!undefined // false
     !!0  // false
     !!"" // false

     // 7.扩展运算符
     // 使用扩展运算符组合两个数组
     const nums1 = [1,2,3];
     const nums2 = [4,5,6];

     // LONG FORM
     let newArray = nums1.concat(nums2);

     // SHORTHAND
     newArray = [...nums1,...nums2]

     //也可使用此语法代替将值推送到数组
     let numbers = [1,2,3];

     // LONGER FORM
     numbers.push(4);
     numbers.push(5);

     // SHORTHAND
     numbers = [...numbers,4,5]

    // 8.传播解构
    // 使用扩展运算符将剩余元素分配给变量
    const student  ={
        name: "Matt",
        age: 23,
        city: "ShangHai",
        state: "Finland",
    };

    // LONGER FORM
    const name = student.name;
    const age = student.age;
    const address = {city:student.city,state: student.state};

    // SHORTHAND
    const {name,age, ...address } = student;

    // 9.使用&& 进行短路评估:不必使用if语句检查某事是否为真，可以使用&& 运算符
    var isReady = true;

    function doSomething(){
        console.log("Yay!");
    }

    // LONGER FORM
    if(isReady){
       doSomething();
    }

    // SHORTHAND
    isReady && doSomething();

    // 10.类固醇的字符串
    const age = 41;
    const sentence = `I'm ${age} years old`;
    // result: I'm 41 years old

    // 11.从数组中查找特定元素: 使用find()方法查找匹配特定条件的元素
    const fruits = [
    { type: "Banana", color: "Yellow" },
    { type: "Apple", color: "Green" }
    ];


    // LONGER FORM
    let yellowFruit;
    for (let i = 0; i < fruits.length; ++i) {
    if (fruits[i].color === "Yellow") {
        yellowFruit = fruits[i];
    }
    }

    // SHORTHAND
    yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");

    // 12.对象属性赋值：你是否希望对象键与值具有相同的名称？你可以省略对象文字来执行此操作：
    const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";

    // LONGER FORM
    const person = {
    name: name,
    city: city,
    age: age,
    favoriteFood: favoriteFood
    };

    // SHORTHAND
    const person = { name, city, age, favoriteFood };

    //13.压缩for循环:使用内置forEach()方法通过一行代码循环遍历数组：
    const numbers = [1, 2, 3, 4, 5];

    // LONGER FORM
    for(let i = 0; i < numbers.length; i++){
    console.log(numbers[i]);
    }

    // SHORTHAND
    numbers.forEach(number => console.log(number));

    // 14.默认功能参数：可以为函数参数提供默认值：
    // LONG FORM
    function pickUp(fruit) {
    if(fruit === undefined){
        console.log("I picked up a Banana");
    } else {
        console.log(`I picked up a ${fruit}`);
    }
    }

    // SHORTHAND
    function pickUp(fruit = "Banana") {
    console.log(`I picked up a ${fruit}`)
    }

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

    // 15.将对象的值收集到数组中：用于Object.values()将对象的所有值收集到一个新数组中
    const info = { name:"Matt",country:"Finland",age:35};

    // LONGER FORM
    let data = [];
    for(let key in info){
       data.push(info[key]);
    }

    // SHORTHAND
    const data = Object.values(info);//将对象的所有值收集到一个新数组中

    // 16.检查一个项目是否存在于数组中
    // 你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。这使你的意图非常明确：
    let numbers = [1,2,3];

    // LONGER FORM
    const hasNumber1 = numbers.indexOf(1) >-1;// true
    
    // SHORTHAND
    const hasNumber1 = numbers.includes(1);// true

    // 17.压缩多个条件:避免使用长|| 检查多个条件链
    const num = 1;
    // LONGER FORM
    if(num == 1 || num == 2 || num == 3){
    console.log("Yay");
    }

    // SHORTHAND
    if([1,2,3].includes(num)){
    console.log("Yay");
    }

    // 18.指数运算符:你Math.pow()习惯把一个数字提高到一个幂吗？你知道你也可以使用**运算符吗？
    
    // LONGER FORM
    Math.pow(4,2);// 16
    Math.pow(2,3);// 8

    //SHORTHAND
    4**2 ;// 16
    2**3;// 8

    // 19.Math.floor()简写：四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗？

    // LONG FROM
    Math.floor(5.25); // 5.0

    // SHORTHAND
    ~~5.25; // 5.0

    // 20.用一行代码分配多个值: 使用解构语法在一行中分配多个值
    let num1,num2;

    //LONGER FORM
    num1 = 10;
    num2 = 100;

    //SHORTHAND
    [num1,num2] = [10,100];

    // 这也适用于使用JS对象
    student ={
        name: "Matt",
        age: 29,
    };

    // LONGER FORM
    let name = student.name;
    let age =student.age;

    // SHORTHAND
    let {name,age} = student;
    </script>
</head>
<body>
    
</body>
</html>
posted @ 2021-09-26 15:19  朕在coding  阅读(175)  评论(0)  编辑  收藏  举报