Viết các vòng lặp JavaScript bằng cách sử dụng bản đồ, lọc, giảm và tìm

Cách thực hiện các thao tác phổ biến trong JavaScript nơi bạn có thể sử dụng các vòng lặp, sử dụng map (), filter (), Reduce () và find ()

Vòng lặpthường được sử dụng, trong bất kỳ ngôn ngữ lập trình nào, để thực hiện các hoạt động trên mảng: với một mảng, bạn có thể lặp lại các phần tử của nó và thực hiện một phép tính.

Hãy xem cách chọn các nhu cầu phổ biến và thực hiện chúng bằng cách sử dụngLập trình chức năngtiếp cận, trái ngược với việc sử dụng các vòng lặp.

LƯU Ý: Tôi không khuyến nghị cách tiếp cận này hơn cách tiếp cận khác. Tôi chỉ muốn giới thiệu các cách khác nhau để thực hiện cùng một thứ và có thể giới thiệu cho bạn các chức năng mới mà bạn có thể chưa bao giờ sử dụng cho đến bây giờ.

map,filter,reduce,find

Đó là 3 hàm mảng thực sự mạnh mẽ:

  • maptrả về một mảng có cùng độ dài,
  • filternhư tên của nó, nó trả về một mảng có ít mục hơn mảng ban đầu
  • reducetrả về một giá trị (hoặc đối tượng)
  • findtrả về các mục đầu tiên trong một mảng thỏa mãn một điều kiện

map,filterreduceđã được giới thiệu trong ES5, vì vậy bạn có thể sử dụng chúng một cách an toàn như được triển khai trên mọi trình duyệt từ nhiều năm nay.

findđã được giới thiệu trong ES6 / ES2015.

Họ cung cấp nhiều hơncách tiếp cận khai báo, chứ không phải là một cách tiếp cận bắt buộc (mô tảsẽ xảy ra, không phải viết mọi quy trình xử lý nhỏ sẽ xảy ra)

Thực thi một cái gì đó trên mọi phần tử vớimap

Một vòng lặp sẽ như thế này:

const performSomething = (item) => {
  //...
  return item
}
const items = ['a', 'b', 'c']
items.forEach((item) => {
  performSomething(item)
})

Với cách tiếp cận khai báo, bạn yêu cầu JavaScript thực hiện điều gì đó trên mọi phần tử bằng cách sử dụng:

const items = ['a', 'b', 'c']
const newArray = items.map((item) => performSomething(item))

Điều này tạo ra một mảng mới mà không cần chỉnh sửa mảng ban đầu (cái mà chúng tôi gọi là tính bất biến)

Vì chúng tôi sử dụng một hàm duy nhất trong hàm gọi lại bản đồ, chúng tôi có thể viết lại mẫu dưới dạng:

const items = ['a', 'b', 'c']
const newArray = items.map(performSomething)

Tìm một phần tử duy nhất trong mảng

Đôi khi bạn cần tìm một mục cụ thể trong mảng và trả lại nó.

Đây là cách bạn sẽ làm như vậy với một vòng lặp:

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]
for (const item of items) {
  if (item.name === 'b') {
    return item
  }
}

Đây là phiên bản không lặp lại, sử dụngfind()(ES6 +):

const b = items.find((item) => item.name === 'b')

Đây là chức năng tương tự bằng cách sử dụngfilter()(ES5 +):

const b = items.filter((item) => item.name === 'b').shift()

shift () trả về mục đầu tiên trong mảng mà không gây ra lỗi nếu mảng trống (trả vềundefinedtrong trường hợp đó).

Ghi chú:shift()biến đổi mảng, nhưng mảng mà nó đột biến là mảng được trả về bởifilter(), không phải mảng ban đầu. Nếu điều này nghe có vẻ không được chấp nhận, bạn có thể kiểm tra xem mảng có trống không và lấy mục đầu tiên bằng cách sử dụngb[0].

Đối với mục đích học tập (không có nhiều ý nghĩa trong thực tế), đây là chức năng tương tự sử dụngreduce():

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]

const b = items.reduce((result, item) => { if (item.name === ‘b’) { result = item } return result }, null)

filter()reduce()sẽ lặp lại trên tất cả các mục của mảng, trong khifind()sẽ nhanh hơn.

Lặp lại một mảng để đếm một thuộc tính của mỗi mục

Sử dụngreduce()để lấy một giá trị duy nhất từ một mảng. Ví dụ tính tổng các mụccontent.valuebất động sản:

const items = [
  { name: 'a', content: { value: 1 }},
  { name: 'b', content: { value: 2 }},
  { name: 'c', content: { value: 3 }}
]

sử dụng một vòng lặp:

let count = 0
for (const item of items) {
  count += item.content.value
}

có thể viết là

const count = items.reduce((result, { content: { value } }) => result + value, 0)

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: