logoTaitd.dev()

Những tính năng mới trong ECMAScript 2023 (ES14)?

4 min read
-- views
-- likes
-- comments
Trịnh Đình Tài

Trịnh Đình Tài

@taitd

Những tính năng mới trong ECMAScript 2023 (ES14)?

ECMAScript 2023 là phiên bản thứ 14 của Javascript, ra mắt vào tháng 6/2023, trong bài viết này, mình sẽ cùng điểm mặt một số tính năng nổi bật mà phiên bản này mang lại.

Object.groupBy

Ví dụ chúng ta có một mảng sau:

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
]

Giả sử yêu cầu bài toán là bạn cần phải tách mảng trên thành 2 mảng, mảng restock bao gồm những sản phẩm có quantity <= 5, mảng ok là phần còn lại, vậy bạn sẽ làm như thế nào ?

Trước khi có ECMAScript 2023 thì reduce là một giải pháp:

const { restock, ok } = inventory.reduce(
  (result, item) => {
    if (item.quantity <= 5) {
      result.restock.push(item)
    } else {
      result.ok.push(item)
    }
    return result
  },
  { restock: [], ok: [] }
)
 
console.log("Restock:", restock)
console.log("Ok:", ok)

Bây giờ, chúng ta có thể sử dụng GroupBy để cho ra kết quả tương tự:

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock"
}
 
const { restock, ok } = Object.groupBy(inventory, myCallback)
console.log("Restock:", restock)
console.log("Ok:", ok)

Kết quả:

Restock: [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  {
    name: "bananas",
    type: "fruit",
    quantity: 0,
  },
  {
    name: "cherries",
    type: "fruit",
    quantity: 5,
  },
]
 
ok: [
  {
    name: "goat",
    type: "meat",
    quantity: 23,
  },
  {
    name: "fish",
    type: "meat",
    quantity: 22,
  },
]

Array.toSliced(), Array.toSorted() và Array.toReversed()

Khi chúng ta sử dụng các phương thức như sort(), splice() và reverse() chúng sẽ làm thay đổi mảng gốc, nhưng khi sử dụng toSpliced(), toSorted() và toReversed() thì nó sẽ trả về một mảng mới và không làm thay đổi mảng ban đầu.

const numbers = [3, 4, 1, 5, 2]
 
const splicedNumbers = numbers.toSpliced(1, 1)
const sortedNumbers = numbers.toSorted()
const reversedNumbers = numbers.toReversed()

findLast() và findLastIndex()

Giả sử cần phải tìm index cuối cùng của phần tử có giá trị banana trong mảng:

const fruits = ["apple", "banana", "orange", "banana", "kiwi"]

Trước ES14 bạn cần phải đảo ngược mảng như sau:

function findLastIndexByReversing(arr, target) {
  const reversedArray = arr.slice().reverse()
  const reversedIndex = reversedArray.indexOf(target)
 
  if (reversedIndex !== -1) {
    const lastIndex = arr.length - 1 - reversedIndex
    return lastIndex
  } else {
    return -1
  }
}

Hoặc sử dụng một vòng for:

unction findLastIndex(arr, target) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === target) {
      return i;
    }
  }
  return -1;
}

Tuy nhiên, với ES14 thì bạn chỉ cần viết ngắn gọn như sau:

const lastIndex = fruits.lastIndexOf("banana")
//3

Link tham khảo

https://www.freecodecamp.org/news/the-biggest-changes-in-javascript-this-year