สรุปและแบ่งปันฟังก์ชันการทำงานของอาร์เรย์ JavaScript

Array Advanced

นำเสนอแนวคิดพื้นฐานของอาร์เรย์และฟังก์ชันการทำงานขององค์ประกอบอาร์เรย์อย่างง่าย ที่จริงแล้ว อาร์เรย์มีฟังก์ชันเพิ่มเติมอีกมากมาย

push , pop , shift และ unshift เป็นฟังก์ชันที่ทำงานบนปลายทั้งสองของอาร์เรย์ ตามที่ได้กล่าวไว้ข้างต้นและจะไม่ทำซ้ำในบทความนี้

การลบองค์ประกอบ (วิธีการวัตถุ)

ได้รับการแนะนำโดยย่อในบทความที่แล้ว อาร์เรย์เป็นวัตถุพิเศษ ดังนั้นเราจึงสามารถลองใช้วิธีการลบแอตทริบิวต์ของวัตถุ: delete

ตัวอย่างเช่น:

la arr = [1,2,3,4,5];delete arr[2];console.log(arr);

ผลลัพธ์การเรียกใช้โค้ดจะเป็นดังนี้:

ให้ความสนใจกับตำแหน่งสีเหลืองในภาพ แม้ว่าองค์ประกอบจะถูกลบไปแล้ว แต่ความยาวของอาร์เรย์ยังคงเป็น 5 และยังมี空เพิ่มเติมในตำแหน่งที่ถูกลบ หากเราเข้าถึงองค์ประกอบด้วยดัชนี 2 เราจะได้ผลลัพธ์ดังต่อไปนี้:

สาเหตุของปรากฏการณ์นี้คือ delete obj.key จะลบค่าที่เกี่ยวข้องผ่าน key กล่าวคือ delete arr[2] จะลบคู่คีย์-ค่า 2:3 ในอาร์เรย์ เมื่อเราเข้าถึงตัวห้อย 2 มันจะ undefined .

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

ในเวลานี้ เราต้องการเมธอด splice()

splice()

จำเป็นต้องสังเกตล่วงหน้าว่าวิธี splice() ค่อนข้างหลากหลายและไม่เพียงแต่ลบองค์ประกอบเท่านั้น ไวยากรณ์ต่อไปนี้:

arr.splice(start[,deleteCount,e1,e2,...,eN] )

วิธี splice เริ่มต้นจากตำแหน่ง start ลบองค์ประกอบ deleteCount แล้วแทรก e1,e2,e3 และองค์ประกอบอื่น ๆ ในสถานที่

ลบองค์ประกอบ

ตัวอย่างต่อไปนี้สามารถลบองค์ประกอบออกจากอาร์เรย์:

องค์ประกอบ

แรก 1console.log(arr)

โค้ดด้านบนจะลบ 1 ที่ตำแหน่งแรกในอาร์เรย์ ผลการดำเนินการมีดังนี้:

การลบหลายองค์ประกอบ

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

ให้ arr = [1,2,3,4,5];arr. ;//ลบสามองค์ประกอบแรก console.log(arr);//[4,5]

ผลลัพธ์การเรียกใช้โค้ดมีดังนี้:

ตัดทอนอาร์เรย์

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

ให้ arr = [1,2,3,4,5]arr.splice(2); //Delete Console.log(arr);//[1,2] 
ผลลัพธ์การเรียกใช้โค้ด
 จากตัวห้อย 2 และองค์ประกอบที่ตามมาทั้งหมด

การแทนที่องค์ประกอบ

หากเราระบุพารามิเตอร์มากกว่า 2 ตัว เราสามารถแทนที่องค์ประกอบอาร์เรย์ได้ เช่น:

la arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]

ผลลัพธ์การเรียกใช้โค้ดจะเป็นดังนี้:

โค้ดข้างต้นดำเนินการสองขั้นตอน ขั้นแรกให้ลบ 2 องค์ประกอบโดยเริ่มจาก 0 จากนั้นจึงแทรกองค์ประกอบใหม่ 3 องค์ประกอบที่ตำแหน่ง 0

การแทรกองค์ประกอบ

