+4

30 hàm xử lý mảng quan trọng trong javascript

Trong Javascript, có rất nhiều hàm được cung cấp để xử lý mảng dữ liệu. Trong bài viết này, chúng ta sẽ giới thiệu một số hàm phổ biến trong Javascript và cung cấp một số ví dụ để bạn có thể hiểu rõ hơn về chúng.

1. Hàm at(): Hàm at() cho phép lấy ra giá trị tại một vị trí trong mảng.

let array = ['a', 'b', 'c', 'd'];
console.log(array.at(2)); // 'c'

2. Hàm concat(): Hàm concat() cho phép nối một hoặc nhiều mảng với nhau để tạo ra một mảng mới.

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [7, 8, 9];
let newArray = array1.concat(array2, array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. Hàm copyWithin(): Hàm copyWithin() cho phép sao chép một phần của mảng và chèn vào một vị trí khác trong mảng.

let array = [1, 2, 3, 4, 5];
array.copyWithin(1, 3, 4);
console.log(array); // [1, 4, 3, 4, 5]

4. Hàm entries(): Hàm entries() cho phép tạo ra một mảng chứa tất cả các cặp key/value của mảng.

let array = ['a', 'b', 'c'];
let iterator = array.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']

5. Hàm every(): Hàm every() cho phép kiểm tra tất cả các phần tử trong mảng có thỏa mãn một điều kiện hay không.

let array = [1, 2, 3, 4, 5];
let result = array.every(element => element < 10);
console.log(result); // true

6. Hàm fill(): Hàm fill() cho phép thay đổi giá trị của tất cả các phần tử trong mảng thành giá trị mới.

let array = [1, 2, 3, 4, 5];
array.fill(0);
console.log(array); // [0, 0, 0, 0, 0]

7. Hàm filter(): Hàm filter() cho phép lọc các phần tử của mảng theo một điều kiện nào đó.

let array = [1, 2, 3, 4, 5];
let newArray = array.filter(element => element > 2);
console.log(newArray); // [3, 4, 5]

8. Hàm find(): Hàm find() cho phép tìm kiếm và trả về phần tử đầu tiên trong mảng thỏa mãn một điều kiện nào đó.

let array = [1, 2, 3, 4, 5];
let result = array.find(element => element > 2);
console.log(result); // 3

9. Hàm findIndex(): Hàm findIndex() cho phép tìm kiếm và trả về index của phần tử đầu tiên trong mảng thỏa mãn một điều kiện

let array = [1, 2, 3, 4, 5];
let result = array.findIndex(element => element > 2);
console.log(result); // 2

10. Hàm findLast(): Hàm findLast() tương tự như hàm find() nhưng tìm kiếm phần tử cuối cùng trong mảng thỏa mãn một điều kiện nào đó.

let array = [1, 2, 3, 4, 5];
let result = array.findLast(element => element > 2);
console.log(result); // 5

11. Hàm findLastIndex(): Hàm findLastIndex() tương tự như hàm findIndex() nhưng tìm kiếm index của phần tử cuối cùng trong mảng thỏa mãn một điều kiện nào đó.

let array = [1, 2, 3, 4, 5];
let result = array.findLastIndex(element => element > 2);
console.log(result); // 4

12. Hàm flat(): Hàm flat() dùng để làm phẳng một mảng lồng nhau.

let array = [1, 2, [3, 4], 5, [6, [7, 8]]];
let newArray = array.flat();
console.log(newArray); // [1, 2, 3, 4, 5, 6, [7, 8]]

13. Hàm flatMap(): Hàm flatMap() kết hợp giữa hàm map() và hàm flat(). Nó thực hiện hàm map() lên từng phần tử trong mảng và sau đó làm phẳng mảng đó.

let array = [1, 2, 3];
let newArray = array.flatMap(element => [element * 2]);
console.log(newArray); // [2, 4, 6]

14. Hàm forEach(): Hàm forEach() dùng để duyệt qua từng phần tử trong mảng và thực hiện một hành động nào đó trên từng phần tử đó.

let array = [1, 2, 3];
array.forEach(element => {
  console.log(element);
});
// Output:
// 1
// 2
// 3

15. Hàm from(): Hàm from() dùng để chuyển đổi một đối tượng có thể lặp lại sang một mảng. Ví dụ: chuyển đổi một chuỗi thành một mảng.

let string = 'hello';
let newArray = Array.from(string);
console.log(newArray); // ['h', 'e', 'l', 'l', 'o']

16. Hàm group(): Hàm group() dùng để nhóm các phần tử trong mảng theo một điều kiện nào đó và trả về một mảng chứa các mảng con.

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let newArray = array.group(element => element % 2);
console.log(newArray); // [[1, 3, 5, 7, 9], [2, 4, 6, 8]]

17. Hàm groupToMap(): Hàm groupToMap() cũng tương tự như hàm group() nhưng trả về một đối tượng Map chứa các cặp key-value.

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let newMap = array.groupToMap(element => element % 2);
console.log(newMap); // Map(2) {0 => [2, 4, 6, 8], 1 => [1, 3, 5, 7, 9]}

18. Hàm includes(): Hàm includes() kiểm tra xem một giá trị có tồn tại trong mảng hay không.

let array = [1, 2, 3];
console.log(array.includes(2)); // true
console.log(array.includes(4)); // false

19. Hàm indexOf(): Hàm indexOf() trả về index của phần tử đầu tiên trong mảng có giá trị bằng với giá trị được truyền vào. Nếu không tìm thấy, hàm trả về -1.

let array = [1, 2, 3];
console.log(array.indexOf(2)); // 1
console.log(array.indexOf(4)); // -1

20. Hàm reduce(): Hàm reduce() dùng để tính toán một giá trị dựa trên các phần tử trong mảng. Hàm này nhận vào hai tham số: một hàm callback và một giá trị khởi tạo.

let array = [1, 2, 3];
let sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 6

21. Hàm reverse(): Hàm reverse() dùng để đảo ngược thứ tự các phần tử trong mảng.

let array = [1, 2, 3];
array.reverse();
console.log(array); // [3, 2, 1]

22. Hàm shift(): Hàm shift() dùng để loại bỏ phần tử đầu tiên của mảng và trả về giá trị của phần tử đó.

let array = [1, 2, 3];
let firstElement = array.shift();
console.log(firstElement); // 1
console.log(array); // [2, 3]

23. Hàm slice(): Hàm slice() dùng để tạo ra một mảng mới từ một mảng đã cho, bằng cách chọn một phần tử bắt đầu và một phần tử kết thúc.

let array = [1, 2, 3, 4, 5];
let newArray = array.slice(1, 4);
console.log(newArray); // [2, 3, 4]

24. Hàm some(): Hàm some() kiểm tra xem có ít nhất một phần tử trong mảng thỏa mãn một điều kiện nào đó hay không.

let array = [1, 2, 3];
console.log(array.some(element => element % 2 === 0)); // true
console.log(array.some(element => element > 5)); // false

25. Hàm sort(): Hàm sort() dùng để sắp xếp các phần tử trong mảng theo một thứ tự nào đó. Nếu không truyền vào một hàm so sánh, thì hàm này sẽ sử dụng phép toán < để so sánh các phần tử.

let array = [5, 1, 4, 2, 3];
array.sort();
console.log(array); // [1, 2, 3, 4, 5]

26. Hàm splice(): Hàm splice() dùng để thêm hoặc loại bỏ phần tử khỏi mảng. Hàm này nhận vào ba tham số: vị trí bắt đầu, số lượng phần tử cần loại bỏ, và các phần tử cần thêm vào (tùy chọn).

let array = [1, 2, 3, 4, 5];
array.splice(2, 2, 6, 7);
console.log(array); // [1, 2, 6, 7, 5]

27. Hàm unshift(): Hàm unshift() dùng để thêm một hoặc nhiều phần tử vào đầu mảng.

let array = [1, 2, 3];
array.unshift(0);
console.log(array); // [0, 1, 2, 3]

28. Hàm values(): Hàm values() dùng để trả về một đối tượng Iterator chứa các giá trị của các phần tử trong mảng.

let array = [1, 2, 3];
let iterator = array.values();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

29. Hàm group(): Hàm group() dùng để nhóm các phần tử trong mảng thành các nhóm con dựa trên một hàm callback.

let array = [1, 2, 3, 4, 5];
let groups = array.group(element => element % 2 === 0);
console.log(groups); // [[1, 3, 5], [2, 4]]

30. Hàm groupToMap(): Hàm groupToMap() cũng giống như hàm group(), nhưng trả về một đối tượng Map thay vì một mảng các mảng con.

let array = [1, 2, 3, 4, 5];
let map = array.groupToMap(element => element % 2 === 0);
console.log(map.get(true)); // [2, 4]
console.log(map.get(false)); // [1, 3, 5]

Trong bài viết này, chúng ta đã giới thiệu về các hàm thường được sử dụng trong lập trình với JavaScript như: at(), concat(), copyWithin(), entries(), every(), fill(), filter(), find(), findIndex(), findLast(), findLastIndex(), flat(), flatMap(), forEach(), from(), includes(), indexOf(), reduce(), reverse(), shift(), slice(), some(), sort(), splice(), unshift(), values(), group(), và groupToMap().

Các hàm mảng trong JavaScript cung cấp nhiều tính năng hữu ích để xử lý mảng dữ liệu trong các ứng dụng web. Chúng ta có thể sử dụng chúng để thao tác mảng, tìm kiếm, sắp xếp và nhóm các phần tử dữ liệu.

Mỗi hàm đều có cách sử dụng và đặc điểm riêng, và việc hiểu rõ các hàm này sẽ giúp bạn có thể code JavaScript hiệu quả hơn. Việc sử dụng các hàm mảng cũng giúp cho code của bạn trở nên dễ đọc và dễ bảo trì hơn.

Tuy nhiên, để sử dụng các hàm này hiệu quả, bạn cần hiểu rõ cách mỗi hàm hoạt động, và chọn đúng hàm phù hợp với từng tình huống trong ứng dụng của bạn.

Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về các hàm mảng trong JavaScript và áp dụng chúng hiệu quả trong các dự án của mình !!!


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí