Hướng dẫn này chỉ cho bạn cách giảm một mảng thành một giá trị bằng cách sử dụng các phương thức mảng JavaScript Reduce () và ReduceRight ().

Bạn đang xem : giảm mảng trong javascript

Tóm tắt : trong hướng dẫn này, bạn sẽ học cách sử dụng các phương thức JavaScript Array Reduce () ReduceRight () để giảm một mảng thành một giá trị.

Giới thiệu về phương thức Mảng JavaScript Reduce ()

Giả sử rằng bạn có mảng gồm các số, như sau:

 

let

number = [

1 ,

2

,

3

];

Ngôn ngữ mã:

JavaScript

(

javascript

)

và bạn muốn tính toán tổng các phần tử của mảng.

Thông thường, bạn sử dụng vòng lặp for để lặp lại các phần tử và cộng chúng lại như được minh họa trong hình sau ví dụ:

 

let

number = [

1

,

2

,

3

];

let

sum =

0

;

cho

(

let

i =

0

; i & lt; number.length; i ++) { sum + = số [i]; }

console

.log (sum);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

6

Tập lệnh rất đơn giản và dễ hiểu:

  • Đầu tiên, khai báo một mảng gồm ba số 1, 2 và 3.
  • Thứ hai, khai báo sum biến và đặt giá trị của nó bằng 0.
  • Thứ ba, trong vòng lặp for , hãy thêm các phần tử của mảng số thành biến sum . Sau vòng lặp, giá trị của biến sum là 6.

Những gì chúng tôi đã làm là giảm một mảng thành một giá trị .

Array.prototype cho phép bạn giảm một mảng xuống một giá trị duy nhất bằng cách sử dụng phương thức Reduce () như sau:

< pre class = "wp-block-code">

let

number = [

1

,

2

,

3

];

let

sum = number.reduce (

function

(

beforeValue, currentValue

)

{

return

beforeValue + currentValue;
});

console

.log (sum);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Nó khá đơn giản phải không?

Chúng ta hãy xem xét chi tiết phương thức Reduce () . < / p>

JavaScript Chi tiết phương thức Reduce () trong mảng

Phần sau minh họa cú pháp của phương thức Reduce () :

 

array

. giảm

(

callbackFn

[, initialValue]

)

Ngôn ngữ mã:

CSS

(

< p class = "shcb-language__slug"> css

)

Reduce () phương thức nhận hai đối số:

  • Một hàm gọi lại callbackFn . Hàm thường được gọi là bộ giảm thiểu.
  • Giá trị ban đầu tùy chọn.

Phương thức Reduce () gọi hàm callbackFn () cho mọi phần tử trong mảng.

Hàm Reducer () trả về giá trị là kết quả của việc thực thi callbackFn để hoàn thành toàn bộ mảng.

1) Đối số của hàm callbackFn ()

Hàm callbackFn có cú pháp sau:

 

chức năng

callbackFn

(beforeValue, currentValue, currentIndex, array)

{}

Ngôn ngữ mã:

PHP

(< / p>

php

)

Hàm callbackFn nhận bốn đối số:

beforeValue

Giá trị được trả về từ lệnh gọi trước của hàm callbackFn . Trong lần gọi đầu tiên, initialValue beforeValue nếu bạn chuyển initialValue . Nếu không, giá trị của nó là array [0] .

currentValue

Giá trị của phần tử mảng hiện tại. Trong lần gọi đầu tiên, nó sẽ là array [0] nếu bạn dán initialValue hoặc array [1] nếu không.

currentIndex

Chỉ mục của currentValue trong mảng. Trong lần gọi đầu tiên, nó là 0 nếu bạn chuyển giá trị ban đầu hoặc 1 nếu không.

mảng

Mảng cần lặp lại .

2) Đối số initialValue

Đối số initialValue là tùy chọn.

Nếu bạn chỉ định initialValue , hàm callbackFn sẽ khởi tạo beforeValue thành initialValue currentValue thành phần tử của mảng đầu tiên trên cuộc gọi đầu tiên.

Nếu bạn không chỉ định initialValue , thì hàm callbackFn sẽ khởi tạo beforeValue cho phần tử của mảng đầu tiên ( array [0] ) trong mảng và currentValue cho phần tử của mảng thứ hai ( array [1] < /code>).