หากเราเปลี่ยนพารามิเตอร์ตัวที่สอง (จำนวนการลบ) เป็น 0 เราจะสามารถแทรกองค์ประกอบโดยไม่ต้องลบองค์ประกอบเท่านั้น ตัวอย่างเช่น:

ให้ arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]

ส่งกลับค่า

ฟังก์ชัน splice() จะส่งคืนอาร์เรย์องค์ประกอบที่ถูกลบ ตัวอย่างเช่น:

ให้ arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]

ผลลัพธ์การเรียกใช้โค้ด:

ดัชนีเชิงลบ

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

ให้ arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']

ผลลัพธ์การเรียกใช้โค้ดมีดังนี้:

Slice()

วิธีการ slice() สามารถสกัดกั้นอาร์เรย์ในช่วงที่ระบุได้ ไวยากรณ์จะเป็นดังนี้:

arr.slice([start],[end])

ส่งคืนอาร์เรย์ใหม่เริ่มต้นจาก start และสิ้นสุดที่ end แต่ไม่รวม end

ตัวอย่าง:

ให้ arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3) )//[2,3]

ผลการเรียกใช้โค้ด:

slice() ยังสามารถใช้ตัวห้อยเชิงลบได้:

ให้ arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr ) Slice(-5,-1))//[1,2,3,4]

ผลการรันโค้ดจะเป็นดังนี้:

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

concat()

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

arr.concat(e1, e2, e3)

โค้ดด้านบนจะส่งคืนอาร์เรย์ใหม่และ อาร์เรย์ใหม่ถูกต่อกันโดย arr มันถูกสร้างขึ้นโดย e1 , e2 และ e3

ตัวอย่าง:

ให้ arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))

ผลการเรียกใช้โค้ดจะเป็นดังนี้:

อ็อบเจ็กต์ทั่วไป แม้ว่าจะดูเหมือนกับอ็อบเจ็กต์ แต่ก็ยังถูกแทรกลงในอาร์เรย์โดยรวม ตัวอย่างเช่น:

la arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj))

ผลการรันโค้ด:

อย่างไรก็ตาม หากอ็อบเจ็กต์มีคุณสมบัติ Symbol.isConcatSpreadable ก็จะถือว่าเป็นอาร์เรย์:

la arr = [1,2]let obj = {0:'x',
           1:'y',
           [Symbol.isConcatSpreadable]:จริง
           length:2 }console.log(arr.concat(obj))

ผลลัพธ์การเรียกใช้โค้ด:

forEach()

สำรวจอาร์เรย์ทั้งหมดและจัดให้มีฟังก์ชันการดำเนินการสำหรับแต่ละองค์ประกอบอาร์เรย์:

la arr = [1,2]arr.forEach((itm,idx,array)=>{
    ...})

ตัวอย่างการใช้งาน:

ให้ arr = [1,2,3,4,5]arr.forEach((itm)=>{
    console.log(itm)})

ผลลัพธ์การเรียกใช้โค้ด:

ให้ arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
    console.log(`arr[${idx}] in [${array}] is ${itm}`)})

ผลลัพธ์การเรียกใช้โค้ด:

indexOf, LastIndexOf และรวม

จะคล้ายกับสตริง indexOf , lastIndexOf และ includes สามารถใช้กับตัวห้อยขององค์ประกอบที่ระบุในอาร์เรย์แบบสอบถาม:

1. arr.indexOf(itm,start) : ค้นหา itm โดยเริ่มจากตำแหน่ง start หากพบ ให้ส่งคืนตัวห้อย หรือส่งคืน -1 ;
2. arr.lastIndexOf(itm,start) : ค้นหาทั้งอาร์เรย์ในลำดับย้อนกลับจนกระทั่ง start และส่งกลับตัวห้อยตัวแรกที่พบ (นั่นคือ รายการที่ตรงกันสุดท้ายในอาร์เรย์) หากไม่พบ ให้คืนค่า -1 ;
3. arr.includes(itm,start) : ค้นหา itm จากตำแหน่ง start หากพบ ให้คืน true หรือคืน false

