JavaScript - Mảng. Phương thức mảng JavaScript

Hãy cùng tìm hiểu cách lập chỉ mục các mảng trong js, loại bỏ và thêm các phần tử của chúng.

Mảng trong JavaScript là một đối tượng toàn cục được thiết kế để lưu trữ danh sách các giá trị.

Nó tương tự như các biến khác ở chỗ nó có thể lưu trữ bất kỳ loại dữ liệu nào. Nhưng mảng có một điểm khác biệt quan trọng so với biến: nó có thể lưu trữ nhiều phần tử cùng một lúc.

Mảng là một tập hợp các giá trị có thứ tự. Mỗi giá trị được gọi là một phần tử và có số riêng, được gọi là chỉ mục.

Một phần tử bên trong mảng có thể thuộc bất kỳ kiểu nào. Hơn nữa, các phần tử của một mảng có thể có nhiều loại khác nhau: số, chuỗi, phần tử logic và thậm chí cả các đối tượng hoặc các mảng khác.

Thứ tự các phần tử mảng bắt đầu từ 0. Hóa ra mảng sẽ luôn có chỉ số được bù bằng một: phần tử đầu tiên sẽ có chỉ số 0, phần tử thứ hai sẽ có chỉ số 1, v.v.

Dưới đây là một ví dụ về một mảng có các phần tử thuộc các loại khác nhau:

Tạo (khai báo) một mảng

Mảng rất tiện lợi vì chúng có thể lưu trữ bao nhiêu dữ liệu bạn cần. Kích thước tối đa có thể có của mảng js là 2 32 phần tử.

Chúng ta cần nói với JavaScript rằng chúng ta muốn tạo một mảng. Có hai tùy chọn cho việc này: giá trị trong ngoặc vuông hoặc từ khóa mới.

Ký hiệu ngắn: sử dụng dấu ngoặc vuông

Danh sách các giá trị được phân tách bằng dấu phẩy được đặt trong dấu ngoặc vuông.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

Nội dung của mảng được xác định bởi nội dung nằm giữa dấu ngoặc vuông. Mỗi giá trị được phân tách bằng dấu phẩy.

Các giá trị được chỉ định giống như các biến đơn giản, tức là các chuỗi phải được khai báo kèm theo dấu ngoặc kép, v.v.

Để khai báo một mảng trống, hãy để trống dấu ngoặc đơn:

var myArray = ;

Mục nhập dài: sử dụng hàm tạo Array()

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond"); var TwinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

Từ khóa mới yêu cầu JavaScript tạo một mảng mới có các giá trị được truyền dưới dạng tham số.

Nếu bạn biết trước có bao nhiêu phần tử trong mảng của mình, bạn có thể chuyển ngay giá trị này vào hàm tạo.

var myArray = Mảng mới(80);

Biểu thức trên sẽ tạo một mảng trống gồm 80 vị trí có giá trị không xác định.

Khai báo một mảng trống:

var myArray = new Array();

Truy cập các phần tử mảng

Bằng cách sử dụng chỉ mục của từng phần tử, bạn có thể làm việc với bất kỳ dữ liệu nào trong mảng, truy cập dữ liệu đó bằng toán tử:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; console.log(myArray); // In “Jack” console.log(myArray); // In “Desmond”

Một mảng có thể có nhiều cấp độ, nghĩa là mỗi phần tử có thể là một mảng. Kết quả sẽ là mảng js hai chiều. Làm cách nào chúng ta có thể truy cập các mảng nằm bên trong các mảng khác - “mảng đa chiều”?

Ví dụ: hãy xem xét một mảng đại diện cho một họ. Những đứa trẻ từ họ này được ghi vào một mảng riêng biệt bên trong mảng chính:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Bạn có thể tưởng tượng nó như thế này:

Để tham khảo giá trị "Lisa":

var lisa = familyArray; console.log(lisa); // hiển thị "Lisa"

Điều này có thể được tiếp tục gần như vô thời hạn, cho phép bạn lưu trữ các tập dữ liệu lồng nhau trong mảng và truy cập chúng bằng cách sử dụng các chỉ mục.

Thêm các phần tử vào một mảng

Chúng tôi đã tìm ra cách truy cập các phần tử mảng bằng cách sử dụng các chỉ mục tương ứng của chúng. Theo cách tương tự, bạn có thể thêm (hoặc thay đổi) các phần tử bằng cách khai báo, ví dụ:

var myArray = ["Kate", "Mặt trời"]; myArray = "Juliet"; console.log(myArray); // In "Kate, Sun, Juliet"

Điều gì xảy ra nếu tôi khai báo một phần tử có chỉ mục không có phần tử nào khác trước nó? Bản thân mảng sẽ tạo tất cả các phần tử còn thiếu và gán cho chúng giá trị unfind :

var myArray = ["Kate", "Mặt trời"]; myArray = "Juliet"; console.log(myArray.length); // In ra "6" console.log(myArray); // In ["Kate", "Sung", không xác định, không xác định, không xác định, "Juliet"]

Bạn có thể tìm hiểu độ dài của mảng js bằng cách sử dụng thuộc tính length. Trong ví dụ trên, có sáu phần tử trong mảng và ba trong số chúng chưa được gán giá trị - chúng được đánh dấu là không xác định.

phương thức đẩy()

Sử dụng phương thức push(), bạn có thể thêm một hoặc nhiều phần tử vào mảng js. Push() chấp nhận số lượng tham số không giới hạn, tất cả các tham số này sẽ được thêm vào cuối mảng.

var myArray = ["Kate", "Sut"]; myArray.push("Juliet"); // Thêm phần tử "Juliet" vào cuối mảng myArray.push("Libby", "Shannon"); // Thêm phần tử "Libby" và "Shannon" vào cuối mảng console.log(myaArray ); // In ["Kate", "Sớm", "Juliet", "Libby", "Shannon"]

phương thức unshift()

Phương thức unshift() hoạt động tương tự như push(), ngoại trừ việc nó thêm các phần tử vào đầu mảng.

var myArray = ["Kate", "Mặt trời"]; myArray.unshift("Juliet"); // Thêm phần tử "Juliet" vào đầu mảng myArray.unshift("Libby", "Shannon"); // Thêm các phần tử "Libby" và "Shannon" vào đầu mảng console.log(myArray); // Kết quả đầu ra ["Libby", "Shannon", "Juliet", "Kate", "Soon"]

