Tôi có thể sử dụng rút gọn trong JavaScript ở đâu?

Question

const numbers = [1, 2, 3, 4, 5]

5 là một phương thức mảng giúp bạn chuyển đổi một mảng thành một giá trị duy nhất. Nó trông như thế này

Nội dung chính Show

tổng hợp số
Giảm một mảng thành một đối tượng
Làm phẳng một mảng
JS giảm được sử dụng để làm gì?
Khi nào tôi nên sử dụng giảm?
Tại sao chúng tôi sử dụng giảm mảng trong JavaScript?
Làm cách nào để viết phương thức rút gọn trong JavaScript?

const callback = (accumulator, currentValue, index) => {
  // return something here
}
const result = array.reduce(callback, initialValue)

initValue là giá trị bạn muốn bắt đầu với
bộ tích lũy là giá trị được trả về từ lần lặp trước. Nó sẽ là
```
const numbers = [1, 2, 3, 4, 5]
```
6 cho lần lặp đầu tiên
currentValue là mục mảng trong lần lặp hiện tại

Hãy đi qua một số ví dụ

tổng hợp số

Giả sử bạn có một danh sách các số. Bạn muốn tìm tổng của những con số này

const numbers = [1, 2, 3, 4, 5]

Đây là mã để tính tổng các số

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

Hãy đi qua những gì xảy ra, từng bước một

Đầu tiên, bạn chuyển một

const numbers = [1, 2, 3, 4, 5]

6 đến

const numbers = [1, 2, 3, 4, 5]

5.

const numbers = [1, 2, 3, 4, 5]

6 này phải là 0 vì

Chúng tôi muốn

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 là một số

Chúng tôi không muốn
```
const numbers = [1, 2, 3, 4, 5]
```
6 ảnh hưởng đến tổng

Giá trị ban đầu được đặt thành 0

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 sẽ là

const numbers = [1, 2, 3, 4, 5]

6 trong lần lặp đầu tiên.

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

4 sẽ là mục đầu tiên của mảng

accumulator gán là 0

currentValue là mục đầu tiên trong mảng

Bạn cần trả về một giá trị trong cuộc gọi lại. Giá trị này sẽ được sử dụng làm

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 tiếp theo. Vì chúng tôi muốn tính tổng các số, chúng tôi trả về tổng của

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 và

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

4

Giá trị trả về tiếp theo được tính toán

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 nhận giá trị trả về trong lần lặp thứ hai.

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

4 sẽ là mục mảng thứ hai

Giá trị trả về trước đó được sử dụng làm bộ tích lũy tiếp theo

currentValue trở thành mục thứ hai trong mảng

Chúng tôi trả về tổng của hai giá trị mà chúng tôi có,

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 và

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

4. Quá trình này tiếp tục cho đến khi

const numbers = [1, 2, 3, 4, 5]

5 lặp qua toàn bộ mảng. Giá trị cuối cùng sẽ được trả về khi gọi hàm

Giá trị trả về được tính toán và quá trình lặp lại

Giảm một mảng thành một đối tượng

Chúng ta sẽ cùng nhau tạo phương thức

const numbers = [1, 2, 3, 4, 5]

5 cho ví dụ này

Giả sử chúng ta có một loạt các loại trái cây. Chúng tôi muốn biết số lượng của mỗi loại trái cây

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

Đầu tiên, chúng ta nên chuyển một đối tượng trống dưới dạng

const numbers = [1, 2, 3, 4, 5]

6 vì chúng ta muốn tạo một đối tượng

const tally = fruits.reduce((accumulator, fruit) => {
  // Do something
}, {})

Trong lần lặp đầu tiên,

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 sẽ là

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

6.

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

7 sẽ là

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

8

Trong lần lặp đầu tiên này, chúng tôi biết bộ tích lũy chưa có trái cây. (

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

6 không chứa

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

8). Ở đây, chúng tôi muốn thêm

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

8 vào

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0. Trong khi thêm

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

8 vào

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0, chúng tôi đặt số lượng táo thành 1

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

Trong lần lặp thứ hai,

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 nhận giá trị được trả về trước đó.

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

7 là một quả táo khác

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0.

const tally = fruits.reduce((accumulator, fruit) => {
  // Do something
}, {})

8

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

7.

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

8

Ở đây, chúng tôi muốn tăng số lượng táo trong

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0. Để làm như vậy, chúng tôi cần kiểm tra xem tài sản

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

