JavaScript快捷方式：15个简写技巧，让你的代码事半功倍！

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 1. 使用箭头函数
- 2. 对象字面量的简写
- 3. 解构赋值
- 4. 默认参数
- 5. 模板字符串
- 6. 简写的条件判断
- 7. 短路求值
- 8. 真值判断
- 9. 数组方法的简写
- 10. 使用扩展运算符
- 11. 简写属性方法
- 12. 使用箭头函数的简写语法
- 13. 数组解构赋值和函数默认参数的结合
- 14. 简写的对象方法定义
- 15. 使用`Array.from`和`Array.of`

当进行JavaScript编码时，有许多简写技巧可以提高开发效率。
下面列举了15个常用的JS简写技巧：

1. 使用箭头函数

使用箭头函数 () => {} 替代传统的函数表达式，简化函数定义。

传统函数表达式：

function add(a, b) {return a + b;
}

箭头函数简化定义：

const add = (a, b) => a + b;

通过使用箭头函数，我们可以将函数定义的语法更简洁地表示出来，省略了 function 关键字和 return 语句。箭头函数的特点是自动绑定了当前作用域的 this 值，因此在一些回调或高阶函数中使用会更加方便和简洁。请记住，箭头函数与传统函数表达式在语义和作用域绑定方面存在一些差异，在使用时要注意这些差异。

2. 对象字面量的简写

当对象属性的名称和值相同时，可以只写属性名，省略冒号和重复的变量名。

你可以在对象字面量中省略属性名和冒号，当属性名和变量名相同时，只写属性名即可。这在提高代码可读性方面是非常有用的。

例如，传统的写法：

const x = 1;
const y = 2;const obj = {x: x,y: y
};

使用简写方式：

const x = 1;
const y = 2;const obj = {x,y
};

在这个示例中，属性名和变量名 x 和 y 是相同的，所以我们可以直接在对象字面量中省略冒号和重复的变量名，只写属性名。这样可以减少代码的冗余，让代码更加简洁易读。

3. 解构赋值

使用解构赋值语法，一次性从数组或对象中提取多个值，简化变量的声明和赋值。

解构赋值语法可以方便地一次性从数组或对象中提取多个值，并将它们赋值给对应的变量。这样可以简化变量的声明和赋值的过程。

从数组中提取多个值：

const arr = [1, 2, 3];// 传统的写法
const a = arr[0];
const b = arr[1];
const c = arr[2];// 使用解构赋值
const [a, b, c] = arr;

从对象中提取多个值：

const obj = { x: 1, y: 2, z: 3 };// 传统的写法
const x = obj.x;
const y = obj.y;
const z = obj.z;// 使用解构赋值
const { x, y, z } = obj;

在这些示例中，我们使用解构赋值语法一次性从数组和对象中提取了多个值，并将它们赋值给相应的变量。这样可以简化代码，使得声明和赋值过程更加简洁和可读。请注意，在解构赋值时，变量名需要与数组或对象中的属性名一致，这样才能正确地提取对应的值。

4. 默认参数

在函数声明中使用默认参数，可以简化对函数的调用，避免传递 undefined 或 null。

确实，在函数声明中使用默认参数可以简化函数调用的过程，并且避免了传递 undefined 或 null 的情况。默认参数允许我们在定义函数时指定参数的默认值，如果函数在调用时没有为该参数提供值，将会使用默认值。

下面是一个示例，展示了如何在函数声明中使用默认参数：

function greet(name = 'Guest') {console.log(`Hello, ${name}!`);
}greet(); // 输出：Hello, Guest!
greet('Alice'); // 输出：Hello, Alice!

在上面的示例中，我们定义了一个名为 greet 的函数，并为 name 参数设置了默认值 'Guest'。当函数调用时没有提供 name 参数的值时，将使用默认值 'Guest' 来代替。这样，我们可以简单地调用 greet()，而无需显式地传递参数，或者传递 undefined 或 null。

使用默认参数不仅简化了函数的调用方式，还可以提高代码的可读性和灵活性。如果需要，我们仍然可以传递一个新的值来覆盖默认参数。

注意：默认参数的默认值可以是任何合法的表达式，例如常量、变量、函数调用等。

5. 模板字符串

使用模板字符串（``）来代替字符串拼接，使用 ${} 语法方便地插入变量。