Loại bỏ các phần tử mảng Phương thức Pop() và shift()

Các phương thức pop() và shift() lần lượt loại bỏ phần tử cuối cùng và đầu tiên của một mảng:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // Loại bỏ phần tử "Kate" myArray.shift(); // Loại bỏ phần tử "Jack" console.log(myArray); // In ra ["Sawyer", "John", "Desmond"]

phương thức mối nối()

Sử dụng phương thức splice(), bạn có thể xóa hoặc thêm các phần tử vào một mảng trong khi chỉ định chính xác chỉ mục của các phần tử.

Ví dụ sau sử dụng phương thức splice() để thêm hai phần tử, bắt đầu từ chỉ mục 2 (nghĩa là phần tử thứ ba):

var FruitArray = ["táo", "đào", "cam", "chanh", "chanh", "anh đào"]; FruitArray.splice(2, 0, "dưa", "chuối"); console.log(fruitArray); // Kết quả đầu ra ["táo", "đào", "dưa", "chuối", "cam", "chanh", "chanh", "anh đào"]

Tham số đầu tiên của phương thức splice() là chỉ mục. Nó cho biết vị trí nào cần thêm/xóa các phần tử. Trong ví dụ của chúng tôi, chúng tôi đã chọn chỉ mục 2 (có giá trị "màu cam").

Tham số thứ hai là số phần tử cần loại bỏ. Chúng tôi đã chỉ định giá trị là 0 nên sẽ không có gì bị xóa.

Các thông số sau đây là tùy chọn. Họ thêm các giá trị mới vào mảng. Trong trường hợp của chúng tôi, chúng tôi cần thêm “dưa” và “chuối”, bắt đầu từ chỉ số 2.

Dịch

Hầu hết các ứng dụng được phát triển ngày nay đều yêu cầu tương tác với một số loại tập dữ liệu. Xử lý các phần tử trong bộ sưu tập là thao tác phổ biến mà có thể bạn đã từng gặp. Ví dụ: khi làm việc với mảng, bạn có thể không cần suy nghĩ, sử dụng vòng lặp for thông thường, trông giống như thế này: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Giả sử chúng ta cần hiển thị một danh sách các sản phẩm và nếu cần, hãy chia nó thành các danh mục, lọc nó, thực hiện tìm kiếm trên đó, sửa đổi danh sách này hoặc các thành phần của nó. Có lẽ bạn cần thực hiện nhanh một số phép tính có liên quan đến các phần tử của danh sách. Giả sử bạn cần thêm cái gì đó với cái gì đó, nhân cái gì đó với cái gì đó. Có thể tìm thấy các công cụ trong JavaScript cho phép bạn giải quyết những vấn đề như vậy nhanh hơn và thuận tiện hơn so với việc sử dụng vòng lặp for thông thường không?

Trên thực tế, có những tiện ích như vậy trong JavaScript. Một số trong số chúng sẽ được thảo luận trong tài liệu, bản dịch mà chúng tôi trình bày để các bạn chú ý ngày hôm nay. Cụ thể, chúng ta đang nói về toán tử trải rộng, vòng lặp for...of và các phương thức include(), some(), each(), filter(), map() và less(). Ở đây chúng ta chủ yếu nói về mảng, nhưng các kỹ thuật được thảo luận ở đây nhìn chung phù hợp để làm việc với các loại đối tượng khác.

Cần lưu ý rằng các đánh giá về các phương pháp phát triển JS hiện đại thường bao gồm các ví dụ được chuẩn bị bằng cách sử dụng các hàm mũi tên. Có lẽ bạn không sử dụng chúng thường xuyên - có thể vì bạn không thích chúng, có thể vì bạn không muốn dành quá nhiều thời gian để học điều gì đó mới, hoặc có thể chúng không phù hợp với bạn. Do đó, ở đây, trong hầu hết các tình huống, hai tùy chọn để thực hiện các hành động giống nhau sẽ được hiển thị: sử dụng các hàm thông thường (ES5) và sử dụng các hàm mũi tên (ES6). Đối với những người mới làm việc với hàm mũi tên, hàm mũi tên không tương đương với việc khai báo hàm và biểu thức hàm. Bạn không nên thay thế cái này bằng cái kia. Đặc biệt, điều này là do từ khóa this hoạt động khác nhau trong các hàm thông thường và hàm mũi tên.

1. Toán tử trải rộng Toán tử trải rộng cho phép bạn “mở rộng” mảng bằng cách thay thế các phần tử của chúng thay vì mảng ở nơi sử dụng toán tử này. Một cách tiếp cận tương tự đã được đề xuất cho các đối tượng bằng chữ.▍ Điểm mạnh của toán tử mở rộng

Đây là một cách đơn giản và nhanh chóng để “kéo” các phần tử riêng lẻ ra khỏi một mảng.
Toán tử này phù hợp để làm việc với mảng và đối tượng bằng chữ.
Đây là một phương pháp làm việc nhanh chóng và trực quan với các đối số của hàm.
Toán tử mở rộng không chiếm nhiều không gian trong mã - nó trông giống như ba dấu chấm (...).

▍Ví dụ Giả sử bạn phải đối mặt với nhiệm vụ hiển thị danh sách các món ăn yêu thích của mình mà không sử dụng vòng lặp. Sử dụng toán tử mở rộng, việc này được thực hiện như thế này:

2. Vòng lặp for…of Toán tử for…of được thiết kế để duyệt qua các đối tượng có thể lặp lại. Nó cho phép truy cập vào các phần tử riêng lẻ của các đối tượng đó (đặc biệt là các phần tử mảng), ví dụ, cho phép chúng được sửa đổi. Nó có thể được coi là sự thay thế cho vòng lặp for thông thường.▍Sức mạnh của vòng lặp for…of

Đây là một cách dễ dàng để thêm hoặc cập nhật các mục trong bộ sưu tập.
Vòng lặp for…of cho phép bạn thực hiện nhiều phép tính khác nhau bằng cách sử dụng các phần tử (tổng, nhân, v.v.).
Nó thuận tiện để sử dụng khi bạn cần kiểm tra bất kỳ điều kiện nào.
Việc sử dụng nó giúp viết mã sạch hơn và dễ đọc hơn.

