当前位置 博文首页 > 逐梦song:想让你的代码变得更加优雅吗?

    逐梦song:想让你的代码变得更加优雅吗?

    作者:逐梦song 时间:2021-01-30 18:01

    作为一名开发人员,工作之外的时间总是在学习新事物。作为前端开发人员必须知道一些使我们的代码如何更优雅,工作更轻松的技巧,让自己的代码写的更加高大上,下面这些技巧获取可以帮助到你。

    1. 多个条件判断
    // long
    if( x === 'a' || x === 'b' || x === 'c' || x === 'd'){
      // todo
    }

    // short
    if(['a''b''c''d'].includes(x)){
      // todo
    }
    2. 三目运算符

    当我们仅使用一些一对if/esle条件判断时, 可以简单地使用三元运算符来实现. 若有多对if/else条件判断,则不建议使用

    // long
    let flag
    if(x > 10){
      flag = true
    }else {
      flag = false
    }
    // short
    let flag = x > 10 ? true : false
    3. 变量声明

    当我们要声明两个具有共同值或共同类型的变量时,可以使用此简写形式

    // long
    let a
    let b = 1

    // short
    let a, b = 1
    4. 空/未定义检查和分配默认值

    当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为nullundefined, 可以考虑如下实现:

    // long
    if(test1 !== null || test1 !== undefined || test1 !== ""){
      let test2 = test1;
    }else {
      let test2 = ''
    }

    // short
    let test2 = test1 || ''
    5. 给多个变量赋值

    当我们处理多个变量并希望将不同的值分配给不同的变量时,此法非常有用。

    //long 
    let test1, test2, test3;
    test1 = 1;
    test2 = 2;
    test3 = 3;

    //Short 
    let [test1, test2, test3] = [1, 2, 3];
    6. 赋值运算符的简写

    我们在编程中处理很多算术运算符。这是将运算符分配给JavaScript变量的有用技术之一

    // long
    test1 = test1 + 1;
    test2 = test2 - 1;
    test3 = test3 * 20;

    // short
    test1++;
    test2--;
    test3 *= 20;
    7. 真值判断
    // long
    if (test1 === true)

    // short
    if (test1)
    8. 多条件的与/或运算
    //long 
    if (test1) {
     callMethod(); 


    //short 
    test1 && callMethod();
    9. forEath
    // long
    for (var i = 0; i < testList.length; i++)

    // short
    testList.forEach(item => console.log(item))
    10. 比较返回值
    // long
    let test;
    function checkReturn() {
        if (!(test === undefined)) {
            return test;
        } else {
            return callMe('test');
        }
    }
    var data = checkReturn();
    console.log(data); //output test
    function callMe(val) {
        console.log(val);
    }

    // short
    function checkReturn() {
        return test || callMe('test');
    }
    11. 箭头函数
    //long 
    function add(a, b) { 
       return a + b; 

    //short 
    const add = (a, b) => a + b;
    12. 短函数调用
    // long
    function test1() {
      console.log('test1');
    };
    function test2() {
      console.log('test2');
    };
    var test3 = 1;
    if (test3 == 1) {
      test1();
    else {
      test2();
    }

    // short
    (test3 === 1? test1:test2)();
    13. switch

    我们可以将条件保存在键值对象中,并可以根据条件使用。

    // long
    switch (data) {
      case 1:
        test1();
      break;

      case 2:
        test2();
      break;

      case 3:
        test();
      break;
      // And so on...
    }

    // short
    var data = {
      1: test1,
      2: test2,
      3: test
    };

    data[something] && data[something]();
    14. 默认参数
    //long
    function add(test1, test2) {
      if (test1 === undefined)
        test1 = 1;
      if (test2 === undefined)
        test2 = 2;
      return test1 + test2;
    }

    //short
    add = (test1 = 1, test2 = 2) => (test1 + test2);
    add() //output: 3
    15. 参数必传校验
    // long
    function hello(obj){
      let {name, age} = obj
      if(!name){
        console.warn('name is null, pls check!')
        return ''
      }
      if(!age){
        console.warn('age is null, pls check!')
        return ''
      }
      return `${name}${age}`
    }

    // short
    function hello(obj){
      let {name = required('name'), age = required('age')} = obj
      return `${name}${age}`
    }

    function required(key){
      console.warn(`${key} is null, pls check!')
    }
    16. 扩展运算符
    //long
    const data = [1, 2, 3];
    const test = [4 ,5 , 6].concat(data);


    //short
    const data = [1, 2, 3];
    const test = [4 ,5 , 6, ...data];
    console.log(test); // [ 4, 5, 6, 1, 2, 3]

    对于克隆, 我们也可以使用扩展运算符

    //long
    const test1 = [1, 2, 3];
    const test2 = test1.slice()

    //short
    const test1 = [1, 2, 3];
    const test2 = [...test1];
    17. 模板字符串

    如果您厌倦了在单个字符串中使用+来连接多个变量,可以考虑用这种方式

    //long