สรุป JavaScript ของ 18 วิธีอาร์เรย์ที่ใช้กันทั่วไป

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

forEach()

จะไม่เปลี่ยนอาร์เรย์ดั้งเดิม

คือฟังก์ชัน พารามิเตอร์อย่างเป็นทางการตัวแรกของฟังก์ชันที่ส่งผ่านภายในคือค่าของแต่ละรายการในอาร์เรย์รายการ และ ประการที่สองคือดัชนีหมายเลขดัชนี ค่าส่งคืนไม่ได้กำหนดไว้
ตัวอย่างการรันมีดังนี้:

เอาต์พุตคอนโซล

filter() method

วิธีการ filter() เป็นวิธีในการกรองอาร์เรย์ พารามิเตอร์ที่ส่งผ่านจะเหมือนกับวิธี forEach แต่ค่าที่ส่งคืนจะเป็นอาร์เรย์ แอปพลิเคชันจริงคือการกรองอาร์เรย์ที่ตรงตามเงื่อนไขออก ข้อมูลที่ได้รับ
ตัวอย่างการรันมีดังนี้:

เอาต์พุตคอนโซลจะเป็นดังนี้:

เมธอด map()

พารามิเตอร์ที่ส่งผ่านเมธอด map() ก็เหมือนกับข้างบนเช่นกัน และค่าที่ส่งคืนก็เป็นอาร์เรย์ใหม่เช่นกัน เมธอด map() สามารถทำการประมวลผลแบบเดียวกันในแต่ละรายการของอาร์เรย์ ตัวอย่างมีดังนี้:

เอาต์พุตคอนโซล:

เมธอด findIndex() เมธอด

findIndex() จะส่งกลับหมายเลขดัชนีของรายการแรกในอาร์เรย์ที่ตรงตามเงื่อนไขตามชื่อ หากไม่พบ ก็จะส่งกลับ -1 พารามิเตอร์ที่ส่งผ่านจะเหมือนกับด้านบน และตัวอย่างที่กำลังรันอยู่จะเป็นดังนี้:

ให้ arr = [1, 3, 3, 4, 5, 6, 7]
//findIndex method ส่งคืนหมายเลขดัชนีของรายการแรกที่ตรงตามเงื่อนไข หากไม่พบ ให้คืนค่า -1
const res = arr.findIndex((รายการ) => รายการ > 5)
console.log(res)

ผลลัพธ์เอาต์พุตคอนโซล:

find() วิธีการ

find() วิธีการส่งคืนรายการแรกที่พบที่ตรงตามเงื่อนไข ตัวอย่างการรันมีดังนี้:

