大大提高开发效率的十个JavaScript技巧_js教程

大大提高开发效率的十个JavaScript技巧

2024-03-18 16:03程序员白特 js教程

数组方法 flatMap() 本质上是 map()和 flat() 的组合，区别在于 flatMap 只能扁平1级，flat 可以指定需要扁平的级数，flatmap 比分别调用这两个方法稍微高效一些。

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

1. 使用 flatMap

有些 JavaScript 方法尽管鲜为人知，但它们解决独特挑战的潜力能够增强编码效率，比如 flatMap()

使用 flat + map

const arr = [1, 2, [4, 5], 6, 7, [8]];
// 使用 map 对每个元素进行操作并用 flat 展平结果
const result = arr.map(element => Array.isArray(element) ? element : [element]).flat();
console.log(result); // output: [1, 2, 4, 5, 6, 7, 8]

使用 flatmap

const arr = [1, 2, [4, 5], 6, 7, [8]] ;
console.log(arr.flatMap((element) => element)); 
// output :[1, 2, 4, 5, 6, 7, 8]

flatmap 尽管是一个方法，但也会有中间数组 \(指中间创建了必须进行垃圾收集的临时数组\)[1]的产生，flatMap 非常适合在需要灵活性和可读性的情况下使用。

2. console 的妙用

console 并不只有 console.log(), 实际生产中都会使用已经封装好的log库，而控制台对象 console 实际上内置了许多非常有用的方法，帮助您提高调试输出的质量和可读性，掌握它们能使您更轻松地 debug 和修复代码中的问题。

// 1. console.time 和 console.timeEnd
// 测量执行一段代码所需的时间。识别代码中的性能瓶颈并对其进行优化
console.time('开始获取数据');
fetch('https://reqres.in/api/users')
 .then(response => response.json())
 .then(data => {
 console.timeEnd('获取数据花费时间：');
 // ...code
 });
  
// 2. console.dir
// console.dir 方法以分层格式输出对象的属性。方便查看对象的结构以及其所有属性和方法
const promise = new Promise((resolve, reject) => resolve('foo'));
console.dir(promise);
// 3. console.count
// console.count 方法来计算特定日志消息的输出次数。这对于跟踪特定代码路径的执行次数以及识别代码中的热点非常有用
const fun = (x) => console.count(x);
fun('刻晴'); // 1
fun('甘雨'); // 1
fun('刻晴'); // 2
// 4. console.trace
// trace 可以输出堆栈跟踪。对于理解代码中的执行流程以及识别特定日志消息的来源非常有用
const foo = () => console.trace();
const bar = () => foo();
bar();
// 5. console.profile profileEnd
// 测量代码块的性能。这对于识别性能瓶颈以及优化代码以提高速度和效率非常有用。
console.profile('MyProfile');
// 想要测量性能的代码
for (let i = 0; i < 100000; i++) {
 // ...code
}
console.profileEnd('MyProfile');

3. 深拷贝 structuredClone()

此前，如果开发人员想要深拷贝对象，经常需要依赖第三方库来实现或者手动实现一个神拷贝，或者采取 const cloneObj = JSON.parse(JSON.stringify(obj)); 的 hack，但其在处理包含循环引用或不符合 JSON 的数据类型（如 Map 和 Set，Blob 等）的更复杂对象时，是有很多不足之处的

而现在，JavaScript 内置了一个 structuredClone() 的方法，此方法提供了一种简单有效的方法来深度克隆对象，且适用于大多数现代浏览器和 Node.js v17 以上

// 将原始对象传递给该函数， 它将返回一个具有不同引用和对象属性引用的深层副本
const obj = { name: 'Mike', friends: [{ name: 'Sam' }] };
const clonedObj = structuredClone(obj);
console.log(obj.name === clonedObj); // false
console.log(obj.friends === clonedObj.friends); // false

与众所周知的 JSON.parse(JSON.stringify())” 不同， structuredClone() 允许您克隆循环引用，这是目前在 JavaScript 中使用深拷贝最简单的方法。