在前端开发中，我们经常需要对数据进行各种复杂的操作，例如筛选、排序、分组等等。ES2020 引入了链式使用技巧，可以让我们更加优雅地完成这些操作，提高代码的可读性和可维护性。
什么是链式使用
链式使用是一种编程风格，它允许我们在一个对象上连续调用多个方法，每个方法都返回该对象本身。这样的话，我们就可以在一行代码中完成多个操作，而不需要创建中间变量或者嵌套多层函数调用。
例如，我们可以在一个数组上连续调用 filter()、sort() 和 map() 方法，来实现筛选、排序和转换数据的操作：
const data = [3, 1, 4, 2, 5]; const result = data .filter(x => x > 2) .sort() .map(x => x * 10); console.log(result); // [30, 40, 50]
上面的代码中，我们首先使用 filter() 方法筛选出大于 2 的元素，然后使用 sort() 方法对结果进行排序，最后使用 map() 方法将每个元素乘以 10。这些操作都是在一个数组上进行的，而且都是链式调用的方式，让代码更加清晰和简洁。
ES2020 的链式使用技巧
ES2020 在语言层面上引入了链式使用技巧，提供了两个新的语法特性：可选链操作符和空值合并操作符。这两个特性可以让我们更加方便地处理复杂的数据结构，避免出现空指针异常和代码冗余的问题。
可选链操作符
可选链操作符（Optional Chaining Operator）是一个 ?. 符号，它可以用来检查一个对象是否存在某个属性或者方法，如果存在则调用，否则返回 undefined。这个符号可以在链式调用中灵活使用，避免出现中间某个属性或者方法不存在的情况。
例如，我们可以使用可选链操作符来获取一个对象的嵌套属性：
// javascriptcn.com 代码示例
const user = {
name: 'Alice',
address: {
street: '123 Main St.',
city: 'Anytown',
},
};
const city = user.address?.city;
console.log(city); // "Anytown"上面的代码中，我们使用可选链操作符 ?. 来获取 user.address.city 属性，即使 address 属性不存在也不会报错，而是返回 undefined。这个符号可以在链式调用中任意嵌套，让代码更加简洁和健壮。
空值合并操作符
空值合并操作符（Nullish Coalescing Operator）是一个 ?? 符号，它可以用来判断一个值是否为 null 或者 undefined，如果是则返回一个默认值，否则返回该值本身。这个符号可以在链式调用中灵活使用，避免出现空指针异常和代码冗余的问题。
例如，我们可以使用空值合并操作符来设置一个变量的默认值：
const name = null ?? 'Unknown'; console.log(name); // "Unknown"
上面的代码中，我们使用空值合并操作符 ?? 来判断 name 是否为空，如果是则返回一个默认值 'Unknown'。这个符号可以在链式调用中任意嵌套，让代码更加简洁和健壮。
链式使用示例代码
下面是一个使用可选链操作符和空值合并操作符的示例代码，它演示了如何在一个对象上进行复杂的数据操作：
// javascriptcn.com 代码示例
const data = [
{ id: 1, name: 'Alice', age: 20 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 40 },
];
const result = data
?.filter(x => x.age > 20)
?.sort((a, b) => a.name.localeCompare(b.name))
?.map(x => ({ id: x.id, name: x.name ?? 'Unknown' }))
?? [];
console.log(result);
/*
[
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" },
]
*/上面的代码中，我们首先使用可选链操作符 ?. 来过滤出年龄大于 20 的元素，然后使用 sort() 方法按照名字进行排序，最后使用空值合并操作符 ?? 来设置默认值和避免空指针异常。这些操作都是在一个数组上进行的，而且都是链式调用的方式，让代码更加清晰和简洁。
总结
ES2020 的链式使用技巧可以让我们更加优雅地完成复杂的数据操作，提高代码的可读性和可维护性。可选链操作符和空值合并操作符是两个新的语法特性，可以在链式调用中灵活使用，避免出现空指针异常和代码冗余的问题。我们应该在实际开发中多加利用这些特性，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6561c323d2f5e1655dbcad8b