ให้ arr = [1, 3, 3, 4, 5, 6, 7]
//find() ค้นหารายการและส่งกลับรายการแรกที่ตรงตามเงื่อนไข หากพบจะส่งคืนรายการที่ไม่ได้กำหนด
const res2 = arr.find((รายการ) => {
  คืนสินค้า > 5
-

console.log(res2)

มีดังนี้:

some() method

พารามิเตอร์ที่ส่งผ่านโดย some() method จะเหมือนกับค่าที่ส่งคืนเป็นค่า Boolean ตราบใดที่พบว่าตรงตามเงื่อนไขก็จะคืนค่าจริงตามตัวอย่างดังต่อไปนี้ :

ให้ arr = [1, 3, 3, 4, 5, 6, 7]
//บางวิธีคืนค่าบูลีน const bl = arr.some((item) => {
  คืนสินค้า > 5
-
console.log(bl)

every() method

พารามิเตอร์ที่ส่งผ่านโดย every() method จะเหมือนกับค่าที่ส่งคืนเป็นค่า Boolean แต่แต่ละรายการจะต้องตรงตามเงื่อนไขจึงจะคืนค่า true ตามตัวอย่างดังนี้:

ให้ arr = [1 , 3, 3, 4, 5, 6, 7]
//every() ส่งกลับค่าบูลีนที่ต้องผ่านเงื่อนไขการกรองก่อนที่จะส่งกลับค่าจริง
const bl2 = arr.every((ค่าปัจจุบัน) => {
  กลับค่าปัจจุบัน < 10
-
console.log(bl2)

ฟังก์ชั่นการเหนี่ยวนำลด ()

พารามิเตอร์ตัวแรกในฟังก์ชันลด () คือฟังก์ชัน พารามิเตอร์ตัวที่สองคือประเภทของผลรวมตัวแปรชั่วคราว ฟังก์ชันพารามิเตอร์ตัวแรกมีสี่พารามิเตอร์ แต่พารามิเตอร์แรกที่ใช้กันทั่วไปคือสะสมตัวแปรชั่วคราว (ส่งคืน คือค่านี้) รายการพารามิเตอร์ที่สอง ตัวที่สามคือดัชนี และตัวที่สี่คืออาร์เรย์เอง ตัวอย่างโค้ดมีดังนี้

ให้ arr = [1, 3, 3, 4, 5, 6, 7]
//reduce() ฟังก์ชั่นการเหนี่ยวนำ const PreviousValue = 0
const arrSum = arr.reduce((previousValue, currentValue) => {
  ส่งกลับค่าก่อนหน้า + ค่าปัจจุบัน
}, 0)

console.log(arrSum)

จะเป็นดังนี้:

concat() Array splicing

concat() ประกบสองอาร์เรย์และส่งกลับอาร์เรย์ใหม่ที่เชื่อมต่อกัน ไม่สามารถเชื่อมต่ออาร์เรย์หลายมิติ (อาร์เรย์ภายในอาร์เรย์) ได้
ตัวอย่างโค้ดมีดังนี้

ให้ arr = [1, 3, 3, 4, 5, 6, 7]
 //concat เชื่อมต่อสองอาร์เรย์เข้าด้วยกันและส่งกลับอาร์เรย์ใหม่
 const newArr3 = [2, 5, 5, 6, 6, 8]
 const concatArr = arr.concat (newArr3)
 console.log(concatArr)

วิธีการเปลี่ยนอาร์เรย์เดิม

push()/unshift()

วิธีการ push()/unshift() คือการเพิ่มองค์ประกอบที่ส่วนท้ายและด้านหน้าของอาร์เรย์ตามลำดับ และค่าที่ส่งคืนคือความยาวของอาร์เรย์ใหม่

// วิธีการประมวลผลอาเรย์จะเปลี่ยนไป
อาร์.พุช(1)
console.log (อาร์)
console.log (อาร์)
const a = Arr.unshift(1)
console.log(a)

ผลลัพธ์เอาต์พุตคอนโซลจะเป็นดังนี้:

pop()/shift()

ทั้งสองวิธีนี้ pop() จะลบค่าสุดท้ายของอาร์เรย์ และ shift() จะลบค่าของรายการแรกของอาร์เรย์ ค่าที่ส่งคืนคือรายการที่ถูก

ลบ
console.log(arr)
arr.กะ(1)

console.log(arr)

จะเป็นดังนี้:

sort()/reverse()

วิธีการ sort() กำลังเรียงลำดับ พารามิเตอร์ภายในคือฟังก์ชัน (a, b){ return a - b } คุณสามารถควบคุมลำดับการเรียงลำดับจากมากไปน้อยได้ ฟังก์ชั่นอยู่ในลำดับจากน้อยไปหามาก หากพารามิเตอร์การส่งคืนภายใน a - b เรียงลำดับจากมากไปน้อย การส่งคืน a + b จะเรียงลำดับจากน้อยไปมาก
Reverse() เป็นการพลิกอาร์เรย์ กล่าวคือ การจัดเรียงองค์ประกอบของอาร์เรย์ในลำดับย้อนกลับ ตัวอย่างโค้ดมีดังนี้

ให้ arr = [1, 3, 3, 4, 5, 6, 7]arr.sort( (ก, ข) => {
  กลับ - b})console.log(arr)arr.reverse()console.log(arr)

splice()

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

ให้ arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

flat()

อื่นๆ

flat() ใช้ในการแผ่อาร์เรย์หลายมิติ พารามิเตอร์ที่ส่งเข้ามาคือความลึกของอาร์เรย์ซึ่งอาจเป็นค่าอนันต์ได้ ซึ่งหมายความว่าความลึกของอาร์เรย์จะไม่มีที่สิ้นสุด ตัวอย่างโค้ดมีดังนี้ :

const Arr2 = [
  [1, 2]
  [ยี่สิบสาม]
  [4, 5]
  [5, 6],]console.log(Arr2.flat(Infinity))

ผลลัพธ์เอาต์พุตคอนโซล:

fill()

สามารถเติมอาร์เรย์ได้: วิธีการเขียน: Array.fill(1, 2, 4) เติมอาร์เรย์ด้วย 1 โดยเริ่มจากองค์ประกอบที่มีค่าดัชนี 2 เริ่มต้นด้วยหมายเลขดัชนีขององค์ประกอบที่เริ่มต้นจาก 4 โดยไม่รวม ค่าดัชนีคือ 4 องค์ประกอบ องค์ประกอบที่เติมจะเขียนทับองค์ประกอบดั้งเดิมที่สอดคล้องกับหมายเลขดัชนี
ตัวอย่างโค้ดจะเป็นดังนี้:

const Arr2 = [
  [1, 2]
  [ยี่สิบสาม]
  [4, 5]
  [5, 6],]console.log(Arr2.fill(1, 0, 4))

ผลลัพธ์คอนโซลเอาต์พุต: