JavaScript 的10个好用的开发技巧

JavaScript 是前端开发中的必备语言。但是我发现很多同学对于 JavaScript 的技巧使用却并不熟悉。所以，今天咱们就来分享一下开发技巧，帮你更好地使用 JavaScript，提升开发效率！

01：使用别名进行析构

想要获取到一个对象的多个属性时。使用 解构 + 别名 的方式一次获取多个对象的属性，并重新命名

const person = { firstName: 'John', lastName: 'Doe', age: 30 };
const { firstName: fName, lastName: lName } = person;

console.log(fName); // Output: John
console.log(lName); // Output: Doe

02：可选链接

可选的链运算符(？.)允许您访问对象的嵌套属性，而 不必担心中间属性是空 的还是未定义的。（注意：不要滥用！！！）

const user = {
  info: {
    address: {
      city: 'JiNan'
    }
  }
};

const city = user?.info?.address?.city;
console.log(city); // 输出: JiNan

const city = user?.hello?.city;
console.log(city); // 不会报错

03：Nullish 合并操作符

'??'是一个Nullish合并操作符（Nullish coalescing operator）。它用于判断一个值是否为null或undefined，如果是的话，则返回另一个值。
它与'||'或'??'操作符有所不同，因为它只检查空值 ( null 或 undefined )的情况，而不是任何“假值” ( false , 0 , '' 等)的情况。

例如，下面的代码展示了'??'操作符的用法：

const foo = null ?? 'default value';
console.log(foo);  // Output：'default value'

const bar = undefined ?? 'default value';
console.log(bar);  // Output：'default value'

const baz = 0 ?? 'default value';
console.log(baz);  // Output：0

04：动态对象键

可以使用方括号来定义对象字面量中的动态对象键。

const dynamicKey = 'dynamicProperty';
const obj = {
  [dynamicKey]: '这是一个动态的属性'
};

console.log(obj.dynamicProperty); // 这是一个动态的属性

05：私有类字段

现在，JavaScript类支持使用#符号的私有字段。

私有字段不能从类外部访问，从而提供封装和信息隐藏。

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); //Output: 1

06：Promise.allSettled()

Promise.allSettled() 方法返回一个 Promise，该 Promise 在所有给定的 Promise 已经 resolve 或 reject 后 resolve，提供每个 Promise 的结果数组。

const promises = [
  Promise.resolve('Resolved'),
  Promise.reject('Rejected')
];

Promise.allSettled(promises)
  .then(results => {
    console.log(results);
  });
// [{ status: "fulfilled", value: "Resolved" }, { status: "rejected", reason: "Rejected" }]

07：globalThis 全局对象

globalThis对象提供了一种在不同环境下（包括浏览器和Node.js）访问全局对象的一致方式。

console.log(globalThis === window); // 在浏览器场景下: true
console.log(globalThis === global); // 在 Node.js 中: outputs: true

08：RegExp匹配索引

正则表达式匹配现在提供有关 发生匹配的索引的信息。

const text = 'Hello, world!';
const pattern = /world/;

const match = text.match(pattern);
console.log(match.index); //  7

09：flatMap

flatMap() 方法将 map() 和 flat() 的效果结合到一个方法中。

const numbers = [1, 2, 3];
const doubledAndFlattened = numbers.flatMap(num => [num * 2]);

console.log(doubledAndFlattened); // [2, 4, 6]

10：逻辑赋值运算符

JavaScript 引入了逻辑赋值运算符（&&=、||= 和 ??=），以简洁的方式将逻辑操作与赋值结合起来。

let x = false;
x ||= true;

console.log(x); // Output: true