ตัวอย่าง:

ให้ arr = [1,2,3,4,5, 6,"7", "8", "9" ,0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console. log(arr.includes(10))//falseconsole. log(arr.includes(9))//false

วิธีการเหล่านี้ใช้ === เมื่อเปรียบเทียบองค์ประกอบอาร์เรย์ ดังนั้น false และ 0 จึงแตกต่างกัน

การจัดการ NaN

NaN เป็นหมายเลขพิเศษ และมีความแตกต่างเล็กน้อยระหว่างทั้งสามในการจัดการ NaN :

ให้ arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1

สาเหตุของผลลัพธ์นี้เกี่ยวข้องกับลักษณะของ NaN เองนั่นคือ NaN ไม่เท่ากับตัวเลขใด ๆ รวมถึงตัวเขาเองด้วย

เนื้อหาเหล่านี้มีการพูดคุยกันในบทที่แล้ว สำหรับรองเท้าเด็กที่ถูกลืม อย่าลืมทบทวนอดีตและเรียนรู้สิ่งใหม่ๆ

ค้นหาและ findIndex

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

ในขณะนี้ คุณต้องใช้เมธอด find และ findIndex ไวยากรณ์จะเป็นดังนี้:

la result = arr.find(function(itm,idx,array){
    //itm array element //idx element subscript //array array เอง //ส่งผ่านฟังก์ชันการตัดสิน ถ้าฟังก์ชันคืนค่าเป็นจริง ให้ส่งคืนอ็อบเจ็กต์ปัจจุบัน itm})

ตัวอย่างเช่น เราค้นหาอ็อบเจ็กต์ที่มีแอตทริบิวต์ name เท่ากับ xiaoming :

ให้ arr =[
    {id:1,ชื่อ:'เสี่ยวหมิง'},
    {id:2,ชื่อ:'xiaohong'},
    {id:3,name:'xiaojunn'},]let xiaoming = arr.find(function(itm,idx,array){
    if(itm.name == 'xiaoming')return true;})console.log(xiaoming)

ผลการเรียกใช้โค้ด:

หากไม่มีวัตถุที่ตรงตามเงื่อนไข ระบบจะส่งคืน undefined

โค้ดข้างต้นสามารถทำให้ง่ายขึ้นเป็น:

itm

)=> itm.name == 'xiaoming')

วัตถุประสงค์ของ arr.findIndex(func) เกือบจะเหมือนกับ arr.find(func) ข้อแตกต่างเพียงอย่างเดียวคือ arr.findIndex ส่งคืนตัวห้อยของอ็อบเจ็กต์ที่ผ่านการรับรองแทนตัวมันเอง หากไม่พบ ก็จะส่งคืน -1 .

filter

find และ findIndex สามารถค้นหาออบเจ็กต์เดียวที่ตรงตามข้อกำหนด หากมีหลายออบเจ็กต์ที่ตรงตามข้อกำหนดในอาร์เรย์ คุณจะต้องใช้วิธี filter ดังนี้:

ให้ผลลัพธ์ = arr.filter(function( itm,idx,อาร์เรย์){
    //การใช้งานเหมือนกับ find แต่จะคืนค่าอาร์เรย์ของอ็อบเจ็กต์ที่ตรงตามข้อกำหนด //หากไม่พบ อาร์เรย์ว่างจะถูกส่งคืน})

ตัวอย่างเช่น:

ให้ arr =[
    {id:1,ชื่อ:'เสี่ยวหมิง'},
    {id:2,ชื่อ:'xiaohong'},
    {id:3,name:'xiaojunn'},]let res = arr.filter(function(itm,idx,array){
    if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res)

ผลการเรียกใช้โค้ด:

map

arr.map สามารถเรียกใช้ฟังก์ชันบนแต่ละออบเจ็กต์ของอาร์เรย์แล้วส่งคืนอาร์เรย์ที่ประมวลผล นี่เป็นหนึ่งในวิธีที่มีประโยชน์และสำคัญที่สุดของอาร์เรย์

ไวยากรณ์:

ให้ arrNew = arr.map(function(itm,idx,array){
    //ส่งคืนผลลัพธ์ใหม่})

ตัวอย่างเช่น ส่งกลับอาร์เรย์ความยาวที่สอดคล้องกับอาร์เรย์สตริง:

ให้ arr = ['I','am','a','student']let arrNew = arr.map((itm) = >itm.length)//return itm.lengthconsole.log(arrNew)//[1,2,1,7]

ผลการเรียกใช้โค้ด:

sort

arr.sort เรียงลำดับอาร์เรย์ในตำแหน่ง และส่งกลับอาร์เรย์ที่เรียงลำดับแล้ว อย่างไรก็ตาม เนื่องจากอาร์เรย์ดั้งเดิมมีการเปลี่ยนแปลง ค่าที่ส่งคืนจึงไม่มีความหมายจริงๆ

การเรียงลำดับแบบแทนที่หมายถึงการเรียงลำดับภายในพื้นที่อาร์เรย์ดั้งเดิมแทนที่จะสร้างอาร์เรย์ใหม่

ให้ arr = ['a','c','b']arr.sort()console.log(arr)

การประมวลผลโค้ด ผลลัพธ์:

โปรดทราบว่าตามค่าเริ่มต้น วิธี sort จะเรียงลำดับตาม ตัวอักษร ซึ่งเหมาะสำหรับการเรียงลำดับสตริง หากคุณต้องการเรียงลำดับอาร์เรย์ประเภทอื่น คุณต้องปรับแต่งวิธีการเปรียบเทียบ

สำหรับอาร์เรย์ตัวเลข

ให้ arr = [1,3,2] arr. เรียงลำดับ (ฟังก์ชัน (a, b) {
    ถ้า(a > b)ส่งคืน 1;
    ถ้า (a < b) กลับ -1;
    return 0;})

ผลการเรียกใช้โค้ด:

ฟังก์ชัน sort ใช้อัลกอริธึมการเรียงลำดับด่วนภายใน หรืออาจเป็นอัลกอริธึม timsort แต่เราไม่จำเป็นต้องสนใจสิ่งเหล่านี้ เราเพียงแต่ต้องใส่ใจกับฟังก์ชันการเปรียบเทียบเท่านั้น

ฟังก์ชันการเปรียบเทียบสามารถส่งคืนค่าตัวเลขใดๆ ก็ได้ ตัวเลขบวกหมายถึง > ตัวเลขลบหมายถึง < และ 0 หมายถึงเท่ากัน ดังนั้นเราจึงทำให้วิธีการเปรียบเทียบตัวเลขง่ายขึ้น:

la arr = [1,3,2]arr.sort(( a,b)=> a - b)

หากคุณต้องการเรียงลำดับย้อนกลับ เพียงสลับตำแหน่งของ a และ b :

ให้ arr = [1,3,2]arr.sort((a,b)=> b - a)

ลำดับสตริง

ลืมใช้วิธี str.localeCompare(str1) ในการเปรียบเทียบสตริงใช่ไหม

ให้ arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare (b))

ผลการดำเนินการรหัส:

Reverse

arr.reverse ใช้สำหรับอาร์เรย์ย้อนกลับ

ให้ arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]

ไม่มีอะไรจะพูดเกี่ยวกับเรื่องนี้

str.split() และ arr.join()

จำฟังก์ชันการแยกสตริงได้ไหม ฟังก์ชันการแยกสตริงสามารถแบ่งสตริงออกเป็นอาร์เรย์อักขระได้:

ให้ str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']

ไม่เป็นที่นิยม ความรู้ ฟังก์ชัน split มีพารามิเตอร์ตัวที่สอง ซึ่งสามารถจำกัดความยาวของอาร์เรย์ที่สร้างขึ้น

ให้ str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming',' xiaohong' ]

เมธอด arr.join() อยู่ตรงข้ามกับเมธอด split ซึ่งสามารถรวมอาร์เรย์เข้ากับสตริงได้

ตัวอย่างเช่น:

ให้ arr = [1,2,3]let str = arr.join(';')console.log(str)

ผลการเรียกใช้โค้ด:

ลด, ลดขวา

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

ไวยากรณ์:

ให้ res = arr.reduce(function(prev,itm,idx,array){
    //prev เป็นผลลัพธ์ที่ส่งคืนโดยการเรียกองค์ประกอบก่อนหน้า //init จะทำหน้าที่เป็นผลลัพธ์ของการเรียกองค์ประกอบก่อนหน้าเมื่อองค์ประกอบแรกถูกดำเนินการ}, [init])

ลองจินตนาการดูว่าจะนำผลรวมขององค์ประกอบอาร์เรย์ที่ประกอบด้วย ตัวเลข? ยังไม่มีวิธีใช้ map ในขณะนี้ คุณต้องใช้ arr.reduce :

la arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+ itm,0) console.log(res)//15

กระบวนการดำเนินการโค้ดมีดังนี้:

arr.reduceRight มีวัตถุประสงค์เดียวกันกับ arr.reduce ยกเว้นว่าเมธอดนั้นจะถูกเรียกใช้บนอิลิเมนต์จากขวาไปซ้าย

Array.isArray()

Array เป็นกรณีพิเศษของ object การใช้ typeof ไม่สามารถแยกแยะความแตกต่างระหว่างทั้งสองได้อย่างแม่นยำ:

console.log(typeof {})//objectconsole.log(typeof [])//object

ทั้งสองเป็น object เรา จำเป็นต้องใช้เมธอด Array.isArray() เพื่อตัดสินเพิ่มเติม:

console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true

some, every

arr.some(func) และ arr.every(func) ใช้ในการตรวจสอบตัวเลข และกลไกการดำเนินการคล้ายกับ map

บางคน

ดำเนินการเมธอดที่ส่งผ่านไปยังแต่ละอิลิเมนต์อาเรย์ หากเมธอดส่งคืน true ก็จะส่งคืน true ทันที หากองค์ประกอบทั้งหมดไม่ส่งคืน true ก็จะส่งคืน false

every

ดำเนินการเมธอด pass-in ในแต่ละองค์ประกอบของอาร์เรย์ โดยส่งคืน true หากองค์ประกอบทั้งหมดส่งคืน true มิฉะนั้นจะส่งคืน false

ตัวอย่างเช่น:

ให้ arr = [1,2,3,4,5]//พิจารณาว่ามีองค์ประกอบที่มากกว่า 2 ในอาร์เรย์ console.log(arr.some((itm)=>{ หรือไม่
    if(itm > 2)return true;}))//true// ตรวจสอบว่าองค์ประกอบทั้งหมดมากกว่า 2console.log(arr.every((itm)=>{
    if(itm > 2)return true;}))//false