当我们需要在字符串中插入变量时，可以使用模板字符串（``）和 ${} 语法来代替传统的字符串拼接。这种语法更加简洁和直观。

下面是一个示例，展示了如何使用模板字符串和 ${} 语法来插入变量：

const name = 'Alice';
const age = 28;// 传统的字符串拼接
const message = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(message);// 使用模板字符串和 ${} 语法
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message);

在上面的示例中，我们使用模板字符串来替代了传统的字符串拼接方式。在模板字符串中，我们使用 ${} 语法来插入变量，并将变量的值嵌入到字符串中。这让代码更加简洁易读，并且避免了繁琐的字符串连接操作。

6. 简写的条件判断

使用三元运算符（condition ? value1 : value2）来简化简单的条件判断。

是的，使用三元运算符可以简化简单的条件判断，特别是在需要根据条件选择不同的值时。三元运算符的语法是 condition ? value1 : value2。

下面是一个示例，展示了如何使用三元运算符来简化简单的条件判断：

function getDiscount(price, isMember) {const discount = isMember ? 0.2 : 0; // 如果 isMember 为真，则 discount 为 0.2，否则为 0return price - (price * discount);
}console.log(getDiscount(100, true)); // 输出：80
console.log(getDiscount(100, false)); // 输出：100

在上面的示例中，我们定义了一个名为 getDiscount 的函数，该函数根据 isMember 参数的值来确定折扣值。如果 isMember 为真（即成员），则折扣为 0.2，否则折扣为 0。通过使用三元运算符，我们可以根据条件快速选择不同的值，并在函数中进行相应的计算。

使用三元运算符能够简化代码，使其更加简洁和易读。但请注意，过多复杂的条件判断可能会降低代码的可读性，因此请适度使用三元运算符。在某些情况下，使用 if-else 语句可能更加清晰和可读。

7. 短路求值

使用逻辑与（&&）和逻辑或（||）来进行短路求值，简化一些条件判断。

逻辑与（&&）和逻辑或（||）运算符可以用于短路求值，从而简化一些条件判断。这种技巧称为"短路求值"，它利用了逻辑运算符的特性：逻辑与（&&）在前面的条件为假时短路，逻辑或（||）在前面的条件为真时短路。

下面是一个示例，展示了如何使用短路求值来简化条件判断：

function greet(user) {const name = user && user.name || 'Guest';console.log(`Hello, ${name}!`);
}greet({ name: 'Alice' }); // 输出：Hello, Alice!
greet(null); // 输出：Hello, Guest!
greet(undefined); // 输出：Hello, Guest!

在上面的示例中，我们定义了一个名为 greet 的函数，该函数接受一个 user 参数。使用短路求值，我们首先判断 user 是否存在（不是 null 或 undefined），如果存在，则使用 user.name 作为名称；否则，使用默认值 'Guest'。这样，我们可以在一行代码中实现了对 user 对象是否存在以及是否有名称的判断，避免了显式的 if-else 判断语句。

请注意，在使用短路求值时，需要注意操作数的顺序和条件判断的逻辑。确保逻辑与（&&）和逻辑或（||）的操作数顺序和条件判断的顺序是一致的，以确保正确的短路求值。

短路求值在某些情况下可以提高代码的简洁性和可读性，但有时也可能导致代码难以理解。请确保在使用短路求值时保持代码清晰和易于维护。

8. 真值判断

使用 !! 来将一个值转换为对应的布尔值，判断一个变量是否为真值。

可以使用 !! 来将一个值转换为对应的布尔值。这种技巧被称为"双重取反"，它利用了 JavaScript 中的类型转换规则。

下面是一个示例，展示了如何使用 !! 判断一个变量是否为真值：

function isTruthy(value) {return !!value;
}console.log(isTruthy(0)); // 输出：false
console.log(isTruthy('')); // 输出：false
console.log(isTruthy(null)); // 输出：false
console.log(isTruthy(undefined)); // 输出：false
console.log(isTruthy(false)); // 输出：falseconsole.log(isTruthy(1)); // 输出：true
console.log(isTruthy('hello')); // 输出：true
console.log(isTruthy({})); // 输出：true
console.log(isTruthy(true)); // 输出：true

在上面的示例中，我们定义了一个名为 isTruthy 的函数，该函数接受一个 value 参数。通过使用 !!value，我们将 value 转换为对应的布尔值。如果 value 为真值（非 0、非空字符串、非 null、非 undefined、非 false），则返回 true；否则返回 false。

