30 个JavaScript片段技巧干货，让你代码有更好的可读性

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

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

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

2 、 默认函数参数

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

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

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

if-else 语句的简写。

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

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

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

let item = "coffee";
let price = 15;
console.log(`One ${item} costs $${price}.`);

5 、解构赋值

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

 let [x, y] = [1, 2];
 let {name, age} = {name: "Alice", age: 30};

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

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

let originalArray = [1, 2, 3];
let clonedArray = [...originalArray];

7 、短路求值

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

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

8 、可选链接 (?.)

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

  let user = {name: "John", address: {city: "New York"}};
  console.log(user?.address?.city); // "New York"

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

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

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

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

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

// Map
  let numbers = [1, 2, 3, 4];
  let doubled = numbers.map(x => x * 2);

  // Filter
  const evens = numbers.filter(x => x % 2 === 0);

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

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.`);

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

将对象转换为数组并转换回来，以便于操作。

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

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

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

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

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

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

 let dynamicKey = 'name';
 let person = {[dynamicKey]: "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() 从类似数组的对象创建数组

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

  let nodeList = document.querySelectorAll('div');
  let nodeArray = Array.from(nodeList);

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

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

  for (let value of ['a', 'b', 'c']) {
   console.log(value);
  }

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);
}

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);

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

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

  let str = "123";
  let num = +str; // 123 as a number

24 、 HTML 片段的模板字符串

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

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

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

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

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

26 、短路默认值

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

let options = userOptions || defaultOptions;

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

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

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

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

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

 if (myArray.includes("value")) {
   // Do something
  }

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

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。