Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả

Trong lập trình JavaScript, việc quản lý và xử lý nhiều giá trị cùng lúc là một yêu cầu phổ biến. Hiểu rõ về cấu trúc dữ liệu Array và cách thức hoạt động của nó sẽ giúp bạn tối ưu hóa hiệu suất và nâng cao khả năng giải quyết vấn đề. Bài viết này sẽ cung cấp một cái nhìn toàn diện về Array trong JavaScript, từ định nghĩa cơ bản đến các kỹ thuật sử dụng nâng cao, giúp bạn nắm vững kiến thức nền tảng và áp dụng hiệu quả trong các dự án thực tế.

Chúng ta sẽ cùng nhau khám phá định nghĩa, vai trò quan trọng của Array, cách khai báo và tạo Array theo nhiều phương pháp khác nhau. Tiếp theo, bài viết sẽ đi sâu vào các thao tác cơ bản như truy cập, sửa đổi, thêm, xóa phần tử và cách lặp qua mảng. Đặc biệt, bạn sẽ được làm quen với những phương thức làm việc với Array hữu ích, giúp đơn giản hóa các tác vụ phức tạp. Cuối cùng, chúng ta sẽ phân biệt Array và Object, cũng như xem xét các kỹ thuật nâng cao và giải đáp những câu hỏi thường gặp.

Array JavaScript là gì và vai trò của nó?

Array trong JavaScript là một cấu trúc dữ liệu kiểu tham chiếu, cho phép bạn lưu trữ một tập hợp các giá trị dưới một tên biến duy nhất. Về bản chất, Array là một đối tượng đặc biệt trong JavaScript, có khả năng chứa nhiều kiểu dữ liệu khác nhau, từ số, chuỗi, boolean cho đến các đối tượng phức tạp hoặc thậm chí là các Array khác. Vai trò và mục đích sử dụng của Array là vô cùng quan trọng trong lập trình, bởi nó cung cấp một cách hiệu quả để tổ chức, quản lý và thao tác với một lượng lớn dữ liệu, từ đó xây dựng nên các ứng dụng động và mạnh mẽ.

Cách khai báo và tạo Array trong JavaScript

Việc tạo Array trong JavaScript có thể được thực hiện thông qua nhiều cú pháp khác nhau, mang lại sự linh hoạt cho người lập trình tùy thuộc vào ngữ cảnh sử dụng. Hai phương pháp phổ biến nhất là sử dụng cú pháp Array Literal và Constructor.

Tạo Array bằng cú pháp Array Literal ()

Cú pháp Array Literal là cách khai báo và khởi tạo mảng trực tiếp và đơn giản nhất trong JavaScript. Bạn chỉ cần sử dụng cặp dấu ngoặc vuông , và đặt các phần tử của mảng bên trong, phân tách bằng dấu phẩy.

Ví dụ:

let myArray = 1, "hello", true, null;

Cách này thường được ưa chuộng vì tính ngắn gọn và dễ đọc.

Tạo Array bằng Constructor (new Array())

Bên cạnh cú pháp Literal, bạn cũng có thể tạo Array bằng cách sử dụng từ khóa new kết hợp với hàm tạo Array().

Ví dụ:

let anotherArray = new Array(1, "world", false);

Khi sử dụng new Array(), bạn cần lưu ý rằng nếu chỉ truyền một tham số dạng số, JavaScript sẽ hiểu đó là độ dài ban đầu của mảng, và các phần tử sẽ là empty slots. Tuy nhiên, nếu truyền nhiều tham số hoặc các tham số không phải là số, chúng sẽ trở thành các phần tử của mảng.

Ví dụ:

let arr1 = new Array(5); // Tạo một mảng có độ dài 5, các phần tử chưa được định nghĩa
let arr2 = new Array("apple", "banana", "cherry"); // Tạo một mảng với 3 phần tử

Do sự khác biệt này, cú pháp Array Literal thường được ưu tiên sử dụng hơn để tránh nhầm lẫn.

