การวิเคราะห์สั้น ๆ ของระบบประเภทอาร์เรย์ใน JavaScript

คำก่อนหน้านี้

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

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

นอกเหนือจากวัตถุประเภทอาร์เรย์อาร์เรย์อาจเป็นประเภทที่ใช้กันมากที่สุดในจาวาสคริปต์ ยิ่งกว่านั้นอาร์เรย์ใน JavaScript นั้นค่อนข้างแตกต่างจากภาษาอื่น ๆ ส่วนใหญ่ บทความนี้จะแนะนำประเภทอาร์เรย์อาร์เรย์ใน JavaScript

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

มีสองวิธีในการสร้างอาร์เรย์: การใช้ไวยากรณ์ตัวอักษรและการใช้ตัวสร้างอาร์เรย์ ()

【ตัวอักษร】

การใช้ตัวอักษรอาร์เรย์เป็นวิธีที่ง่ายที่สุดในการสร้างอาร์เรย์ องค์ประกอบอาร์เรย์แยกต่างหากด้วยเครื่องหมายจุลภาคในวงเล็บเหลี่ยม

 var ว่างเปล่า = []; // อาร์เรย์ที่ไม่มีองค์ประกอบ var primes = [2,3,5,7,11]; // อาร์เรย์ที่มี 5 ค่า

แม้ว่าอาร์เรย์ JavaScript จะได้รับการสั่งซื้อรายการข้อมูลรวมถึงอาร์เรย์ในภาษาอื่น ๆ ซึ่งแตกต่างจากภาษาอื่น ๆ แต่ละรายการของอาร์เรย์ JavaScript สามารถเก็บข้อมูลได้ทุกประเภท

 var misc = [1.1, true, "a"]; // 3 องค์ประกอบของประเภทต่าง ๆ

ค่าในตัวอักษรอาร์เรย์ไม่จำเป็นต้องเป็นค่าคงที่พวกเขาสามารถแสดงออกใด ๆ

 var base = 1024; var table = [ฐาน, ฐาน+1, ฐาน+2, ฐาน+3];

มันสามารถมีตัวอักษรวัตถุหรือตัวอักษรอาเรย์อื่น ๆ

 var b = [[1, {x: 1, y: 2}], [2, {x: 3, y: 4}]];

หากองค์ประกอบของอาร์เรย์ยังคงเป็นอาร์เรย์อาร์เรย์หลายมิติจะเกิดขึ้น

 var a = [[1, 2], [3, 4]];

[หมายเหตุ] เมื่อใช้สัญลักษณ์ตัวเลขตัวเลขตัวสร้างอาร์เรย์จะไม่ถูกเรียก

【คอนสตรัคเตอร์】

มีสามวิธีในการเรียกตัวสร้าง

【 1 】ไม่มีพารามิเตอร์สร้างอาร์เรย์ที่ว่างเปล่า

 // วิธีนี้สร้างอาร์เรย์ที่ว่างเปล่าโดยไม่มีองค์ประกอบใด ๆ ซึ่งเทียบเท่ากับปริมาณโดยตรงของอาร์เรย์ [] var a = อาร์เรย์ใหม่ ();

【 2 】มีพารามิเตอร์ตัวเลขซึ่งใช้เพื่อระบุความยาวของอาร์เรย์

 var a = อาร์เรย์ใหม่ (10); console.log (a); // [] console.log (a [0], a.length); // undefined 10

[หมายเหตุ] หากมีพารามิเตอร์ประเภทอื่นอาร์เรย์ที่มีค่าเท่านั้นของค่านั้นจะถูกสร้างขึ้น

 var a = อาร์เรย์ใหม่ ('10 '); console.log (a); // [' 10 '] console.log (a [0], a.length); // 10 1

【 3 】เมื่อมีพารามิเตอร์หลายตัวพารามิเตอร์จะถูกแทนเป็นองค์ประกอบเฉพาะของอาร์เรย์

 var a = อาร์เรย์ใหม่ (1,2,3); console.log (a); // [1,2,3] console.log (a [0], a [1], a [2]); // 1 2 3 3

เมื่อใช้ตัวสร้างอาร์เรย์ () ผู้ให้บริการใหม่สามารถละเว้นได้

 var a1 = array (); var a2 = อาร์เรย์ (10); var a3 = อาร์เรย์ (1,2,3); console.log (a1, a2, a3); // [] [] [1,2,3]

ธรรมชาติอาร์เรย์

