บทความนี้แนะนำ ECMASCRIPT 6 จะนำวิธีการทำงานของอาร์เรย์ใหม่มาให้เราและวิธีการใช้คุณสมบัติอาร์เรย์ใหม่เหล่านี้ในเบราว์เซอร์ที่มีอยู่
หมายเหตุ: ฉันจะใช้คำว่าตัวสร้างและคลาสสลับกัน
วิธีการเรียน
วิธีการที่อาร์เรย์มี
array. จาก (arraylike, mapfunc?, thisarg?)
ฟังก์ชั่นพื้นฐานของ array. จาก () คือการแปลงวัตถุสองประเภทเป็นอาร์เรย์
วัตถุคล้ายอาร์เรย์
วัตถุประเภทนี้มีคุณสมบัติที่มีความยาวและดัชนี ผลลัพธ์ของผู้ให้บริการ DOM เป็นของคลาสนี้เช่น document.getElementsByClassName ()
วัตถุที่ทำซ้ำได้
เมื่อรับค่าเท่านั้นองค์ประกอบเดียวเท่านั้นที่สามารถนำมาใช้ในแต่ละครั้ง อาร์เรย์สามารถวนซ้ำได้เช่นโครงสร้างอาร์เรย์ใหม่แผนที่ (แผนที่) และชุด (ตั้งค่า) ใน ECMASCRIPT
รหัสต่อไปนี้เป็นตัวอย่างของการแปลงวัตถุอาร์เรย์เป็นอาร์เรย์:
การคัดลอกรหัสมีดังนี้:
ให้ lis = document.querySelectorall ('ul.fancy li');
array.from (lis). foreach (ฟังก์ชั่น (li) {
console.log (โหนด);
-
ผลลัพธ์ของ querySelectorall () ไม่ใช่อาร์เรย์และจะไม่มีวิธีการ foreach () นี่คือเหตุผลที่เราต้องแปลงวิธีนี้เป็นอาร์เรย์ก่อนที่จะใช้
ใช้การแมปผ่าน Array. จาก ()
array.from () ยังเป็นทางเลือกสำหรับทั่วไปโดยใช้ MAP ()
การคัดลอกรหัสมีดังนี้:
ปล่อยให้ Spans = document.QuerySelectorAll ('span.name');
// map () โดยทั่วไป:
ให้ชื่อ 1 = array.prototype.map.call (Spans, s => s.textContent);
// array.from ():
ให้ชื่อ 2 = array.from (Spans, s => s.textContent);
พารามิเตอร์ที่สองในสองวิธีคือฟังก์ชันลูกศร
ในตัวอย่างนี้ผลลัพธ์ของ document.querySelectorall () เป็นวัตถุอาร์เรย์คลาสอื่นไม่ใช่อาร์เรย์ นี่คือเหตุผลที่เราไม่สามารถเรียกแผนที่ () โดยตรง ในตัวอย่างแรกเพื่อใช้ foreach () เราแปลงวัตถุอาร์เรย์คลาสเป็นอาร์เรย์ ที่นี่เราละเว้นขั้นตอนกลางผ่านวิธีการทั่วไปและอาเรย์สองพารามิเตอร์จาก ()
รู
Array.From () ไม่สนใจองค์ประกอบที่หายไป - หลุมในอาร์เรย์ซึ่งจะถือว่าเป็นองค์ประกอบที่ไม่ได้กำหนด
การคัดลอกรหัสมีดังนี้:
> array.from ([0 ,, 2])
[0, ไม่ได้กำหนด, 2]
ซึ่งหมายความว่าคุณสามารถใช้ array.from () เพื่อสร้างหรือเติมอาร์เรย์:
การคัดลอกรหัสมีดังนี้:
> array.from (อาร์เรย์ใหม่ (5), () => 'a')
['a', 'a', 'a', 'a', 'a', 'a']
> array.from (อาร์เรย์ใหม่ (5), (x, i) => i)
[0, 1, 2, 3, 4]
หากคุณต้องการเติมอาร์เรย์ด้วยค่าคงที่แล้ว array.prototype.fill () (ดูด้านล่าง) จะเป็นตัวเลือกที่ดีกว่า วิธีแรกคือสองวิธีของตัวอย่างข้างต้น
จาก () ในคลาสย่อยอาร์เรย์ (อาร์เรย์)
สถานการณ์การใช้งานอื่นสำหรับ array.from () คือการแปลงอินสแตนซ์ของวัตถุอาร์เรย์หรือวัตถุที่วนซ้ำเป็นคลาสย่อยอาร์เรย์ หากคุณสร้างอาร์เรย์ย่อย myArray และต้องการแปลงวัตถุประเภทนี้เป็นอินสแตนซ์ของ myArray คุณสามารถใช้ myArray.from () เหตุผลที่สามารถใช้สิ่งนี้ได้คือใน ECMASCript 6 Constructors จะสืบทอด (ตัวสร้างคลาสหลักคือต้นแบบของตัวสร้างคลาสย่อย)
การคัดลอกรหัสมีดังนี้:
คลาส MyArray ขยายอาร์เรย์ {
-
-
ให้ instanceofmyarray = myarray.from (aniterable);
คุณสามารถรวมฟังก์ชั่นนี้เข้ากับการแมปเพื่อดำเนินการ MAP ให้เสร็จสมบูรณ์ซึ่งคุณควบคุมตัวสร้างผลลัพธ์:
การคัดลอกรหัสมีดังนี้:
// จาก () กำหนดตัวสร้างผลลัพธ์ผ่านตัวรับสัญญาณ
// (ในกรณีนี้ MyArray)
ให้ instanceofmyarray = myarray.from ([1, 2, 3], x => x * x);
// map (): ผลลัพธ์เป็นอินสแตนซ์ของอาร์เรย์เสมอ
ให้ instanceofarray = [1, 2, 3] .map (x => x * x);
array.of (... รายการ)
หากคุณต้องการแปลงชุดค่าเป็นอาร์เรย์คุณควรใช้ข้อความต้นฉบับอาร์เรย์ (ตัวอักษรอาร์เรย์) โดยเฉพาะอย่างยิ่งเมื่อมีเพียงค่าเดียวและเป็นตัวเลขตัวสร้างของอาร์เรย์จะถูกโจมตี สำหรับข้อมูลเพิ่มเติมโปรดดู
การคัดลอกรหัสมีดังนี้:
> อาร์เรย์ใหม่ (3, 11, 8)
[3, 11, 8]
> อาร์เรย์ใหม่ (3)
-
> อาร์เรย์ใหม่ (3.1)
Rangeerror: ความยาวอาร์เรย์ที่ไม่ถูกต้อง
ดังนั้นหากเราต้องการแปลงชุดค่าเป็นอินสแตนซ์ของโครงสร้างย่อยเราควรทำอย่างไร? นี่คือค่าของ array.of () (จำไว้ว่า subconstructor อาร์เรย์จะได้รับวิธีการอาร์เรย์ทั้งหมดรวมถึง () แน่นอน)
การคัดลอกรหัสมีดังนี้:
คลาส MyArray ขยายอาร์เรย์ {
-
-
console.log (myarray.of (3, 11, 8) อินสแตนซ์ของ myarray); // จริง
console.log (myarray.of (3) .length === 1); // จริง
array.of () จะค่อนข้างสะดวกในการห่อค่าในอาร์เรย์โดยไม่มีวิธีแปลก ๆ ในการจัดการอาร์เรย์ () แต่ยังให้ความสนใจกับ array.prototype.map () มีหลุมอยู่ที่นี่:
การคัดลอกรหัสมีดังนี้:
> ['A', 'B']. แผนที่ (array.of)
[['A', 0, ['A', 'B']],
['B', 1, ['A', 'B']]]
> ['a', 'b']. แผนที่ (x => array.of (x)) // ดีกว่า
[['A'], ['B']]
> ['a', 'b']. แผนที่ (x => [x]) // ดีที่สุด (ในกรณีนี้)
[['A'], ['B']]
อย่างที่คุณเห็นแผนที่ () จะผ่านพารามิเตอร์สามตัวในการโทรกลับ สองคนสุดท้ายมักถูกมองข้าม (รายละเอียด)
วิธีการต้นแบบ
มีวิธีการใหม่มากมายสำหรับอินสแตนซ์ของอาร์เรย์
การทำซ้ำอาร์เรย์
วิธีการต่อไปนี้จะช่วยให้การทำซ้ำเสร็จในอาร์เรย์:
การคัดลอกรหัสมีดังนี้:
array.prototype.entries ()
array.prototype.keys ()
array.prototype.values ()
แต่ละวิธีข้างต้นจะส่งคืนสตริงของค่า แต่จะไม่ถูกส่งคืนเป็นอาร์เรย์ พวกเขาจะแสดงทีละคนผ่านตัววนซ้ำ ลองดูตัวอย่าง (ฉันจะใส่เนื้อหาของตัววนซ้ำในอาร์เรย์โดยใช้ array.from ()):
การคัดลอกรหัสมีดังนี้:
> array.from (['a', 'b'] .keys ())
[0, 1]
> array.from (['a', 'b'] .values ())
['A', 'B']
> array.from (['a', 'b'] .entries ())
[[0, 'a'],
[1, 'B']]
คุณสามารถรวมรายการ () และสำหรับลูปของ Ecmascript 6 เพื่อถอดชิ้นส่วนวัตถุซ้ำออกเป็นคู่คีย์-ค่า:
การคัดลอกรหัสมีดังนี้:
สำหรับ (ให้ [ดัชนี, elem] ของ ['a', 'b']. รายการ ()) {
console.log (ดัชนี, elem);
-
หมายเหตุ: รหัสนี้สามารถทำงานได้ในเบราว์เซอร์ Firefox ล่าสุด T Firefox
ค้นหาองค์ประกอบอาร์เรย์
array.prototype.find (เพรดิเคต, thisarg?) ส่งคืนองค์ประกอบแรกที่ตรงกับฟังก์ชั่นการโทรกลับ หากไม่มีองค์ประกอบที่เป็นไปตามเงื่อนไขมันจะกลับมาที่ไม่ได้กำหนด ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
> [6, -5, 8] .find (x => x <0)
-5
> [6, 5, 8] .find (x => x <0)
ไม่ได้กำหนด
array.prototype.findindex (Predicate, thisarg?)
ส่งคืนดัชนีขององค์ประกอบแรกที่ตรงกับฟังก์ชั่นการโทรกลับ หากไม่พบองค์ประกอบที่น่าพอใจ -1 จะถูกส่งคืน ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
> [6, -5, 8] .FindIndex (x => x <0)
1
> [6, 5, 8] .FindIndex (x => x <0)
-1
ทั้งสองวิธีค้นหา* ไม่สนใจหลุมนั่นคือพวกเขาไม่ได้ให้ความสนใจกับองค์ประกอบที่ไม่ได้กำหนด ลายเซ็นฟังก์ชั่นความสมบูรณ์ของการโทรกลับคือ:
เพรดิเคต (องค์ประกอบ, ดัชนี, อาร์เรย์)
ค้นหา NAN ผ่าน FindIndex ()
array.prototype.indexof () มีข้อ จำกัด ที่รู้จักกันดีนั่นคือมันไม่สามารถหาได้ เพราะมันใช้ตัวตน (===) เพื่อค้นหาองค์ประกอบที่ตรงกัน:
การคัดลอกรหัสมีดังนี้:
> [Nan] .indexof (Nan)
-1
การใช้ findIndex () คุณสามารถใช้ object.is () ซึ่งจะไม่ทำให้เกิดปัญหาดังกล่าว:
การคัดลอกรหัสมีดังนี้:
> [NAN] .FindIndex (y => object.is (nan, y))
0
นอกจากนี้คุณยังสามารถใช้วิธีทั่วไปในการสร้างฟังก์ชั่นผู้ช่วย elemis ():
การคัดลอกรหัสมีดังนี้:
> ฟังก์ชั่น elemis (x) {return object.is.bind (วัตถุ, x)}
> [Nan] .FindIndex (Elemis (Nan))
0
array.prototype.fill (ค่าเริ่มต้น? จบลง?)
ใช้ค่าที่กำหนดเพื่อเติมอาร์เรย์:
การคัดลอกรหัสมีดังนี้:
> ['A', 'B', 'C']. เติม (7)
[7, 7, 7]
หลุมจะไม่ได้รับการรักษาพิเศษใด ๆ :
การคัดลอกรหัสมีดังนี้:
> อาร์เรย์ใหม่ (3) .fill (7)
[7, 7, 7]
นอกจากนี้คุณยังสามารถ จำกัด การเริ่มต้นและจุดสิ้นสุดของการเติม:
การคัดลอกรหัสมีดังนี้:
> ['A', 'B', 'C']. เติม (7, 1, 2)
['A', 7, 'C']
ฉันจะใช้วิธีอาร์เรย์ใหม่ได้เมื่อใด
มีวิธีการบางอย่างที่สามารถใช้ในเบราว์เซอร์