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
    })
    }

  • 相关阅读:
    迭代器和生成器
    案例:复制大文件
    案例:使用seek倒查获取日志文件的最后一行
    Leetcode165. Compare Version Numbers比较版本号
    Leetcode137. Single Number II只出现一次的数字2
    Leetcode129. Sum Root to Leaf Numbers求根到叶子节点数字之和
    Leetcode116. Populating Next Right Pointers in Each Node填充同一层的兄弟节点
    Leetcode114. Flatten Binary Tree to Linked List二叉树展开为链表
    Leetcode113. Path Sum II路径总和2
    C++stl中vector的几种常用构造方法
  • 原文地址:https://www.cnblogs.com/yang-hui/p/14188880.html
Copyright © 2011-2022 走看看