肝了万字长文，汇总2024年JavaScript最新特性！

肝了万字长文，汇总2024年JavaScript最新特性！

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。

JavaScript 是现代Web开发中的核心语言。随着时间的发展，它已经演变成前端和后端应用的基础。在本文中，我们将探索2024年JavaScript提供的现代特性，包括之前讨论过的编码技巧和重要概念，所有内容都附有详细示例。

我们将涵盖对初学者和经验丰富的开发者都有价值的主题，发现JavaScript如何帮助我们编写更简洁、更高效且更易读的代码。

1. 现代JavaScript语法：简洁易读的代码（ES2020）

JavaScript因新特性如可选链、空值合并和箭头函数而变得更简单。

可选链与空值合并（ES2020）

过去，我们需要检查对象的每个属性是否存在。在现代JavaScript中，可选链(?.)使这一过程更简单。同时，空值合并(??)允许我们为null或undefined变量分配默认值。

a. 可选链（ES2020）

可选链操作符(?.)让我们能够在不手动检查它们存在性的情况下访问对象的属性或子属性，特别是在深层对象结构中防止错误时非常有用。

const user = {
  name: 'Abdulnasır',
  info: {
    email: '[e-mail]'
  }
};

console.log(user.info?.address); // undefined

console.log(user.info?.address?.city); // undefined

const email = user?.info?.email ?? 'Email not provided';
console.log(email); // 结果: '[e-mail]'

b. 空值合并（ES2020）

??操作符仅在值为null或undefined时分配默认值。它不适用于其他假值，如0、false或''。

const userInput = '';
const name = userInput ?? 'Default Name';
console.log(name);

const userInput2 = null;
const name2 = userInput2 ?? 'Default Name';
console.log(name2); // 结果: 'Default Name'

2. 逻辑赋值运算符（ES2021）

在2024年，逻辑赋值运算符已被广泛使用，简化了复杂表达式，使逻辑更短且更有效。像&&=、||=和??=这样的操作符允许更简洁、易读的值赋值，简化了JavaScript中的条件逻辑。

let name = 'Abdulnasır';

name ||= 'Default Name';
console.log(name); // 结果: 'Abdulnasır'

let age = 0;

age ??= 30;
console.log(age); // 结果: 0 (不为nullish)

let isActive = true;
let userName = null;

isActive &&= false;
console.log(isActive); // 结果: false

userName ??= 'Guest';
console.log(userName); // 结果: 'Guest'

userName ||= 'Abdulnasır';
console.log(userName); // 结果: 'Guest'

let x = 0;

// ||=
x ||= 5;
console.log(x); // 结果: 5 (0为假值)

// ??=
x ??= 10;
console.log(x); // 结果: 5 (0不为nullish)

3. 管道操作符（|>）- 拟议新特性（ES2024）

管道操作符（|>）是一个尚未完全集成到JavaScript中的拟议特性，但如果被接受，它可能是一个重大的游戏规则改变者。|>操作符允许一个函数的输出直接传递到另一个函数中，形成类似管道的结构。这通过使函数组合更易读和可维护来简化多步骤过程。

const double = x => x * 2;
const increment = x => x + 1;

const result = 5
  |> double
  |> increment;

console.log(result); // 结果: 11

在这里，数字5首先传递到double函数，然后传递到increment函数。这使我们能够以更简洁、更易理解的方式执行多步骤过程。

4. 记录与元组：不可变数据结构（ES2024）

记录和元组是添加到JavaScript中的不可变数据结构，提供了更安全、更高效的数据管理，特别是在大型项目中。

a. 什么是记录？（ES2024）

记录类似于JavaScript对象，但不可变。一旦创建，其内容无法修改，这使得记录对数据安全和编写更少错误的代码非常有用。

const userRecord = #{ name: 'Abdulnasır', age: 30 };

// 记录不可变
// userRecord.name = 'Mehmet'; // 错误

console.log(userRecord.name); // 结果: 'Abdulnasır'

b. 什么是元组？（ES2024）

元组是不可变的数组。与普通JavaScript数组类似，但一旦创建元组，它就无法被修改。这使得元组成为管理常量数据和确保代码中不可变性的有用结构。

const tuple = #[1, 2, 3];

// 元组不可变
// tuple.push(4); // 错误

console.log(tuple[0]); // 结果: 1

记录和元组的使用增强了数据安全性，并在大型、复杂的项目中优化了性能。这些结构满足了JavaScript中不可变数据结构的需求。

5. 顶层Await（ES2022）

顶层await允许在模块内直接使用await，无需async函数。这在等待异步操作完成之前加载模块时特别有用，简化了模块系统中的异步代码。

const data = await fetch('https://api.example.com/data');
const jsonData = await data.json();
console.log(jsonData);

