JavaScript 提供了多种编写简洁、优雅代码的方法。以下是一些常见的技巧：

使用三元运算符

const result = condition ? value1 : value2;

三元运算符是一种更简洁的条件表达式写法

嵌套结构

const {info = "default"} = result;

const {data: myData} = result;
console.log(myData);

const result = {
  user: {
    name: 'Alice',
    age: 30,
  },
};

const {user: {name, age}} = result;
console.log(name); // 输出: Alice
console.log(age); // 输出: 30

解构赋值还支持默认值

在解构时，你还可以使用不同的变量名来存储提取的值：

解构也可以应用于嵌套的对象或数组：

使用逻辑运算符

if (condition1 && condition2) {
    doSomething();
}

fun(types = "png"){}

使用逻辑运算符 && 和 || 来简化条件判断

使用 = 可以给入参赋默认值

数组的方法

// 1
if (array.includes(element)) {
    console.log('Element found');
}
// 2
const foundItem = array.find(item => item.id === someId);
// 3
if (array.some(item => item.isActive)) {
    console.log('At least one active item');
}
// 4
if (array.every(item => item.isValid)) {
    console.log('All items are valid');
}
// 5
const total = array.reduce((acc, item) => acc + item.value, 0);
// 6
const squaredNumbers = numbers.map(number => number * number);
// 7
const activeItems = items.filter(item => item.isActive);
// 8
array.forEach(item => console.log(item));
// 9
const result = array.reduceRight((accumulator, current) => {
    return accumulator + current;
}, initial);

1. 检查数组或对象中是否存在某个值。
2. 寻找数组中满足条件的第一个元素或其索引。
3. 检查数组中是否至少有一个元素满足条件。
4. 检查数组中的所有元素是否都满足条件。
5. 对数组进行累积操作，可以替代循环和条件判断。
6. 对数组中的每个元素执行一个函数，并返回一个新数组。
7. 创建一个新数组，包含通过测试的所有元素。
8. 对数组中的每个元素执行一个函数，不需要返回值。
9. 从数组的末尾开始，对元素进行累加操作。

使用 Object

// 1
const entries = Object.entries(obj);
// 2
const values = Object.values(obj);
// 3
const obj = Object.fromEntries(entries);
// 4
const newObj = Object.assign({}, oldObj, { newProperty: value });

1. **bject.entries()**对象转换为仅键数组
2. **bject.values()**对象转换仅为值数组
3. **Object.fromEntries()**将键值对数组转换回对象
4. **Object.assign()**复制对象的属性到另一个对象。

使用展开运算符

const newObj = { ...oldObj, newProperty: value };

简化对象的合并或克隆。

使用模板字符串

const message = `Hello, ${name}!`;

创建包含变量的字符串，避免字符串连接

使用 async/await

async function fetchData() {
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

简化异步代码的编写，避免回调地狱。

代替ifelse多层循环

使用switch

switch (variable) {
   case 'case1':
       // code block
       break;
   case 'case2':
       // code block
       break;
   default:
       // code block
}

使用逻辑运算符

const fun = (time: Number) => {
 console.log(time);
};
condition.includes(1) && fun(new Date().getTime());

使用对象形式

const func = (value) => {
 const obj = {
   name: "张三",
   age: 18,
   leng: 18,
 };
 return obj[value];
};

当有多个条件分支时,可以使用数组或者对象的方法实现优雅写法，并且只要不是太夸张的条件分支，代码执行速度都是一样的

使用可选链 (Optional Chaining) ?.

const value = obj?.deeply?.nested?.property;

简化访问深层嵌套对象属性的代码，避免在访问不存在的属性时抛出错误。

使用空值合并运算符 (Nullish Coalescing Operator) ??

 const value = obj.property ?? 'default value';
 

提供一个默认值，当左侧表达式为 null 或 undefined 时使用。

使用 Function.prototype.bind

const boundFunction = someFunction.bind(context, arg1, arg2);

创建一个新函数，当被调用时，将其 this 绑定到提供的值，并在调用新函数时，传入给定参数作为原函数的参数。

使用Promise

Promise.all()

Promise.all([promise1, promise2]).then(([result1, result2]) => {
    console.log(result1, result2);
});

等待多个 Promise 对象全部解决。

Promise.all是并发

Promise.rece()

Promise.race([promise1, promise2]).then(result => {
    console.log(result);
});

等待多个 Promise 对象中第一个解决的 Promise。

Symbol

const uniqueKey = Symbol('uniqueKey');
const obj = { [uniqueKey]: 'value' };

创建一个唯一的、不可变的数据类型作为对象属性的键。

使用Proxy

const handler = {
    get: (target, prop) => {
        return prop in target ? target[prop] : 37;
    }
};
const p = new Proxy({}, handler);

创建一个对象的代理，可以捕获对它的操作。

使用Reflect

const obj = { x: 1, y: 2 };
Reflect.set(obj, 'z', 3); // { x: 1, y: 2, z: 3 }

提供静态方法来操作对象，与 Object 方法相对应，但有一些差异。

使用JSON.parse 和 JSON.stringify

const jsonString = JSON.stringify(obj);
const obj = JSON.parse(jsonString);

将 JSON 字符串转换为 JavaScript 对象，或将 JavaScript 对象转换为 JSON 字符串。