อาร์เรย์เป็นชุดของค่าที่จัดเรียงตามลำดับ ในสาระสำคัญอาร์เรย์เป็นวัตถุพิเศษ

 typeof [1, 2, 3] // "วัตถุ"

ความพิเศษของอาร์เรย์สะท้อนให้เห็นว่าชื่อคีย์เป็นชุดของจำนวนเต็ม (0, 1, 2 …) จัดเรียงตามลำดับ เนื่องจากชื่อคีย์ของสมาชิกอาร์เรย์ได้รับการแก้ไขอาร์เรย์ไม่จำเป็นต้องระบุชื่อคีย์สำหรับแต่ละองค์ประกอบ แต่สมาชิกแต่ละคนของวัตถุจะต้องระบุชื่อคีย์

 var arr = ['a', 'b', 'c']; console.log (object.keys (arr)); // ["0", "1", "2"] var obj = {name1: 'a', name2: 'b', name3: 'c'};

อาร์เรย์เป็นรูปแบบพิเศษของวัตถุ การเข้าถึงองค์ประกอบอาร์เรย์ที่มีวงเล็บเหลี่ยมเป็นเหมือนคุณสมบัติการเข้าถึงคุณสมบัติของวัตถุด้วยวงเล็บเหลี่ยม

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

 o = {}; // สร้างวัตถุธรรมดา o [1] = "หนึ่ง"; // ดัชนีด้วยจำนวนเต็ม // ชื่อคีย์ตัวเลขจะถูกแปลงเป็นสตริง var arr = ['a', 'b', 'c']; arr ['0'] // 'a'arr [0] //' a '

อย่างไรก็ตามมีความจำเป็นที่จะต้องแยกความแตกต่างระหว่างดัชนีอาร์เรย์และชื่อแอตทริบิวต์วัตถุ: ดัชนีทั้งหมดเป็นชื่อแอตทริบิวต์ แต่เฉพาะชื่อแอตทริบิวต์จำนวนเต็มระหว่าง 0 ~ 232-2 (4294967294) เป็นดัชนี

 var a = []; // index a ['1000'] = 'abc'; a [1000] // 'abc' // index a [1.00] = 6; a [1] // 6

[หมายเหตุ] ค่าแต่ละค่าไม่สามารถใช้เป็นตัวระบุได้ ดังนั้นสมาชิกอาเรย์สามารถแสดงได้ในวงเล็บตาราง

 var arr = [1, 2, 3]; arr [0]; // 1arr.0; // syntaxerror

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

 var a = [1,2,3]; // ชื่อแอตทริบิวต์ A [-1.23] = true; console.log (A.length); // 3 // index a [10] = 5; console.log (A.length); // 11 // ชื่อแอตทริบิวต์

อาร์เรย์กระจัดกระจาย

อาร์เรย์กระจัดกระจายเป็นอาร์เรย์ที่มีดัชนีไม่ต่อเนื่องเริ่มต้นจาก 0

【 1 】วิธีที่ตรงที่สุดในการสร้างอาร์เรย์กระจัดกระจายคือการใช้ตัวดำเนินการลบ

 var a = [1,2,3,4,5]; ลบ a [1]; console.log (a [1]); // undefinedConsole.log (1 ใน a); // false

【 2 】ค่าองค์ประกอบสามารถละเว้นได้ระหว่างเครื่องหมายจุลภาคของอาร์เรย์และอาร์เรย์เบาบางสามารถสร้างได้โดยการละเว้นค่าองค์ประกอบ

 var a = [1 ,, 3,4,5]; console.log (a [1]); // undefinedConsole.log (1 ใน a); // false

[หมายเหตุ] มีความแตกต่างระหว่างค่าองค์ประกอบที่ละเว้นและค่าองค์ประกอบที่ไม่ได้กำหนดค่า

 var a = [1 ,, 3,4,5]; console.log (a [1]); // undefinedConsole.log (1 ใน a); // falsevar a = [1, undefined, 3,4,5]; console.log (a [1]); // undefinedConsole.log

หากคุณใช้เครื่องหมายจุลภาคในตอนท้ายของอาร์เรย์มีความแตกต่างระหว่างเบราว์เซอร์ เครื่องหมายจุลภาคถูกละเว้นโดยเบราว์เซอร์มาตรฐานในขณะที่เบราว์เซอร์ IE8 เพิ่มค่าที่ไม่ได้กำหนดไว้ในตอนท้าย

 // เอาต์พุตเบราว์เซอร์มาตรฐาน [1,2] ในขณะที่เอาต์พุต IE8-Browser [1,2, undefined] var a = [1,2,]; console.log (a); // output เบราว์เซอร์มาตรฐาน 2 ในขณะที่ ie8-browser output 3Var a = [,,];

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