▍Ví dụ Giả sử bạn có cấu trúc dữ liệu mô tả nội dung của hộp công cụ và bạn muốn hiển thị các công cụ đó. Đây là cách thực hiện bằng vòng lặp for...of:

3. Phương thức bao gồm() Phương thức bao gồm() được sử dụng để kiểm tra sự hiện diện của một phần tử nhất định trong một bộ sưu tập, cụ thể, ví dụ, một chuỗi nhất định trong một mảng chứa các chuỗi. Phương thức này trả về true hoặc false tùy thuộc vào kết quả kiểm tra. Khi sử dụng nó, cần lưu ý rằng nó có phân biệt chữ hoa chữ thường. Ví dụ: nếu bộ sưu tập chứa phần tử chuỗi SCHOOL và bao gồm() kiểm tra sự hiện diện của nó trên chuỗi school , thì phương thức sẽ trả về sai .▍Độ mạnh của phương thức bao gồm()

Phương thức include() rất hữu ích trong việc tạo cơ chế truy xuất dữ liệu đơn giản.
Nó cung cấp cho nhà phát triển một cách trực quan để xác định sự hiện diện của dữ liệu nhất định trong một mảng.
Thật thuận tiện khi sử dụng trong các biểu thức có điều kiện để sửa đổi, lọc các phần tử và thực hiện các thao tác khác.
Việc sử dụng nó dẫn đến khả năng đọc mã được cải thiện.

▍Ví dụ Giả sử bạn có một gara, được biểu thị bằng một mảng có danh sách các ô tô và bạn không biết liệu một chiếc ô tô nào đó có ở trong gara này hay không. Để giải quyết vấn đề này, bạn cần viết mã cho phép bạn kiểm tra xem ô tô có ở trong gara hay không. Hãy sử dụng phương thức include() :

4. Phương thức Some() Phương thức some() cho phép bạn kiểm tra xem một số phần tử bạn đang tìm kiếm có tồn tại trong mảng hay không. Dựa trên kết quả kiểm tra, nó trả về true hoặc false. Nó tương tự như phương thức include() ở trên, ngoại trừ đối số của nó là một hàm chứ không phải là một chuỗi thông thường.

Phương thức some() cho phép chúng ta kiểm tra xem mảng có chứa ít nhất một trong các phần tử mà chúng ta quan tâm hay không.
Nó thực hiện kiểm tra điều kiện bằng cách sử dụng hàm được truyền cho nó.
Phương pháp này thuận tiện để sử dụng.

▍Ví dụ Giả sử bạn là chủ sở hữu của một câu lạc bộ và nói chung, bạn không quan tâm đến việc chính xác ai sẽ đến câu lạc bộ của bạn. Tuy nhiên, một số du khách không được phép vào câu lạc bộ vì họ có xu hướng tiêu thụ quá nhiều đồ uống có cồn, ít nhất là nếu họ đến cơ sở của bạn một mình và không có ai chăm sóc họ. Trong trường hợp này, một nhóm du khách chỉ có thể vào câu lạc bộ nếu ít nhất một trong số họ ít nhất 18 tuổi. Để tự động hóa loại kiểm tra này, chúng ta sẽ sử dụng phương thức some(). Dưới đây ứng dụng của nó được thể hiện trong hai phiên bản.ES5

ES6

5. Phương thức Every() Phương thức each() duyệt qua mảng và kiểm tra từng phần tử xem có tuân thủ một điều kiện nhất định hay không, trả về true nếu tất cả các phần tử của mảng đáp ứng điều kiện và trả về false nếu ngược lại. Bạn có thể thấy rằng nó tương tự như phương thức some().▍ Điểm mạnh của phương thức Every()

Phương thức Every() cho phép bạn kiểm tra xem tất cả các phần tử của mảng có đáp ứng điều kiện hay không.
Điều kiện có thể được thiết lập bằng cách sử dụng hàm.
Nó thúc đẩy một cách tiếp cận khai báo để lập trình.

▍Ví dụ Hãy quay lại ví dụ trước. Ở đó, bạn cho phép những vị khách dưới 18 tuổi vào câu lạc bộ, nhưng ai đó đã viết đơn cho cảnh sát, sau đó bạn rơi vào một tình huống khó chịu. Sau khi mọi thứ đã được sắp xếp ổn thỏa, bạn quyết định rằng mình không cần tất cả những thứ này và thắt chặt các quy định khi đến thăm câu lạc bộ. Bây giờ một nhóm du khách chỉ có thể vào câu lạc bộ nếu mỗi thành viên trong nhóm ít nhất 18 tuổi. Như lần trước, chúng ta sẽ xem xét việc giải quyết vấn đề bằng hai phiên bản, nhưng lần này chúng ta sẽ sử dụng phương thức Every().ES5

ES6

6. Phương thức filter() Phương thức filter() cho phép bạn tạo, dựa trên một mảng nhất định, một mảng mới chỉ chứa các phần tử của mảng ban đầu thỏa mãn một điều kiện nhất định. ▍Sức mạnh của phương thức filter().

Phương thức filter() tránh sửa đổi mảng ban đầu.
Nó cho phép bạn loại bỏ các yếu tố không cần thiết.
Nó cải thiện khả năng đọc mã.

▍Ví dụ Giả sử bạn chỉ cần chọn từ danh sách các giá lớn hơn hoặc bằng 30. Hãy sử dụng phương thức filter() .ES5 để giải quyết vấn đề này

ES6

7. Phương thức Map() Phương thức map() tương tự như phương thức filter() ở chỗ nó cũng trả về một mảng mới. Tuy nhiên, nó được sử dụng để sửa đổi các phần tử của mảng ban đầu.▍Sức mạnh của phương thức map()

Phương thức map() tránh việc phải thay đổi các phần tử của mảng ban đầu.
Nó có thể được sử dụng để sửa đổi các phần tử mảng một cách thuận tiện.
Nó cải thiện khả năng đọc mã.

▍Ví dụ Giả sử bạn có một danh sách các sản phẩm kèm theo giá. Người quản lý của bạn cần một danh sách mới các sản phẩm có giá đã giảm 25%. Hãy sử dụng phương thức map() .ES5 để giải quyết vấn đề này

