วิธีการอาร์เรย์ใหม่ใน es6 คืออะไร?

วิธีการอาร์เรย์ใหม่: 1. from() ซึ่งสามารถแปลงวัตถุที่มีลักษณะคล้ายอาร์เรย์หรือวนซ้ำได้ให้เป็นอาร์เรย์จริง 2. of() ซึ่งสามารถแปลงชุดของค่าให้เป็นอาร์เรย์ซึ่งประกอบขึ้นเป็นข้อบกพร่อง ของตัวสร้างอาร์เรย์ Array() ; 3. find() และ findIndex() ส่งคืนองค์ประกอบอาร์เรย์แรกที่ตรงตามเงื่อนไข 4. fill() และอื่นๆ

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เข้าสู่

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 7, ECMAScript เวอร์ชัน 6, คอมพิวเตอร์ Dell G3

es6 วิธีการอาร์เรย์ใหม่

1. Array.from()

วิธีการ Array.from ใช้ในการแปลงวัตถุสองประเภทให้เป็นอาร์เรย์จริง:

• วัตถุที่คล้ายอาร์เรย์และ

• วัตถุที่ทำซ้ำได้ (รวมถึง ES6 ใหม่ ชุดโครงสร้างข้อมูลและแผนที่)

หมายความว่าตราบใดที่ เมื่อมีการปรับใช้โครงสร้างข้อมูลของอินเทอร์เฟซ Iterator Array.from จึงสามารถแปลงเป็นอาร์เรย์ได้

ในการพัฒนาจริง โดยทั่วไปสามารถใช้เพื่อแปลงคอลเลกชัน NodeList ที่ส่งคืนโดยการดำเนินการ DOM รวมถึงอาร์กิวเมนต์ภายในฟังก์ชัน

วัตถุ

ส่งผ่านพารามิเตอร์ วัตถุนั้นจะใช้ในการแปลงคลาสอาร์เรย์ให้เป็นอาร์เรย์จริง

• เพื่อลบการซ้ำซ้อน
  

const arr = [1,2,3,3,3,2,5];
console.log(Array.from(ชุดใหม่(arr))); //[1,2,3,5]
//...เอฟเฟกต์เดียวกันนี้ก็สามารถทำได้เช่นกัน console.log([...new Set(arr)]) //[1,2,3,5]

สำหรับเบราว์เซอร์ที่ไม่ได้ปรับใช้วิธีนี้ คุณสามารถใช้ วิธีการ Array.prototype.slice แทน

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()

สามารถรับพารามิเตอร์ตัวที่สองได้ ซึ่งถูกส่งผ่านไปยังฟังก์ชันเพื่อให้ได้เอฟเฟกต์ที่คล้ายกับวิธี map โดยประมวลผลแต่ละองค์ประกอบและส่งคืนอาร์เรย์ที่ประมวลผล

Array.from([1,2,3 ], item => รายการ *2) //[2,4,6]

• ความยาวของสตริงที่ส่งคืน

สามารถใช้เพื่อแปลงสตริงเป็นอาร์เรย์ จากนั้นส่งคืนความยาวของสตริง เนื่องจากสามารถจัดการอักขระ Unicode ต่างๆ ได้อย่างถูกต้อง วิธีนี้จะหลีกเลี่ยง ข้อบกพร่องของ JS ในการนับอักขระ Unicode ที่มากกว่า /uFFFF เนื่องจากฟังก์ชัน 2 อักขระ

countLength(string) {
    กลับ Array.from (สตริง) ความยาว
}

2. Array.of()

วิธีการ Array.of ใช้ในการแปลงชุดของค่าให้เป็นอาร์เรย์ ชดเชยข้อบกพร่องของตัวสร้างอาร์เรย์ Array() เนื่องจากจำนวนพารามิเตอร์ต่างกัน พฤติกรรมของ Array() จะแตกต่างกัน

//โค้ดต่อไปนี้แสดงความแตกต่าง Array.of(3);
Array.of(3, 11, 8); // [3,11,8]

อาร์เรย์ใหม่ (3); // [, , ,]
อาร์เรย์ใหม่ (3, 11, 8); // [3, 11, 8]

//วิธี Array.of สามารถจำลองได้ด้วยโค้ดต่อไปนี้

