Xử lý mảng (Array) với Javascript ES5

Mặc dù bạn có thể thấy Javascript ECMA6 đã ra mắt, tuy nhiên, bạn có thể quan tâm tới cách sử dụng các Array trong ECMA5 – phiên bản đầu tiên có nhiều cải tiến về sử dụng Javascript và là tiền đề cho các phiên bản tiếp sau.

Các đoạn mã Javascript ở trong bài viết, các bạn có thể tự vọc thêm sử dụng playground nhé.

Các phương thức xử lý mảng Array trong Javascript ES5

Các phương thức xử lý mảng (Array) mới trong ES5 giúp việc viết logic dễ hiểu hơn. Mình sẽ lấy ví dụ lần lượt kèm code để bạn hình dung.

forEach()

Code trước đây bạn sẽ viết sử dụng syntax:

var items = [0, 1, 2, 3]
for (var i = 0, i < items.length; i++) {}

Với Javascript ES5, bạn xử lý mảng lại như sau:

items.forEach(function (value, i) {})

map()

Phương thức này cho phép đi qua vòng lặp và tạo lại 1 tập hợp các đối tượng mới. Mình để ý thấy không nhiều các bạn dev sử dụng nó, mà vẫn theo lối mòn với forEach hoặc vòng lặp for cơ bản thôi.

var formattedItems = items.map(function(item) {
  return item.id > 0
})

reduce()

Để chuyển từ 1 mảng sang giá trị đơn lẻ, bạn sử dụng reduce. Nó giống như kiểu thực hiện phép cộng dồn, như ví dụ sau:

var items = [1, 3, 5]
var newItems = items.reduce(function(item, value, index) {
  return item + value
})
console.log(newItems) // = 9

Nếu bạn muốn thay đổi số đầu tiên (ví dụ không phải 1 mà 1 số khác, ví dụ 6

var items = [1, 3, 5]
var newItems = items.reduce(function(item, value, index) {
  return item + value
}, 6)
console.log(newItems) // = 15 (số đầu tiên để cộng sẽ là 6)

Bạn có thể thử với dữ liệu không phải là số, ví dụ các giá trị, để tạo ra một tập hợp mới với key-value:

var items = [
  ['name': 'Chuyen Dev'],
  ['domain: 'chuyendev.com']
  ['author': 'khoipro']
]
var newItems = items.reduce(function(item, value, index) {
  item[value[0]] = value[1]

  return item
}, { createdDate: '2024-10-05 00:00:00' } )

console.log(newItems) // { name: 'Chuyen Dev', domain: 'chuyendev.com', author: 'khoipro', createdDate: '2024-10-05 00:00:00}

filter()

Khác với map, filter không trả về mọi kết quả mà chỉ trả về các kết quả dựa theo điều kiện.

var items = [
  {
    'siteName': 'Chuyên Dev',
    'domain': 'chuyendev.com'
  },
  {
    'siteName': 'Code Tốt',
    'domain': 'codetot.vn'
  }
]

var vnItems = items.filter(function(item) {
  return item.domain.indexOf('.vn') !== -1
})

console.log(vnItems) // [{sitename: 'Chuyên Dev', domain: 'chuyendev.com'}]

Lưu ý: filter() vẫn trả ra giá trị là 1 Array, kể cả khi có 1 giá trị.

some()

Dạng shorthand của câu hỏi true/false, áp dụng cho mảng, khi bất kì giá trị nào thoả mãn.

var items = [1, 3, 5, 7]
var hasNumberOne = items.some(function(item) {
  return item === 1
})
console.log(hasNumberOne) // true

every()

Tương tự như some(), nhưng yêu cầu là khi MỌI GIÁ TRỊ trong mảng đều đáp ứng điều kiện.

var items = [1, 3, 5, 7, 11]
var isLowerTen = items.every(function(item) {
  return item < 10
})
console.log(isLowerTen) // false

Một số ví dụ thực hành trong dự án thực tế

Tính tổng lượt bình chọn của tất cả sản phẩm trong cửa hàng

var products = [
  {
    name: 'Bình xịt côn trùng',
    price: 115000,
    votes: 5
  },
  {
     name: 'Chậu nhựa',
     price: 85000,
     votes: 3
  }
]

function getAllTotalVotes(products) {
  return products.map(function(product) {
    // *parseInt: chuyển string sang number để có thể cộng trừ
    return parseInt(product.votes, 10)
  }).reduce(function(item, voteCount) {
    return item + voteCount
  })
}

var totalVotes = getAllTotalVotes(products)

console.log(totalVotes) // 8