ES6

8. Phương thức less() Phương thức less(), ở dạng đơn giản nhất, cho phép bạn tính tổng các phần tử của mảng số. Nói cách khác, nó giảm mảng xuống một giá trị duy nhất. Điều này cho phép bạn sử dụng nó để thực hiện nhiều phép tính khác nhau.▍Điểm mạnh của phương thức less()

Sử dụng phương thức less(), bạn có thể tính tổng hoặc trung bình của các phần tử của một mảng.
Phương pháp này tăng tốc và đơn giản hóa việc tính toán.

▍Ví dụ Giả sử bạn cần tính toán chi phí trong tuần và được lưu trữ trong một mảng. Hãy giải quyết vấn đề này bằng phương thức less() .ES5

ES6

Thêm thẻ

Mảng

Mảng là một tập hợp các giá trị có thứ tự. Các giá trị trong một mảng được gọi là các phần tử, mỗi phần tử được đặc trưng bởi một vị trí số trong mảng, được gọi là chỉ mục. Mảng trong JavaScript không được định kiểu: các phần tử của một mảng có thể thuộc bất kỳ loại nào và các phần tử khác nhau của cùng một mảng có thể có các kiểu khác nhau. Các phần tử mảng thậm chí có thể là đối tượng hoặc các mảng khác, cho phép bạn tạo các cấu trúc dữ liệu phức tạp như mảng đối tượng và mảng mảng.

Các chỉ mục mảng JavaScript bắt đầu từ 0 và sử dụng số nguyên 32 bit - phần tử đầu tiên của mảng có chỉ mục 0. Mảng JavaScript rất linh hoạt: chúng có thể tăng và giảm kích thước khi cần thiết; không cần phải khai báo kích thước mảng cố định khi tạo chúng hoặc phân bổ lại bộ nhớ khi kích thước của chúng thay đổi.

Mảng trong JavaScript là một dạng đối tượng chuyên biệt và các chỉ mục mảng không có ý nghĩa gì nhiều ngoài tên thuộc tính, trùng hợp là các số nguyên.

Tạo mảng

Cách dễ nhất để tạo một mảng là sử dụng một hằng, là một danh sách đơn giản gồm các phần tử mảng được phân tách bằng dấu phẩy được bao quanh bởi dấu ngoặc vuông. Các giá trị trong một hằng mảng không nhất thiết phải là hằng số - chúng có thể là bất kỳ biểu thức nào, bao gồm cả các hằng đối tượng:

Var trống = ; // Mảng trống var number = ; // Mảng 5 phần tử số var misc = [ 1.1, true, "a", ]; // 3 phần tử thuộc các loại khác nhau + dấu phẩy ở cuối var base = 1024; bảng var = ; // Mảng chứa các biến var arrObj = [, ]; // 2 mảng bên trong chứa các đối tượng

Cú pháp mảng bằng chữ cho phép bạn chèn dấu phẩy ở cuối tùy chọn, tức là. chữ [,] khớp với một mảng có hai phần tử chứ không phải ba phần tử.

Một cách khác để tạo mảng là gọi hàm tạo Array(). Bạn có thể gọi hàm tạo theo ba cách khác nhau:

Gọi hàm tạo không có đối số:

Var Array = new Array();

Trong trường hợp này, một mảng trống sẽ được tạo, tương đương với mảng bằng chữ.

Gọi hàm tạo với một đối số số duy nhất xác định độ dài của mảng:

Var Array = Mảng mới(10);

Trong trường hợp này, một mảng trống có độ dài được chỉ định sẽ được tạo. Hình thức gọi hàm tạo Array() này có thể được sử dụng để phân bổ trước bộ nhớ cho một mảng nếu biết trước số phần tử của nó. Lưu ý rằng điều này không lưu trữ bất kỳ giá trị nào trong mảng.

Chỉ định rõ ràng các giá trị của hai phần tử mảng trở lên đầu tiên hoặc một phần tử không phải là số trong lệnh gọi hàm tạo:

Var Array = new Array(5, 4, 3, 2, 1, "test");

Trong trường hợp này, các đối số của hàm tạo trở thành giá trị của các phần tử của mảng mới. Sử dụng hằng mảng hầu như luôn dễ dàng hơn so với sử dụng hàm tạo Array().

Đọc và viết các phần tử mảng

Các phần tử mảng được truy cập bằng toán tử. Ở bên trái dấu ngoặc phải có tham chiếu mảng. Bên trong dấu ngoặc đơn phải có một biểu thức tùy ý trả về giá trị nguyên không âm. Cú pháp này hữu ích cho cả việc đọc và ghi giá trị của một phần tử mảng. Do đó, tất cả các hướng dẫn JavaScript sau đây đều hợp lệ:

// Tạo một mảng có một phần tử var arr = ["world"]; // Đọc phần tử 0 var value = arr; // Ghi giá trị vào phần tử 1 arr = 3.14; // Ghi giá trị vào phần tử 2 i = 2; mảng[i] = 3; // Ghi giá trị vào phần tử 3 arr = "hello"; // Đọc phần tử 0 và 2, ghi giá trị vào phần tử 3 arr] = arr;

Hãy để tôi nhắc bạn rằng mảng là một loại đối tượng chuyên biệt. Dấu ngoặc vuông dùng để truy cập các phần tử mảng hoạt động giống hệt như dấu ngoặc vuông dùng để truy cập các thuộc tính đối tượng. Trình thông dịch JavaScript chuyển đổi chỉ mục số trong dấu ngoặc đơn thành chuỗi—chỉ mục 1 trở thành chuỗi "1"—và sau đó sử dụng chuỗi làm tên thuộc tính.

Không có gì đặc biệt khi chuyển đổi chỉ mục số thành chuỗi: bạn có thể thực hiện tương tự với các đối tượng thông thường:

Var obj = (); // Tạo một đối tượng đơn giản obj = "one"; // Lập chỉ mục nó bằng số nguyên

Vấn đề về mảng là khi bạn sử dụng tên thuộc tính là số nguyên không âm, mảng sẽ tự động xác định giá trị của thuộc tính độ dài. Ví dụ, ở trên chúng ta đã tạo một mảng arr với một phần tử duy nhất. Sau đó, nó gán giá trị cho các phần tử của nó tại các chỉ mục 1, 2 và 3. Kết quả của các thao tác này là giá trị thuộc tính độ dài của mảng thay đổi thành 4.

Bạn nên phân biệt rõ ràng các chỉ mục trong một mảng với tên thuộc tính đối tượng. Tất cả các chỉ mục đều là tên thuộc tính, nhưng chỉ những thuộc tính có tên được biểu thị bằng số nguyên mới là chỉ mục. Tất cả các mảng đều là đối tượng và bạn có thể thêm thuộc tính cho chúng bằng bất kỳ tên nào. Tuy nhiên, nếu bạn chạm vào các thuộc tính là chỉ mục mảng, mảng sẽ phản hồi bằng cách cập nhật giá trị của thuộc tính độ dài nếu cần.

Xin lưu ý rằng số âm và số không nguyên có thể được sử dụng làm chỉ số mảng. Trong trường hợp này, các số được chuyển đổi thành chuỗi, được sử dụng làm tên thuộc tính.

Thêm và xóa các phần tử mảng

Chúng ta đã thấy rằng cách dễ nhất để thêm các phần tử vào một mảng là gán giá trị cho các chỉ mục mới. Bạn cũng có thể sử dụng phương thức push() để thêm một hoặc nhiều phần tử vào cuối mảng:

Var mảng = ; // Tạo một mảng trống arr.push("zero"); // Thêm một giá trị vào cuối arr.push("one",2); // Thêm hai giá trị nữa

Bạn cũng có thể thêm phần tử vào cuối mảng bằng cách gán giá trị cho phần tử mảng. Phương thức unshift() có thể được sử dụng để chèn một phần tử vào đầu mảng, làm dịch chuyển các phần tử hiện có trong mảng lên vị trí chỉ mục cao hơn.

Bạn có thể xóa các phần tử mảng bằng toán tử xóa, giống như các thuộc tính đối tượng thông thường:

Var mảng = ; xóa mảng; 2 trong mảng; // sai, chỉ số 2 trong mảng không được xác định arr.length; // 3: toán tử xóa không thay đổi thuộc tính độ dài của mảng

Việc xóa một phần tử cũng tương tự (nhưng hơi khác một chút) với việc gán giá trị không xác định cho phần tử đó. Lưu ý rằng việc áp dụng toán tử xóa cho một phần tử mảng không làm thay đổi giá trị của thuộc tính độ dài hoặc dịch chuyển các phần tử có chỉ mục cao hơn xuống để lấp đầy khoảng trống còn lại bằng cách xóa phần tử.

Cũng có thể loại bỏ các phần tử ở cuối mảng bằng cách gán một giá trị mới cho thuộc tính length. Mảng có phương thức pop() (ngược lại với push()), làm giảm độ dài của mảng đi 1 và trả về giá trị của phần tử bị loại bỏ. Ngoài ra còn có phương thức shift() (ngược lại với unshift()), loại bỏ phần tử ở đầu mảng. Không giống như toán tử xóa, phương thức shift() dịch chuyển tất cả các phần tử xuống vị trí bên dưới chỉ mục hiện tại của chúng.

Cuối cùng, có một phương thức splice() đa năng cho phép bạn chèn, xóa và thay thế các phần tử của mảng. Nó thay đổi giá trị của thuộc tính length và chuyển các phần tử mảng sang chỉ mục thấp hơn hoặc cao hơn nếu cần. Chúng ta sẽ xem xét tất cả các phương pháp này sau.

Mảng đa chiều

JavaScript không hỗ trợ mảng đa chiều "đúng", nhưng nó cung cấp một cách tốt để mô phỏng chúng bằng cách sử dụng mảng mảng. Để truy cập một phần tử dữ liệu trong một mảng mảng, chỉ cần sử dụng toán tử hai lần.

Ví dụ: giả sử ma trận biến là một mảng gồm nhiều mảng số. Mỗi phần tử của ma trận[x] là một mảng số. Để truy cập một số cụ thể trong một mảng, bạn có thể sử dụng biểu thức ma trận[x][y]. Dưới đây là một ví dụ cụ thể trong đó mảng hai chiều được sử dụng làm bảng nhân:

// Tạo mảng nhiều chiều var table = new Array(10); // Có 10 hàng trong bảng for(var i = 0; i

Các phương thức của lớp Array

Tiêu chuẩn ECMAScript 3 định nghĩa Array.prototype là một tập hợp các hàm thuận tiện để làm việc với mảng, có sẵn dưới dạng phương thức trên bất kỳ mảng nào. Những phương pháp này sẽ được trình bày ở các phần dưới đây.

phương thức tham gia ()

Phương thức Array.join() chuyển đổi tất cả các phần tử mảng thành chuỗi, nối chúng và trả về chuỗi kết quả. Là một đối số tùy chọn, bạn có thể truyền một chuỗi cho phương thức sẽ được sử dụng để phân tách các phần tử trong chuỗi kết quả. Nếu chuỗi phân cách không được chỉ định thì dấu phẩy sẽ được sử dụng. Ví dụ: đoạn sau dẫn đến chuỗi "1,2,3":

Var mảng = ; mảng.join(); // "1,2,3" arr.join("-"); // "1-2-3"

phương thức đảo ngược()

Phương thức Array.reverse() đảo ngược thứ tự các phần tử trong một mảng và trả về một mảng được sắp xếp lại. Hoán vị được thực hiện trực tiếp trong mảng ban đầu, tức là Phương thức này không tạo một mảng mới với các phần tử được sắp xếp lại mà thay vào đó sắp xếp lại chúng trong một mảng đã tồn tại. Ví dụ: đoạn mã sau, sử dụng các phương thức Reverse() và join(), sẽ tạo ra chuỗi "3,2,1":

Var mảng = ; arr.reverse().join(); // "3,2,1"

phương thức sắp xếp()

Phương thức Array.sort() sắp xếp các phần tử trong mảng nguồn và trả về mảng đã sắp xếp. Nếu phương thức Sort() được gọi mà không có đối số, việc sắp xếp sẽ được thực hiện theo thứ tự bảng chữ cái (các phần tử tạm thời được chuyển đổi thành chuỗi để so sánh nếu cần). Các phần tử không xác định sẽ được chuyển xuống cuối mảng.