thisArg

ในวิธีการอาร์เรย์ทั้งหมด ยกเว้น sort มีพารามิเตอร์คงที่ที่ไม่ธรรมดา thisArg ไวยากรณ์จะเป็นดังนี้:

arr.find(func,thisArg)arr.filter( func,thisArg)arr.map(func,thisArg)

ถ้าเราผ่านใน thisArg มันจะกลายเป็น this ใน func

พารามิเตอร์นี้มีประโยชน์เพียงเล็กน้อยภายใต้สถานการณ์ปกติ แต่ถ้า func เป็นเมธอดสมาชิก (เมธอดของอ็อบเจ็กต์) และ this ถูกใช้ในเมธอด thisArg จะมีความหมายมาก

ตัวอย่างเช่น:

ให้ obj = {
    หมายเลข: 3,
    ฟังก์ชั่น(itm){
        console.log(นี่)
        return itm > this.num;// ค้นหาตัวเลขที่มากกว่า 3}} ให้ arr = [1,2,3,4,5,6,7] ให้ newArr = arr.filter(obj.func,obj)console.log (newArr)

ผลการรันโค้ด:

ที่นี่เราจะเห็นได้ว่าเอาต์พุตใน func this คือค่า thisArg ที่เราส่งเข้าไป

หากเราใช้วิธีการสมาชิกของอ็อบเจ็กต์โดยไม่ระบุค่าของ thisArg this จะ undefined ส่งผลให้เกิดข้อผิดพลาดของโปรแกรม