30 个 JavaScript 技巧，让你的代码更具可读性

1 、使用 !! 转换为布尔值

使用双重否定快速将任何值转换为布尔值。

let truthyValue = !!1; // true
let falsyValue = !!0; // false

2 、 默认函数参数

设置函数参数的默认值以避免定义错误。

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

greet();//Hello Guest!

greet('World');//Hello World!

3 、 短 If-Else 的三元运算符

if-else 语句的简写。

let price = 100;
let message = price > 50 ? "Expensive" : "Cheap";//Expensive

4 、动态字符串的模板文字

使用模板文字将表达式嵌入字符串中。

let item = "coffee";
let price = 15;
let result = `One ${item} costs $${price}`;//One coffee costs $15

5 、解构赋值

轻松从对象或数组中提取属性。

let [x, y] = [1, 2];
console.log(x,y);//1,2
let {name, age} = {name: "Alice", age: 30};
console.log(name,age);//Alice,30

6 、用于数组和对象克隆的扩展运算符

克隆数组或对象而不引用原始对象。

let arr = [1, 2, 3];
let cloneArr = [...arr];//[1,2,3]

7 、短路求值

使用逻辑运算符进行条件执行。

let isValid = true;
isValid && console.log("Valid!");//Valid!

8 、可选链接 (?.)

如果引用为空，则安全地访问嵌套对象属性而不会出现错误。

let user = {name: "John", address: {city: "New York"}};
/*引用不为空*/
console.log(user?.address?.city); // "New York"
/*引用为空*/
console.log(user?.info?.post); // undefined

9 、空值合并运算符 (??)

使用 ?? 为空或未定义提供默认值。

let username = null;
console.log(username ?? "Guest"); // "Guest"

10 、使用 map、filter 和 reduce 进行数组操作

无需传统循环即可优雅地处理数组。

let numbers = [1, 2, 3, 4];

// Map
let doubled = numbers.map((x) => x * 2);
console.log(doubled);//[2, 4, 6, 8]

// Filter
const evens = numbers.filter((x) => x % 2 === 0); 
console.log(evens);//[2, 4]

// Reduce
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);
console.log(sum);//10

11 、标记模板文字

使用模板文字进行函数调用，以进行自定义字符串处理。

function highlight(strings, ...values) {
  return strings.reduce(
    (prev, current, i) => `${prev}${current}${values[i] || ""}`,
    ""
  );
}
let price = 10;

console.log(highlight`The price is ${price} dollars.`);
//The price is 10 dollars.

12 、使用 Object.entries() 和 Object.fromEntries()

将对象转换为数组,数组转换为对象，以便于操作。

let person = { name: "Alice", age: 25 };
let entries = Object.entries(person);//[["name","Alice"],["age",25]]
let newPerson = Object.fromEntries(entries);//{name: 'Alice', age: 25}

13 、 用于唯一元素的 Set 对象去重

使用 Set 存储任何类型的唯一值。

let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];//[1, 2, 3, 4]

14 、 对象中的动态属性名称

在对象文字表示法中使用方括号来创建动态属性名称

let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"}; // {name: 'Alice'}

15 、使用 bind() 进行函数柯里化

创建一个新函数，当调用该函数时，将其 this 关键字设置为提供的值。

function multiply(a, b) {
  return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 10

16 、使用 Array.from() 从类似数组的对象创建数组

将类似数组或可迭代的对象转换为真正的数组。

const obj = {
  0: 'Hello',
  1: ',',
  2: ' ',
  3: 'World',
  length: 4
};

const arr = Array.from(obj);

console.log(arr); //[ 'Hello', ',', ' ', 'World' ]

17 、可迭代对象的 for…of 循环

直接迭代可迭代对象（包括数组、映射、集合等）。

let arr = []
for (let value of ["a", "b", "c"]) {
  arr.push(value)
}
console.log(arr);//["a", "b", "c"]


const str = "Hello, World!";
let arr2 = []
for (let char of str) {
  arr2.push(char)
}
console.log(arr2);//['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

18 、 使用 Promise.all() 实现并发 Promise

同时运行多个 Promise 并等待所有 Promise 完成。

let promises = [fetch(url1), fetch(url2)];
Promise.all(promises).then((responses) => console.log("All done"));

19 、函数参数的 Rest 参数

将任意数量的参数捕获到数组中。

function sum(...nums) {
  return nums.reduce((acc, current) => acc + current, 0);
}

sum(1,2,3,4,5);//15
sum(12,15,18);//45

20 、用于性能优化的记忆化

存储函数结果以避免冗余处理。

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    let n = args[0]; // assuming single argument for simplicity
    if (n in cache) {
      console.log("Fetching from cache");
      return cache[n];
    } else {
      console.log("Calculating result");
      let result = fn(n);
      cache[n] = result;
      return result;
    }
  };
};

21 、使用 ^ 交换值

使用 XOR 按位运算符交换两个变量的值，无需临时变量。

let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1

22 、使用 flat() 展平数组

使用 flat() 方法轻松展平嵌套数组，展平深度作为可选参数。

let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);// [1, 2, 3, 4]

23 、使用一元加法转换为数字

使用一元加法运算符快速将字符串或其他值转换为数字。

let str = "123";
let num = +str;
console.log(typeof(num));//number

24 、 HTML 片段的模板字符串

使用模板字符串创建 HTML 片段，使动态 HTML 生成更清晰。

let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
console.log(html);//'<ul><li>apple</li><li>orange</li><li>banana</li></ul>'

25 、使用 Object.assign() 合并对象

将多个源对象合并为目标对象，有效地组合它们的属性。

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let obj3 = Object.assign(obj1, obj2);

console.log(obj3); // { a: 1, b: 3, c: 4 }

26 、短路默认值

处理可能未定义或为空的变量时，利用逻辑运算符分配默认值。

let options = userOptions || defaultOptions;

27 、 使用括号表示法动态访问对象属性

使用括号表示法动态访问对象的属性，当属性名称存储在变量中时很有用。

let property = "name";
let value = person[property]; // Equivalent to person.name

28 、 使用 Array.includes() 进行存在性检查

使用 includes() 检查数组是否包含某个值，这是 indexOf 的更清晰的替代方案。

const fruits = ['apple', 'banana', 'cherry'];
 
// 检查数组是否包含特定的水果
const fruitToCheck = 'banana';
 
// 使用 Array.includes() 方法来检查
const hasFruit = fruits.includes(fruitToCheck);
 
// 输出结果
console.log(hasFruit); // 输出: true，因为 'banana' 存在于数组中

29 、 Function.prototype.bind() 的强大功能

将函数绑定到上下文（此值）并部分应用参数，创建更可重用和模块化的代码。

const greet = function (greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
};
const greetJohn = greet.bind({ name: "John" }, "Hello");
console.log(greetJohn("!")); // "Hello, John!"

30 、防止对象修改

使用 Object.freeze() 防止对对象的修改，使其不可变。为了实现更深层次的不变性，请考虑更彻底地实施不变性的库。

let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mod