คอลเล็กชันที่จัดทำดัชนี

คอลเล็กชันที่จัดทำดัชนีคือโครงสร้างข้อมูลที่มีการจัดเก็บองค์ประกอบและ เข้าถึงโดยใช้ดัชนีที่เรียงลำดับเลข ค่าที่เก็บไว้ในคอลเล็กชันที่จัดทำดัชนีคือ กำหนดดัชนีลำดับเลขโดยเริ่มจาก 0 ซึ่งเป็นรูปแบบชื่อ "การจัดทำดัชนีเป็นศูนย์" จากนั้นคุณจะเข้าถึงค่าที่เก็บไว้ในคอลเล็กชันที่จัดทำดัชนีได้โดยอ้างอิง ดัชนี

อาร์เรย์

อาร์เรย์คือคอนเทนเนอร์ที่เก็บค่าข้อมูลประเภทใดก็ได้เป็น 0 ค่าขึ้นไป รวมถึงออบเจ็กต์ที่ซับซ้อนหรืออาร์เรย์อื่นๆ ค่าที่เก็บไว้ในอาร์เรย์คือ ซึ่งบางครั้งเรียกว่า "องค์ประกอบ" ของอาร์เรย์

สร้างอาร์เรย์

เช่นเดียวกับประเภทข้อมูลพื้นฐาน การสร้างอาร์เรย์มี 2 วิธี ได้แก่ อาร์เรย์ลิเทอรัล หรือโดยการเรียกใช้ตัวสร้าง Array() ในตัวของ JavaScript ด้วย new Array() การกำหนดอาร์เรย์ให้กับตัวแปรจะทำให้ข้อมูลมีความคล่องตัว และวิธีกำหนดได้ หลายค่าเป็นตัวระบุตัวเดียว

ไวยากรณ์ลิเทอรัลของอาร์เรย์ใช้ชุดวงเล็บ ([]) ที่อยู่รอบ 0 หรือมากกว่า ค่าข้อมูลที่คั่นด้วยคอมมา:

const myArray = [];

ไวยากรณ์ตัวสร้างอาร์เรย์ใช้ออบเจ็กต์ Array ในตัวของ JavaScript เป็น เครื่องมือสร้างที่มีคีย์เวิร์ด new:

const myArray = new Array();

ทั้งไวยากรณ์ลิเทอรัลและตัวสร้างอาร์เรย์ของอาร์เรย์ จะให้คุณป้อนข้อมูลอาร์เรย์ด้วย ที่สร้างขึ้น แม้ว่าไวยากรณ์จะแตกต่างออกไปเล็กน้อยก็ตาม กำหนดค่าไว้ ไวยากรณ์ลิเทอรัลของอาร์เรย์ใช้ค่าที่คั่นด้วยคอมมาระหว่างค่า ซึ่งจะมีลักษณะเหมือนกับอาร์เรย์ผลลัพธ์

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

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

ไวยากรณ์ตัวสร้างอาร์เรย์ใช้ค่าที่คั่นด้วยคอมมาเป็นอาร์กิวเมนต์ โดยมีค่า 1 รายการ ข้อยกเว้นด้านลักษณะการทำงานพิเศษ

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

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

เมื่อมีการส่งค่าตัวเลขเดียวไปยังตัวสร้าง Array ค่านั้น ไม่ได้กำหนดให้กับตำแหน่งศูนย์ในอาร์เรย์ผลลัพธ์ แต่อาร์เรย์ จะสร้างขึ้นด้วยจำนวนสล็อตว่างสำหรับค่าดังกล่าว โดยไม่กำหนดว่า ในอาร์เรย์ คุณจะเพิ่มและนำรายการออกจากโฟลเดอร์ได้ด้วยวิธีเดียวกัน เช่นเดียวกับอาร์เรย์ลิเทอรัล

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

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

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

myArray;
> (10) [empty × 10]

อาร์เรย์ที่มีสล็อตว่าง (บางครั้งเรียกว่า "อาร์เรย์แบบกระทัดรัด") มีความพิเศษ กรณี แทนที่จะมีค่า undefined หรือค่า null อย่างชัดแจ้ง ให้เว้นว่างไว้ มักจะได้รับการกำหนดค่า undefined เป็นค่า undefined ในตำแหน่งอื่นๆ ของ ภาษา