ความยาวอาร์เรย์

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

 [] .length // => 0: อาร์เรย์ไม่มีองค์ประกอบ ['a', 'b', 'c']. ความยาว // => 3: ดัชนีสูงสุดคือ 2 และความยาวคือ 3

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

 [,,].ความยาว; //3(array(10)).length;//10var a = [1,2,3]; console.log (A.Length); // 3Delete A [1]; console.log (A.length); // 3

ความพิเศษของอาร์เรย์ส่วนใหญ่สะท้อนให้เห็นในความจริงที่ว่าความยาวของอาร์เรย์สามารถปรับได้แบบไดนามิก:

【 1 】หากคุณกำหนดค่าให้กับองค์ประกอบอาร์เรย์และดัชนีฉันสูงกว่าหรือเท่ากับความยาวของอาร์เรย์ที่มีอยู่ค่าของแอตทริบิวต์ความยาวจะถูกตั้งค่าเป็น i+1

 var arr = ['a', 'b']; arr.length // 2arr [2] = 'c'; arr.length // 3arr [9] = 'd'; arr.length // 10arr [1000] = 'e'; arr.length // 1001

【 2 】เมื่อตั้งค่าแอตทริบิวต์ความยาวเป็นจำนวนเต็มที่ไม่เป็นลบ n เล็กกว่าความยาวปัจจุบันองค์ประกอบที่มีค่าดัชนีอาร์เรย์ปัจจุบันมากกว่าหรือเท่ากับ N จะถูกลบออกจากมัน

 A = [1,2,3,4,5]; // จากอาร์เรย์ของ 5 องค์ประกอบ A.Length = 3; // ตอนนี้ A คือ [1,2,3] A.Length = 0; // ลบองค์ประกอบทั้งหมด A คือ [] A.Length = 5; // ความยาวคือ 5 แต่ไม่มีองค์ประกอบเช่นเดียวกับใหม่

อาร์เรย์ (5)

[หมายเหตุ] วิธีที่มีประสิทธิภาพในการล้างอาร์เรย์คือการตั้งค่าคุณสมบัติความยาวเป็น 0

 var arr = ['a', 'b', 'c']; arr.length = 0; arr // []

【 3 】ตั้งค่าแอตทริบิวต์ความยาวของอาร์เรย์ให้มากกว่าความยาวปัจจุบัน ที่จริงแล้วสิ่งนี้ไม่ได้เพิ่มองค์ประกอบใหม่ในอาร์เรย์มันเพียงแค่สร้างพื้นที่ว่างในตอนท้ายของอาร์เรย์

 var a = ['a']; a.length = 3; console.log (a [1]); // undefinedConsole.log (1 ใน a); // false

หากความยาวถูกตั้งค่าเป็นค่าที่ผิดกฎหมาย (เช่นค่านอกช่วง 0--232-2) JavaScript จะรายงานข้อผิดพลาด

 // ตั้งค่าลบ []. length = -1 // rangeerror: ความยาวอาร์เรย์ที่ไม่ถูกต้อง // จำนวนองค์ประกอบอาร์เรย์มากกว่าหรือเท่ากับ 2 ถึงกำลังของ 32 []. length = math.pow (2,32) // rangeerror: ความยาวอาร์เรย์ที่ไม่ถูกต้อง //

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

 var a = []; a ['p'] = 'abc'; console.log (a.length); // 0a [2.1] = 'abc'; console.log (a.length); // 0

การสำรวจอาเรย์

วิธีที่พบบ่อยที่สุดในการวนซ้ำผ่านองค์ประกอบอาร์เรย์ที่ใช้สำหรับลูป

 var a = [1, 2, 3]; สำหรับ (var i = 0; i <a.length; i ++) {console.log (a [i]);}

