大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

JavaScript 是前端开发的重要语言，但许多开发人员可能并不熟悉它的一些强大功能。以下是 10 项有助于提高编码效率的 JavaScript 技巧。

1. 使用 flatMap 进行数组操作

flatMap() 是一个多功能方法，其结合了 map() 和 flat() 的功能，可以将数组展平一层，该方法非常适合以更简洁的语法管理嵌套数据。

同时，flatMap 可用于在映射过程中动态添加和移除项，即其允许将多个项映射到多个项而非始终保持一对一映射。从这个意义上讲，其作用类似于 filter 的反面，返回包含 1 个元素的数组来保留项，返回一个包含多个元素的数组来添加项，返回一个包含 0 个元素的数组来移除项。

console.log([1, 2, , 4, 5].flatMap((x) => [x, x * 2]));
// 输出 [1, 2, 2, 4, 4, 8, 5, 10]
console.log([1, 2, 3, 4].flatMap((x) => [, x * 2]));
// 输出 [2, 4, 6, 8]

2. 利用高级 console 方法

JavaScript 的控制台对象提供的功能远不止 console.log()，其还包含用于测量性能的 console.time 方法、用于结构化输出的 console.dir 方法以及用于堆栈跟踪的 console.trace 方法。

console.time("fetch time");
fetch("https://reqres.in/api/users").then(() => console.timeEnd("fetch time"));
// 以上代码测量时间

console.dir() 静态方法显示指定 JavaScript 对象的属性列表。在浏览器控制台中，输出以带有三角形标记的层级列表形式呈现以便查看子对象的内容。

console.dir(object);
console.dir(object, options);

而 console.trace() 静态方法将堆栈跟踪输出到控制台：

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();

3. 使用 structuredClone() 进行深度克隆

JavaScript 中新增的 structuredClone() 方法提供了一种简单、高效的方法来对对象进行深度克隆，即使是复杂类型。

const original = {name: "MDN"};
original.itself = original;
// 克隆
const clone = structuredClone(original);
console.assert(clone !== original);
// 对象不一样
console.assert(clone.name === "MDN");
// 有同样的值
console.assert(clone.itself === clone);
// 循环引用被保留

4. 使用带标签的模板 (Tagged Template) 进行自定义解析

模板文字（template literals）或模板字符串（template strings）附带的一个好处是能够对它们进行标记。

这意味着开发者可以通过函数运行模板字符串，而不是让浏览器立即将该值分配给变量，从而可以控制实际字符串的生成方式。

标签模板（tag template）的工作方式是开发者只需创建一个函数，然后获取要针对字符串运行的函数的名称，最后只需将该函数名称放在模板前面即可：

function highlight(strings, ...values) {
  let str = "";
  strings.forEach((string, i) => {
    str += string + (values[i] || "");
    // 因为长度问题判空处理
  });
  return str;
}
const name = "Snickers";
const age = "100";
const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;
console.log(sentence);
// 输出 My dog's name is Snickers and he is 100 years old

5. 使用 Symbols 作为 WeakMap 的键

在 WeakMap 中使用非全局 Symbols 作为键有助于保持内存效率且避免键重复，因为弱引用允许在不再需要对象时进行垃圾回收。

let mySymbol = Symbol("mySymbol");
let myWeakMap = new WeakMap();
myWeakMap.set(mySymbol, { name: "John"});

6. 使用生成器 Generators 实现高效的数据处理

生成器能够对异步编程进行细粒度的控制，非常适合处理大数据流。

async function* readFiles(directory) {
  const files = await fs.readdir(directory);
  for (const file of files) {
    const stats = await fs.stat(file);
    if (stats.isFile()) {
      yield {
        name: file,
        content: await fs.readFile(file, "utf8"),
      };
    }
  }
}

const files = readFiles(".");
console.log((await files.next()).value);
// 可能得输出: {name: 'file1.txt', content: '...'}
console.log((await files.next()).value);
// 可能得输出: {name: 'file2.txt', content: '...'}

async function* 声明会创建一个 AsyncGeneratorFunction 对象，其每次调用异步生成器函数时都会返回一个新的 AsyncGenerator 对象，该对象遵循异步迭代器协议。每次调用 next() 都会返回一个 Promise，该 Promise resolve 为迭代器的结果对象。

异步生成器函数结合了异步函数和生成器函数的特性，开发者可以在函数体中同时使用 await 和 yield 关键字，其中 await 以更符合工程学的方式处理异步任务，而 yield 能充分利用生成器函数的惰性执行特性。

7. 带有 # 的私有类字段

私有属性与常规的类属性相对应，后者是公共的，包括：类字段、类方法等。私有属性使用 # 前缀创建且不能在类外部合法引用，这些类属性的隐私封装由 JavaScript 本身强制执行。访问私有属性的唯一方法是通过点符号，并且只能在定义私有属性的类中进行访问。

在此语法出现之前，私有属性并非 JavaScript 的原生特性。在原型继承中，其行为可以用 WeakMap 对象或闭包来模拟，但在人机工程学方面，它们无法与 # 语法相提并论。

class ClassWithPrivate {
  #privateField;
  #privateFieldWithInitializer = 42;
  #privateMethod() {
    // …
  }
  static #privateStaticField;
  static #privateStaticFieldWithInitializer = 42;

  static #privateStaticMethod() {
    // …
  }
}

但是其依然有一些额外的语法限制：

• 类中声明的所有私有标识符必须是唯一的，命名空间在静态属性和实例属性之间共享，除非两者都声明了 getter-setter 对
• 私有标识符不能是 #constructor

8.Promise.allSettled() 用于处理多个 Promise

Promise.allSettled() 方法等待所有 Promise 完成，无论其状态如何都返回结果数组：

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, "foo"),
);
const promises = [promise1, promise2];
Promise.allSettled(promises).then((results) =>
  results.forEach((result) => console.log(result.status)),
);
// 输出结果 "fulfilled"、"rejected"

9.globalThis 用于跨环境全局访问

globalThis 对象确保跨浏览器和 Node.js 等环境对全局上下文的访问保持一致:

console.log(globalThis === window);
// 判断是否是浏览器: true

10. 动态代理增强对象控制 JavaScript

Proxy 对象使开发者能够为另一个对象创建代理，该代理可以拦截并重新定义该对象的基本操作，例如：属性访问、赋值和方法调用。

const target = {
  message1: "hello",
  message2: "everyone",
};
const handler1 = {};
const proxy1 = new Proxy(target, handler1);
console.log(proxy1.message1);
// 输出 hello
console.log(proxy1.message2);
// 输出 everyone

参考资料

https://dev.to/jsdevspace/10-javascript-tips-to-boost-development-efficiency-2gno

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

https://dev.to/roktim32/10-javascript-tips-and-tricks-244o