Khai báo mảng rỗng và mảng có giá trị ban đầu

Bạn có thể khai báo một mảng rỗng để sau đó thêm các phần tử vào, hoặc khai báo mảng ngay với các giá trị ban đầu.

Khai báo mảng rỗng:

let emptyArray = ;

Khai báo mảng có giá trị ban đầu:

let numbers = 10, 20, 30, 40;
let fruits = "apple", "banana", "orange";

Việc lựa chọn cách khai báo phụ thuộc vào nhu cầu cụ thể của bạn tại thời điểm lập trình.

Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả
Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả

Các thao tác cơ bản với Array trong JavaScript

Sau khi đã tạo Array, việc thực hiện các thao tác để truy cập, thay đổi hoặc quản lý các phần tử bên trong mảng là vô cùng cần thiết. JavaScript cung cấp nhiều cách thức để thực hiện các thao tác cơ bản này một cách hiệu quả.

Truy cập phần tử của Array

Mỗi phần tử trong Array đều có một chỉ số (index) riêng, bắt đầu từ 0 cho phần tử đầu tiên. Bạn có thể truy cập giá trị của một phần tử bằng cách sử dụng tên Array kèm theo chỉ số của phần tử đó trong cặp dấu ngoặc vuông.

Ví dụ:

let colors = "red", "green", "blue";
console.log(colors0); // Output: "red"
console.log(colors2); // Output: "blue"

Nếu bạn cố gắng truy cập một chỉ số nằm ngoài phạm vi của mảng, kết quả trả về sẽ là undefined.

Sửa đổi phần tử của Array

Tương tự như việc truy cập, bạn có thể dễ dàng sửa đổi giá trị của một phần tử trong mảng bằng cách gán giá trị mới cho nó thông qua chỉ số.

Ví dụ:

let grades = 8, 9, 7;
grades1 = 10; // Thay đổi phần tử ở chỉ số 1 từ 9 thành 10
console.log(grades); // Output: 8, 10, 7

Thêm phần tử vào Array

JavaScript cung cấp các phương thức tiện lợi để thêm phần tử vào Array.

Sử dụng push() để thêm 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 Array và trả về độ dài mới của Array.

Ví dụ:

let animals = "dog", "cat";
animals.push("bird");
console.log(animals); // Output: "dog", "cat", "bird"
animals.push("fish", "hamster");
console.log(animals); // Output: "dog", "cat", "bird", "fish", "hamster"

Sử dụng unshift() để thêm vào đầu mảng

Phương thức unshift() thêm một hoặc nhiều phần tử vào đầu Array và trả về độ dài mới của Array.

Ví dụ:

let fruits = "apple", "banana";
fruits.unshift("orange");
console.log(fruits); // Output: "orange", "apple", "banana"
fruits.unshift("grape", "mango");
console.log(fruits); // Output: "grape", "mango", "orange", "apple", "banana"

Loại bỏ phần tử khỏi Array

Các phương thức pop() và shift() giúp bạn loại bỏ phần tử khỏi Array một cách dễ dàng.

Sử dụng pop() để xóa phần tử cuối cùng

Phương thức pop() loại bỏ phần tử cuối cùng khỏi Array và trả về giá trị của phần tử đã bị loại bỏ. Phương thức này làm thay đổi độ dài của Array.

Ví dụ:

let colors = "red", "green", "blue";
let lastColor = colors.pop();
console.log(lastColor); // Output: "blue"
console.log(colors); // Output: "red", "green"

Sử dụng shift() để xóa phần tử đầu tiên

Phương thức shift() loại bỏ phần tử đầu tiên khỏi Array và trả về giá trị của phần tử đã bị loại bỏ. Phương thức này cũng làm thay đổi độ dài của Array.

Ví dụ:

let animals = "dog", "cat", "bird";
let firstAnimal = animals.shift();
console.log(firstAnimal); // Output: "dog"
console.log(animals); // Output: "cat", "bird"

Lấy độ dài của Array (.length)