Để sắp xếp theo thứ tự khác với thứ tự bảng chữ cái, bạn có thể chuyển hàm so sánh làm đối số cho phương thức Sort(). Hàm này thiết lập đối số nào trong hai đối số của nó sẽ đứng đầu trong danh sách được sắp xếp. Nếu đối số đầu tiên phải đứng trước đối số thứ hai thì hàm so sánh phải trả về số âm. Nếu đối số đầu tiên theo sau đối số thứ hai trong một mảng được sắp xếp thì hàm phải trả về một số lớn hơn 0. Và nếu hai giá trị tương đương nhau (nghĩa là thứ tự của chúng không quan trọng), hàm so sánh sẽ trả về 0:

Var mảng = ; mảng.sort(); // Thứ tự bảng chữ cái: 1111, 222, 33, 4 arr.sort(function(a,b) ( // Thứ tự số: 4, 33, 222, 1111 return a-b; // Trả về 0 // tùy theo thứ tự sắp xếp a và B)); // Sắp xếp theo hướng ngược lại, từ lớn nhất đến nhỏ nhất arr.sort(function(a,b) (return b-a));

Hãy lưu ý rằng việc sử dụng một hàm không tên trong đoạn mã này sẽ thuận tiện như thế nào. Chức năng so sánh chỉ được sử dụng ở đây nên không cần đặt tên cho nó.

phương thức concat()

Phương thức Array.concat() tạo và trả về một mảng mới chứa các phần tử của mảng ban đầu mà concat() được gọi và các giá trị của bất kỳ đối số nào được truyền cho concat(). Nếu bất kỳ đối số nào trong số này là một mảng thì các phần tử của nó sẽ được thêm vào mảng trả về. Tuy nhiên, cần lưu ý rằng không có phép biến đổi đệ quy một mảng các mảng thành mảng một chiều. Phương thức concat() không thay đổi mảng ban đầu. Dưới đây là một số ví dụ:

Var mảng = ; mảng.concat(4, 5); // Return arr.concat(); // Return arr.concat(,) // Return arr.concat(4, ]) // Return ]

phương thức slice()

Phương thức Array.slice() trả về một lát hoặc mảng con của mảng đã chỉ định. Hai đối số của phương thức chỉ định điểm bắt đầu và kết thúc của đoạn được trả về. Mảng được trả về chứa phần tử có số được chỉ định trong đối số thứ nhất, cộng với tất cả các phần tử tiếp theo, tối đa (nhưng không bao gồm) phần tử có số được chỉ định trong đối số thứ hai.

Nếu chỉ đưa ra một đối số, mảng trả về chứa tất cả các phần tử từ vị trí bắt đầu đến cuối mảng. Nếu bất kỳ đối số nào là âm, nó sẽ xác định số phần tử tương ứng với phần cuối của mảng. Vì vậy, đối số -1 tương ứng với phần tử cuối cùng của mảng và đối số -3 tương ứng với phần tử thứ ba của mảng tính từ cuối. Dưới đây là một số ví dụ:

Var mảng = ; mảng.slice(0,3); // Return arr.slice(3); // Return arr.slice(1,-1); // Return arr.slice(-3,-2); // Trở lại

phương thức mối nối()

Phương thức Array.splice() là một phương thức chung thực hiện việc chèn hoặc xóa các phần tử mảng. Không giống như các phương thức slice() và concat(), phương thức splice() sửa đổi mảng ban đầu mà nó được gọi. Lưu ý rằng các phương thức splice() và slice() có tên rất giống nhau nhưng thực hiện các thao tác hoàn toàn khác nhau.

Phương thức splice() có thể loại bỏ các phần tử khỏi một mảng, chèn các phần tử mới hoặc thực hiện cả hai cùng một lúc. Các phần tử mảng được dịch chuyển khi cần thiết để tạo ra một chuỗi liên tục sau khi chèn hoặc xóa.

Đối số đầu tiên của phương thức splice() chỉ định vị trí trong mảng mà việc chèn và/hoặc xóa sẽ được thực hiện. Đối số thứ hai chỉ định số phần tử cần xóa (cắt) khỏi mảng. Nếu đối số thứ hai bị bỏ qua, tất cả các phần tử mảng từ phần được chỉ định đến cuối mảng sẽ bị xóa. Phương thức splice() trả về một mảng gồm các phần tử đã bị loại bỏ hoặc (nếu không có phần tử nào bị xóa) một mảng trống.

Hai đối số đầu tiên của phương thức splice() chỉ định các phần tử mảng cần loại bỏ. Theo sau các đối số này có thể là bất kỳ số lượng đối số bổ sung nào chỉ định các phần tử sẽ được chèn vào mảng, bắt đầu từ vị trí được chỉ định trong đối số đầu tiên.

Var mảng = ; mảng.splice(4); // Return , arr = arr.splice(1,2); // Return , arr = arr.splice(1,1); // Trở lại ; mảng = mảng = ; arr.splice(2,0,"a","b"); // Trở lại ; mảng =

Phương thức push() và pop()

Các phương thức push() và pop() cho phép bạn làm việc với các mảng như thể chúng là các ngăn xếp. Phương thức push() thêm một hoặc nhiều phần tử mới vào cuối mảng và trả về độ dài mới của mảng. Phương thức pop() thực hiện thao tác ngược lại - nó loại bỏ phần tử cuối cùng của mảng, giảm độ dài của mảng và trả về giá trị mà nó đã loại bỏ. Lưu ý rằng cả hai phương pháp này đều sửa đổi mảng ban đầu thay vì tạo bản sao đã sửa đổi của mảng đó.

phương thức unshift() và shift()

Các phương thức unshift() và shift() hoạt động gần giống như push() và pop(), ngoại trừ việc chúng chèn và xóa các phần tử ở đầu mảng thay vì ở cuối mảng. Phương thức unshift() chuyển các phần tử hiện có sang các chỉ mục lớn hơn để giải phóng không gian, thêm phần tử hoặc các phần tử vào đầu mảng và trả về độ dài mới của mảng. Phương thức shift() loại bỏ và trả về phần tử đầu tiên của mảng, dịch chuyển tất cả các phần tử tiếp theo xuống một vị trí để chiếm khoảng trống ở đầu mảng.

