Tập hợp được lập chỉ mục

Tập hợp được lập chỉ mục là một cấu trúc dữ liệu, trong đó các phần tử được lưu trữ và được truy cập bằng chỉ mục được đánh số. Những giá trị được lưu trữ trong một tập hợp đã lập chỉ mục là gán chỉ mục được đánh số bắt đầu từ 0, một mẫu có tên là "zero-indexing". Sau đó, bạn có thể truy cập các giá trị được lưu trữ trong tập hợp được lập chỉ mục bằng cách tham chiếu chỉ mục của chúng.

Mảng

Mảng là một vùng chứa có thể chứa 0 hoặc nhiều giá trị thuộc bất kỳ loại dữ liệu nào, bao gồm cả các đối tượng phức tạp hoặc các mảng khác. Các giá trị được lưu trữ trong một mảng là đôi khi được gọi là "phần tử" của mảng.

Tạo một mảng

Tương tự như với các kiểu dữ liệu gốc, có 2 cách tiếp cận để tạo mảng: giá trị cố định của mảng hoặc bằng cách gọi hàm khởi tạo Array() tích hợp sẵn của JavaScript cùng với new Array(). Việc chỉ định một mảng cho một biến mang lại khả năng linh động cao và có thể lặp lại để chỉ định nhiều giá trị thành một mã nhận dạng duy nhất.

Cú pháp giá trị cố định của mảng sử dụng một tập hợp dấu ngoặc ([]) bao quanh số 0 hoặc nhiều hơn giá trị dữ liệu được phân tách bằng dấu phẩy:

const myArray = [];

Cú pháp hàm khởi tạo mảng sử dụng đối tượng Array tích hợp trong JavaScript làm hàm khởi tạo có từ khoá new:

const myArray = new Array();

Cả cú pháp giá trị cố định mảng và cú pháp hàm khởi tạo mảng đều cho phép bạn điền dữ liệu cho mảng khi thông tin đó được tạo, mặc dù các cú pháp có khác nhau một chút về cách các giá trị được xác định. Cú pháp ký tự mảng sử dụng các giá trị được phân tách bằng dấu phẩy giữa dấu ngoặc, giống như mảng thu được:

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

Cú pháp hàm khởi tạo mảng lấy các giá trị được phân tách bằng dấu phẩy làm đối số, với một giá trị ngoại lệ hành vi đặc biệt:

const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]

Khi một giá trị số được truyền đến hàm khởi tạo Array, giá trị đó không được gán cho vị trí thứ 0 trong mảng thu được. Thay vào đó, một mảng sẽ được tạo bằng số chỗ trống cho các giá trị. Điều này không áp đặt bất kỳ các giới hạn của mảng. Bạn có thể thêm và xoá các mục khỏi thư viện theo cách tương tự giống như giá trị cố định mảng.

// Firefox:\
const myArray = new Array( 10 );

myArray;
> Array(10) [ <10 empty slots> ]

// Chrome:
const myArray = new Array( 10 );

myArray;
> (10) [empty × 10]

Mảng chứa các ô trống (đôi khi được gọi là "mảng thưa") là các mảng đặc biệt trường hợp. Thay vì chứa giá trị undefined hoặc null rõ ràng, hãy để trống vị trí thường, nhưng không phải lúc nào cũng được coi là giá trị undefined ở nơi khác trong ngôn ngữ.

Bạn có thể vô tình tạo một mảng thưa thớt bằng cú pháp giá trị cố định của mảng bằng cách bỏ qua một giá trị giữa dấu phẩy khi bạn tạo giá trị cố định mảng:

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

Mặc dù không được coi là một giá trị có ý nghĩa trong mọi ngữ cảnh, nhưng ô trống được tính vào tổng độ dài của mảng, có khả năng dẫn đến kết quả không mong muốn khi lặp lại qua các giá trị của mảng:

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

Hành vi này là hạn chế so với một số quyết định thiết kế ban đầu của JavaScript. Tránh sử dụng các mảng thưa trong quá trình phát triển hiện đại.

Giống như giá trị gốc, giá trị cố định của mảng kế thừa các thuộc tính và phương thức từ hàm khởi tạo tương ứng. Do mảng là một dạng đặc biệt của đối tượng, nên cú pháp giá trị cố định của mảng và Cú pháp new Array() tạo ra các kết quả giống hệt nhau về chức năng: một đối tượng mà kế thừa nguyên mẫu từ hàm khởi tạo Array.

const arrayLiteral = [];
const arrayConstructor = new Array();

typeof arrayLiteral;
> "object"

arrayLiteral;
> Array []
    length: 0
    <prototype>: Array []

typeof arrayConstructor;
> "object"

arrayConstructor;
> Array []
    length: 0
    <prototype>: Array []