คุณอาจสร้างอาร์เรย์แบบกระจัดกระจายโดยไม่ได้ตั้งใจโดยใช้ไวยากรณ์ลิเทอรัลของอาร์เรย์ ไม่ใส่ค่าระหว่างเครื่องหมายจุลภาคเมื่อคุณสร้างอาร์เรย์ลิเทอรัล

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

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

แม้จะไม่ได้รับการพิจารณาว่าเป็นค่าที่มีความหมายในทุกบริบท แต่ช่องที่ว่างเปล่า เป็นหนึ่งในความยาวรวมของอาร์เรย์ ซึ่งอาจนำ ผลลัพธ์ที่ไม่คาดคิดเมื่อทำซ้ำ ค่าของอาร์เรย์

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

myArray.length;
> 4

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

การทำงานลักษณะนี้เกิดจากการตัดสินใจออกแบบในขั้นแรกๆ ของ JavaScript หลีกเลี่ยงการใช้อาร์เรย์แบบกระจัดกระจายในการพัฒนาสมัยใหม่

เช่นเดียวกับปริพันธ์ อาร์เรย์ลิเทอรัล รับคุณสมบัติและเมธอดจากตัวสร้างที่เกี่ยวข้อง เนื่องจากอาร์เรย์เป็นรูปแบบพิเศษของออบเจ็กต์ ไวยากรณ์ลิเทอรัลของอาร์เรย์ และ ไวยากรณ์ new Array() สร้างผลลัพธ์ที่มีฟังก์ชันเหมือนกันทุกประการ: ออบเจ็กต์ที่ รับต้นแบบมาจากตัวสร้าง 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 []

เนื่องจากผลลัพธ์ทั้ง 2 รายการเหมือนกัน และไวยากรณ์ลิเทอรัลของอาร์เรย์กระชับกว่า และตามตัวอักษร เราขอแนะนำให้คุณใช้ไวยากรณ์ลิเทอรัลของอาร์เรย์เสมอแทนการใช้ ไวยากรณ์ new Array()

เข้าถึงค่าอาร์เรย์

คุณสามารถเข้าถึงแต่ละองค์ประกอบภายในอาร์เรย์โดยใช้สัญลักษณ์วงเล็บ ชุดของวงเล็บ ([]) ที่ตามหลังอาร์เรย์หรือตัวระบุที่มี ตัวเลขที่อ้างอิงถึงดัชนีขององค์ประกอบนั้นๆ

