Tài liệu

4 toán tử JavaScript quên sầu luôn :)

avatar
Huy Erick
00:00 12/04/2024

Hãy cùng mình tìm hiểu một số toán tử JS mới! Có rất nhiều thông tin về JavaScript trên mạng, nhưng bạn có biết rằng trong số đó có những toán tử JavaScript không phổ...

Hãy cùng mình tìm hiểu một số toán tử JS mới!

Có rất nhiều thông tin về JavaScript trên mạng, nhưng bạn có biết rằng trong số đó có những toán tử JavaScript không phổ biến? Dù ít người biết đến chúng, nhưng chúng thực sự mạnh mẽ! Mỗi toán tử có đặc điểm riêng biệt và hoạt động theo cách khác nhau. Hãy cùng tìm hiểu nhé!

1. Toán tử ??

Trong JavaScript, toán tử ?? được gọi là toán tử liên kết nullish. Nó sẽ trả về đối số đầu tiên nếu nó không phải là null/undefined, và trả về đối số thứ hai trong trường hợp ngược lại. Xem ví dụ sau:

Xem thêm: 
null ?? 5 // => 5
3 ?? 5 // => 3

Trong việc gán giá trị mặc định cho một biến, thì thông thường các nhà phát triển JavaScript sử dụng toán tử logic OR như sau:

var prevMoney = 1
var currMoney = 0
var noAccount = null
var futureMoney = -1

function moneyAmount(money) {
  return money || `You currently do not own an account in the bank`
}

console.log(moneyAmount(prevMoney)) // => 1
console.log(moneyAmount(currMoney)) // => `You currently do not own an account in the bank`
console.log(moneyAmount(noAccount)) // => `You currently do not own an account in the bank`
console.log(moneyAmount(futureMoney))// => -1

Trong ví dụ trên, toán tử || xem 0 là một giá trị lỗi và do đó không xác định rằng người dùng của chúng tôi có tài khoản 0 đô la. Hãy sử dụng toán tử ?? để khắc phục lỗi này như sau:

var currMoney = 0
var noAccount = null

function moneyAmount(money) {
  return money ?? `You currently do not own an account in the bank`
}

moneyAmount(currMoney) // => 0
moneyAmount(noAccount) // => `You currently do not own an account in the bank`

Như vậy, toán tử ?? cho phép chúng ta chỉ định các giá trị mặc định trong khi bỏ qua các giá trị giả như 0 và các chuỗi rỗng.

2. Toán tử ??=

Toán tử ??= còn được gọi là toán tử gán nullish logic và có mối liên hệ chặt chẽ với những gì chúng ta đã học trước đây. Xem cách chúng hoạt động cùng nhau:

var x = null
var y = 5

console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5

Toán tử gán này chỉ gán một giá trị mới nếu giá trị hiện tại là null hoặc không xác định. Toán tử này đơn giản là cách để gán nullish. Hãy xem cách toán tử này khác với các tham số mặc định:

function gameSettingsWithNullish(options) {
  options.gameSpeed ??= 1
  options.gameDiff ??= 'easy'
  return options
}

function gameSettingsWithDefaultParams(gameSpeed=1, gameDiff='easy') {
  return {gameSpeed, gameDiff}
}

gameSettingsWithNullish({gameSpeed: null, gameDiff: null}) // => { gameSpeed: 1, gameDiff: 'easy' }
gameSettingsWithDefaultParams(null, null) // => { gameSpeed: null, gameDiff: null }

3. Toán tử ?.

Toán tử chuỗi tùy chọn ?. cho phép đọc các giá trị của các thuộc tính bên trong các đối tượng mà không cần phải xác thực rõ ràng từng tham chiếu. Khi một tham chiếu là rỗng, biểu thức ngừng đánh giá và trả về giá trị không xác định. Xem ví dụ sau:

var travelPlans = {
  destination: 'DC',
  monday: {
    location: 'National Mall',
    budget: 200
  }
}

const tuesdayPlans = travelPlans.tuesday?.location;
console.log(tuesdayPlans) // => undefined

Hãy xem ví dụ tiếp theo:

function addPlansWhenUndefined(plans, location, budget) {
  if (plans.tuesday?.location == undefined) {
    var newPlans = {
      plans,
      tuesday: {
        location: location ?? "Park",
        budget: budget ?? 200
      },
    };
  } else {
    newPlans ??= plans; //will only override if newPlans is undefined
    console.log("Plans have already been added!");
  }
  return newPlans;
}

var newPlans = addPlansWhenUndefined(travelPlans, "Ford Theatre", null);
console.log(newPlans) // => { plans: //{ destination: 'DC', // monday: { location: 'National Mall', budget: 200 } }, // tuesday: { location: 'Ford Theatre', budget: 200 } }
newPlans = addPlansWhenUndefined(newPlans, null, null) // logs => Plans have already been added! // returns => newPlans object

Ví dụ trên kết hợp tất cả các toán tử mà chúng ta đã học cho đến nay. Bây giờ chúng ta đã tạo một hàm để thêm kế hoạch và đã sử dụng các toán tử nullish để cung cấp các giá trị mặc định. Hàm này cũng chấp nhận các giá trị sai như '0' làm tham số hợp lệ. Điều này có nghĩa là ngân sách của chúng ta có thể được đặt thành 0 mà không có bất kỳ lỗi nào.

4. Toán tử ?

Toán tử ba ? nhận ba toán hạng: một điều kiện, một biểu thức để thực thi nếu điều kiện đúng và một biểu thức để thực thi nếu điều kiện sai. Xem ví dụ sau:

function checkCharge(charge) {
  return (charge > 0) ? 'Sẵn sàng sử dụng' : 'Cần sạc'
}

console.log(checkCharge(20)) // => 'Sẵn sàng sử dụng'
console.log(checkCharge(0)) // => 'Cần sạc'

Nếu bạn đã tìm hiểu về JavaScript, bạn có thể đã thấy toán tử ba trước đây. Nhưng bạn có biết rằng toán tử ba có thể được sử dụng để gán biến không?

Chúng ta thậm chí có thể sử dụng nó để gán giá trị nullish. Xem ví dụ sau:

var x = 6
var x = (x !== null || x !== undefined) ? x : 3
console.log(x) // => 6

Hãy xem ví dụ tiếp theo:

function nullishAssignment(x,y) {
  return (x == null || x == undefined) ? y : x
}

var x = nullishAssignment(null, 8) // => 8
var y = nullishAssignment(4,8) // => 4

Trước khi kết thúc, hãy sử dụng toán tử ba để cấu trúc lại hàm từ ví dụ trước:


function addPlansWhenUndefined(plans, location, budget) {
  var newPlans = plans.tuesday?.location == undefined ? {
    plans,
    tuesday: {
      location: location ?? "Park",
      budget: budget ?? 200
    },
  } : console.log("Plans have already been added!");
  newPlans ??= plans;
  return newPlans;
}

##Tài liệu tham khảo
1. [4 powerful JavaScript operators you've never heard of](https://medium.com/javascript-in-plain-english/4-powerful-javascript-operators-youve-never-heard-of-487df37114ad)
2. [Expressions and Operators - JavaScript | MDN](https://developer.mozilla.org/vi/docs/Web/JavaScript/Guide/Expressions_and_Operators)
BÀI LIÊN QUAN
1