Thuộc tính .length trả về số lượng phần tử hiện có trong Array. Đây là một thuộc tính rất hữu ích để kiểm tra kích thước của mảng hoặc để sử dụng trong các vòng lặp.

Ví dụ:

let numbers = 1, 2, 3, 4, 5;
console.log(numbers.length); // Output: 5

Bạn cũng có thể gán giá trị cho thuộc tính .length để thay đổi kích thước của mảng. Nếu gán giá trị nhỏ hơn độ dài hiện tại, các phần tử thừa sẽ bị cắt bỏ. Nếu gán giá trị lớn hơn, các phần tử mới sẽ được thêm vào với giá trị empty slots.

Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả
Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả

Lặp qua các phần tử của Array

Việc lặp qua từng phần tử của Array là một thao tác thường xuyên gặp trong lập trình. JavaScript cung cấp nhiều cách để thực hiện điều này.

Sử dụng vòng lặp for

Vòng lặp for truyền thống là một cách mạnh mẽ để duyệt qua mảng, cho phép bạn kiểm soát hoàn toàn chỉ số của từng phần tử.

Ví dụ:

let colors = "red", "green", "blue";
for (let i = 0; i < colors.length; i++) { console.log(`Element at index ${i}: ${colorsi}`);
}

Sử dụng forEach()

Phương thức forEach() là một cách hiện đại và dễ đọc hơn để lặp qua các phần tử của mảng. Nó thực thi một hàm callback cho mỗi phần tử trong mảng.

Ví dụ:

let fruits = "apple", "banana", "cherry";
fruits.forEach(function(fruit, index) { console.log(`Fruit ${index}: ${fruit}`);
});

Phương thức forEach() là lựa chọn tuyệt vời khi bạn chỉ cần duyệt qua các phần tử mà không cần thao tác với chỉ số hoặc thay đổi cấu trúc mảng trong quá trình lặp.

Các phương thức làm việc với Array JavaScript hữu ích

Ngoài các thao tác cơ bản, JavaScript còn cung cấp một bộ sưu tập phong phú các phương thức mạnh mẽ giúp bạn xử lý Array một cách linh hoạt và hiệu quả hơn, giải quyết các bài toán phức tạp một cách dễ dàng.

Phương thức concat()

Phương thức concat() được sử dụng để kết hợp hai hoặc nhiều mảng với nhau, hoặc kết hợp mảng với các giá trị khác, tạo ra một mảng mới mà không làm thay đổi các mảng gốc.

Ví dụ:

let arr1 = 1, 2;
let arr2 = 3, 4;
let combinedArray = arr1.concat(arr2, 5, "six");
console.log(combinedArray); // Output: 1, 2, 3, 4, 5, "six"
console.log(arr1); // Output: 1, 2 (mảng gốc không đổi)

Phương thức splice()

Phương thức splice() có khả năng mạnh mẽ để thay đổi nội dung của một mảng bằng cách xóa, thêm hoặc thay thế các phần tử. Nó trực tiếp thay đổi mảng gốc và trả về một mảng chứa các phần tử đã bị xóa.

Cú pháp cơ bản: array.splice(startIndex, deleteCount, item1, item2, ...)
– startIndex: Chỉ số bắt đầu thực hiện thao tác.
– deleteCount: Số lượng phần tử cần xóa (nếu là 0 thì chỉ thêm phần tử).
– item1, item2, ...: Các phần tử cần thêm vào mảng.

Ví dụ xóa phần tử:

let colors = "red", "green", "blue", "yellow";
let removedColors = colors.splice(1, 2); // Xóa 2 phần tử bắt đầu từ index 1
console.log(removedColors); // Output: "green", "blue"
console.log(colors); // Output: "red", "yellow"

Ví dụ thêm phần tử:

let numbers = 1, 5;
numbers.splice(1, 0, 2, 3, 4); // Thêm 2, 3, 4 vào index 1 mà không xóa phần tử nào
console.log(numbers); // Output: 1, 2, 3, 4, 5

