Mảng là một kiểu dữ liệu quan trọng trong JavaScript, cho phép lưu trữ và quản lý một tập hợp các giá trị theo thứ tự. Bài viết này tôi sẽ hướng dẫn bạn từ cách tạo mảng, truy cập phần tử đến các phương thức thao tác trên mảng.
Cách tạo mảng cơ bản
JavaScript cho phép tạo mảng một cách đơn giản bằng dấu ngoặc vuông []. Mảng có thể chứa bất kỳ loại dữ liệu nào, bao gồm cả chuỗi, số, và các đối tượng
const numbers = [1, 2, 3, 4, 5];
const mixedArray = ['Text', 10, { name: 'Alice' }];
Tạo mảng với constructor Array
Ngoài dấu ngoặc vuông, ta có thể dùng constructor Array:
const fruits = new Array('Apple', 'Banana', 'Orange');
console.log(fruits); // ["Apple", "Banana", "Orange"]
2. Truy Cập và Thay Đổi Phần Tử Của Mảng
Để truy cập phần tử của mảng, sử dụng chỉ số của phần tử. Chỉ số bắt đầu từ 0.
const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits[0]); // Apple
Thay đổi phần tử của mảng
Bạn có thể gán lại giá trị cho một phần tử:
fruits[1] = 'Grapes';
console.log(fruits); // ["Apple", "Grapes", "Orange"]
3. Các Phương Thức Cơ Bản Của Mảng
JavaScript cung cấp nhiều phương thức mạnh mẽ để thao tác với mảng.
Push() – Thêm phần tử vào cuối mảng
Phương thức push thêm một hoặc nhiều phần tử vào cuối mảng.
const animals = ['Dog', 'Cat'];
animals.push('Elephant');
console.log(animals); // ["Dog", "Cat", "Elephant"]
pop() – Xóa phần tử cuối cùng của mảng
Phương thức pop sẽ xóa phần tử cuối cùng và trả về phần tử đó
const colors = ['Red', 'Green', 'Blue'];
const lastColor = colors.pop();
console.log(colors); // ["Red", "Green"]
console.log(lastColor); // Blue
shift() và unshift()
shift() : Xóa phần tử đầu tiên của mảng.
unshift() : Thêm phần tử vào đầu mảng.
const cities = ['Hanoi', 'Saigon'];
cities.unshift('Danang');
console.log(cities); // ["Danang", "Hanoi", "Saigon"]
cities.shift();
console.log(cities); // ["Hanoi", "Saigon"]
4. Lặp Qua Các Phần Tử Trong Mảng
Sử dụng các vòng lặp như for, forEach, hoặc map để lặp qua các phần tử của mảng.
Sử dụng for
const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Sử dụng forEach
forEach thực hiện một hàm callback với từng phần tử.
numbers.forEach(num => console.log(num));
Sử dụng map
map sẽ trả về một mảng mới có độ dài (length) mảng mà nó map qua. Và qua mỗi lần lặp nó return về cái gì thì các phần tử tương ứng của mảng mới là cái đó.
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6]
5. Các Phương Thức Tìm Kiếm và Lọc
find() – Tìm phần tử đầu tiên thỏa mãn điều kiện
find trả về phần tử đầu tiên thỏa mãn điều kiện trong callback.
const people = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
const person = people.find(p => p.age === 30);
console.log(person); // { name: "Bob", age: 30 }
filter() – Lọc các phần tử thỏa mãn điều kiện
filter trả về một mảng mới với các phần tử thỏa mãn điều kiện
const adults = people.filter(p => p.age >= 18);
console.log(adults); // [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }]
6. Phân Rã và Sao Chép Mảng với Spread Syntax
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]
Gộp mảng
Dùng ... để gộp nhiều mảng.
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]
7. Sort và Reverse Mảng
Sắp xếp mảng với sort()
sort() sắp xếp mảng theo thứ tự tăng dần hoặc theo hàm so sánh tùy chỉnh
const scores = [10, 5, 8, 3];
scores.sort((a, b) => a - b);
console.log(scores); // [3, 5, 8, 10]
Đảo ngược mảng với reverse()
reverse() đảo ngược thứ tự các phần tử của mảng
scores.reverse();
console.log(scores); // [10, 8, 5, 3]
8. Tổng Kết
Mảng trong JavaScript mang lại sự linh hoạt và đa dạng cho việc xử lý dữ liệu. Các phương thức như push, pop, map, filter, sort,... giúp chúng ta thao tác với mảng dễ dàng hơn và hiệu quả hơn. Hãy thực hành để nắm vững các kỹ thuật này, vì đây là nền tảng quan trọng trong lập trình JavaScript.
Ở trên là 1 số chia sẻ về kiến thức JavaScript của mình, vì đây đa phần là kiến thức mình tự học nên có thể bài viết này có thể có nhiều chỗ chưa chính xác và thiếu sót, mong mọi người góp ý ở dưới phần bình luận để bài viết thêm hoàn chỉnh và xây dựng một cộng đồng nơi mọi người có thể chia sẻ kinh nghiệm lập trình cho nhau 😘.
By
By
By