双重取反的作用是将任何值转换为其对应的布尔值，简化了对真值判断的过程。它可以在条件判断、逻辑运算等场景中使用，使代码更加简洁和直观。

需要注意的是，双重取反操作符 !! 在转换为布尔值时具有强制性，如果你只需要判断变量是否为真值，可以直接在条件语句中使用变量作为判断条件，而无需使用双重取反。使用双重取反通常用于显式地将一个值转换为布尔值。

9. 数组方法的简写

使用数组方法如 map、filter、reduce 等来替代循环操作，提高代码简洁性。

使用数组方法如 map、filter、reduce 等可以更简洁地操作数组，替代传统的循环操作。它们提供了一种函数式编程的风格，让代码更易读、易写、易于维护。下面是一些示例代码，展示了如何使用这些数组方法：

1. 使用 map 方法：

const numbers = [1, 2, 3, 4, 5];const squaredNumbers = numbers.map(num => num ** 2);
console.log(squaredNumbers); // 输出：[1, 4, 9, 16, 25]const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

在上面的示例中，我们使用 map 方法对数组 numbers 中的每个元素进行操作，生成一个新的数组。第一个例子将每个数字的平方放入 squaredNumbers 数组中，第二个例子将每个数字乘以 2 放入 doubledNumbers 数组中。

2. 使用 filter 方法：

const numbers = [1, 2, 3, 4, 5];const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // 输出：[1, 3, 5]

在上面的示例中，我们使用 filter 方法根据指定条件过滤数组 numbers，生成一个新的数组。第一个例子筛选出数组中的偶数，第二个例子筛选出数组中的奇数。

3. 使用 reduce 方法：

const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 输出：15const max = numbers.reduce((maxNum, num) => (num > maxNum ? num : maxNum), -Infinity);
console.log(max); // 输出：5

在上面的示例中，我们使用 reduce 方法将数组 numbers 中的元素归约为一个值。第一个例子使用 reduce 方法计算数组中所有数字的和，初始值为 0。第二个例子使用 reduce 方法找到数组中的最大值，初始值为负无穷小。

这些是使用 map、filter、reduce 等数组方法来替代循环操作的示例。它们可以显著简化代码，并且提供了丰富的功能来操作和转换数组数据。

10. 使用扩展运算符

使用扩展运算符（...）来合并数组、复制数组或对象，简化相关操作。

使用扩展运算符（...）可以在 JavaScript 中合并数组、复制数组或对象，从而简化相关操作。下面是一些示例代码，演示如何使用扩展运算符：

1. 合并数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // 输出：[1, 2, 3, 4, 5, 6]

在上面的示例中，我们使用扩展运算符 ... 将两个数组 arr1 和 arr2 合并成一个新的数组 mergedArray。

2. 复制数组：

const originalArray = [1, 2, 3];const copiedArray = [...originalArray];
console.log(copiedArray); // 输出：[1, 2, 3]

上面的示例展示了如何使用扩展运算符 ... 快速复制一个数组。通过将原始数组扩展到一个新数组中，我们创建了一个具有相同元素的副本。

3. 合并对象：

const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // 输出：{ foo: 'bar', baz: 'qux' }

在上面的示例中，我们使用扩展运算符 ... 将两个对象 obj1 和 obj2 合并成一个新的对象 mergedObject。通过这种方式，我们可以将多个对象的属性合并成一个新的对象。

扩展运算符在这些例子中起到了简化代码的作用，它允许我们更方便地合并数组、复制数组或对象。它可以应用于数组、对象以及在 ES6 中引入的可迭代对象（如字符串、Set、Map等）。

11. 简写属性方法

在对象中使用函数的简写形式，只写函数名，省略冒号和 function 关键字。

在对象中使用函数的简写形式可以让代码更简洁。在 ES6 中，我们可以直接在对象字面量中使用函数名来定义函数属性，省略冒号和 function 关键字。下面是一个示例代码：

const obj = {name: 'John',age: 30,greet() {console.log(`Hello, my name is ${this.name}. I'm ${this.age} years old.`);}
};obj.greet(); // 输出：Hello, my name is John. I'm 30 years old.

在上面的示例中，我们定义了一个对象 obj，其中包含名为 greet 的函数属性。这里直接使用了函数名 greet 来定义函数，而省略了冒号和 function 关键字。函数可以像普通函数一样被调用。

