Video học lập trình mỗi ngày

Array trong javascript là một khía cạnh mà thú thật là tips javascript rất thích làm việc với nó. Từ back-end cho tới Front-end đi đâu cũng thấy người ta sử dụng nó song song với Object để giải quyết và lưu trữ dữ liệu. Chính vì vậy trong javascript đã có một sự ưu tiên không hề nhẹ khi liên tiếp bổ sung những method cho array kể từ khi javascript ra đời. 

Theo dõi về series "Nguyên tắc trong lập trình":

1 - Nguyên tắc đặt tên trong lập trình 

2 - Kỹ năng xử lý chuỗi trong Javascript 

3 - Kỹ năng làm việc với Array trong Javascript 

4 - Kỹ năng làm việc với Object trong Javascript 

5 - Kỹ năng làm việc với Function trong Javascript 

6 - Kỹ năng làm việc với Module trong Javascript 

7 - Kỹ năng làm việc với Loop trong Javascript 

8 - Kỹ năng làm việc với Callback trong Javascript

9 - Kỹ năng làm việc với Promise trong Javascript 

10 - Kỹ năng làm việc với Async-await trong Javascript 

11 - Còn nhiều nữa...

Array trong javascript và kỹ năng xử lý

Điều đầu tiên tips javascript muốn các bạn hiểu về 10 method trong array javascript được sử dụng nhiều nhất và tiếp theo đó là những khái niệm khi nào nên sử dụng những method trên.

Nghe cái tiêu đề ngộ ngộ, bán sầu riêng liên quan gì đến việc học array trong javascript? Đúng là nó không liên quan nhưng ở đây chúng tôi muốn thông qua một ví dụ thực tế gần gũi, để bạn có một cái nhìn rõ hơn trong việc sử dụng những method sao cho hợp lý. Tips nói vậy không sai chút nào bởi vì sao, bởi vì đã có rất nhiều method được cung cấp khi devjs sử dụng array từ ES1 cho đến ES2020 vẫn còn đấy thôi. Nhưng chính vì vậy, nếu bạn thật sự không hiểu bản chất của những method đó mà đã vận dụng vào những dự án hay code của mình có thể bạn sẽ nhận những hậu quả đó là hiệu suất code kém đi, và chậm chạp rất nhiều. 

Vì thế này, đầu tiên nếu nhìn thoáng qua thì array.fitler() giống như array.find() nhưng khi sử dụng nó lại khác nhau. Ngoài ra bạn cũng sẽ dễ nhầm lẫn việc sử dụng Array.some() và Array.every() đều return về kiểu boolean đó là true và false. Nhưng cách sử dụng lại hoàn toàn khác nhau. 

Và chính vì vậy, nếu bạn đã có sự nhầm lẫn hoặc có thể chưa hiểu hết về cách sử dụng array javascript thì bài viết này đây sẽ là của bạn, hy vọng bạn sẽ có nhiều bài học và kinh nghiệm từ những người lập trình mà họ đã thực sự là những người đã nhầm lẫn.

Học array javascript với chủ cửa hàng bán sầu riêng

Để có cái nhìn toàn diện, chúng ta sẽ lấy một ví dụ sinh động về chủ một cửa hàng bán Sầu Riêng đi. Món đó cũng ngon đấy! Và nổi tiếng nữa chứ. Đầu tiên ông chủ sẽ nhập về một lô sầu riêng từ thương lái Trung Quốc. Giả sử chúng tôi nhập về với một lô như dưới

var sauRieng = [{ id: '1001', weight: 50 },
{ id: '1002', weight: 80 },
{ id: '1003', weight: 120 },
{ id: '1004', weight: 40 },
{ id: '1005', weight: 110 },
{ id: '1006', weight: 60 }]

Giờ đây khi lấy lô hàng này về, thì ông chủ của chúng ta lại bơm thuốc vào cho tăng cân lên thì nên sử dụng như thế nào đây! 

##Ông chủ bơm thuốc tăng trọng sầu riêng 

Ở trường hợp này chúng ta có thể sử dụng map và forEach có vẻ hợp lý nhất. 

### Sử dụng forEach

sauRieng.forEach(element => element.weight += 20)

### Sử dụng map

sauRieng.map(potato => potato.weight += 20 )

Cùng sử dụng hai method forEach và map thì cùng có kết quả giống nhau

0: {id: "1001", weight: 70}
1: {id: "1002", weight: 100}
2: {id: "1003", weight: 140}
3: {id: "1004", weight: 60}
4: {id: "1005", weight: 130}
5: {id: "1006", weight: 80}

Có thể nói trưởng hợp này, theo tips thì nên sử dụng forEach thì đúng hoàn cảnh hơn so với map. Nhưng, ở đây nó lại khác nhau khi chúng ta sử dụng return ở đây. Bây giờ chúng ta muốn lấy thêm thông tin của weight khi đã được bơm thuốc thì sao? Lúc này thì sử dụng map lại quá ngon luôn. Cho nên như lúc đầu tôi cũng muốn hướng cho bạn, cẩn thận nên sử dụng phương thức nào cho tiện đôi đường. So sánh ở đây, thì forEach không có return về giá trị, ngay cả thêm return cũng vô ích

### Sử dụng forEach

const w = sauRieng.forEach(el => { return el.weight += 20})
//undefined

### Sử dụng map

const w = sauRieng.map(el => { return el.weight += 20} )
//[ 70, 100, 140, 60, 130, 80 ]

