TopDev

Các phương thức xử lý mảng trong JavaScript

minhu 📖 5 phút đọc

JavaScript cung cấp nhiều phương thức để xử lý mảng, cho phép bạn thao tác với các phần tử của mảng một cách hiệu quả. Dưới đây là danh sách các phương thức xử lý mảng phổ biến cùng với ví dụ:

Thêm và Xóa Phần Tử#

  • push(...elements): Thêm một hoặc nhiều phần tử vào cuối mảng và trả về độ dài mới của mảng.

let fruits = ['Apple', 'Banana']; fruits.push('Cherry', 'Date'); console.log(fruits); // ['Apple', 'Banana', 'Cherry', 'Date']

  • pop(): Xóa phần tử cuối cùng của mảng và trả về phần tử đó.

let lastFruit = fruits.pop(); console.log(lastFruit); // 'Date' console.log(fruits); // ['Apple', 'Banana', 'Cherry']

  • shift(): Xóa phần tử đầu tiên của mảng và trả về phần tử đó.

let firstFruit = fruits.shift(); console.log(firstFruit); // 'Apple' console.log(fruits); // ['Banana', 'Cherry']

  • unshift(...elements): Thêm một hoặc nhiều phần tử vào đầu mảng và trả về độ dài mới của mảng.

fruits.unshift('Apricot'); console.log(fruits); // ['Apricot', 'Banana', 'Cherry']

  • splice(start, deleteCount, ...items): Thay đổi nội dung của mảng bằng cách thêm hoặc xóa các phần tử tại chỉ số cụ thể.

fruits.splice(1, 1, 'Blueberry', 'Coconut'); // Xóa 1 phần tử tại chỉ số 1 và thêm 'Blueberry', 'Coconut' console.log(fruits); // ['Apricot', 'Blueberry', 'Coconut', 'Cherry']

  • slice(start, end): Trả về một mảng mới chứa các phần tử từ chỉ số bắt đầu đến chỉ số kết thúc (không bao gồm chỉ số kết thúc).

let citrus = fruits.slice(1, 3); console.log(citrus); // ['Blueberry', 'Coconut']

Tìm Kiếm và Xử Lý Phần Tử#

  • indexOf(element, fromIndex): Trả về chỉ số đầu tiên của phần tử trong mảng, hoặc -1 nếu không tìm thấy.

let index = fruits.indexOf('Cherry'); console.log(index); // 3

  • lastIndexOf(element, fromIndex): Trả về chỉ số cuối cùng của phần tử trong mảng, hoặc -1 nếu không tìm thấy.

let lastIndex = fruits.lastIndexOf('Cherry'); console.log(lastIndex); // 3

  • find(callback): Trả về phần tử đầu tiên trong mảng thỏa mãn điều kiện do hàm xác định.

let foundFruit = fruits.find(fruit => fruit.startsWith('C')); console.log(foundFruit); // 'Coconut'

  • findIndex(callback): Trả về chỉ số của phần tử đầu tiên trong mảng thỏa mãn điều kiện do hàm xác định.

let foundIndex = fruits.findIndex(fruit => fruit.startsWith('C')); console.log(foundIndex); // 2

  • filter(callback): Tạo một mảng mới với tất cả các phần tử thỏa mãn điều kiện do hàm xác định.

let longNamedFruits = fruits.filter(fruit => fruit.length > 6); console.log(longNamedFruits); // ['Blueberry', 'Coconut']

  • map(callback): Tạo một mảng mới với các phần tử là kết quả của việc gọi hàm trên mỗi phần tử của mảng.

let upperFruits = fruits.map(fruit => fruit.toUpperCase()); console.log(upperFruits); // ['APRICOT', 'BLUEBERRY', 'COCONUT', 'CHERRY']

  • forEach(callback): Thực thi một hàm cho mỗi phần tử của mảng.

fruits.forEach(fruit => console.log(fruit)); // 'Apricot' // 'Blueberry' // 'Coconut' // 'Cherry'

  • some(callback): Kiểm tra xem ít nhất một phần tử trong mảng thỏa mãn điều kiện do hàm xác định.

let hasLongName = fruits.some(fruit => fruit.length > 6); console.log(hasLongName); // true

  • every(callback): Kiểm tra xem tất cả các phần tử trong mảng có thỏa mãn điều kiện do hàm xác định không.

let allShortNames = fruits.every(fruit => fruit.length < 10); console.log(allShortNames); // true

  • reduce(callback, initialValue): Thực hiện một phép toán trên tất cả các phần tử của mảng, kết hợp chúng thành một giá trị duy nhất.

let totalLength = fruits.reduce((total, fruit) => total + fruit.length, 0); console.log(totalLength); // 22

  • reduceRight(callback, initialValue): Tương tự như reduce(), nhưng duyệt mảng từ phải qua trái.

let reversedConcat = fruits.reduceRight((total, fruit) => total + fruit, ''); console.log(reversedConcat); // 'CherryCoconutBlueberryApricot'

  • sort(compareFunction): Sắp xếp các phần tử của mảng theo thứ tự tăng dần. compareFunction là một hàm tuỳ chọn để xác định cách sắp xếp.

fruits.sort(); console.log(fruits); // ['Apricot', 'Blueberry', 'Cherry', 'Coconut']

  • reverse(): Đảo ngược các phần tử của mảng.

fruits.reverse(); console.log(fruits); // ['Coconut', 'Cherry', 'Blueberry', 'Apricot']

  • join(separator): Kết hợp tất cả các phần tử của mảng thành một chuỗi, phân cách bởi dấu phân cách (separator).

let fruitString = fruits.join(', '); console.log(fruitString); // 'Coconut, Cherry, Blueberry, Apricot'

  • copyWithin(target, start, end): Sao chép một phần của mảng vào chính nó mà không thay đổi kích thước của mảng.

fruits.copyWithin(0, 2, 4); console.log(fruits); // ['Blueberry', 'Apricot', 'Blueberry', 'Apricot']

  • fill(value, start, end): Thay thế tất cả các phần tử từ chỉ số bắt đầu đến chỉ số kết thúc (không bao gồm chỉ số kết thúc) bằng một giá trị cụ thể.

fruits.fill('Mango', 1, 3); console.log(fruits); // ['Blueberry', 'Mango', 'Mango', 'Apricot']

Các Tính Năng Khác#

  • length: Trả về số lượng phần tử trong mảng.

let numFruits = fruits.length; console.log(numFruits); // 4

  • Array.isArray(value): Kiểm tra xem một giá trị có phải là mảng không.

let isArray = Array.isArray(fruits); console.log(isArray); // true

  • Array.from(arrayLike, mapFunction): Tạo một mảng mới từ một đối tượng có thể lặp (iterable) hoặc từ một đối tượng giống mảng (array-like object).

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

  • Array.of(element1, element2, ...): Tạo một mảng mới với các phần tử được cung cấp.

let numbers = Array.of(1, 2, 3, 4); console.log(numbers); // [1, 2, 3, 4]

Những phương thức này giúp bạn làm việc với mảng một cách linh hoạt và hiệu quả trong JavaScript, cho phép bạn thêm, xóa, tìm kiếm, xử lý và thao tác dữ liệu một cách dễ dàng.

Bài liên quan trong # JavaScript

✓ Đã sao chép link