6. WeakRefs和FinalizationRegistry（ES2021）

这些新特性允许我们创建内存中对象的弱引用，使我们能够检查对象是否已被垃圾回收器清理。这对于使用弱引用的大型数据或系统特别有用，为JavaScript应用程序提供了更好的内存管理和控制。

let object = { name: 'Weak reference object' };
const weakRef = new WeakRef(object);

console.log(weakRef.deref()); // { name: 'Weak reference object' }

setTimeout(() => {
  console.log(weakRef.deref());
}, 1000);

7. 箭头函数（ES2015）

箭头函数提供了一种更简洁、更简洁的方式来定义函数。箭头函数的一个关键优势是它们保留了this上下文，这在嵌套函数或作为回调传递的函数中特别有用。这使它们成为现代JavaScript中更简洁、更高效编码的强大工具。

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 结果: 6

这些现代特性不仅加快了编码过程，还提高了可读性。

8. 管理异步操作：Promises、async/await和Promise.allSettled()（ES2015/ES2020）

异步操作在Web开发中非常常见，特别是对于管理像API调用这样的长时间运行过程。JavaScript通过引入Promises和async/await使处理这些操作更易读。

a. Promises和async/await（ES2015）

以同步方式处理异步代码的最佳方式是使用async和await。这使我们能够编写更简洁的代码，而无需链式多个.then函数。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

b. Promise.allSettled()（ES2020）

当管理多个Promise操作时，Promise.allSettled()等待所有承诺完成，无论它们成功还是失败。这使得同时处理多个异步操作更容易，因为它提供了每个Promise的结果，包括那些失败的，而不会像Promise.all()那样短路。

const promise1 = Promise.resolve('Data 1');
const promise2 = Promise.reject('Error in Data 2');
const promise3 = Promise.resolve('Data 3');

Promise.allSettled([promise1, promise2, promise3]).then(results => {
  results.forEach(result => {
    console.log(result.status === 'fulfilled' ? result.value : result.reason);
  });
});

c. Promise.any()（ES2021）

Promise.any()返回给定一组Promise中第一个成功解决的Promise的结果。这种方法允许你专注于任何一个成功的Promise，而不需要所有Promise都成功完成。当你对任何Promise的成功感兴趣而不需要所有Promise都成功完成时，它特别有用。

const p1 = Promise.reject('Error 1');
const p2 = Promise.resolve('Success 1');
const p3 = Promise.resolve('Success 2');

Promise.any([p1, p2, p3])
  .then(result => {
    console.log(result); // 结果: 'Success 1'
  })
  .catch(error => {
    console.log(error);
  });

9. 简化错误管理：超越try-catch（ES2020）

错误管理始终至关重要。传统的try-catch块有时会变得过于嵌套，使代码更难阅读。然而，有了async/await，错误处理可以更简洁。此外，创建辅助函数可以进一步简化错误管理。

辅助函数错误和数据管理（ES2020）

在下面的示例中，to()函数使用try-catch管理异步操作，并返回错误和结果作为元组（数组）。

a. 错误和数据管理

这种模式简化了一步处理错误和结果。

async function to(promise) {
  try {
    const result = await promise;
    return [null, result];
  } catch (error) {
    return [error, null];
  }
}

async function fetchData() {
  const [error, data] = await to(fetch('https://api.example.com/data'));
  if (error) return console.error('Fetch error:', error);
  console.log(data);
}

b. 错误和数据管理

async function to(promise) {
  try {
    const data = await promise;
    return [null, data];
  } catch (error) {
    return [error, null];
  }
}

async function fetchData() {
  const [networkError, response] = await to(fetch('https://api.codingbeautydev.com/docs'));
  if (networkError) return console.error('Network Error:', networkError);

  const [parseError, data] = await to(response.json());
  if (parseError) return console.error('Parse Error:', parseError);

  return data;
}

辅助函数（to）：这个函数将Promise的错误和结果分成一个数组（[err, data]）。这允许直接错误检查，使代码更简洁，避免了深层嵌套的try-catch块。

网络和解析错误处理：to函数简化了fetch操作和JSON解析的错误管理，使代码更易读且更易于维护。

10. 高效数组操作：map、filter、reduce（ES2015）

JavaScript的函数式编程能力使处理数组变得更容易。像map、filter和reduce这样的方法允许以简洁的方式对数组进行复杂操作。

a. 使用map()和filter()处理数组（ES2015）

map()用于转换数组中的每个项目，而filter()选择满足特定条件的项目。

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
console.log(doubled); // 结果: [2, 4, 6, 8, 10]

const filtered = numbers.filter(num => num > 3);
console.log(filtered); // 结果: [4, 5]

b. 将数组简化为单个值（ES2015）