แน่นอนคุณสามารถใช้งานได้สักพัก

 var a = [1, 2, 3]; var i = 0; ในขณะที่ (i <a.length) {console.log (a [i]); i ++;} var l = a.length; ในขณะที่ (l--) {console.log (a [l]);

แต่ถ้าอาร์เรย์เป็นอาร์เรย์ที่กระจัดกระจายให้ใช้ A for Loop และคุณต้องเพิ่มเงื่อนไขบางอย่าง

 // ข้ามองค์ประกอบที่ไม่มีอยู่จริง var a = [1 ,,,, 2]; สำหรับ (var i = 0; i <a.length; i ++) {ถ้า (! (i ใน a)) ดำเนินการต่อ; console.log (a [i]);}

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

 var a = [1 ,,, 2]; สำหรับ (var i ใน a) {console.log (a [i]);}

เนื่องจาก For/In Loop สามารถระบุชื่อแอตทริบิวต์ที่สืบทอดมาได้เช่นวิธีการเพิ่มลงใน array.prototype ด้วยเหตุผลนี้ไม่ควรใช้/ในลูปในอาร์เรย์เว้นแต่จะใช้วิธีการตรวจจับเพิ่มเติมเพื่อกรองคุณสมบัติที่ไม่ต้องการ

 var a = [1 ,,, 2]; ab = 'b'; สำหรับ (var i ใน a) {console.log (a [i]); // 1 2 'b'} // ข้าม ivar a = [1 ,,, 2]; ab = 'b'; ดำเนินการต่อ; console.log (a [i]); // 1 2}

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

อาร์เรย์ชั้นเรียน

วัตถุที่มีคุณลักษณะความยาวและแอตทริบิวต์จำนวนเต็มที่ไม่เป็นลบที่สอดคล้องกันเรียกว่าวัตถุคล้ายอาร์เรย์

 // การสาธิตอาร์เรย์คลาส var a = {}; var i = 0; ในขณะที่ (i <10) {a [i] = i*i; i ++;} a.length = i; var total = 0; สำหรับ (var j = 0; j <a.length; j ++)

มีวัตถุอาร์เรย์คลาสทั่วไปสามรายการ:

【 1 】อาร์กิวเมนต์วัตถุ

 // อาร์กิวเมนต์ฟังก์ชั่นวัตถุ args () {return arguments} var arraylike = args ('a', 'b'); arraylike [0] // 'a'arraylike.length // 2arraylike อินสแตนซ์ของอาร์เรย์ // false

【 2 】วัตถุที่ส่งคืนโดยเมธอด DOM (เช่น document.getElementsByTagname ())

 // องค์ประกอบ dom var elts = document.getElementsByTagname ('h3'); elts.length // 3elts อินสแตนซ์ของอาร์เรย์ // false

【 3 】สตริง

 // string 'abc' [1] // 'b''abc'.length // 3'abc' อินสแตนซ์ของอาร์เรย์ // false

[หมายเหตุ] สตริงเป็นค่าที่ไม่เปลี่ยนรูปดังนั้นเมื่อมองว่าเป็นอาร์เรย์พวกเขาจะอ่านอย่างเดียว ตัวอย่างเช่น push (), sort (), reverse (), splice () และวิธีการอาร์เรย์อื่น ๆ จะแก้ไขอาร์เรย์ พวกเขาไม่ถูกต้องบนสตริงและจะรายงานข้อผิดพลาด

 var str = 'abc'; array.prototype.foreach.call (str, ฟังก์ชัน (chr) {console.log (chr); // abc}); array.prototype.splice.call (str, 1); console.log (str);

วิธีชิ้นของอาร์เรย์จะเปลี่ยนวัตถุอาร์เรย์คลาสให้เป็นอาร์เรย์จริง

 var arr = array.prototype.slice.call (arraylike);

วิธีการอาร์เรย์ JavaScript นั้นถูกกำหนดโดยเฉพาะเป็นเรื่องทั่วไปดังนั้นจึงทำงานได้อย่างถูกต้องไม่เพียง แต่ในอาร์เรย์จริง แต่ยังรวมถึงวัตถุอาร์เรย์คลาสด้วย ใน ECMASCript5 วิธีการอาร์เรย์ทั้งหมดเป็นเรื่องทั่วไป ใน ecmascript3 วิธีทั้งหมดยกเว้น toString () และ tolocalestring () ก็เป็นเรื่องธรรมดา

 var a = {'0': 'a', '1': 'b', '2': 'c', ความยาว: 3}; array.prototype.join.call (a, '+'); // 'a+b+c'array.p rototype.slice.call (a, 0); // ['a', 'b', 'c'] array.prototype.map.call (a, function (x) {return x.touppercase ();}); // ['a', 'b', 'c']