js不常用但实用的JavaScript超级技巧

提示：记录工作中遇到的需求及解决办法

---

前言

JavaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。以下是一些超级技巧，它们将帮助你成为更高效、更有效的 JavaScript 开发人员，每个技巧都有详细的解释和示例。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、使用 let 和 const 代替 var

问题：var 具有函数作用域，这可能导致错误和不可预测的行为。

解决方案：使用具有块作用域的 let 和 const。

let count = 0;
const PI = 3.14;

使用 let 和 const 有助于防止与作用域相关的错误，确保变量只能在定义的块内访问。

2、默认参数

问题：如果没有提供参数，函数可能会失败。

解决方案：使用默认参数设置后备值。

function greet(name = 'Guest') {
   
return `Hello, ${
     name}!`;
}
console.log(greet()); // "Hello, Guest!"

默认参数确保函数具有合理的默认值，从而防止错误并使代码更加健壮。

3、模板文字

问题：字符串连接可能很麻烦且容易出错。

解决方案：使用模板文字进行更清晰、更易读的字符串插值。

const name = 'John';
const greeting = `Hello, ${
     name}!`;
console.log(greeting); // "Hello, John!"

模板文字使创建带有嵌入表达式和多行字符串的字符串变得更加容易。

4、解构赋值

问题：从对象和数组中提取值可能非常冗长。

解决方案：使用解构赋值更简洁地提取值。

const user = {
    name: 'Jane', age: 25 };
const {
    name, age } = user;
console.log(name, age); // "Jane" 25

解构赋值允许您轻松地将对象中的属性和数组中的元素提取到不同的变量中。

5、箭头函数

问题：传统函数表达式可能很冗长，并且不会在词汇上绑定“this”。

解决方案：使用箭头函数来实现更短的语法和词汇“this”。

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

箭头函数为函数表达式提供了简洁的语法，并确保 this 在词汇上是绑定的。

6、扩展运算符

问题：组合数组或对象可能很麻烦。

解决方案：使用扩展运算符可以轻松组合数组和对象。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = […arr1, …arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

扩展运算符允许您将一个数组或对象的元素扩展到另一个数组或对象中。

7、 剩余参数

问题：处理可变数量的函数参数可能很棘手。

解决方案：使用剩余参数捕获数组中的所有参数。

function sum(…args) {
   
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

剩余参数允许您将无限数量的参数作为数组处理，从而使您的函数更加灵活。

8、短路求值

问题：编写条件语句可能很冗长。

解决方案：使用短路求值编写简洁的条件。

const isLoggedIn = true;
const user = isLoggedIn && {
    name: 'Jane', age: 25 };
console.log(user); // { name: 'Jane', age: 25 }

短路求值使用逻辑运算符 && 和 || 来简化条件表达式。

9、可选链

问题：如果链中的任何部分为 null 或 undefined，则访问深层嵌套的属性可能会导致错误。

解决方案：使用可选链安全地访问嵌套属性。

const user = {
    profile: {
    name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"

可选链式连接允许您安全地访问嵌套属性，而无需明确检查链式连接的每一级是否为 null 或 undefined。

10、空值合并

问题：如果值为 0 或 ””，则使用 || 提供默认值可能会产生意外结果。

解决方案：仅在 null 或 undefined 时使用空值合并 (??) 提供默认值。

const user = {
    name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0

空值合并仅允许在左侧为“null”或“undefined”时提供默认值。

11、对象属性简写

问题：将变量分配给对象属性可能会重复。

解决方案：使用属性简写来简化对象创建。

const name = 'Jane';
const age = 25;
const user = {
    name, age };
console.log(user); // { name: 'Jane', age: 25 }

属性简写允许您在属性名称与变量名称匹配时省略属性名称，从而使代码更简洁。

12、动态属性名称

问题：使用动态属性名称创建对象可能很冗长。

解决方案：使用计算属性名称动态创建对象属性。

const propName = 'age';
const user = {
    name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

计算属性名称允许您动态创建对象属性，使用表达式的值作为属性名称。

13、数组 map()、filter() 和 reduce()

问题：迭代数组以转换、过滤或累积值可能会重复。

解决方案：使用 map()、filter() 和 reduce() 进行常见的数组操作。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

这些数组方法提供了一种转换、过滤和减少数组的函数式方法，使您的代码更具表现力和简洁性。

14、字符串 includes()、startsWith() 和 endsWith()

问题：检查字符串是否包含、以子字符串开头或以子字符串结尾可能很冗长。

解决方案：使用 includes()、startsWith() 和 endsWith() 进行更简单的字符串检查。

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

这些字符串方法提供了一种简单易读的方法来检查子字符串的存在、开始或结束。

15、函数参数中的数组和对象解构

问题：从作为函数参数传递的数组或对象中提取值可能很冗长。

解决方案：在函数参数中使用解构来直接提取值。

const user = {
    name: 'Jane', age: 25 };
function greet({
     name, age }) {
   
return