[ "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

อาร์เรย์ใน JavaScript ไม่เป็นแบบการเชื่อมโยง ซึ่งหมายความว่าคุณไม่สามารถใช้สตริงที่กำหนดเองเป็นดัชนีได้ อย่างไรก็ตาม ตัวเลข ค่าที่ใช้ในการเข้าถึงองค์ประกอบในอาร์เรย์จะถูกบังคับให้เป็นค่าสตริงที่อยู่ด้านหลัง ฉากต่างๆ ซึ่งหมายความว่าคุณสามารถใช้ค่าสตริงที่มีเฉพาะตัวเลข อักขระ:

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

myArray[ 2 ];
> true

myArray[ "2" ];
> true

การพยายามเข้าถึงองค์ประกอบที่อยู่นอกการกำหนดในอาร์เรย์ผลลัพธ์ undefined ไม่ใช่ข้อผิดพลาด:

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

myArray[ 9 ];
> undefined

การมอบหมายทำลายระบบ

การกำหนดโครงสร้างว่างเปล่าเป็นวิธีที่กระชับในการแยกช่วงของค่าจาก อาร์เรย์หรือออบเจ็กต์ และมอบหมายให้กับชุด กับตัวระบุ ซึ่งบางครั้งเรียกว่า "การแกะกล่อง" โครงสร้างข้อมูลดั้งเดิม แต่จะไม่แก้ไขอาร์เรย์หรืออ็อบเจกต์เดิม

การกำหนดการทำลายโครงสร้างใช้รายการตัวระบุที่มีลักษณะเหมือนอาร์เรย์หรือออบเจ็กต์เพื่อ ติดตามมูลค่า ในรูปแบบที่เรียบง่ายที่สุด เรียกว่า binding Pattern ทำลายโครงสร้าง แต่ละค่าจะถูกคลายการแพคข้อมูลออกจากอาร์เรย์หรืออ็อบเจกต์ และกำหนดให้กับ ตัวแปรที่ตรงกัน ซึ่งเริ่มต้นโดยใช้ let หรือ const (หรือ 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

ใช้วงเล็บปีกกา ({}) เพื่อทำลายวัตถุ และใช้วงเล็บเหลี่ยม ([]) เพื่อ ทำลายอาร์เรย์

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

การทำลายอาร์เรย์จะเกิดขึ้นตามลำดับจากซ้ายไปขวา ชิ้น ตัวระบุในการกำหนดการทำลายโครงสร้างสอดคล้องกับองค์ประกอบของ ที่มีดัชนีเดียวกัน

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

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

ซึ่งเป็นลักษณะการทำงานเริ่มต้นเมื่อทำลายโครงสร้างวัตถุด้วย อย่างไรก็ตาม หาก ตัวระบุที่ใช้ในการมอบหมายการทำลายโครงสร้างตรงกับคีย์ของออบเจ็กต์ ตัวระบุเหล่านี้จะสร้างขึ้นโดยพร็อพเพอร์ตี้ที่เกี่ยวข้อง ไม่ว่าจะระบุไว้ในลำดับใด

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

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

คุณข้ามองค์ประกอบได้โดยละเว้นตัวระบุต่อไปนี้

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

firstValue;
> 1

secondValue;
> 3

ไวยากรณ์ที่ทำลายโครงสร้างยังให้คุณกำหนดค่าเริ่มต้นได้ในกรณีที่ระบบยกเลิกการจัดโครงสร้าง เป็นช่องโฆษณาว่าง เช่นในกรณีของอาร์เรย์แบบกระทัดรัด หรือ undefined

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

firstValue;
> true

secondValue;
> "Default string."

การแยกโครงสร้างจะไม่บังคับให้ค่าเป็นประเภทที่เฉพาะเจาะจง ซึ่งหมายความว่า ค่า "falsy" เช่น ว่างเปล่า สตริง ("") หรือ null ยังคงถือเป็นค่าที่แยกโครงสร้างตามความหมาย

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

โอเปอเรเตอร์การกระจาย

ใช้โอเปอเรเตอร์การกระจาย (...) ซึ่งเริ่มใช้ใน ES6 เพื่อขยายข้อมูลซ้ำได้ เช่น อาร์เรย์ สตริง หรืออ็อบเจ็กต์ลิเทอรัลลงในเอลิเมนต์แต่ละรายการ โอเปอเรเตอร์การกระจายตามด้วยโครงสร้างข้อมูลที่จะขยายทันที หรือตัวระบุของตัวแปรที่มีโครงสร้างข้อมูลนั้น

const myArray = [ 1, 2, 3 ];

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

ไวยากรณ์ Spread จะใช้สำหรับการคัดลอกและรวมอาร์เรย์เป็นหลัก ดังนี้

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

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

คุณสามารถใช้ไวยากรณ์การกระจายเฉพาะในบริบทต่อไปนี้เท่านั้น

สำหรับอาร์เรย์และสตริง ไวยากรณ์แบบกระจายจะใช้เฉพาะเมื่อมีอาร์กิวเมนต์ 0 รายการหรือมากกว่านั้น ในการเรียกฟังก์ชันหรือองค์ประกอบในอาร์เรย์ ตัวอย่างแรกของ ไวยากรณ์โอเปอเรเตอร์ Spread ในส่วนนี้ใช้งานได้เพราะส่ง ...myArray เป็น อาร์กิวเมนต์ของเมธอด console.log ในตัว

เช่น คุณจะกําหนดข้อมูลที่จะกระจายไปยังตัวแปรภายนอกไม่ได้ อาร์เรย์อื่น:

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

แต่คุณคัดลอกอาร์เรย์โดยการกระจายอาร์เรย์เดิมลงในอาร์เรย์ลิเทอรัล ดังนี้

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

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

วิธีผสานองค์ประกอบที่ประกอบเป็นอาร์เรย์ 2 อาร์เรย์ขึ้นไปให้เป็นอาร์เรย์เดียว

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

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

หรือหากต้องการส่งองค์ประกอบของอาร์เรย์เป็นอาร์กิวเมนต์เดี่ยวในการเรียกใช้ฟังก์ชัน ให้ทำดังนี้

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

myFunction( ...myArray );
> true false

ขยายโอเปอเรเตอร์การกระจายให้ใช้งานกับ Object Literal ใน ES2018 เช่นเดียวกับอาร์เรย์ คุณสามารถใช้ตัวดำเนินการกระจายเพื่อทำซ้ำหรือผสานวัตถุได้ดังนี้

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 }

โอเปอเรเตอร์การกระจายสร้างค่า "ตื้น" สำเนา ซึ่งหมายความว่าจะไม่มีการคัดลอก ต้นแบบของวัตถุต้นฉบับและไม่สามารถแจกแจงได้ พร็อพเพอร์ตี้

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 { … }

โปรดทราบว่าอาร์เรย์และออบเจ็กต์ไม่สามารถใช้แทนกันได้ เธอทำไม่ได้หรอก กระจายออบเจ็กต์ไปยังอาร์เรย์ หรืออาร์เรย์ไปยังออบเจ็กต์

ผู้ดำเนินการ REST

แม้ว่าไวยากรณ์ของโอเปอเรเตอร์จะเหมือนกัน แต่โอเปอเรเตอร์ที่เหลือ (...) จะทำฟังก์ชันตรงข้ามตามบริบทที่ใช้ แทนที่จะเป็น การขยายโครงสร้างข้อมูลซ้ำๆ ไปยังเอลิเมนต์แต่ละรายการ ดังเช่นใน ทำลายการมอบหมายหรือในฐานะ พารามิเตอร์ฟังก์ชัน โอเปอเรเตอร์ที่เหลือจะรวม ลงในโครงสร้างข้อมูลที่สามารถทำซ้ำได้ ชื่อนี้มาจากข้อเท็จจริงที่ว่า ในการรวบรวม "ส่วนที่เหลือ" ของชุดค่าข้อมูล

เมื่อใช้กับการกำหนดการแยกโครงสร้าง ไวยากรณ์จะเรียกว่า "พร็อพเพอร์ตี้ส่วนที่เหลือ" ไวยากรณ์

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

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

myFirstElement;
> "First"

mySecondElement;
> "Second"

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

เมื่อใช้เพื่อระบุจำนวนอาร์กิวเมนต์ที่ไม่จำกัดให้กับฟังก์ชัน ไวยากรณ์เรียกว่า "พารามิเตอร์ที่เหลือ" ไวยากรณ์:

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%

อาร์เรย์ประเภทคือฟีเจอร์ ES6 ที่ออกแบบมาเพื่อจัดเก็บข้อมูลไบนารีที่มีโครงสร้าง เช่น เมื่อทำงานกับไฟล์ที่อัปโหลด หรือ WebGL

เช่นเดียวกับสัญลักษณ์ %TypedArray% ฟังก์ชันภายใน (โดยปกติจะระบุเป็น %TypedArray% หรือ @@TypedArray เพื่อไม่ให้เข้าใจผิดว่าเป็นพร็อพเพอร์ตี้สากล) ไม่ใช่ฟังก์ชันตัวสร้างใน แบบทั่วไป และคุณไม่สามารถเรียกใช้ด้วย new หรือเรียกใช้โดยตรง %TypedArray% จะหมายถึงคลาสใหญ่ระดับผู้ปกครองของบุคคลแทน ซึ่งแต่ละแบบจะทำงานกับรูปแบบข้อมูลไบนารีเฉพาะ ซูเปอร์คลาส %TypedArray% เฉพาะมีสมบัติและวิธียูทิลิตีที่ คลาสย่อยของตัวสร้าง %TypedArray% ทั้งหมดและอินสแตนซ์จะรับค่า

ตรวจสอบความเข้าใจ