Mảng là gì

Mảng là một kiểu dữ liệu lưu trữ các giá trị được đánh số. Mỗi giá trị được đánh số được gọi là một phần tử mảng và số mà phần tử liên kết với được gọi là chỉ mục của nó. Mảng JavaScript không được định kiểu, có nghĩa là một phần tử của mảng có thể thuộc bất kỳ loại nào và các phần tử khác nhau của cùng một mảng có thể có các kiểu khác nhau. Ngoài ra, mảng JavaScript là động, có nghĩa là không cần khai báo kích thước cố định và có thể thêm các phần tử mới bất kỳ lúc nào.

Tạo một mảng

Mảng có thể được tạo theo hai cách, cách thứ nhất là tạo mảng bằng cách sử dụng mảng chữ - dấu ngoặc vuông, bên trong có danh sách các phần tử được phân tách bằng dấu phẩy.

Var trống = ; // mảng trống var number = ; //mảng 5 phần tử số var diff = ; // mảng có 3 phần tử có kiểu khác nhau

Các giá trị không nhất thiết phải đơn giản (số hoặc chuỗi) - chúng cũng có thể là bất kỳ biểu thức nào khác, ví dụ: đối tượng bằng chữ, mảng hoặc hàm khác.

Số thứ tự = 700; var tab = , num + 1];

Cách thứ hai để tạo mảng là gọi hàm tạo Array(). Có ba cách để gọi hàm tạo Array().

Gọi một hàm tạo không có đối số:

var b = new Array();

Trong trường hợp này, một mảng trống được tạo, tương đương với một chữ trống.

Hàm tạo chỉ định rõ ràng các giá trị của n phần tử mảng:

var b = new Array(1, 3, 5, 8, "string", true);

Trong trường hợp này, hàm tạo nhận được một danh sách các đối số trở thành các phần tử của mảng mới. Các đối số được ghi vào mảng theo thứ tự chúng được chỉ định.

Phân bổ không gian để gán giá trị sau này. Điều này được thực hiện bằng cách chỉ định một số trong ngoặc đơn khi xác định một mảng:

var b = Mảng mới(5);

Phương pháp xác định mảng này liên quan đến việc phân bổ mảng một số phần tử nhất định (mỗi phần tử có giá trị không xác định) và sau đó gán các giá trị khi tập lệnh tiến triển. Biểu mẫu này thường được sử dụng để phân bổ trước một mảng nếu biết trước độ dài của nó.

Đọc, viết và thêm các phần tử mảng

Các phần tử mảng được truy cập bằng toán tử. Các phần tử mảng trong JavaScript được đánh số bắt đầu từ 0. Để có được phần tử mảng mong muốn, bạn cần chỉ ra số của nó trong ngoặc vuông.

Số biến = ; document.write(số + ", "); //phần tử đầu tiên của mảng document.write(numbers + ", "); //phần tử thứ hai của mảng document.write(numbers + ", "); //phần tử thứ ba của mảng document.write(numbers); //phần tử thứ tư của mảng

Các phần tử mảng có thể được thay đổi:

Số biến = ; số = 10; // đã thay đổi phần tử đầu tiên của mảng -

Để thêm một phần tử mảng mới, chỉ cần gán một giá trị mới:

Số biến = ; số = 7; //đã trở thành

Lưu ý: Mảng JavaScript có thể lưu trữ bất kỳ số lượng phần tử thuộc bất kỳ loại nào.

Độ dài mảng

Tất cả các mảng, cho dù được tạo bằng hàm tạo Array() hay được xác định bằng hằng mảng, đều có thuộc tính độ dài đặc biệt trả về tổng số phần tử được lưu trữ trong mảng. Vì mảng có thể có các phần tử không xác định (những phần tử có giá trị không xác định), nên một công thức chính xác hơn là thuộc tính độ dài luôn lớn hơn một chỉ số (số) lớn nhất của phần tử mảng. Thuộc tính độ dài được cập nhật tự động, vẫn chính xác khi các phần tử mới được thêm vào mảng.

Var v = mảng mới(); // v.length == 0 (không có phần tử nào được xác định) v = new Array(1,2,3); // v.length == 3 (các phần tử được xác định từ 0–2) v = ; // v.length == 2 (các phần tử 0 và 1 được xác định) document.write(v.length);

Để lấy phần tử cuối cùng của mảng, bạn cũng có thể sử dụng thuộc tính length:

Var v = ["JavaScript", "Thuộc tính", "Mảng"]; tài liệu.write(v);

Phần tử cuối cùng có chỉ số 1 nhỏ hơn độ dài của mảng, vì số đếm bắt đầu từ 0. Do đó, nếu bạn không biết chính xác số phần tử mà cần tham khảo phần tử cuối cùng của mảng thì hãy sử dụng mục: v.length - 1.

Lặp qua các phần tử mảng

Cách sử dụng phổ biến nhất của thuộc tính length là lặp qua các phần tử mảng:

Ví dụ này giả định rằng các phần tử của mảng là liền kề nhau và bắt đầu ở phần tử đầu tiên (chỉ số 0). Nếu không đúng như vậy, trước khi truy cập từng phần tử của mảng, bạn cần kiểm tra xem nó có được xác định hay không:

