Toán tử chuỗi tùy chọn được giới thiệu trong ES2020 và cho phép chúng tôi truy cập thuộc tính lồng nhau mà không cần kiểm tra rõ ràng nếu mỗi tham chiếu trong chuỗi là null hoặc không xác định. Trước đây, chúng ta đã từng sử dụng toán tử &&để kiểm tra xem đối tượng mẹ không phải là null hay undefined nhưng bây giờ chúng ta có thể sử dụng toán tử chuỗi tùy chọn ‘?.’.
Sau đây là mã cho toán tử chuỗi tùy chọn trong JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Optional Chaining operator in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to use optional chaining operator to access person object properties</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let person = {
name: "Rohan",
location: {
state: "Delhi",
country: "India",
},
};
BtnEle.addEventListener("click", () => {
resEle.innerHTML =
"person ?. location ?. state = " + person?.location?.state + "<br>";
resEle.innerHTML +="person ?. location ?. country = " +person?.location?.country +"<br>";
resEle.innerHTML +="person ?. personalDetails ?. birthDate = " +
person?.personalDetails?.birthDate +"<br>";
});
</script>
</body>
</html> Đầu ra
Khi nhấp vào nút 'BẤM VÀO ĐÂY' -