Ví dụ thay thế phần tử:

let fruits = "apple", "banana", "cherry";
fruits.splice(1, 1, "orange"); // Xóa 1 phần tử tại index 1 và thêm "orange"
console.log(fruits); // Output: "apple", "orange", "cherry"

Phương thức slice()

Phương thức slice() trích xuất một phần của mảng và trả về một mảng mới chứa các phần tử được chọn. Quan trọng là, slice() không làm thay đổi mảng gốc.

Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả
Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả

Cú pháp cơ bản: array.slice(startIndex, endIndex)
– startIndex: Chỉ số bắt đầu trích xuất (bao gồm).
– endIndex: Chỉ số kết thúc trích xuất (không bao gồm).

Ví dụ:

let letters = "a", "b", "c", "d", "e";
let subArray = letters.slice(1, 4); // Lấy các phần tử từ index 1 đến trước index 4
console.log(subArray); // Output: "b", "c", "d"
console.log(letters); // Output: "a", "b", "c", "d", "e" (mảng gốc không đổi) let fromStart = letters.slice(2); // Lấy từ index 2 đến cuối
console.log(fromStart); // Output: "c", "d", "e" let toEnd = letters.slice(0, 3); // Lấy từ đầu đến trước index 3
console.log(toEnd); // Output: "a", "b", "c"

Phương thức join()

Phương thức join() nối tất cả các phần tử của một mảng thành một chuỗi. Bạn có thể chỉ định một ký tự hoặc chuỗi làm dấu phân cách giữa các phần tử. Nếu không chỉ định, dấu phẩy sẽ được sử dụng mặc định.

Ví dụ:

let words = "Hello", "World", "JavaScript";
let sentence = words.join(" "); // Nối bằng khoảng trắng
console.log(sentence); // Output: "Hello World JavaScript" let csvData = 1, 2, 3, 4;
let csvString = csvData.join(","); // Nối bằng dấu phẩy
console.log(csvString); // Output: "1,2,3,4" let noSeparator = words.join(""); // Nối liền nhau
console.log(noSeparator); // Output: "HelloWorldJavaScript"

Phương thức toString()

Phương thức toString() chuyển đổi mảng thành một chuỗi các giá trị, các giá trị này được phân tách mặc định bằng dấu phẩy. Về cơ bản, nó giống như join() nhưng luôn sử dụng dấu phẩy làm phân cách.

Ví dụ:

let numbers = 10, 20, 30;
let numberString = numbers.toString();
console.log(numberString); // Output: "10,20,30"

Phương thức find()

Phương thức find() trả về giá trị của phần tử đầu tiên trong mảng thỏa mãn một điều kiện kiểm tra được cung cấp dưới dạng một hàm callback. Nếu không có phần tử nào thỏa mãn, nó trả về undefined.

Ví dụ:

let ages = 22, 18, 35, 16, 40;
let firstAdult = ages.find(function(age) { return age >= 18;
});
console.log(firstAdult); // Output: 22 let products = { id: 1, name: "Laptop" }, { id: 2, name: "Mouse" }, { id: 3, name: "Keyboard" }
;
let productById = products.find(item => item.id === 2);
console.log(productById); // Output: { id: 2, name: "Mouse" }

Phương thức sort()

Phương thức sort() sắp xếp các phần tử của mảng theo thứ tự nhất định. Mặc định, nó sắp xếp các phần tử dưới dạng chuỗi theo giá trị Unicode. Đối với số hoặc các kiểu dữ liệu khác, bạn cần cung cấp một hàm so sánh tùy chỉnh.

Ví dụ sắp xếp chuỗi (mặc định):

let names = "Charlie", "Alice", "Bob";
names.sort();
console.log(names); // Output: "Alice", "Bob", "Charlie"

Ví dụ sắp xếp số tăng dần:

let numbers = 5, 1, 10, 2, 8;
numbers.sort(function(a, b) { return a - b; // Nếu a - b > 0, b đứng trước a. Nếu a - b < 0, a đứng trước b.
});
console.log(numbers); // Output: 1, 2, 5, 8, 10

Phương thức reverse()

Phương thức reverse() đảo ngược thứ tự của các phần tử trong một mảng. Phương thức này làm thay đổi mảng gốc.

Ví dụ:

let letters = "a", "b", "c", "d";
letters.reverse();
console.log(letters); // Output: "d", "c", "b", "a"

Phân biệt Array và Object trong JavaScript

Trong JavaScript, cả Array và Object đều là các cấu trúc dữ liệu dùng để lưu trữ nhiều giá trị. Tuy nhiên, chúng có những khác biệt cốt lõi về cách lưu trữ, truy cập và mục đích sử dụng.

Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả
Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả

Sự khác biệt cốt lõi giữa Array và Object nằm ở cách chúng tổ chức và truy cập dữ liệu. Array là một tập hợp các giá trị được sắp xếp theo thứ tự và truy cập thông qua các chỉ số số nguyên bắt đầu từ 0. Ngược lại, Object là một tập hợp các cặp khóa-giá trị (key-value pairs), trong đó mỗi giá trị được truy cập thông qua một khóa (key) duy nhất dưới dạng chuỗi hoặc ký hiệu (Symbol).

Khi nào nên sử dụng Array, khi nào nên sử dụng Object:
– Sử dụng Array: Nên sử dụng Array khi bạn cần lưu trữ một danh sách các mục có cùng loại hoặc có thứ tự quan trọng, và bạn muốn truy cập chúng bằng chỉ số. Ví dụ: danh sách người dùng, danh sách sản phẩm, danh sách điểm số, v.v.
– Sử dụng Object: Nên sử dụng Object khi bạn cần biểu diễn một thực thể với các thuộc tính có tên cụ thể và ý nghĩa rõ ràng, hoặc khi bạn cần một cấu trúc dữ liệu có thể mở rộng với các khóa tùy chỉnh. Ví dụ: thông tin chi tiết của một người (tên, tuổi, địa chỉ), cấu hình của một thiết bị, dữ liệu JSON, v.v.

Mặc dù Object có thể được sử dụng để lưu trữ các mục theo chỉ số giống như Array, nhưng nó không có các phương thức tích hợp sẵn dành riêng cho mảng và không duy trì thứ tự mặc định, do đó Array là lựa chọn tốt hơn cho các tập hợp dữ liệu có thứ tự.

Các phương pháp nâng cao và câu hỏi thường gặp về Array JavaScript

Để khai thác tối đa sức mạnh của Array trong JavaScript, việc nắm vững các phương pháp nâng cao và giải đáp những thắc mắc phổ biến là điều cần thiết. Điều này giúp bạn xử lý các tình huống phức tạp và viết code hiệu quả hơn.

Kiểm tra một biến có phải là Array không (Array.isArray())

Để xác định chính xác liệu một biến có phải là một Array hay không, phương thức tĩnh Array.isArray() là công cụ đáng tin cậy nhất. Phương thức này trả về true nếu đối số là một Array và false trong mọi trường hợp khác.

Ví dụ:

let myVar = 1, 2, 3;
let myObject = { a: 1, b: 2 };
let myString = "hello"; console.log(Array.isArray(myVar)); // Output: true
console.log(Array.isArray(myObject)); // Output: false
console.log(Array.isArray(myString)); // Output: false

Việc sử dụng Array.isArray() là cách tốt nhất để tránh nhầm lẫn với các kiểu dữ liệu khác, đặc biệt là các đối tượng có thuộc tính dạng số hoặc các chuỗi có ký tự giống dấu ngoặc vuông.

Xử lý các trường hợp mảng lồng nhau (nested arrays)

Mảng lồng nhau (nested arrays) là các mảng chứa các mảng khác làm phần tử của chúng. Việc truy cập và thao tác với các mảng lồng nhau đòi hỏi việc sử dụng nhiều cặp dấu ngoặc vuông liên tiếp hoặc các vòng lặp lồng nhau.