reduce()用于将数组简化为单个值。它非常适合像求和、乘法或执行更复杂计算这样的任务。

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 结果: 15

这些函数使你在处理复杂数组时代码更短且更易读。

11. 性能优化：懒加载、防抖、节流（ES2020）

为了改善用户体验，优化JavaScript性能至关重要。像懒加载、防抖和节流这样的技术可以显著加速应用程序，特别是在处理大型数据集和DOM操作时。

a. 使用懒加载延迟图像加载（ES2020）

懒加载确保图像只在即将出现在用户视口中时才加载，显著提高了页面加载时间。

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazy" />

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy');
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazy');
          observer.unobserve(img);
        }
      });
    });
    lazyImages.forEach(img => observer.observe(img));
  });
</script>

b. 使用防抖和节流提高性能

防抖和节流用于控制频繁事件。例如，而不是在搜索栏的每次按键上发送API请求，这些技术确保API调用只在用户完成输入后才进行。这减少了不必要的请求，并通过最小化客户端和服务器的负载来提高性能。

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(event) {
  console.log('Fetching search results for:', event.target.value);
}, 300));

12. JavaScript的未来：BigInt、WeakRef和Temporal API（ES2021/ES2024）

在2024年，JavaScript继续以新特性脱颖而出。BigInt允许处理大于2^53 - 1的数字，克服了常规JavaScript数字的限制。WeakRef通过创建可以被垃圾回收器清理的对象的弱引用来改善内存管理。拟议的Temporal API简化了日期和时间的工作原理，提供了比标准Date对象更精确、更强大的处理时间数据的方式。

a. 使用BigInt处理大数字

JavaScript通常在2^53 - 1范围内安全运行。要处理更大的数字，使用BigInt。

const bigNumber = BigInt('9007199254740992');
console.log(bigNumber + 1n); // 9007199254740993n

b. 使用Temporal API处理时间和日期

JavaScript内置的Date类有时在准确性和复杂性方面可能受到限制。Temporal API是一个新的拟议特性，它通过提供更精确、更强大的处理时间和日期操作的方式来解决这些问题。有了Temporal，你可以更可靠、更高效地使用时区、日历系统和持续时间，这使得它非常适合需要准确日期和时间操作的现代应用程序。

const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // 结果: 2024-10-06

const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // 结果: 2024-10-05

const birthday = Temporal.PlainDate.from('1990-05-15');
const duration = today.since(birthday);
console.log(Result: ${duration.years});

13. 私有类字段（ES2021）

在JavaScript中，可以通过在属性名前使用#符号来使类属性私有化。这确保了属性无法在类外部访问，提高了数据封装和安全性。私有类字段是维护对象内数据隐私的关键特性，因为它们防止外部代码直接访问或修改敏感数据，加强了面向对象编程中信息隐藏的原则。

class Person {
  #name; // 私有字段

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

const abdulnasir = new Person('Abdulnasır');
console.log(abdulnasir.getName()); // 结果: 'Abdulnasır'
console.log(abdulnasir.#name); // 错误

14. String.replaceAll()（ES2021）

String.replaceAll()方法允许你在字符串中替换所有出现的子字符串。这使得一次性修改多个字符或模式实例变得更加容易。与只更改第一个匹配项的replace()不同，replaceAll()确保替换了所有指定子字符串或正则表达式的匹配项，使字符串操作任务更简单，尤其是在处理重复文本替换时。

const text = 'Hello world! The world is wonderful!';
const newText = text.replaceAll('world', 'planet');
console.log(newText); // 输出: 'Hello planet! The planet is wonderful!'

15. Intl.RelativeTimeFormat（ES2020）

Intl.RelativeTimeFormat适用于表达相对于当前时间的日期有多长或多快。它为用户提供了一种更自然的呈现基于时间的信息的方式。

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // 输出: 'yesterday'
console.log(rtf.format(1, 'day'));  // 输出: 'tomorrow'

16. Array.flatMap()（ES2019）

flatMap()方法通过同时进行扁平化（去除嵌套）和执行map操作，简化了数组处理。这允许更简洁的数组转换。

const numbers = [1, 2, 3, 4];
const doubledAndFlattened = numbers.flatMap(n => [n, n * 2]);
console.log(doubledAndFlattened); // 结果: [1, 2, 2, 4, 3, 6, 4, 8]

结论

JavaScript已经演变成现代应用程序不可或缺的语言。随着2024年引入的新特性，它使我们能够编写更简洁、更高效且性能更优的代码。异步过程、函数式数组、现代错误处理和性能优化最大化了JavaScript的潜力。

我们在本文中讨论的示例展示了JavaScript的新功能如何帮助你在项目中构建更有效的解决方案。通过更多实践，你可以探索这些优势并开发更好的应用程序。