升级版Vue3数据操作：可选链和空值合并的神奇世界

2022-11-01 18:51:36

Vue 3 数据操作的变革：可选链与空值合并

作为前端开发者，我们在操作数据时经常需要处理嵌套对象和数组，传统方法是使用冗长的 if 语句和三目运算符来检查空值。但是，Vue 3 引入了两个新操作符，让数据操作变得更加简洁和优雅：可选链运算符（?.）和空值合并运算符（??）。

可选链运算符：优雅处理空值

可选链运算符是一个巧妙的帮手，它在访问对象属性或数组元素时，会先检查该属性或元素是否存在。如果存在，则继续后续操作；如果不存在，则返回 undefined，而不会引发错误。这让我们可以轻松处理嵌套数据的空值情况，避免繁琐的 if 语句。

代码示例：

const user = {
  name: 'John',
  age: 25,
  address: undefined
};

// 传统方法
if (user && user.address) {
  console.log(user.address);
} else {
  console.log('User does not have an address');
}

// 可选链运算符
console.log(user?.address); // undefined

空值合并运算符：巧妙赋予默认值

空值合并运算符允许我们在获取对象属性或数组元素时指定一个默认值。当属性或元素不存在或为 undefined 时，它就会返回这个默认值，而不是返回 undefined 或引发错误。这让我们可以轻松地为缺少的数据提供默认值。

代码示例：

const user = {
  name: 'John',
  age: 25,
  address: undefined
};

// 传统方法
const address = user.address || 'Unknown address';

// 空值合并运算符
const address = user?.address ?? 'Unknown address'; // 'Unknown address'

可选链与空值合并的联袂演出

可选链运算符和空值合并运算符可以联袂演出，在数据操作中形成更强大的组合。我们可以将可选链运算符与空值合并运算符结合使用，在访问嵌套对象或数组元素的同时指定默认值。

代码示例：

const user = {
  name: 'John',
  age: 25,
  address: {
    street: 'Main Street',
    number: 123
  }
};

// 传统方法
const street = user.address ? user.address.street : 'Unknown street';

// 可选链与空值合并
const street = user?.address?.street ?? 'Unknown street'; // 'Main Street'