8 có tồn tại trong

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 không. Nếu có, chúng tôi tăng giá trị của nó lên 1

const tally = fruits.reduce((accumulator, fruit) => {
  if (accumulator[fruit]) {
    accumulator[fruit] = accumulator[fruit] + 1
  } else {
    accumulator[fruit] = 1
  }

  return accumulator
}, {})

Đó là nó. Quá trình lặp lại cho các loại trái cây khác. Nếu bạn đăng nhập

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

4, bạn sẽ thấy đối tượng chúng tôi muốn

{
  apple: 3,
  banana: 2,
  orange: 1,
  pear: 1
}

Hãy dọn dẹp chức năng giảm tiếp theo. Chúng ta có thể làm như vậy với toán tử bậc ba

const tally = fruits.reduce((accumulator, fruit) => {
  const fruitCount = accumulator[fruit]
  fruitCount
    ? accumulator[fruit] = fruitCount + 1
    : accumulator[fruit] = 1
  return accumulator
}, {})

Làm phẳng một mảng

Giả sử chúng ta có một mảng chứa các mảng. Chúng tôi muốn chuyển đổi mảng mảng này thành một mảng duy nhất chứa tất cả các giá trị. Quá trình này được gọi là làm phẳng

const array = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
]

// What we want:
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Để làm phẳng mảng, chúng ta cần bắt đầu

const numbers = [1, 2, 3, 4, 5]

5 bằng một mảng. Điều này là do chúng tôi muốn đầu ra là một mảng

const numbers = [1, 2, 3, 4, 5]

0

Trong lần lặp đầu tiên,

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0 sẽ là một mảng trống.

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

7 sẽ là một mảng chứa năm mục

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0.

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

9

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

7.

const tally = fruits.reduce((accumulator, fruit) => {
  if (accumulator[fruit]) {
    accumulator[fruit] = accumulator[fruit] + 1
  } else {
    accumulator[fruit] = 1
  }

  return accumulator
}, {})

1

Chúng tôi muốn hợp nhất

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

7 thành

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

0. Chúng ta có thể sử dụng

const tally = fruits.reduce((accumulator, fruit) => {
  if (accumulator[fruit]) {
    accumulator[fruit] = accumulator[fruit] + 1
  } else {
    accumulator[fruit] = 1
  }

  return accumulator
}, {})

4 để làm như vậy

const numbers = [1, 2, 3, 4, 5]

1

Phương pháp này hoạt động ngay cả khi bộ tích lũy chứa các giá trị

const numbers = [1, 2, 3, 4, 5]

2

Mã

const numbers = [1, 2, 3, 4, 5]

5 trông như thế này

const numbers = [1, 2, 3, 4, 5]

3

Nếu muốn ngắn gọn hơn, bạn có thể sử dụng toán tử trải rộng mảng

const numbers = [1, 2, 3, 4, 5]

4

Nếu bạn thích bài viết này, hãy ủng hộ tôi bằng cách chia sẻ bài viết này trên Twitter hoặc mua cho tôi một ly cà phê 😉. Nếu bạn phát hiện lỗi đánh máy, tôi đánh giá cao nếu bạn có thể sửa nó trên GitHub. Cảm ơn bạn

JS giảm được sử dụng để làm gì?

Phương thức reduce() thực thi hàm gọi lại "reducer" do người dùng cung cấp trên mỗi phần tử của mảng, theo thứ tự, chuyển vào giá trị trả về từ phép tính ở phần trước . Kết quả cuối cùng của việc chạy bộ giảm tốc trên tất cả các phần tử của mảng là một giá trị duy nhất. . The final result of running the reducer across all elements of the array is a single value.

Khi nào tôi nên sử dụng giảm?

Bạn nên sử dụng reduce để giảm thực tế , nghĩa là bạn có một mảng mà bạn muốn giảm xuống một giá trị. Đây phải là giá trị được giữ trong bộ tích lũy của bạn.

Tại sao chúng tôi sử dụng giảm mảng trong JavaScript?

Giảm mảng trong JavaScript là một phương thức được xác định trước được sử dụng để giảm mảng thành một giá trị duy nhất bằng cách chuyển hàm gọi lại trên mỗi phần tử của mảng. It accepts a function executed on all the items of the specified array in the left-to-right sequence. The returned single value is stored in the accumulator.