คอลเล็กชันที่จัดทำดัชนีคือโครงสร้างข้อมูลที่มีการจัดเก็บองค์ประกอบและ
เข้าถึงโดยใช้ดัชนีที่เรียงลำดับเลข ค่าที่เก็บไว้ในคอลเล็กชันที่จัดทำดัชนีคือ
กำหนดดัชนีลำดับเลขโดยเริ่มจาก 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%
ทั้งหมดและอินสแตนซ์จะรับค่า
ตรวจสอบความเข้าใจ
ได้ `const myArray = [ 30, 50, 70 ];` อะไรคือ `myArray[1]` ผลตอบแทน?
70
หาก "myArray" มี 3 ค่า `myArray[9]` จะแสดงผลอะไร
Null
9
Undefined