返回

程序员装备库的秘密武器:JS 简写技巧大揭秘,速成代码高手!

前端

在程序员的世界里,代码就是语言,而 JS 简写技巧就是行走的捷径,不仅能让你写代码的速度翻倍,还能让你的代码更加简洁、优雅,成为编程高手的必备武器。今天,我们就来揭秘 19 个 JS 简写技巧,助你轻松实现代码速度翻倍!

  1. 箭头函数

    • 普通函数
      function add(a, b) {
        return a + b;
      }
      
    • 箭头函数
      const add = (a, b) => a + b;
      
  2. 数组解构

    • 普通解构
      const numbers = [1, 2, 3];
      const [a, b, c] = numbers;
      
    • 嵌套解构
      const person = {
        name: 'John',
        age: 30,
        address: {
          city: 'New York',
          state: 'NY'
        }
      };
      const { name, age, address: { city, state } } = person;
      
  3. 对象扩展运算符

    • 普通对象合并
      const obj1 = { name: 'John' };
      const obj2 = { age: 30 };
      const combinedObj = Object.assign({}, obj1, obj2);
      
    • 对象扩展运算符
      const combinedObj = { ...obj1, ...obj2 };
      
  4. 模板字符串

    • 普通字符串拼接
      const name = 'John';
      const age = 30;
      const message = 'My name is ' + name + ' and my age is ' + age;
      
    • 模板字符串
      const message = `My name is ${name} and my age is ${age}`;
      
  5. 三元运算符

    • 普通 if-else 语句
      if (age >= 18) {
        console.log('You are old enough to vote.');
      } else {
        console.log('You are not old enough to vote.');
      }
      
    • 三元运算符
      const canVote = age >= 18 ? 'You are old enough to vote.' : 'You are not old enough to vote.';
      
  6. null 合并运算符

    • 普通 if-else 语句
      const name = user?.name || 'Guest';
      
    • null 合并运算符
      const name = user?.name ?? 'Guest';
      
  7. 可选链运算符

    • 普通 if-else 语句
      const address = user?.address?.city || 'Unknown';
      
    • 可选链运算符
      const address = user?.address?.city ?? 'Unknown';
      
  8. 数组 includes() 方法

    • 普通 for 循环
      const numbers = [1, 2, 3, 4, 5];
      const isThreeIncluded = false;
      for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] === 3) {
          isThreeIncluded = true;
          break;
        }
      }
      
    • includes() 方法
      const numbers = [1, 2, 3, 4, 5];
      const isThreeIncluded = numbers.includes(3);
      
  9. 数组 find() 方法

    • 普通 for 循环
      const numbers = [1, 2, 3, 4, 5];
      const firstOddNumber = undefined;
      for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] % 2 === 1) {
          firstOddNumber = numbers[i];
          break;
        }
      }
      
    • find() 方法
      const numbers = [1, 2, 3, 4, 5];
      const firstOddNumber = numbers.find((number) => number % 2 === 1);
      
  10. 数组 filter() 方法

    • 普通 for 循环
      const numbers = [1, 2, 3, 4, 5];
      const evenNumbers = [];
      for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] % 2 === 0) {
          evenNumbers.push(numbers[i]);
        }
      }
      
    • filter() 方法
      const numbers = [1, 2, 3, 4, 5];
      const evenNumbers = numbers.filter((number) => number % 2 === 0);
      
  11. 数组 map() 方法

    • 普通 for 循环
      const numbers = [1, 2, 3, 4, 5];
      const squaredNumbers = [];
      for (let i = 0; i < numbers.length; i++) {
        squaredNumbers.push(numbers[i] * numbers[i]);
      }
      
    • map() 方法
      const numbers = [1, 2, 3, 4, 5];
      const squaredNumbers = numbers.map((number) => number * number);
      
  12. 数组 reduce() 方法

    • 普通 for 循环
      const numbers = [1, 2, 3, 4, 5];
      let sum = 0;
      for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
      }
      
    • reduce() 方法
      const numbers = [1, 2, 3, 4, 5];
      const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
      
  13. 字符串 includes() 方法

    • 普通 indexOf() 方法
      const string = 'Hello, world!';
      const doesIncludeWorld = string.indexOf('world') !== -1;
      
    • includes() 方法
      const string = 'Hello, world!';
      const doesIncludeWorld = string.includes('world');
      
  14. 字符串 startsWith() 和 endsWith() 方法

    • 普通 if-else 语句
      const string = 'Hello, world!';
      const doesStartWithHello = string.substring(0, 5) === 'Hello';
      const doesEndWithWorld = string.substring(string.length - 5) === 'world';
      
    • startsWith() 和 endsWith() 方法
      const string = 'Hello, world!';
      const doesStartWithHello = string.startsWith('Hello');
      const doesEndWithWorld = string.endsWith('world');
      
  15. 字符串 trim() 方法

    • 普通 replace() 方法
      const string = '   Hello, world!   ';
      const trimmedString = string.replace(/^\s+|\s+$/g, '');
      
    • trim() 方法
      const string = '   Hello, world!   ';
      const trimmedString = string.trim();
      
  16. 正则表达式

    • 普通 if-else 语句
      const email = '[email protected]';
      const isValidEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
      
    • 正则表达式
      const email = '