Bảng sau minh họa logic khi phương thức Reduce () thực thi hàm callbackFn () lần đầu tiên theo initialValue a rgument:

initialValue beforeValue currentValue đã chuyển initialValue mảng [0] không được truyền array [0]

array [1]

Ví dụ sau cho thấy tiến trình của hàm Reduce () với một initialValue as 100:

 

let

number = [

1

,

2

,

3

];

function

getOrdinalSuffix

(

tôi

)

{

let

j = i%

10

, k = i%

100

;

if

(j ==

1

& amp; & amp; k! =

11

)

return

i +

'st'

;

if

(j ==

2

& amp; & amp; k! =

12

)

return

i +

'nd'

;

if

(j ==

3

& amp; & amp; k! =

13

)

return

i +

'rd'

;

return

i +

'th'

; }

let

call =

1

;

let

sum = number.reduce (

function

(

beforeValue, currentValue, currentIndex, mảng

)

{

let

result = beforeValue + currentValue;

console

.log (

`

$ {getOrdinalSuffix (call)}

gọi`

); gọi ++;

console

.table ({beforeValue, currentValue, currentIndex, result});

trả về kết quả

; },

100

);

console

.log (

`Kết quả:

$ {sum}

`

);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Kết quả:

 

Cuộc gọi đầu tiên ┌────────────────┬─────────┐ │ (chỉ số) │ Giá trị │ ├────────────────┼─────────┤ │ trước Giá trị │ 100 │ │ currentValue │ 1 │ │ currentIndex │ 0 │ │ kết quả │ 101 │ └────────────────┴─────────┘ Cuộc gọi thứ 2 ┌────────────────┬─────────┐ │ (chỉ số) │ Giá trị │ ├────────────────┼─────────┤ │ trước Giá trị │ 101 │ │ currentValue │ 2 │ │ currentIndex │ 1 │ │ kết quả │ 103 │ └────────────────┴─────────┘ Cuộc gọi thứ 3 ┌────────────────┬─────────┐ │ (chỉ số) │ Giá trị │ ├────────────────┼─────────┤ │ trước Giá trị │ 103 │ │ currentValue │ 3 │ │ currentIndex │ 2 │ │ kết quả │ 106 │ └────────────────┴─────────┘ Kết quả: 106

Ngôn ngữ mã:

plaintext

(

plaintext

)

Và phần sau minh họa Phương thức Reduce () không có đối số initialValue :

 

cuộc gọi đầu tiên ┌────────────────┬─────────┐ │ (chỉ số) │ Giá trị │ ├────────────────┼─────────┤ │ trước Giá trị │ 1 │ │ currentValue │ 2 │ │ currentIndex │ 1 │ │ kết quả │ 3 │ └────────────────┴─────────┘ Cuộc gọi thứ 2 ┌────────────────┬─────────┐ │ (chỉ số) │ Giá trị │ ├────────────────┼─────────┤ │ trước Giá trị │ 3 │ │ currentValue │ 3 │ │ currentIndex │ 2 │ │ kết quả │ 6 │ └────────────────┴─────────┘ Kết quả: 6

Ngôn ngữ mã:

plaintext

(

plaintext

)

Thêm mảng JavaScript giảm ( ) ví dụ

Giả sử bạn có mảng đối tượng sản phẩm shoppingCart sau:

 

let

shoppingCart = [ {

product

:

'phone'

,

qty

:

1

,

price

:

500

, }, {

product

:

'Screen Protector'

,

qty

:

1

,

price

:

10

, }, {

product

:

'Thẻ nhớ'

,

qty

:

2

,

price

:

20

, }, ];

Ngôn ngữ mã:

JavaScript

(

javascript

)

Để tính tổng số tiền sản phẩm trong giỏ hàng, bạn có thể sử dụng phương thức Reduce () , như sau:

 

let

total = shoppingCart.reduce (

function (

beforeValue, currentValue

)

{

return

beforeValue + currentValue.qty * currentValue.price; },

0

);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

550

< / pre>

Lưu ý rằng trong ví dụ này, chúng tôi đã chuyển đối số initialValue vào phương thức Reduce () .

