更优雅的使用JavaScript

这是一篇提升 JavaScript 编码水平的合集

1. 使用constandlet代替var

使用const和let有助于避免变量提升和范围问题。const用于常量，而let用于可以重新分配的变量。

// 之前
var name = "张三" ; 
var age = 25 ; 

// 优化后
const name = "张三" ; 
let age = 25 ;

2.使用箭头函数

箭头函数提供了更短的语法并在词汇上绑定this值。

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

// 优化后
const  add = ( a, b ) => a + b;

3. 使用模板字符串

模板文字允许您轻松地将变量和表达式插入到字符串中。

// 之前
let name = "张三" ; 
let message = "Hello, " + name + "!" ; 

// 优化后
let name = "张三" ; 
let message = `Hello, ${name} !` ;

4.默认参数

默认函数参数允许您使用默认值初始化命名参数。

// 之前
function greet(name) {
    if (name === undefined) {
        name = "Guest";
    }
    return `Hello, ${name}`;
}

// 优化后
function greet(name = "Guest") {
    return `Hello, ${name}`;
}

5. 解构赋值

解构允许你将数组中的值或对象的属性解包到不同的变量中。

// 之前
const person = { name: "张三" , age: 21 }; 
const name = person.name; 
const age = person.age; 

// 优化后
const person = { name: "张三r" , age: 21 }; 
const { name, age } = person;

6. 扩展运算符

扩展运算符允许你将可迭代对象（如数组）的元素扩展为新的数组或对象。

// 之前
const arr1 = [ 1 , 2 , 3 ]; 
const arr2 = [ 4 , 5 , 6 ]; 
const combined = arr1.concat ( arr2); 

// 优化后
const arr1 = [ 1 , 2 , 3 ]; 
const arr2 = [ 4 , 5 , 6 ]; 
const combined = [...arr1, ...arr2];

7.使用===代替==

使用===确保值和类型相同，避免意外的类型强制。

// 之前
if (x == "5" ) { 
    // 如果 x 是 "5" 或 5，则为真
} 

// 优化后
if (x === 5 ) { 
    // 仅当 x 正好是 5 时，才为真
}

8. 使用 Async/Await 编写异步代码

Async/await 使异步代码看起来和行为起来像同步代码，使其更具可读性和可维护性。
// 之前
function fetchData() {
    return fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        });
}

// 优化后
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}