Var trái cây = ["táo", "chuối", "dâu", "đào"]; for(var i = 0; i

Một vòng lặp cũng có thể được sử dụng để khởi tạo các phần tử mảng:

Thanh Var = Mảng mới (10); for(var i = 0; i

Cắt ngắn và phát triển một mảng

Khi làm việc với mảng, thuộc tính length được tự động cập nhật nên chúng ta không phải lo lắng về nó. Nhưng có một điều đáng nói là thuộc tính length không chỉ có sẵn để đọc mà còn có thể viết. Nếu thuộc tính độ dài được đặt thành giá trị nhỏ hơn giá trị hiện tại, mảng sẽ bị cắt bớt theo độ dài mới (được chỉ định), mọi phần tử không nằm trong phạm vi chỉ mục mới sẽ bị loại bỏ và giá trị của chúng bị mất, ngay cả khi độ dài là sau đó được trả về, các giá trị sẽ không được khôi phục.

Var foo = ; foo.length = 1; // rút ngắn còn 1 phần tử - foo.length = 4; //khôi phục số phần tử trước đó document.write(foo); // không có giá trị trước đó

Cách đơn giản nhất để xóa mảng là: foo.length = 0.

Nếu thuộc tính độ dài được đặt lớn hơn giá trị hiện tại của nó, các phần tử không xác định mới sẽ được thêm vào cuối mảng, tăng mảng lên kích thước đã chỉ định.

Loại bỏ các phần tử mảng

Toán tử xóa ghi giá trị không xác định vào một phần tử mảng, trong khi phần tử đó vẫn tiếp tục tồn tại. Để loại bỏ các phần tử để các phần tử còn lại được chuyển sang không gian trống, bạn phải sử dụng một trong các phương thức mảng được xác định trước. Phương thức Array.shift() loại bỏ phần tử đầu tiên của mảng, pop() loại bỏ phần tử cuối cùng của mảng, splice() loại bỏ một hoặc một phạm vi phần tử ở bất kỳ đâu trong mảng. Cách sử dụng các phương pháp này sẽ được mô tả chi tiết trong chương tiếp theo.

Mảng đa chiều

Hãy nhớ lại rằng mảng JavaScript có thể chứa các mảng khác dưới dạng phần tử. Tính năng này có thể được sử dụng để tạo mảng đa chiều. Để truy cập các phần tử trong mảng mảng, bạn chỉ cần sử dụng dấu ngoặc vuông hai lần.

Ma trận Var = [ , , ]; document.write(ma trận); // phần tử trung tâm được chọn

Hãy xem những gì được viết trong ví dụ: ma trận là một mảng gồm các mảng số. Bất kỳ phần tử nào của ma trận [n] đều là một mảng số. Để truy cập một số cụ thể trong một mảng, bạn cần viết ma trận[n][n], dấu ngoặc vuông thứ hai cho biết chỉ số của phần tử của mảng bên trong.

//tương tự như mục trước - tạo bằng cách sử dụng hàm tạo var table = new Array(3); for(var i = 0; i

Mảng kết hợp

Các đối tượng có thể được sử dụng như mảng kết hợp. Một lý thuyết nhỏ - mảng kết hợp (còn gọi là bảng băm) cho phép bạn sử dụng chuỗi thay vì chỉ mục. Việc sử dụng mảng kết hợp rất giống với việc sử dụng tên thuộc tính của một đối tượng thông thường, nhưng trong trường hợp này là khi làm việc ở định dạng mảng. Vì JavaScript không có các phương thức để làm việc với mảng kết hợp nên chúng được sử dụng ít thường xuyên hơn so với các mảng thông thường, mặc dù chúng cũng có thể hữu ích trong việc lưu trữ thông tin và giúp dễ nhớ các phần tử cần truy cập hơn.

Var s_list = Đối tượng mới(); s_list["béo"] = "Béo"; s_list["nhỏ"] = "Nhỏ"; s_list["name"] = "Homer"; for (var x in s_list) //hiển thị tất cả các phần tử document.write(s_list[x] + "
");

Chúc một ngày tốt lành cho tất cả. Alexey Gulynin đang liên lạc. Trong bài viết trước chúng ta đã xem xét cấu trúc switch case trong javascript. Trong bài viết này tôi muốn cho bạn biết mảng trong Javascript là gì. Khái niệm mảng đóng vai trò quan trọng không chỉ trong Javascript mà còn trong tất cả các chương trình lập trình. Một biến, chẳng hạn như một mảng, không chứa một phần tử mà có nhiều phần tử. Cú pháp để tạo một mảng như sau:

Var mas = new Array(value1, value2,..., valueN);

Trong trường hợp này, một biến mảng mas được tạo với các giá trị được chỉ định trong ngoặc đơn. Xin lưu ý rằng mảng được tạo bằng từ khóa mới. Bạn có thể truy cập các phần tử của mảng bằng cách chỉ định tên mảng và chỉ mục mảng trong dấu ngoặc vuông. Chỉ số mảng được đặt từ 0. Ví dụ về mảng gồm 4 phần tử và hiển thị phần tử thứ 2:

var mas = new Array("privet", 1, 10, 5); document.write("Phần tử mảng thứ hai = "+mas); // số 10 sẽ được hiển thị

Nếu chúng ta đặt mas , thì "privet" sẽ được in, vì việc lập chỉ mục của mảng bắt đầu từ 0. Bây giờ chúng ta hãy tìm hiểu cách hiển thị tất cả các phần tử của một mảng. Để làm điều này bạn cần sử dụng một vòng lặp. Ngoài việc biết các vòng lặp trong Javascript, bạn cần biết thuộc tính độ dài của mảng, thuộc tính này trả về số phần tử của mảng (hay nói cách khác là độ dài của mảng). Hãy in độ dài của mảng mas:

var mas = new Array("privet", 1, 10, 5); document.write("Độ dài mảng = "+mas.length); // số 4 sẽ được hiển thị

In tất cả các phần tử mảng:

var mas = new Array("privet", 1, 10, 5); là tôi; với (i = 0; tôi< mas.length; i++) document.write(mas[i]+" ");

Cho đến nay, chúng ta đã xem xét mảng một chiều. Nói chung, mảng có thể có nhiều chiều. Điều chính bạn cần hiểu là, ví dụ, mảng hai chiều là một mảng có các phần tử là mảng. Hãy xem vấn đề này: bạn cần tạo một mảng hai chiều 3 x 3, các phần tử của mảng này do người dùng chỉ định và hiển thị mảng này. Ở đây chúng ta sẽ sử dụng toán tử nhắc để yêu cầu một số từ người dùng:

Trong trường hợp của chúng tôi, một mảng hai chiều tương ứng (ví dụ) với cấu trúc sau: mas=[,,] . Bạn có thể thấy mảng có 3 phần tử, mỗi phần tử là một mảng.

Ban đầu, nhiệm vụ của Javascript là tạo ra các trang web động. Trong thực tế, tôi chưa bao giờ sử dụng mảng hai chiều mà chỉ sử dụng mảng một chiều nên kiến thức về mảng mà bạn nhận được từ bài viết này sẽ khá đầy đủ. Trong một trong những bài viết sau tôi sẽ nói về đối tượng Array, các thuộc tính và phương thức của nó.