Trong JavaScript, một mảng [array] là một biến đặc biệt được sử dụng để lưu trữ các phần tử khác nhau.JavaScript, một mảng [array] là một biến đặc biệt được sử dụng để lưu trữ các phần tử khác nhau.
Mảng có một số thuộc tính tích hợp và phương thức mảng [gọi là array method] mà chúng ta có thể sử dụng để thêm, xóa, lặp hoặc thao với tác dữ liệu theo nhu cầu của mình.array method] mà chúng ta có thể sử dụng để thêm, xóa, lặp hoặc thao với tác dữ liệu theo nhu cầu của mình.
Và biết sử dụng các Array method có thể nâng cao kỹ năng lập trình Javascript của bạn lên rất nhiều.Array method có thể nâng cao kỹ năng lập trình Javascript của bạn lên rất nhiều.
15 Array Method của Javascript bạn cần phải biết
Trong bài viết này, chúng ta sẽ cùng tìm hiểu về 15 Array method của Javascript có thể giúp bạn thao tác với dữ liệu của mình đúng cách vào năm 2022.15 Array method của Javascript có thể giúp bạn thao tác với dữ liệu của mình đúng cách vào năm 2022.
> Lưu ý: Trong bài viết này, chúng ta sẽ đơn giản hóa function được truyền dưới dạng tham số. Và, bạn nên HỌC JAVASCRIPT CƠ BẢN trước để có thể hiểu rõ các Array Method này.Lưu ý: Trong bài viết này, chúng ta sẽ đơn giản hóa function được truyền dưới dạng tham số. Và, bạn nên HỌC JAVASCRIPT CƠ BẢN trước để có thể hiểu rõ các Array Method này.
Ví dụ:
// Thay vì viết như thế này
myAwesomeArray.some[test => {
if [test === "d"] {
return test
}
}]
// Chúng ta sẽ biết ngắn gọn thế này
myAwesomeArray.some[test => test === "d"]Bắt đầu nào!
1. Phương thức some[]
Phương thức some[] này kiểm tra mảng với một hàm được truyền dưới dạng tham số.some[] này kiểm tra mảng với một hàm được truyền dưới dạng tham số.
Nó sẽ trả về
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_some.asp
2. Phương thức reduce[]
Phương thức reduce[] này nhận một hàm có bộ tích lũy là đối số đầu tiên và giá trị làm đối số thứ hai.reduce[] này nhận một hàm có bộ tích lũy là đối số đầu tiên và giá trị làm đối số thứ hai.
Nó áp dụng hàm cho bộ tích lũy và mỗi giá trị trong mảng.
- Có nghĩa là, nó lặp qua các giá trị trong mảng đã cho và áp dụng hàm, sau đó lưu vào đối số đầu tiên [bộ tích lũy].
- Nếu không có giá trị ban đầu thì lần đầu tiên nó sẽ lấy phần tử thứ nhất và phần tử thứ hai của mảng
- ...
Cuối cùng, nó trả về một giá trị duy nhất.
Ví dụ:
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120Tham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_reduce.asp
3. Phương thức every[]
Phương thức every[] này kiểm tra mảng với một hàm được truyền dưới dạng tham số.every[] này kiểm tra mảng với một hàm được truyền dưới dạng tham số.
Nó sẽ trả về
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every[test => test === "d"]
//-------> Kết quả : false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every[test => test === "a"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_every.asp
4. Phương thức map[]
Phương thức map[] này nhận một hàm làm tham số. Và trả về một mảng mới có chứa một hình ảnh của từng thành phần của mảng.map[] này nhận một hàm làm tham số. Và trả về một mảng mới có chứa một hình ảnh của từng thành phần của mảng.
- Phương thức map[] Không thay đổi mảng ban đầu
Và nó sẽ luôn trả lại cùng số lượng phần tử.
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map[x => x * x]
//-------> Kết quả : 25
// 16
// 9
// 4
// 1Tham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_map.asp
5. Phương thức flat[]
Phương thức flat[] này thường được sử dụng để tạo ra một mảng mới chứa các phần tử trong mảng [mà có chứa mảng con]flat[] này thường được sử dụng để tạo ra một mảng mới chứa các phần tử trong mảng [mà có chứa mảng con]
const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat[]
//-------> Kết quả : [1, 2, 3, 4, 5]Tuy nhiên, nếu trong mảng con lại chứa một mảng con nữa thì nó sẽ thực hiện như sau:
const myAwesomeArray = [[1, 2], [3, [4, 6]], 5]
myAwesomeArray.flat[]
//-------> Kết quả : [1, 2, 3, [4, 6], 5]6. Phương thức filter[]
Phương thức filter[] này nhận một hàm làm tham số. Hàm này sẽ thực hiện lọc lần lượt các phần tử của mảng, nếu const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : true
Mảng mới này cuối cùng là kết quả được trả về.
const myAwesomeArray = [
{ id: 1, name: "Hải" },
{ id: 2, name: "Doanh" },
{ id: 3, name: "Việt" },
{ id: 4, name: "Doanh" },
]
myAwesomeArray.filter[element => element.name === "Doanh"]
//-------> Kết quả : 0:{id: 2, name: "Doanh"},
// 1:{id: 4, name: "Doanh"}Tham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_filter.asp
7. Phương thức forEach[]
Phương thức forEach[] này áp dụng một hàm cho từng phần tử của mảng.forEach[] này áp dụng một hàm cho từng phần tử của mảng.
const myAwesomeArray = [
{ id: 1, name: "Hải" },
{ id: 2, name: "Doanh" },
{ id: 3, name: "Việt" },
]
myAwesomeArray.forEach[element => console.log[element.name]]
//-------> Kết quả : Hải
// Doanh
// ViệtTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_foreach.asp
8. Phương thức findIndex[]
Phương thức findIndex[] này nhận một hàm làm tham số và sẽ áp dụng nó cho mảng.findIndex[] này nhận một hàm làm tham số và sẽ áp dụng nó cho mảng.
Nó trả về chỉ mục của
một phần tử được tìm thấy và thỏa mãn hàm kiểm tra được truyền dưới dạng đối số hoặc trả vềconst myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = [
{ id: 1, name: "Hải" },
{ id: 2, name: "Doanh" },
{ id: 3, name: "Việt" },
]
myAwesomeArray.findIndex[element => element.id === 3]
//-------> Kết quả : 2
myAwesomeArray.findIndex[element => element.id === 7]
//-------> Kết quả : -1Tham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_findindex.asp
9. Phương thức find[]
Phương thức find[] này nhận một hàm làm đối số và sẽ áp dụng nó cho mảng.find[] này nhận một hàm làm đối số và sẽ áp dụng nó cho mảng.
Nó trả về giá trị của
một phần tử được tìm thấy trong mảng và thỏa mãn hàm kiểm tra. Nếu không, nó trả vềconst myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_find.asp
10. Phương thức sort[]
Phương thức sort[] này nhận được một hàm như một số. Nó sắp xếp các phần tử của một mảng, và trả nó về.sort[] này nhận được một hàm như một số. Nó sắp xếp các phần tử của một mảng, và trả nó về.
> Lưu ý: Phương thức const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : true> Lưu ý: Khi phương thức const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120
Tham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_sort.asp
11. Phương thức concat[]
Phương thức concat[] này sẽ hợp nhất hai hoặc nhiều mảng / giá trị bằng cách ghép nó. Nó trả về một mảng mới.concat[] này sẽ hợp nhất hai hoặc nhiều mảng / giá trị bằng cách ghép nó. Nó trả về một mảng mới.
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_concat_array.asp
12. Phương thức fill[]
Phương thức fill[] này điền vào tất cả các phần tử của một mảng nhất định có cùng giá trị, từ chỉ mục bắt đầu [mặc định const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce[[total, value] => total * value]
// 1 * 2 * 3 * 4 * 5
//-------> Kết quả = 120
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_fill.asp
13. Phương thức includes[]
Phương thức includes[] này sẽ trả về const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : true
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_includes_array.asp
14. Phương thức reverse[]
Phương thức reverse[] này đảo ngược một mảng.reverse[] này đảo ngược một mảng.
> Lưu ý: Phương thức const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every[test => test === "d"]
//-------> Kết quả : false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every[test => test === "a"]
//-------> Kết quả : trueconst myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every[test => test === "d"]
//-------> Kết quả : false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every[test => test === "a"]
//-------> Kết quả : true
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueTham khảo thêm tại đây: //www.w3schools.com/jsref/jsref_reverse.asp
15. Phương thức flatMap[]
Phương thức flatMap[] áp dụng một hàm cho từng phần tử của mảng và sau đó làm phẳng kết quả thành một mảng. Nó là kết hợp của hai phương thức flat[] và map[].flatMap[] áp dụng một hàm cho từng phần tử của mảng và sau đó làm phẳng kết quả thành một mảng. Nó là kết hợp của hai phương thức flat[] và map[].
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some[test => test === "d"]
//-------> Kết quả : trueChúc mừng!!! Bạn đã tiến một bước xa với 15 Phương thức rất cần thiết để thao tác với Mảng trong Javascript.
Bạn đã sẵn sàng chinh phục Javascript trong năm 2022.
Nếu bạn thích bài viết 15 Array Method của JavaScript này thì hãy chia sẻ để bạn bè, những người yêu thích Javascript cùng nhau HỌC LẬP TRÌNH tốt hơn nhé.15 Array Method của JavaScript này thì hãy chia sẻ để bạn bè, những người yêu thích Javascript cùng nhau HỌC LẬP TRÌNH tốt hơn nhé.
Tự học Lập trình Java Online
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao [Since 2002]. Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email:
Fanpage: //facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php