zoukankan      html  css  js  c++  java
  • 简化代码的小知识点

    一、可选链操作符
    let nestedProp = obj && obj.first && obj.first.second;

    let nestedProp = obj?.first?.second;


    二、空位合并操作符
    let c = a ? a : b // 方式1
    let c = a || b // 方式2
    但是这两种方式有个明显的弊端,它都会覆盖所有的假值,如(0, false),这些值可能是在某些情况下有效的输入
    let c = a ?? b;
    // 等价于let c = a !== undefined && a !== null ? a : b;
    例如有以下代码:
    let x = null;
    let y = x ?? 500;
    console.log(y); // 500
    let n = 0
    let m = n ?? 9000;
    console.log(m) // 0


    三、扩展运算符(…)用于取出参数对象的所有可遍历属性,浅拷贝到当前对象之中
    1、克隆对象
    const _obj = { a: 0, b: 1, c: 2 };
    const obj = JSON.parse(JSON.stringify(_obj));
    const obj = Object.assign({}, _obj)
    const obj = { ..._obj };

    2、合并对象
    const obj1 = { a: 0, b: 1, c: 2 };
    const obj2 = { c: 3, d: 4, e: 5 };
    const obj = { ...obj1, ...obj2 };

    3、克隆数组
    const _arr = [0, 1, 2];
    const arr = [..._arr];

    4、合并数组
    const arr1 = [0, 1, 2];
    const arr2 = [3, 4, 5];
    const arr = [...arr1, ...arr2];

    5、扩展运算符还可以将字符串转为数组。
    如果扩展运算符后面是字符串,它会自动转成一个数组
    [...'hello']
    // [ "h", "e", "l", "l", "o" ]


    四、当想写if...else语句时,使用三元操作符来代替。
    const x = 20;
    let num;
    if (x > 10) {
    num= 'num > 10';
    } else {
    num= 'num <= 10';
    }
    简写:
    const num = x > 10 ? 'num > 10': 'num <= 10';


    五、js循环
    一般我们会用for循环
    for (var i = 0; i < arr.length; i++) {
    }
    简写:
    for (var i in arr) {
    }
    arr.forEach((item, index) => {
    })

    map、filter、reduce
    还有比如我们有一个包含名称和种类属性的对象数组,我们只想要这个数组中所有name属性的值放在一个新数组中
    let nameList = lists.map(x => x.name);
    let ageList = lists.filter(x => x.age === "18");
    let ageTotale = lists.reduce(function(total, item) {
    return item.age + total;
    }, 0);


    六、模板字符串
    传统写法我们可能会这么写
    const db = 'http://' + host + ':' + port + '/' + database;
    简写:
    const db = `http://${host}:${port}/${database}`;

    七、命名参数
    // 我们常常使用的写法
    const getStuffNotBad = (id, force, verbose) => {
    ...do stuff
    }
    getStuffNotBad(150, true, true)

    优化后的写法:
    const getStuffAwesome = ({id, force, verbose}) => {
    ...do stuff
    }
    getStuffAwesome({ id: 150, force: true, verbose: true })

    八、使用window对象的方法时
    mounted() {
    var self = this
    window.addEventListener('scroll', function() {
    self.scrolled = true
    })
    }

    mounted() {
    window.addEventListener('scroll', () => {
    this.scrolled = true
    })
    }

  • 相关阅读:
    vim字符串替换命令
    Android中View的事件分发机制——Android开发艺术探索笔记
    jQuery源代码框架思路
    C指针——C语言手记
    Python基础二--基本控制语句
    C++中的链式操作
    求一个字串中最长的连续字符串
    C# -- 推断字符能否转化为整形
    Loadrunner检查点使用总结
    LoadRunner设置检查点的几种方法介绍
  • 原文地址:https://www.cnblogs.com/yang-hui/p/14188880.html
Copyright © 2011-2022 走看看