ฟังก์ชั่น ArrayOf() {
  กลับ [].slice.call (อาร์กิวเมนต์);
}

3. Find() และ findIndex() ของ array instance

find()

ส่งคืนสมาชิกอาร์เรย์ตัวแรกที่ตรงตามเงื่อนไข พารามิเตอร์ของมันคือฟังก์ชัน callback พบสมาชิกแล้วส่งคืนสมาชิกหากไม่มีสมาชิกที่ตรงตามเงื่อนไขให้ส่งคืน

ฟังก์ชัน

ที่

กำหนด ,0,5] .find((item,index, arr) => return item < 1) // 0

ตัวอย่างที่ 2

// find()
รายการ var = [1, 4, -5, 10].find(n => n < 0);
console.log(รายการ); // -5
// find ยังรองรับ var point การค้นหาที่ซับซ้อนประเภทนี้ = [
  -
    x: 10,
    ญ: 20
  -
  -
    x: 20,
    ป: 30
  -
  -
    x: 30,
    ป: 40
  -
  -
    x: 40,
    ป: 50
  -
  -
    x: 50,
    ป: 60
  -
-
point.find (ตัวจับคู่ฟังก์ชัน (จุด) {
  กลับ point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 }

findIndex()

นั้นเหมือนกับเมธอด find() เพียงส่งคืนตำแหน่งของสมาชิกอาร์เรย์ตัวแรกที่ตรงตามเงื่อนไข ไม่มีเลย มันจะคืนค่า -1

ตัวอย่างที่ 1

[1 ,2,4,15,0].findIndex((item, index,arr) => return item > 10) //3Example

2

var point = [
  -
    x: 10,
    ญ: 20
  -
  -
    x: 20,
    ป: 30
  -
  -
    x: 30,
    ป: 40
  -
  -
    x: 40,
    ป: 50
  -
  -
    x: 50,
    ป: 60
  -
-
point.findIndex (ตัวจับคู่ฟังก์ชัน (จุด) {
  กลับ point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
point.findIndex (ตัวจับคู่ฟังก์ชัน (จุด) {
  กลับ point.x % 6 == 0 && point.y % 7 == 0;
}); //1

4.

วิธีการเติม ( ) ของอินสแตนซ์อาร์เรย์ใช้ค่าที่
• กำหนด
• เพื่อเติมอาร์เรย์
• . ตำแหน่ง

// วิธีการเติมเติมอาร์เรย์ด้วยค่าที่กำหนด
var fillArray = อาร์เรย์ใหม่ (6). เติม (1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//วิธีการเติมยังสามารถยอมรับพารามิเตอร์ตัวที่สองและสาม ซึ่งใช้ในการระบุตำแหน่งเริ่มต้นและสิ้นสุดของการเติม
["a", "b", "c"].เติม(7, 1, 2);
// ['a', 7, 'c']
// โปรดทราบว่าหากประเภทที่กรอกเป็นวัตถุ ดังนั้นวัตถุที่กำหนดจะเป็นที่อยู่หน่วยความจำเดียวกัน ไม่ใช่วัตถุสำเนาลึก
ให้ arr = อาร์เรย์ใหม่ (3).fill ({
  ชื่อ: "ไมค์"
-
arr[0].name = "เบน";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

ทั้งสองวิธีสามารถค้นหา NaN ในอาร์เรย์ได้ แต่ indexOf() ใน ES5 ไม่พบ NaN 5 ทั้ง

ค่า

() ของอินสแตนซ์อาร์เรย์

ทั้งหมดใช้เพื่อสำรวจอาร์เรย์ และส่งคืนวัตถุทราเวอร์เซอร์ทั้งหมด สามารถใช้ for...of loop เพื่อสำรวจอาร์เรย์ได้

(

• )

• คือการข้ามผ่านของค่า

• คีย์

()) {
  console.log(ดัชนี);
-
// 0 1
สำหรับ (ให้องค์ประกอบของ ["a", "b"].values()) {
  console.log(องค์ประกอบ);
-
//ab
สำหรับ (ให้ [ดัชนี องค์ประกอบ] ของ ["a", "b"].entries()) {
  console.log(ดัชนี องค์ประกอบ);
-
// 0 "ก"
// 1 "ข"
วาร์ ก = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ]

6. วิธีการรวม () ส่งกลับค่าบูลีน

วิธีการนี้จะส่งคืนค่าบูลีน ระบุว่าอาร์เรย์มีค่าที่กำหนดหรือไม่

[1, 2, 3].includes(2) // true
[(1, 2, 3)].includes(4) // false

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

เพื่อชดเชยข้อบกพร่องของวิธี indexOf ที่มีความหมายไม่เพียงพอและตัดสิน NaN

[1, 23, NaN].includes(NaN)

//

วิธีการเข้ากันได้จริง:

ฟังก์ชั่นประกอบด้วย = ( () => {
    Array.prototype.includes
    	?(arr , val) => arr.includes(val)
    	:(arr , val) => arr.some(item => return item === val)
})()

7. Flat() ของอินสแตนซ์อาร์เรย์, flatMap()

• flat() ใช้เพื่อ "แผ่" อาร์เรย์ที่ซ้อนกันออกเป็นอาร์เรย์หนึ่งมิติ เมธอดนี้ส่งคืนอาร์เรย์ใหม่และไม่มีผลกระทบต่อข้อมูลต้นฉบับ พารามิเตอร์ที่ส่งผ่านแสดงถึงจำนวนเลเยอร์ที่จะแบน ค่าเริ่มต้นคือหนึ่งเลเยอร์
• flatMap() สามารถขยายได้เพียงเลเยอร์เดียวเท่านั้น วิธีการนี้จะรันฟังก์ชันกับสมาชิกแต่ละตัวของอาเรย์ดั้งเดิม (เทียบเท่ากับการรัน Array.prototype.map()) จากนั้นจึงรันเมธอด flat() บนอาเรย์ที่ประกอบด้วยค่าที่ส่งคืน เมธอดนี้ส่งคืนอาร์เรย์ใหม่โดยไม่ต้องเปลี่ยนอาร์เรย์เดิม

// flat()
  [1, 2, [3, [4, 5]]].แบน()
  // [1, 2, 3, [4, 5]]
  [1, 2, [3, [4, 5]]].แบน(2)
  // [1, 2, 3, 4, 5]
  //flatMap()
  [2, 3, 4].flatMap((x) => [x, x * 2])
  //หลังจากดำเนินการแผนที่แล้ว จะได้ [[2, 4], [3, 6], [4, 8]]
  //จากนั้นดำเนินการด้วยเมธอด flat() เพื่อให้ได้ผลลัพธ์ต่อไปนี้ // [2, 4, 3, 6, 4, 8]
  // flatMap() สามารถขยายอาร์เรย์ได้เพียงระดับเดียวเท่านั้น
  // เทียบเท่ากับ .flat()
  [1, 2, 3, 4].flatMap(x => [
    [x*2]
  -
  //หลังจากดำเนินการแผนที่แล้ว จะเป็น [[[2]], [[4]], [[6]], [[8]]]
  //จากนั้นดำเนินการด้วยเมธอด flat() เพื่อให้ได้ผลลัพธ์ดังต่อไปนี้ // [[2], [4], [6], [8]] คัดลอกโค้ด

8. copywithin() ของอาร์เรย์อินสแตนซ์

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

เพื่อรับพารามิเตอร์สามตัว:

1. เป้าหมาย (จำเป็น) เริ่มแทนที่ข้อมูลจากตำแหน่งนี้

2. เริ่มต้น (เป็นทางเลือก) เริ่มอ่านข้อมูลจากตำแหน่งนี้ ค่าเริ่มต้นคือ 0 หากเป็นตัวเลขลบแสดงว่า

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

ทั้งสามพารามิเตอร์ควรเป็นตัวเลข หากไม่ใช่ จะถูกแปลงเป็นค่าตัวเลขโดยอัตโนมัติ

[1,2,3,4,5].copywithin(0,3); /[4,5,3 ,4,5] หมายความว่าสมาชิกจากตัวห้อย 3 ถึงจุดสิ้นสุด (4,5) จะถูกคัดลอกไปยังตำแหน่งโดยเริ่มจากตัวห้อย 0 และแทนที่สมาชิกดั้งเดิม 1 และ 2