Nếu chúng tôi không làm như vậy ' Nếu không, phương thức Reduce () sẽ lấy phần tử đầu tiên của mảng shoppingCart , là một đối tượng, làm giá trị ban đầu và thực hiện phép tính trên đối tượng này. Do đó, nó sẽ gây ra kết quả không chính xác.

Phương thức JavaScript Array ReduceRight ()

Phương thức ReduceRight () hoạt động giống như phương thức Reduce () , nhưng theo hướng ngược lại.

Phương thức Reduce () bắt đầu từ phần tử đầu tiên và đi về phía cuối cùng, trong khi ReduceRight () bắt đầu ở phần tử cuối cùng và lùi lại phần tử đầu tiên.

Xem ví dụ sau:

 

let

number = [

1

,

2

,

3

];

let

sum = number.reduceRight (

function

(

beforeValue, currentValue

)

{

console

.log ({beforeValue, currentValue});

return

beforeValue + currentValue; });

console

.log (

`Kết quả:

$ {sum}

`

);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Kết quả < / p>

 

{

beforeValue

:

3

, currentValue:

2

} {

beforeValue

:

5

, currentValue:

1

}

Kết quả

: 6

Ngôn ngữ mã:

CSS

(

css

)

Hình ảnh sau minh họa sự khác biệt giữa Reduce () ReduceRight () các phương thức:

Trong hướng dẫn này, bạn đã học cách sử dụng phương thức mảng JavaScript Reduce () ReduceRight () để giảm một mảng thành một giá trị.

Hướng dẫn này có hữu ích không?


Xem thêm những thông tin liên quan đến chủ đề giảm mảng trong javascript

JavaScript Array Reduce

  • Tác giả: Programming with Mosh
  • Ngày đăng: 2018-05-15
  • Đánh giá: 4 ⭐ ( 2821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Array Reduce

    🔥Get the COMPLETE course (83% OFF - LIMITED TIME ONLY): http://bit.ly/2KZea52

    Subscribe for more videos:
    https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1

    Want to learn more from me? Check out my blog and courses:

    http://programmingwithmosh.com
    https://www.facebook.com/programmingwithmosh/
    https://twitter.com/moshhamedani

[JavaScript] Các phương thức xử lý mảng (Array) phổ biến trong JavaScript

  • Tác giả: vncoder.vn
  • Đánh giá: 4 ⭐ ( 6082 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài chia sẻ này một phần giúp các bạn mới học nắm chắc kiến thức hơn về các phương thức xử lý mảng trong JavaScript.

Khai Báo Mảng Trong Javascript, Mảng (Array) Trong Javascript

  • Tác giả: jdomain.vn
  • Đánh giá: 3 ⭐ ( 9706 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc xử lý mảng trong javascript cũng quan trọng như xử lý mảng trong PHP vậy, bởi vì khi chúng ta dùng javascript để xử lý DOM thì kết quả mà chúng ta lấy được là một mảng các Element HTML và sẽ lặp element đó rồi xử lý, Chính vì điều này nên hôm nay mình viết một bài xử lý mảng trong javascript luôn để trình bày cho các bạn dễ nắm bắt hơn

Mảng trong JavaScript | JS ARRAY

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 3313 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Sắp xếp mảng trong JavaScript

  • Tác giả: completejavascript.com
  • Đánh giá: 5 ⭐ ( 8371 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Array sorting (sắp xếp mảng) là một bài toán vô cùng quen thuộc. Bài viết này sẽ tìm hiểu về một số cách để thực hiện sắp xếp mảng trong trong JavaScript

Sắp xếp mảng trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 5 ⭐ ( 5270 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể tự do sắp xếp phần tử trong mảng JavaScript theo thứ tự tăng dần, giảm dần hoặc là theo một điều kiện tuỳ ý. Hãy tìm hiểu cách sắp xếp phần tử trong mảng JavaScript bằng phương thức sort() thông qua bài học này nhé.

Mảng trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 5 ⭐ ( 8154 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở phần hằng và biến trong javascript mình cũng có nói qua về cách khai báo mảng trong javascript rồi. Nhưng đó mới chỉ là mức độ khai báo còn sử dụng thì mình chưa nói, nên bài này mình sẽ giới thiệu lại với mọi người về mảng trong javascript một cách chi tiết hơn.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm cách nào để làm tròn một số trong Javascript? - js toán học làm tròn xuống

By ads_php