Phương thức mảng JavaScript
Các phương thức mảng cơ bản
Độ dài mảng JavaScript
Thuộc tính length trả về độ dài (kích thước) của một mảng:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
Hãy tự mình thử »Mảng JavaScript toString()
Phương thức JavaScript toString() chuyển đổi một mảng thành một chuỗi các giá trị mảng (được phân tách bằng dấu phẩy).
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Kết quả:
Mảng JavaScript tại()
ES2022 giới thiệu phương thức mảng at() :
Ví dụ
Lấy phần tử thứ ba của trái cây bằng cách sử dụng at():
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
Hãy tự mình thử »Lấy phần tử thứ ba của trái cây bằng cách sử dụng []:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];
Hãy tự mình thử » Phương thức at() trả về một phần tử được lập chỉ mục từ một mảng.
Phương thức at() trả về giống như [] .
Phương thức at() được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 3 năm 2022:
| Chrome 92 | Edge 92 | Firefox 90 | Safari 15.4 | Opera 78 |
| Apr 2021 | Jul 2021 | Jul 2021 | Mar 2022 | Aug 2021 |
Ghi chú
Nhiều ngôn ngữ cho phép negative bracket indexing như [-1] để truy cập các phần tử từ cuối đối tượng/mảng/chuỗi.
Điều này là không thể trong JavaScript, vì [] được sử dụng để truy cập cả mảng và đối tượng. obj[-1] đề cập đến giá trị của khóa -1, không phải thuộc tính cuối cùng của đối tượng.
Phương thức at() được giới thiệu trong ES2022 để giải quyết vấn đề này.
Tham gia mảng JavaScript()
Phương thức join() cũng nối tất cả các phần tử mảng thành một chuỗi.
Nó hoạt động giống như toString() , nhưng ngoài ra bạn có thể chỉ định dấu phân cách:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Kết quả:
Bật và đẩy
Khi bạn làm việc với mảng, thật dễ dàng để loại bỏ các phần tử và thêm các phần tử mới.
Đây là những gì bật và đẩy là:
Đưa các mục ra khỏi một mảng hoặc đẩy các mục vào một mảng.
Mảng JavaScript pop()
Phương thức pop() loại bỏ phần tử cuối cùng khỏi mảng:
Phương thức pop() trả về giá trị được "bật ra":
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
Hãy tự mình thử »Đẩy mảng JavaScript()
Phương thức push() thêm một phần tử mới vào mảng (ở cuối):
Phương thức push() trả về độ dài mảng mới:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
Hãy tự mình thử »Các yếu tố dịch chuyển
Dịch chuyển tương đương với popping, nhưng làm việc trên phần tử đầu tiên thay vì phần tử cuối cùng.
Dịch chuyển mảng JavaScript()
Phương thức shift() loại bỏ phần tử mảng đầu tiên và "chuyển" tất cả các phần tử khác sang chỉ mục thấp hơn.
Phương thức shift() trả về giá trị đã được "chuyển ra ngoài":
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
Hãy tự mình thử »Mảng JavaScript không dịch chuyển()
Phương thức unshift() thêm một phần tử mới vào một mảng (ở đầu) và "bỏ dịch chuyển" các phần tử cũ hơn:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Hãy tự mình thử » Phương thức unshift() trả về độ dài mảng mới:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Hãy tự mình thử »Thay đổi các yếu tố
Các phần tử mảng được truy cập bằng cách sử dụng số chỉ mục của chúng:
Chỉ mục mảng bắt đầu bằng 0:
[0] là phần tử mảng đầu tiên
[1] là thứ hai
[2] là thứ ba ...
Độ dài mảng JavaScript
Thuộc tính length cung cấp một cách dễ dàng để nối thêm một phần tử mới vào một mảng:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
Hãy tự mình thử »Xóa mảng JavaScript()
Cảnh báo !
Việc sử dụng delete() sẽ để lại các lỗ undefined trong mảng.
Thay vào đó hãy sử dụng pop() hoặc shift().
Hợp nhất mảng (Nối)
Trong các ngôn ngữ lập trình, nối có nghĩa là nối các chuỗi từ đầu đến cuối.
Ghép "tuyết" và "quả bóng" tạo thành "quả cầu tuyết".
Nối mảng có nghĩa là nối các mảng từ đầu đến cuối.
Mảng JavaScript concat()
Phương thức concat() tạo một mảng mới bằng cách hợp nhất (nối) các mảng hiện có:
Ví dụ (Hợp nhất hai mảng)
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
Hãy tự mình thử »Ghi chú
Phương thức concat() không thay đổi các mảng hiện có. Nó luôn trả về một mảng mới.
Phương thức concat() có thể nhận bất kỳ số lượng đối số mảng nào.
Ví dụ (Sáp nhập ba mảng)
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
Hãy tự mình thử » Phương thức concat() cũng có thể lấy chuỗi làm đối số:
Ví dụ (Hợp nhất một mảng với các giá trị)
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); Hãy tự mình thử »Mảng sao chépWithin()
Phương thức copyWithin() sao chép các phần tử mảng sang vị trí khác trong mảng:
Ví dụ
Sao chép vào chỉ mục 2, tất cả các phần tử từ chỉ mục 0:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);Hãy tự mình thử »Copy vào chỉ mục 2, các phần tử từ chỉ số 0 đến 2:
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2); Hãy tự mình thử »Ghi chú
Phương thức copyWithin() ghi đè các giá trị hiện có.
Phương thức copyWithin() không thêm phần tử vào mảng.
Phương thức copyWithin() không thay đổi độ dài của mảng.
Làm phẳng một mảng
Làm phẳng một mảng là quá trình giảm kích thước của một mảng.
Làm phẳng rất hữu ích khi bạn muốn chuyển đổi một mảng nhiều chiều thành mảng một chiều.
Mảng JavaScript phẳng()
ES2019 Đã giới thiệu phương thức Array Flat().
Phương thức flat() tạo một mảng mới với các phần tử mảng con được nối với nhau theo một độ sâu xác định.
Hỗ trợ trình duyệt
JavaScript Array flat() được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 1 năm 2020:
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
Mảng nối và cắt
Phương thức splice() thêm các mục mới vào một mảng.
Phương thức slice() cắt ra một phần của mảng.
Mối nối mảng JavaScript()
Phương thức splice() có thể được sử dụng để thêm các mục mới vào một mảng:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Hãy tự mình thử »Tham số đầu tiên (2) xác định vị trí cần thêm các phần tử mới (ghép vào).
Tham số thứ hai (0) xác định số phần tử cần loại bỏ .
Các tham số còn lại ("Lemon", "Kiwi") xác định các phần tử mới sẽ được thêm vào .
Phương thức splice() trả về một mảng chứa các mục đã bị xóa:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
Hãy tự mình thử »Sử dụng splice() để loại bỏ phần tử
Với cài đặt tham số thông minh, bạn có thể sử dụng splice() để loại bỏ các phần tử mà không để lại "lỗ hổng" trong mảng:
Tham số đầu tiên (0) xác định vị trí cần thêm các phần tử mới (ghép vào).
Tham số thứ hai (1) xác định số phần tử cần loại bỏ .
Các tham số còn lại được bỏ qua. Không có yếu tố mới sẽ được thêm vào.
Mảng JavaScript toSpliced()
ES2023 đã thêm phương thức Array toSpliced() như một cách an toàn để ghép một mảng mà không làm thay đổi mảng ban đầu.
Sự khác biệt giữa phương thức toSplice() mới và phương thức splice() cũ là phương thức mới tạo ra một mảng mới, giữ nguyên mảng ban đầu, trong khi phương thức cũ thay đổi mảng ban đầu.
Ví dụ
const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);
Hãy tự mình thử »Lát mảng JavaScript()
Phương thức slice() cắt một phần của mảng thành một mảng mới:
Ví dụ
Cắt một phần của mảng bắt đầu từ phần tử mảng 1 ("Cam"):
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
Hãy tự mình thử »Ghi chú
Phương thức slice() tạo một mảng mới.
Phương thức slice() không loại bỏ bất kỳ phần tử nào khỏi mảng nguồn.
Ví dụ
Cắt một phần của mảng bắt đầu từ phần tử mảng 3 ("Apple"):
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
Hãy tự mình thử » Phương thức slice() có thể nhận hai đối số như slice(1, 3) .
Sau đó, phương thức này sẽ chọn các phần tử từ đối số bắt đầu và tối đa (nhưng không bao gồm) đối số kết thúc.
Ví dụ
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
Hãy tự mình thử » Nếu đối số end bị bỏ qua, như trong ví dụ đầu tiên, phương thức slice() sẽ cắt phần còn lại của mảng.
Ví dụ
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
Hãy tự mình thử »Tự động toString()
JavaScript tự động chuyển đổi một mảng thành một chuỗi được phân tách bằng dấu phẩy khi cần một giá trị nguyên thủy.
Điều này luôn xảy ra khi bạn cố gắng xuất một mảng.
Hai ví dụ này sẽ tạo ra cùng một kết quả:
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Hãy tự mình thử »Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Hãy tự mình thử »Ghi chú
Tất cả các đối tượng JavaScript đều có phương thức toString().
Tìm kiếm mảng
Mảng tìm kiếm được đề cập trong chương tiếp theo của hướng dẫn này.
Sắp xếp mảng
Sắp xếp mảng bao gồm các phương pháp được sử dụng để sắp xếp mảng.
Lặp lại mảng
Mảng lặp bao gồm các phương thức hoạt động trên tất cả các phần tử mảng.
Tham chiếu mảng hoàn chỉnh
Để có tài liệu tham khảo Mảng đầy đủ, hãy truy cập:
Tham chiếu mảng JavaScript hoàn chỉnh .
Tham chiếu chứa các mô tả và ví dụ về tất cả các thuộc tính và phương thức của Mảng.