Ví dụ truy cập phần tử trong mảng lồng nhau:

let matrix = 1, 2, 3, 4, 5, 6, 7, 8, 9
; console.log(matrix01); // Truy cập phần tử thứ 2 của mảng thứ nhất (chỉ số 0). Output: 2
console.log(matrix20); // Truy cập phần tử thứ 1 của mảng thứ ba (chỉ số 2). Output: 7

Để thao tác với tất cả các phần tử trong một mảng lồng nhau phức tạp, bạn thường cần sử dụng các vòng lặp lồng nhau:

for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrixi.length; j++) { console.log(`Element at ${i}${j}: ${matrixij}`); }
}

Tăng và giảm độ dài mảng một cách chủ động

Như đã đề cập ở phần trước, bạn có thể thay đổi trực tiếp kích thước của mảng bằng cách gán giá trị cho thuộc tính .length của nó.

Nếu bạn gán một giá trị nhỏ hơn độ dài hiện tại, các phần tử ở cuối mảng sẽ bị loại bỏ:

Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả
Array Javascript Là Gì? Tổng Hợp Kiến Thức Cơ Bản Và Cách Sử Dụng Hiệu Quả
let data = 1, 2, 3, 4, 5;
data.length = 3; // Cắt bớt mảng
console.log(data); // Output: 1, 2, 3

Nếu bạn gán một giá trị lớn hơn độ dài hiện tại, mảng sẽ được mở rộng và các phần tử mới được thêm vào sẽ có giá trị empty slots (trống):

let list = 10, 20;
list.length = 5; // Mở rộng mảng
console.log(list); // Output: 10, 20, <3 empty items>
console.log(list.length); // Output: 5

Lưu ý rằng việc thay đổi .length là một cách trực tiếp để điều chỉnh kích thước, nhưng các phương thức như push(), pop(), shift(), unshift(), và splice() thường được ưa chuộng hơn vì chúng rõ ràng và dễ quản lý hơn trong hầu hết các trường hợp.

Lợi ích khi sử dụng Array trong các bài toán lập trình thực tế

Array là một trong những cấu trúc dữ liệu cơ bản và quan trọng nhất trong lập trình, mang lại nhiều lợi ích thiết thực trong các bài toán thực tế:

  • Tổ chức dữ liệu hiệu quả: Array giúp nhóm các dữ liệu liên quan lại với nhau dưới một tên duy nhất, làm cho mã nguồn dễ đọc, dễ hiểu và dễ quản lý hơn.
  • Thao tác dữ liệu linh hoạt: Với các phương thức tích hợp sẵn, bạn có thể dễ dàng thêm, xóa, sửa đổi, tìm kiếm, sắp xếp và xử lý các tập dữ liệu lớn một cách hiệu quả.
  • Hiệu suất cao: Đối với các tác vụ lặp qua hoặc truy cập dữ liệu theo chỉ số, Array thường mang lại hiệu suất tốt hơn so với việc sử dụng các cấu trúc dữ liệu khác.
  • Xây dựng các cấu trúc phức tạp: Array có thể được lồng nhau để tạo thành các cấu trúc dữ liệu phức tạp hơn như ma trận (matrix), bảng, hoặc biểu đồ, là nền tảng cho nhiều thuật toán và ứng dụng.
  • Tích hợp với các API và thư viện: Hầu hết các API của JavaScript và các thư viện bên thứ ba đều làm việc chặt chẽ với Array, khiến cho nó trở thành một phần không thể thiếu trong quá trình phát triển.

Ví dụ ứng dụng thực tế bao gồm việc hiển thị danh sách sản phẩm trên trang thương mại điện tử, lưu trữ lịch sử giao dịch của người dùng, quản lý trạng thái của các mục trong danh sách công việc (to-do list), xử lý dữ liệu từ API trả về dưới dạng JSON, hoặc xây dựng các trò chơi đơn giản yêu cầu quản lý trạng thái của các đối tượng trên màn hình.

