Nếu bạn đã làm việc với JavaScript, chắc hẳn bạn đã biết mảng(Array) là một thứ không thể thiếu khi chúng ta làm việc. Vậy nên hôm nay mình sẽ giới thiệu tới các bạn một số phương thức hữu ích mà mình hay sử dụng.

Nào, Let go!!!

Slice trong Array

Chúng ta có thể cắt một phần của mảng, tức là lấy đi một phần nào đó của mảng và sau đó thực hiện một số thao tác trên những gì chúng ta đã cắt bỏ hoặc những gì còn lại của mảng ban đầu. Cú pháp là

array.slice(Start, end)
let myArr = [1, 2, 3, 4, 5, 6]
let slicedPart = myArr.slice(0, 3)
console.log(slicedPart)
//prints out [1, 2, 3, 4]

start là một số nguyên chỉ định nơi bắt đầu và kết thúc cũng là một số nguyên chỉ định nơi dừng. Cần lưu ý rằng phương thức này thay đổi mảng ban đầu và trả về phần đã cắt thành một mảng mới.

ForEach

Phương pháp này cho phép lặp qua các mảng đơn giản như các bảng chữ cái thay vì sử dụng vòng lặp for, bạn nên sử dụng For each. Nó chấp nhận một hàm callback nhận một tham số đại diện cho từng mục trong mảng. Cú pháp là

array.forEach((item)=>{
// do something with item
})

let myArr = [1, 2, 3]
myArr.forEach((item)=>{
 console.log(item * 2)
 //prints out 2, 4, 6
})

Map

Phương thức này cho phép chúng ta trả về một mảng mới từ một mảng hiện có dựa trên một điều kiện, nó có một hàm gọi lại chấp nhận một đối số đại diện cho từng mục trong mảng. Nó lặp qua mảng và trả về từng phần tử vượt qua bài test. Mặc dù bạn cũng có thể sửa đổi từng mục thay vì kiểm tra hoặc trả lại thuộc tính của mục đó. Cú pháp

array.map((item)=>{
//do anything with item
//e.g return item.name 
})
var myArr = [{name: 'foo'}, {name : 'bar'}]
let newArrr = myArr.map((item)=> item.name)
console.log(newArrr)
//prints out ['foo', 'bar']

Phương thức này hữu ích để truy xuất các thuộc tính của các đối tượng được lưu trữ bên trong một mảng.

Hàm map() nhận vào 3 tham số (theo thứ tự):

  • Phần tử hiện tại của mảng.
  • Chỉ số của phần tử hiện tại trong mảng.
  • Mảng ban đầu.

1 số ưu điểm khi dùng map() thay vì for-loop:

  • Với map(), ta không cần quản lý trạng thái của vòng lặp như với for-loop.
  • Ta không cần sử dụng chỉ số để truy cập vào đúng phần tử trong mảng.
  • Ta không cần tạo mảng mới và push() từng giá trị vào. map() trả về 1 mảng mới với các giá trị đã được chỉnh sửa, do đó có thể dễ dàng gán nó cho 1 biến khác.

Find an item

Hàm này rất hữu ích để tìm thứ gì đó bên trong một mảng mà không cần phải tìm kiếm bên trong nó theo cách thủ công, nó cũng chấp nhận một hàm callback mà chúng ta truyền vào một đối số, đối số đại diện cho từng mục trong mảng. Cú pháp

array.find((item)=> item = //anything)
var myArr = [{name: 'foo'}, {name : 'bar'}]

let obj = myArr.find((obj)=> obj.name == 'foo'
)
console.log(obj) //prints out
//{name: 'foo'}

Join

Phương thức này được sử dụng để nối nội dung của một mảng thành một chuỗi. Cú pháp

let myArr = ['Toi', 'la', 'HoaDeNhat']
let myString = myArr.join(",")
console.log(myString)
//prints out
//Toi la HoaDeNhat

Phương thức này chấp nhận một dấu phân cách được sử dụng để nối các phần tử trong mảng.

Filter

Tôi tin rằng trong quá trình bạn code bạn đã gặp tình huống phải lọc 1 số item ra khỏi mảg ban đầu , vì nó là 1 trong những bài thực hành phổ biến nhất, để làm được điều đó chúng ta phải xử lí khá rắc rối , nhưng với filter thì bạn có thể sử dụng nó 1 cách dễ dàng

Với 1 bài toán, lần này ta muốn 1 mảng chỉ chứa các con vật nhỏ. Nếu dùng for-loop:

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
        smallAnimals.push(animals[i])
    }
}

Sử dụng hàm filter():

Cách 1: 
let smallAnimals = animals.filter((animal) => {
    return animal.size === "small"
})
Cách 2: Short code
let smallAnimals = animals.filter(animal => animal.size === "small")

Hàm filter cũng nhận vào 3 tham số như hàm map(), tuy nhiên trong trường hợp này ta chỉ sử dụng tham số đầu tiên. Nó cũng có các lợi ích như hàm map(), cũng sử dụng câu lệnh return trong thân hàm. Tuy nhiên, với filter(), ta cần đảm bảo câu lệnh return trả về true hoặc false vì nó là điều kiện để “lọc” ra các giá trị phù hợp trong mảng.

Hàm reduce()

bạn cần tính tổng trọng lượng của các con vật. Hãy bắt đầu với for-loop:

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight
}

Và hàm reduce():

let totalWeight = animals.reduce((weight, animal, index, animals) => {
    return weight += animal.weight
}, 0)

Với hàm reduce(), các tham số truyền vào sẽ khác 1 chút so với 2 hàm kể trên:

  • Tham số đầu tiên là giá trị khởi tạo. Ta cần set giá trị khởi tạo ở cuối hàm. Trong ví dụ trên là 0. Nó có thể là bất cứ giá trị nào.
  • Tham số thứ 2 là phần tử hiện tại trong mảng.
  • Tham số thứ 3 và 4 giống với 2 hàm kể trên.

Nói lại 1 lần nữa, những lợi ích khi sử dụng reduce() cũng tương tự như map(),   filter(),  làm cho code ngắn hơn, dễ đọc hơn. Lần này, hàm reduce() trả về giá trị weight sau khi cộng, thứ sẽ lại trở thành tham số đầu tiên cho hàm reduce() kế tiếp. Khi chạy đến hàm reduce() với giá trị cuối cùng trong mảng, nó sẽ trả về tổng khối lượng các con vật (giá trị weight cuối cùng) và gán vào biến totalWeight.

Tại sao nên sử dụng map, filter, reduce ?

Một trong những nền tảng chính của functional programming là việc sử dụng list và cách hoạt động của list . Trong Javascript chúng ta có map, filter và reduce , tất cả các chức năng khi đưa ra một danh sách ban đầu sau biến nó thành cái gì đó khác , nhưng vẫn giữ nguyên list gốc của nó .