13-ES6 ++：JavaScript中的可选链接
#javascript #es6 #esnext

可选的链接

可选的链接是在ES2020（ES11）中发布的一项新功能。这是一种访问对象属性的新方法，而无需检查对象是否未定义。这是一个非常有用的功能，可以用来避免使用语句长时间编写。

用简单的话？

可选的链接是一种访问对象属性的新方法，而无需检查对象是否未定义。这是一个非常有用的功能，可以用来避免使用语句长时间编写。

如何使用它？

可选链接的语法为?.。它用于访问对象的属性。它用来避免写长时间if语句。

让我们先看看旧的方式

const user = {
  name: "Hasan",
  age: 20,
  address: {
    city: "Cairo",
  },
};

if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

现在让我们看看新的方式

const user = {
  name: "Hasan",
  age: 20,
  address: {
    city: "Cairo",
  },
};

if (user?.address?.city) {
  console.log(user.address.city);
}

看？

都短得多且易于阅读。

因此，基本上您不必检查对象是否不确定。您可以只使用?.访问对象及其嵌套对象的属性。

如果对象不确定怎么办？

使用可选的链接时，如果对象未定义，则将返回未定义。因此，您不必检查对象是否不确定。

const user = undefined;

console.log(user?.name); // undefined because user is undefined

如果该物业不存在怎么办？

与上述相同的确切情况。如果该属性不存在，它将返回未定义。

const user = {};

console.log(user?.name); // undefined because user.name doesn't exist

如果该物业为空怎么办？

如果属性为空，它将返回null。

const user = {
  name: null,
};

console.log(user?.name); // null because user.name is null

如果该物业为0怎么办？

如果属性为0，则将返回0。

const user = {
  age: 0,
};

console.log(user?.age); // 0 because user.age is 0

如果该属性是一个空字符串怎么办？

如果属性是一个空字符串，它将返回一个空字符串。

const user = {
  name: "",
};

console.log(user?.name); // "" because user.name is an empty string

当然，如果确定对象已定义，则无需使用可选的链接功能。但是，如果不确定，它是一个非常有用的功能。

是否可以使用数组索引检查？

是的，可以使用数组索引检查。但是您必须使用括号代替点表示法。

const user = {};

console.log(user.friends?.[0]); // undefined because user.friends[0] doesn't exist

我们可以使用更复杂的嵌套对象和数组，例如，我想访问用户对象的朋友数组中的第一个索引的名称。

const user = {
  friends: [
    {
      name: "Ahmed",
    },
  ],
};

console.log(user.friends?.[0]?.name); // Ahmed

在这里，我们在数组括号和点表示之前定义了?.。

嵌套功能

可以将可选的链接与功能一起使用。例如，我想调用用户对象的getName函数，该功能返回一个包含first和last属性的对象。

const user = {
  getName: () => {
    return {
      first: "Hasan",
      last: "Zohdy",
    };
  },
};

console.log(user.getName?.()?.first); //Hasan
console.log(user.getName?.()?.middle); //undefined

您看到，我们就在功能括号之前添加了它，然后我们可以使用点符号继续我们的链。

ð€专业小费

不要过度使用可选的链接，如果您确定已经存在的对象，请不要使用它，但是如果您不确定它或与其嵌套对象有关，则可以使用它。

const user = {};

// ❌
console.log(user?.name); // undefined

// ✅
console.log(user.name); // undefined

因为我们已经知道用户对象已定义，因此我们不需要使用可选的链接。

const user = {};

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

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

我知道user已经存在，但是address可能存在或可能不存在，因此我们需要仅使用地址而不是用户使用可选的链接。

我应该在代码中使用它吗？ ð

当然应该，如果陈述，它将减轻您的撰写，这将使您的代码更加干净，更易于阅读。

有关功能用法的提示

如果您的项目使用诸如webpack或rollup之类的捆绑器，则可以在代码中使用optional chaining operator。但是，如果您使用的是浏览器，则应使用像babel这样的转板器将代码转换为ES5。您可以使用babel repl传输您的代码。

- 结论

可选的链接是在ES2020（es9）中发布的一项新功能。这是一种访问对象属性的新方法，而无需检查对象是否未定义。这是一个非常有用的功能，可用于避免使用语句和检查。

â•给我买一杯咖啡。

如果您喜欢我的文章并看到对您有用，则可以buy me a coffee，它将帮助我继续前进并继续创建更多内容。

ð加入我们的社区

加入我们的社区Discord获得帮助和支持（节点JS 2023频道）。

ð奖励内容ð

您可能会看这些文章，这肯定会提高您的知识和生产力。

一般主题

软件包和库

React JS软件包

课程（文章）