Khi sử dụng map và có gía trị trả về, bạn có thể tóm tắt thống kê trọng lượng của sầu riêng để sắp xếp một mảng. 

##Người mua sầu riêng

OK, khi ông chủ của chúng ta đã bơm thuốc thành công rồi, thì mang ra chợ bán thôi. Giờ đây tôi đóng vai người mua hàng tôi cần mua những quả sầu riêng to. Tôi: Ông chủ, có sầu riêng trên 80 kg không? 

Ông chủ: Chờ một lát để tôi sử dụng method Array.some()

var s1 = sauRieng.some(el => el.weight > 80)
console.log(s1) // true

Ông chỉ: Sầu Riêng trên 80 kg có nhé! 

Tôi: Vậy lấy cho tôi tất cả những quả trên 80kg mà ông có. 

Ông chủ: Chờ một lát để tôi sử dụng method Array.find()

var s1 = sauRieng.find(el => el.weight > 80)
console.log(s1);//{
    id:"1003",
    weight:120
}

Tôi: Ông có chắc là kết quả này đúng chứ vì tôi thấy còn nhiều quả rất to 

Ông chủ: Tôi bị nhầm lẫn giữa find và filter, để tôi sử dụng filter

var s1 = sauRieng.filter(el => el.weight > 80)
console.log(s1);// kết quả cho hai trái 
/*
(2) [
{
id:"1003",
weight:120
},
{
id:"1005",
weight:110
}
]
*/

Bạn có thể tìm thấy kinh nghiệm gì khi nhìn vào bài toán. Ở đây sẽ có một số bạn sẽ nói rằng tại sao lại dài dòng như vậy? Trong khi chúng ta chỉ cần dùng method filter() cho toàn bộ câu hỏi. Nếu sử dụng filter() mà return về length > 0 có nghĩa là có quả lớn hơn 80 kg mà sẽ biết có bao nhiêu quả luôn. Đúng, bạn nói không hế sai nếu như, câu hỏi của người mua hàng, rành mạch và đầy đủ thông thin luôn. 

Ví dụ: Ông chủ, tôi muốn mua hết những trái sầu riêng mà có trọng lượng lơn hơn 80Kg. Thì lúc đó bạn sẽ nghĩ ngay đến trường hợp sử dụng filter(). Nhưng ở trên kia thì mỗi câu hỏi đều tách ra vì thế phải làm từng bước. 

Bài học kỹ năng xử lý array trong javascript là đại diện cho một khía cạnh là khi code xong hoàn thiện một module nào đó thì bạn nên dừng lại rồi review code của mình, xem có tối ưu hay chưa, và nếu chưa thì nên sủ dụng phương pháp là đúng nhất. Chú ý là: Find và Filter javascript rất giống nhau, cho nên hãy cẩn thận. Tiếp theo chúng ta đi một số tình huống sau 

Tôi: Ông chủ, hình như tất cả những trái ở đây nếu lớn hơn 60Kg. 

Ông chủ: Let me see

var allBig = sauRieng.every(el => el.weight > 60);
console.log('>>>', allBig);// false

Ở đây ông chủ đã rất thông minh khi sử dụng Array.every() để check xem có quả nào nhỏ hơn 60kg không, nếu có thì sẽ return về false hay true. Bạn cũng có thể sử dụng for với lệnh break; nhưng tốt hơn hết thì cứ sử dụng every() cho nó hiện đại. Ở đây chưa bàn tới performance nên các bạn cũng chú ý nhé. Tôi: Xong rồi, nhưng ở đây lộn xộn quá, vậy làm sao ông biết được sầu riêng lớn hơn 100kg nằm ở vị trí nào? Ông chủ: Rất dễ, vì đó là nghề của tôi, hay xem đây

var i = sauRieng.findIndex(el => el.weight > 100);
console.log('>>>', i); // 2

Sử dụng findIndex trả về index đầu tiên của một Array được tìm thấy. Bạn cũng có thể làm điều tương tự với method indexOf(). Nhưng cần phải phân biệt giữa findIndex và indexOf trong javascript khác nhau như thế nào.

Tôi: Vậy làm sao ông có thể tính được tổng cộng trọng lượng mà ông đã nhập cho lô này? 

Ông chủ: Quá đơn giản, tôi chỉ cẩn sử dụng reduce là ra ngay thôi ấy mà.

var sum = sauRieng.reduce((sum, p) => 
  { return p.weight + sum },0)

  console.log(sum)

Nói về reduce thì đây là một method gây khó hiểu nhất đối với các bạn mới làm quen. Nhưng yên tâm ở đây tôi tổng hợp 25 trường hợp sử dụng reduce javascript và nếu khó hiểu thì có thể xem cách hoạt động của reduce trong javascript. Ở đó bạn sẽ có mọi thứ. 

Tóm lại hiểu về array javascript

Như vậy, chúng ta đi qua một ví dụ nhỏ nhỏ, nhưng cũng đủ cho các bạn cảm nhận được việc lập trình với array với nhiều method như thế nào. Nếu giả sử bạn không quen thì tôi nghĩ bạn sẽ không làm ông chủ bán sầu riêng được đâu. 

Vậy cho nên, hãy tìm kiếm những kiến thức tổng hợp về Array trong javascript để nghiên cứu thêm đi. Và tips cũng cảm ơn , nếu bạn đã đọc tới đây. 

Thanks for reading!