รูปแบบจะถูกแปลงเป็นอาร์เรย์จริง
มาพูดถึงสถานการณ์การใช้งานก่อน ใน JS เราจำเป็นต้องใช้งาน DOM บ่อยครั้งเช่นการได้รับแท็กอินพุตของทุกหน้าและการค้นหาปุ่มองค์ประกอบประเภทจากนั้นลงทะเบียนเหตุการณ์คลิกสำหรับปุ่มนี้ เราอาจทำสิ่งนี้
var inputobjs = document.getElementByTagname ('input'); สำหรับ (var i = 0; i <inputobjs.length; i ++) {ถ้า (inputobjs [i] .type === 'ปุ่ม') {inputobjs [i] .onclick = function () {return;ไม่มีปัญหาในการเขียนด้วยวิธีนี้ แต่เรารู้ว่าวิธีการหลายวิธีในการใช้งานอาร์เรย์นั้นดีกว่าลูปมากเช่นวิธีการ foreach ของ ES5 นั้นมีประโยชน์มาก แต่สามารถใช้โดยตรงได้หรือไม่? ทำไม่ได้ เนื่องจากคอลเลกชันวัตถุ DOM ไม่ใช่ประเภทอาร์เรย์อาร์เรย์อย่างแท้จริงมันจะทำให้เกิดข้อผิดพลาดหากคุณใช้โดยตรง
var inputobjs = document.getElementsByTagname ('input'); inputobjs.foreach (); //inputobjs.foreach ไม่ใช่ฟังก์ชันอย่างไรก็ตามเรื่องนี้เรายังสามารถใช้มันได้ เราไม่สามารถใช้งานได้โดยตรงหรือโดยอ้อม เพียงใช้ฟังก์ชั่นการแอบอ้างวัตถุ JS ที่ทรงพลัง
var inputobjs = document.getElementsByTagname ('input'); console.info (inputobjs); // [] ความยาว: 0__proto__: htmlcollectionconsole.info ([]. slice.call (inputobjs)); // [] ความยาว: 0__proto__: อาร์เรย์ [0]ด้วยวิธีนี้หลังจากแปลงเป็นอาร์เรย์จริงคุณสามารถโทรหาวิธีอาร์เรย์ได้ตามต้องการ วิธีนี้เป็นไปได้อย่างแน่นอน แต่ก็ไม่ง่ายที่จะเข้าใจและเป็น "Twirl" เกินไป ES6 ให้วิธีการที่ง่ายกว่าและตรงกว่านั้นซึ่งใช้งานง่ายมาก: ใช้งานง่ายมาก:
var inputobjs = document.getElementsByTagname ('input'); console.info (inputobjs); // [] ความยาว: 0__proto__: htmlcollectionConsole.info (array.from (inputobjs)); // [] ความยาว: 0__proto__: อาร์เรย์ [0]ผลที่ได้นั้นเหมือนกัน แต่มีความเหมาะสมมากกว่าและเข้าใจง่ายกว่า ใช้งานไม่ได้หรือไม่ แน่นอนว่าสิ่งเหล่านี้ไม่เพียงพอ ไม่เพียง แต่ประเภทข้อมูลใด ๆ ของอาร์เรย์คลาสจะถูกแปลงเป็นอาร์เรย์โดยใช้วิธีนี้ แต่ผลกระทบของประเภทต่าง ๆ จะแตกต่างกัน การทดสอบมีดังนี้:
ให้ str = 'google'; console.log (array.from (str)); // ["g", "o", "o", "o", "g", "l", "e"] ให้ num = 234; console.log (array.from (num)); // [] ให้ bol = false; console.log (array.from (bol)); ให้ obj = {foo: 'foo', bar: 'bar'}; console.log (array.from (obj)); // [] ให้ superobj = {0: 'foo', 1: 'bar', ความยาว: 2}; console.log (array.from (superobj)); // ["foo", "bar"]นี่คือผลลัพธ์ของการเรียกใช้วิธีนี้โดยชนิดข้อมูลที่แตกต่างกัน เป็นที่น่าสังเกตว่าสตริงและวัตถุพิเศษบางอย่างสามารถแปลงเป็นอาร์เรย์ที่มีเนื้อหาได้ วัตถุพิเศษอ้างถึงวัตถุที่มีเนื้อหาจัดเรียงตามคู่คีย์ค่าตัวเลขและมีแอตทริบิวต์ความยาว วัตถุชนิดนี้สามารถใช้สำหรับลูปและสตริงยังสามารถใช้สำหรับลูปเพื่อรับตัวละครแต่ละตัวดังนั้นมันจะเดือดลงไปหนึ่งประโยค การใช้วิธีจากวิธีการที่สามารถใช้ For Loop เพื่อเอาต์พุตเนื้อหาไม่ใช่อาร์เรย์ที่ว่างเปล่า ที่นี่ฉันอยากจะเตือนคุณว่าเพื่อนที่ใช้ jQuery สามารถให้ความสนใจกับโครงสร้าง jQuery ที่ส่งคืนเมื่อคุณใช้ตัวเลือกเพื่อเลือกองค์ประกอบหรือไม่ ในความเป็นจริงมันเป็นโครงสร้างสุดท้ายในตัวอย่างของเรา สำหรับรายละเอียดโปรดดูบทความชุดวิเคราะห์ซอร์สโค้ด jQuery ของฉัน
ของค่าแปลงเป็นอาร์เรย์
มีสองวิธีในการสร้างอาร์เรย์หนึ่งคือตัวสร้าง:
ให้ arr = อาร์เรย์ (1,2,3);
อีกประการหนึ่งคือการสร้างตัวอักษรที่ใช้กันมากที่สุด:
ให้ arr = [1,2,3];
วิธีการ array.of เป็นส่วนเสริมของวิธีแรกและการใช้งานมีดังนี้:
console.log (array.of (1,2,3)); // [1,2,3]
ดูเหมือนว่าจะมีผลเช่นเดียวกับวิธีการก่อสร้างดังนั้นทำไมวิธีนี้จึงยังจำเป็น ดูตัวอย่างต่อไปนี้เพื่อทำความเข้าใจ:
console.log (array ()); // [[likeconsole.log(array(1)); // [ouddendefined likeconsole.log(array(1,2)); // [1,2]
ในตัวอย่างนี้จำนวนพารามิเตอร์แตกต่างกันไปตามความหมาย เมื่อมีพารามิเตอร์เพียงหนึ่งพารามิเตอร์พารามิเตอร์จะแสดงองค์ประกอบที่แสดงด้วยความยาว หากมีพารามิเตอร์มากกว่า 1 พารามิเตอร์มันจะทำให้เกิดความสับสน อย่างไรก็ตามไม่มีปัญหานี้กับเมธอดอาร์เรย์เนื่องจากองค์ประกอบที่แสดงโดยพารามิเตอร์ของมันจะถูกแสดงเสมอ:
console.log (array.of ()); // [[likeconsole.log(array.of(1)); // [[[1 likeconsole.log(array.of(1,2)); // [1,2]
Copywithin Array การเปลี่ยนสำเนาข้อมูลภายในอาร์เรย์
ฟังก์ชั่นหลักของวิธี Copywithin คือการแทนที่ค่าภายในของอาร์เรย์ วิธีนี้ยอมรับพารามิเตอร์สามพารามิเตอร์ระบุตำแหน่งการคัดลอกเริ่มต้นตำแหน่งการคัดลอกปลายและตำแหน่งการแทรก ตัวอย่างมีดังนี้:
[1, 2, 3, 4, 5] .copywithin (0, 3) // [4, 5, 3, 4, 5] // คัดลอกบิต 3 ถึงบิต 0 [1, 2, 3, 4, 5] .Copywithin (0, 3, 4) // [4, 2, 3, 4, 5] 5] .CopyWithIn (0, -2, -1) // [4, 2, 3, 4, 5] // คัดลอกบิต 3 ถึงบิต 0 []. copywithin.call ({ความยาว: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, ความยาว: 5} // บิต 2 3, 4, 5]); i32a.copywithin (0, 2); // int32Array [3, 4, 5, 4, 5] // สำหรับแพลตฟอร์มที่ไม่มีวิธีการพิมพ์ของ TypedArray // วิธีการเขียนต่อไปนี้ [] 3, 3, 3, 3, 3, 3, 4, 4 4, 5]ข้างต้นคือวิธีการขยายอาร์เรย์ใน ES6 ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!