Câu hỏi thường gặp về Array JavaScript

Array trong JavaScript có giới hạn về số lượng phần tử không?

Về mặt lý thuyết, Array trong JavaScript không có giới hạn cố định về số lượng phần tử. Tuy nhiên, giới hạn thực tế sẽ phụ thuộc vào bộ nhớ có sẵn của hệ thống mà trình duyệt hoặc môi trường Node.js đang chạy. Khi mảng trở nên quá lớn, bạn có thể gặp phải các vấn đề về hiệu suất hoặc lỗi hết bộ nhớ.

Làm thế nào để sao chép (copy) một Array trong JavaScript?

Việc sao chép một Array trong JavaScript cần lưu ý đến hai loại sao chép: sao chép nông (shallow copy) và sao chép sâu (deep copy).

  • Sao chép nông: Sao chép nông tạo ra một Array mới nhưng các phần tử bên trong Array gốc và Array mới vẫn cùng trỏ đến một đối tượng hoặc mảng nếu chúng là đối tượng/mảng. Các phương thức phổ biến bao gồm:

    • Sử dụng slice(): let newArray = oldArray.slice();
    • Sử dụng concat(): let newArray = oldArray.concat();
    • Sử dụng toán tử Spread (...): let newArray = ...oldArray;
  • Sao chép sâu: Sao chép sâu tạo ra một bản sao độc lập hoàn toàn, kể cả các đối tượng hoặc mảng lồng nhau. Cách đơn giản nhất để thực hiện sao chép sâu cho các cấu trúc dữ liệu JSON-compatible là:
    let deepCopiedArray = JSON.parse(JSON.stringify(originalArray));
    Tuy nhiên, cách này có giới hạn với các kiểu dữ liệu không phải JSON (như Date, Function, undefined, RegExp). Đối với các trường hợp phức tạp hơn, bạn có thể cần dùng đến các thư viện chuyên dụng hoặc tự viết hàm sao chép sâu.

Sự khác nhau giữa splice() và slice()?

Sự khác biệt chính giữa splice() và slice() là:

  • splice():

    • Thay đổi trực tiếp mảng gốc (mutates the original array).
    • Có thể dùng để xóa, thêm hoặc thay thế phần tử.
    • Trả về một mảng chứa các phần tử đã bị xóa.
  • slice():

    • Không thay đổi mảng gốc (does not mutate the original array).
    • Chỉ dùng để trích xuất một phần của mảng.
    • Trả về một mảng mới chứa các phần tử được trích xuất.

Cách xóa các phần tử trùng lặp khỏi Array?

Có nhiều cách để xóa các phần tử trùng lặp khỏi Array, một trong những cách phổ biến và hiệu quả nhất là sử dụng Set:

let numbersWithDuplicates = 1, 2, 2, 3, 4, 4, 5;
let uniqueNumbers = ...new Set(numbersWithDuplicates);
console.log(uniqueNumbers); // Output: 1, 2, 3, 4, 5

Set là một đối tượng cho phép lưu trữ các giá trị duy nhất. Khi bạn tạo một Set từ một Array có phần tử trùng lặp, Set sẽ tự động loại bỏ các phần tử trùng lặp. Sau đó, bạn có thể chuyển Set trở lại thành Array bằng toán tử Spread (...).

Một cách khác, sử dụng filter() kết hợp với indexOf():

let numbersWithDuplicates = 1, 2, 2, 3, 4, 4, 5;
let uniqueNumbers = numbersWithDuplicates.filter((value, index, self) => { return self.indexOf(value) === index;
});
console.log(uniqueNumbers); // Output: 1, 2, 3, 4, 5

Cách này hoạt động bằng cách chỉ giữ lại phần tử nếu lần xuất hiện đầu tiên của nó tại chỉ số hiện tại.

Cập Nhật Lúc Tháng 9 27, 2026 by admin

Viết một bình luận