ES11 新特性：可选链操作符带来新的函数级设计模式

随着前端技术的不断发展，JavaScript 语言也在不断更新迭代。ES11（也称为 ECMAScript 2020）是 JavaScript 语言的最新版本，其中引入了一项非常实用的新特性——可选链操作符（Optional Chaining Operator），它为前端开发带来了全新的函数级设计模式。

可选链操作符简介

可选链操作符是一个问号（?）加上一个点（.）的符号：?.。它可以在对象属性链中进行安全的访问，即使链中的某个属性不存在或者为 null 或 undefined，也不会抛出错误，而是直接返回 undefined。例如：

// www.javascriptcn.com code example
const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

console.log(person.address?.zipCode); // undefined
console.log(person.address?.city); // 'Anytown'
console.log(person.phoneNumber?.areaCode); // undefined

在上面的例子中，如果 person.address 对象不存在，访问 person.address.zipCode 就会抛出错误。但是使用可选链操作符 person.address?.zipCode 就可以避免这种错误的发生。

函数级设计模式

可选链操作符为前端开发带来了全新的函数级设计模式，即链式调用。链式调用是一种将多个函数调用链接在一起的编程模式，以实现更加简洁、优雅的代码。在使用可选链操作符时，可以将多个对象属性的访问链接在一起，形成一个链式调用。例如：

// www.javascriptcn.com code example
const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

console.log(person?.address?.city.toUpperCase()); // 'ANYTOWN'
console.log(person?.address?.zipCode?.toUpperCase()); // undefined

在上面的例子中，使用可选链操作符和链式调用，可以简洁地实现对 person.address.city 属性进行大写转换的操作，而不用担心 person 或者 address 对象不存在的情况。

学习与指导意义

可选链操作符是一项非常实用的新特性，它可以提高代码的健壮性和可读性，避免因为对象属性不存在而引发的错误。同时，它也为前端开发带来了全新的函数级设计模式，即链式调用，可以让代码更加简洁、优雅。因此，学习和掌握可选链操作符的使用，对于提高前端开发水平和代码质量非常有帮助。

示例代码

以下是一个使用可选链操作符和链式调用实现表单验证的示例代码：

// www.javascriptcn.com code example
const form = {
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phone: ''
};

function validateForm() {
  const errors = {};

  if (!form?.username?.trim()) {
    errors.username = 'Username is required';
  }

  if (!form?.password?.trim()) {
    errors.password = 'Password is required';
  }

  if (form?.password?.trim() && form.confirmPassword?.trim() !== form.password.trim()) {
    errors.confirmPassword = 'Passwords do not match';
  }

  if (!form?.email?.trim()) {
    errors.email = 'Email is required';
  } else if (!isValidEmail(form.email.trim())) {
    errors.email = 'Email is invalid';
  }

  if (!form?.phone?.trim()) {
    errors.phone = 'Phone is required';
  } else if (!isValidPhone(form.phone.trim())) {
    errors.phone = 'Phone is invalid';
  }

  return errors;
}

function isValidEmail(email) {
  // 验证 email 是否合法
}

function isValidPhone(phone) {
  // 验证 phone 是否合法
}

在上面的例子中，使用可选链操作符和链式调用，可以简洁地实现对表单数据的验证操作，而不用担心表单数据中某个属性不存在的情况。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da4e77a941bf71342382dd