通过使用函数的简写形式，我们可以更清晰地在对象中定义和使用函数，避免了传统的冗长语法，使代码更易读、易写。

12. 使用箭头函数的简写语法

当只有一个参数时，可以省略括号；当函数体只有一条返回语句时，可以省略大括号和 return。

当函数只有一个参数时，可以省略参数外的括号。当函数体只有一条返回语句时，也可以省略大括号和 return 关键字。下面是一些示例代码来说明这两种情况：

1. 省略参数括号：

const square = x => x * x;console.log(square(5)); // 输出：25

在上面的示例中，square 函数只有一个参数 x，因此我们可以省略参数的括号。

2. 省略大括号和 return：

const greet = name => `Hello, ${name}!`;console.log(greet('John')); // 输出：Hello, John!

在上面的示例中，greet 函数只有一条返回语句，即返回一个字符串，并且没有其他逻辑需要执行。因此，我们可以省略大括号和 return 关键字。

这种简写形式可以使单参数函数和简单的返回语句更为简洁，提高代码的可读性和简洁性。请注意，这种简写形式适用于特定的情况，如果函数需要多个参数或包含复杂的逻辑，还是需要使用完整的语法形式来定义函数。

13. 数组解构赋值和函数默认参数的结合

将默认参数与数组解构赋值结合，简化函数参数的初始化和赋值。

通过将默认参数与数组解构赋值结合使用，我们可以简化函数参数的初始化和赋值。下面是一个示例代码：

function printUser({ name = 'John', age = 30, city = 'New York' }) {console.log(`Name: ${name}`);console.log(`Age: ${age}`);console.log(`City: ${city}`);
}printUser({ name: 'Alice', age: 25 }); 
// 输出：
// Name: Alice
// Age: 25
// City: New YorkprintUser({}); 
// 输出：
// Name: John
// Age: 30
// City: New York

在上面的示例中，我们定义了一个名为 printUser 的函数，它接受一个对象作为参数，并使用对象解构赋值将属性值赋给变量 name、age 和 city。我们还使用了默认参数来指定在调用函数时未提供对应属性的默认值。

通过这种方式，我们可以在函数内部直接使用解构赋值的变量，而无需手动进行参数初始化和赋值的步骤。这样可以简化代码，尤其是在处理多个参数的函数时，使代码更清晰易读。如果调用函数时未提供对应属性，将使用默认值进行初始化。

14. 简写的对象方法定义

在对象中使用方法的简写形式，省略 function 关键字和冒号。

在对象中使用方法的简写形式是一种省略 function 关键字和冒号的语法。下面是一个示例代码：

const person = {name: 'John',age: 30,sayHello() {console.log(`Hello, my name is ${this.name}.`);}
};person.sayHello(); 
// 输出：Hello, my name is John.

在上面的示例中，我们定义了一个 person 对象，其中包含 name 和 age 属性，以及一个 sayHello 方法。注意到 sayHello 方法的定义没有使用冒号和 function 关键字，而是直接写方法的函数体。

这种简写形式可使对象中的方法定义更加简洁。在对象字面量中，如果我们要定义一个简单的函数作为方法，我们可以直接省略冒号和 function 关键字，并将函数体写在方法的位置上。这样可以减少冗余代码，使代码更清晰易读，特别是当我们同时定义多个方法时。

15. 使用`Array.from`和`Array.of`

使用 Array.from 将可迭代对象（如字符串和类数组对象）转换为数组，使用 Array.of 创建具有固定参数的新数组。

使用 Array.from 可以将可迭代对象（如字符串和类数组对象）转换为一个新的数组。而 Array.of 可以创建具有固定参数的新数组。下面是两个示例代码：

// 使用 Array.from 将字符串转换为数组
const str = 'Hello';
const arr = Array.from(str);
console.log(arr); 
// 输出：[ 'H', 'e', 'l', 'l', 'o' ]// 使用 Array.from 将类数组对象转换为数组
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr2 = Array.from(arrayLike);
console.log(arr2); 
// 输出：[ 'a', 'b', 'c' ]// 使用 Array.of 创建具有固定参数的新数组
const newArr = Array.of(1, 2, 3, 4, 5);
console.log(newArr); 
// 输出：[ 1, 2, 3, 4, 5 ]