Vì hai kết quả giống hệt nhau và cú pháp giá trị cố định của mảng ngắn gọn hơn và giá trị cố định, chúng tôi khuyên bạn nên luôn sử dụng cú pháp mảng giá trị thay vì Cú pháp new Array().

Truy cập các giá trị mảng

Bạn có thể truy cập các phần tử riêng lẻ bên trong mảng bằng cách sử dụng ký hiệu dấu ngoặc, a một cặp dấu ngoặc vuông ([]) theo sau mảng hoặc giá trị nhận dạng của mảng đó có chứa tham chiếu đến chỉ mục của phần tử đó:

[ "My string", "My other string" ][ 1 ];
> "My other string"

const myArray = [ "My string", 50, true ];

myArray[ 0 ];
> "My string"

myArray[ 1 ];
> 50

myArray[ 2 ];
> true

Các mảng trong JavaScript không liên kết, nghĩa là bạn không thể sử dụng một chuỗi tuỳ ý làm chỉ mục. Tuy nhiên, số liệu các giá trị dùng để truy cập vào các phần tử trong một mảng sẽ bị buộc thành một giá trị chuỗi cảnh, tức là bạn có thể sử dụng một giá trị chuỗi chỉ chứa số ký tự:

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Việc cố gắng truy cập vào một phần tử bên ngoài những phần tử được xác định trong mảng sẽ dẫn đến undefined, không phải là lỗi:

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

Huỷ cấu trúc thao tác chỉ định

Giải cấu trúc gán là một cách ngắn gọn để trích xuất một phạm vi giá trị từ các mảng hoặc đối tượng và gán chúng vào một tập hợp mã nhận dạng, một quá trình đôi khi được gọi là "giải nén" cấu trúc dữ liệu gốc, mặc dù nó không sửa đổi mảng hoặc đối tượng gốc.

Quá trình gán huỷ cấu trúc sử dụng một danh sách giá trị nhận dạng giống mảng hoặc giống đối tượng để theo dõi các giá trị. Ở hình thức đơn giản nhất, được gọi là mẫu liên kết phá cấu trúc, mỗi giá trị sẽ được giải nén khỏi mảng hoặc đối tượng và được gán cho một biến tương ứng, được khởi tạo bằng let hoặc const (hoặc var):

const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;

const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;

myFirstElement;
> "My string"

mySecondElement;
> "Second string"

myProp;
> false

mySecondProp;
> true

Dùng dấu ngoặc nhọn ({}) để huỷ cấu trúc một đối tượng và dấu ngoặc vuông ([]) để huỷ cấu trúc một mảng.

const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };

const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable

const { myElement, mySecondElement } = myArray;

myElement
> undefined

mySecondElement;
> undefined

Việc huỷ cấu trúc một mảng xảy ra theo trình tự, từ trái sang phải. Một mã nhận dạng tương ứng với phần tử của mảng có cùng chỉ mục:

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

Đây cũng là hành vi mặc định khi huỷ cấu trúc một đối tượng. Tuy nhiên, nếu các giá trị nhận dạng dùng trong quá trình gán gỡ lỗi khớp với các khoá của đối tượng thuộc tính, thì các giá trị nhận dạng đó được điền sẵn bằng thuộc tính tương ứng bất kể thứ tự chỉ định các giá trị đó:

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

Bạn có thể bỏ qua các phần tử bằng cách bỏ qua giá trị nhận dạng:

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

Cú pháp phá cấu trúc cũng cho phép bạn gán giá trị mặc định trong trường hợp phá cấu trúc giá trị là một ô trống, như trong trường hợp một mảng thưa thớt hoặc một Giá trị undefined.

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

Quá trình giải cấu trúc không ép buộc các giá trị vào các loại cụ thể. Điều này có nghĩa là giá trị "falsy", chẳng hạn như trống chuỗi ("") hoặc null, vẫn được coi là các giá trị được tách rời có ý nghĩa:

const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;

falseValue;
> false;

nullValue;
> null

zeroValue;
> 0

emptyStringValue;
> ""

emptySlot;
> true

undefinedValue;
> true

Toán tử trải rộng

Sử dụng toán tử trải rộng (...), đã ra mắt trong ES6 để mở rộng dữ liệu có thể lặp lại cấu trúc như mảng, chuỗi hoặc giá trị cố định đối tượng thành các phần tử riêng lẻ. Toán tử phân tán đứng ngay trước cấu trúc dữ liệu cần mở rộng hoặc giá trị nhận dạng của một biến chứa cấu trúc dữ liệu đó.

const myArray = [ 1, 2, 3 ];

console.log( ...myArray );
> 1 2 3

Cú pháp trải rộng dùng chủ yếu để sao chép và kết hợp các mảng:

const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];

mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Bạn chỉ có thể sử dụng cú pháp trải rộng trong các ngữ cảnh sau:

Đối với mảng và chuỗi, cú pháp trải rộng chỉ áp dụng khi không có hoặc nhiều đối số trong lệnh gọi hàm hoặc các phần tử trong một mảng đều được dự kiến. Ví dụ đầu tiên về trong phần này hoạt động vì nó truyền ...myArray dưới dạng một đối số cho phương thức console.log tích hợp sẵn.

Ví dụ: bạn không thể chỉ định dữ liệu đang được trải rộng cho một biến bên ngoài một mảng khác:

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

Nhưng bạn sao chép một mảng bằng cách trải rộng mảng ban đầu thành một giá trị cố định của mảng:

const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];

spreadArray;
> Array(3) [ 1, 2, 3 ]

Cách hợp nhất các phần tử tạo thành 2 hoặc nhiều mảng thành một mảng duy nhất:

const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];

myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Hoặc để truyền các phần tử của một mảng dưới dạng các đối số riêng lẻ trong lệnh gọi hàm:

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

Toán tử phân tán đã được mở rộng để tương thích với giá trị cố định của đối tượng trong ES2018. Tương tự như với mảng, bạn có thể sử dụng toán tử phân tán để sao chép hoặc hợp nhất đối tượng:

const myObj = { myProperty : true };
const mySecondObj = { ...myObj };

mySecondObj;
> Object { myProperty: true }

const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };

myMergedObj;
> Object { myProperty: true, additionalProperty: true }

Toán tử phân tán tạo ra "nông" sao chép. Điều này có nghĩa là tính năng này không sao chép nguyên mẫu của đối tượng gốc và không thể liệt kê các thuộc tính.

const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
    myEnumerableProp: {
        value: true,
        enumerable: true
    },
    myNonEnumerableProp: {
        value: false,
        enumerable: false
    }
});
const myNewObj = { ...myObj };

myObj;
> Object { myEnumerableProp: true, … }
    myEnumerableProp: true
    myNonEnumerableProp: false
    <prototype>: Object { protoProp: "My prototype." }

myNewObj;
> Object { myEnumerableProp: true }
    myEnumerableProp: true
    <prototype>: Object { … }

Hãy nhớ rằng mảng và đối tượng không thể dùng thay thế cho nhau. Bạn không thể trải một đối tượng vào một mảng hoặc một mảng vào một đối tượng.

Nhân viên vận hành phần còn lại

Mặc dù cú pháp của chính toán tử đó giống nhau, nhưng toán tử còn lại (...) thực hiện chức năng ngược lại dựa trên ngữ cảnh sử dụng. Thay vì mở rộng một cấu trúc dữ liệu có thể lặp lại thành các phần tử riêng lẻ, như trong chỉ định phá cấu trúc hoặc dưới dạng một tham số hàm, toán tử còn lại kết hợp vào một cấu trúc dữ liệu có thể lặp lại. Tên này xuất phát từ thực tế dùng để thu thập "những người còn lại" của một tập hợp các giá trị dữ liệu.

Khi được sử dụng cùng với thao tác gán huỷ cấu trúc, cú pháp được gọi là "thuộc tính còn lại" của bạn.

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

Khi dùng để cung cấp số lượng đối số vô hạn cho một hàm, cú pháp có tên là "thông số còn lại" cú pháp:

function myFunction( ...myParameters ) {
    let result = 0;
    myParameters.forEach( ( myParam ) => {
        result += myParam;
    });
    return result;
};

myFunction( 2, 2 );
> 4

myFunction( 1, 1, 1, 10, 5 );
> 18

myFunction( 10, 11, 25 );
> 46

%TypedArray%

Mảng được nhập là một tính năng của ES6 được thiết kế để lưu trữ dữ liệu nhị phân có cấu trúc, dành cho chẳng hạn như khi làm việc với các tệp được tải lên hoặc WebGL.

Tương tự như với Symbols (Biểu tượng), %TypedArray% hàm nội tại (thường được ghi nhận là %TypedArray% hoặc @@TypedArray để tránh bị nhầm lẫn với thuộc tính toàn cục) không phải là hàm khởi tạo trong theo nghĩa thông thường và bạn không thể gọi nó bằng new hoặc gọi nó trực tiếp. Thay vào đó, %TypedArray% đề cập đến một lớp cấp cao mẹ của cá nhân hàm dựng, mỗi hàm khởi tạo hoạt động với một định dạng dữ liệu nhị phân cụ thể. Chiến lược phát hành đĩa đơn lớp cấp cao %TypedArray% nội tại cung cấp các thuộc tính và phương thức tiện ích tất cả lớp con hàm khởi tạo %TypedArray% và thực thể của lớp đó sẽ kế thừa.

Kiểm tra kiến thức