ตัวอย่างนี้สรุปเทคนิคการทำงานทั่วไปสำหรับอาร์เรย์ JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
คำนำ
ฉันเชื่อว่าทุกคนคุ้นเคยกับการใช้งานที่เกี่ยวข้องกับอาร์เรย์ที่ใช้กันทั่วไปในไลบรารีคลาสเช่น jQuery หรือขีดล่างเช่น $ .Isarray, _.some, _.find และวิธีอื่น ๆ ที่นี่ไม่มีอะไรมากไปกว่าการห่อหุ้มอีกเล็กน้อยสำหรับการดำเนินงานอาร์เรย์ JS พื้นเมือง
ที่นี่เราจะสรุป API ทั่วไปสำหรับการดำเนินการอาร์เรย์ JavaScript ฉันเชื่อว่ามันจะเป็นประโยชน์มากสำหรับทุกคนในการแก้ปัญหาโปรแกรม
1. ธรรมชาติ
อาร์เรย์ใน JavaScript เป็นวัตถุพิเศษและดัชนีที่ใช้เพื่อแสดงถึงการชดเชยเป็นคุณสมบัติของวัตถุและดัชนีอาจเป็นจำนวนเต็ม อย่างไรก็ตามดัชนีตัวเลขเหล่านี้จะถูกแปลงเป็นประเภทสตริงภายในเนื่องจากชื่อแอตทริบิวต์ในวัตถุ JavaScript ต้องเป็นสตริง
2. การดำเนินการ
1 กำหนดประเภทอาร์เรย์
คัดลอกรหัสดังนี้: var array0 = []; // ตัวอักษร
var array1 = new Array (); // ตัวสร้าง
// หมายเหตุ: ไม่รองรับวิธี array.isarray ภายใต้ IE6/7/8
การแจ้งเตือน (array.isarray (array0));
// พิจารณาความเข้ากันได้
การแจ้งเตือน (อินสแตนซ์ Array1 ของอาร์เรย์);
// หรือ
การแจ้งเตือน (Object.prototype.toString.call (array1) === '[อาร์เรย์วัตถุ]');
2 อาร์เรย์และสตริง
ง่ายมาก: แปลงจากอาร์เรย์เป็นสตริงใช้การเข้าร่วม; แปลงจากสตริงเป็นอาร์เรย์ใช้แยก
คัดลอกรหัสดังนี้: // เข้าร่วม - แปลงจากอาร์เรย์เป็นสตริงใช้เข้าร่วม
console.log (['hello', 'World']. เข้าร่วม (',')); // สวัสดีโลก
// แยก - แปลงจากสตริงเป็นอาร์เรย์โดยใช้การแยก
console.log ('Hello World'.split (' ')); // ["Hello", "World"]
3 ค้นหาองค์ประกอบ
ฉันเชื่อว่าทุกคนมักใช้ดัชนีประเภทสตริง แต่ไม่ค่อยรู้ว่าดัชนีของอาร์เรย์สามารถใช้เพื่อค้นหาองค์ประกอบ
คัดลอกรหัสดังนี้: // indexof - ค้นหาองค์ประกอบ
console.log (['abc', 'bcd', 'cde']. indexof ('bcd')); // 1
-
var objinarray = [
-
ชื่อ: 'ราชา'
ผ่าน: '123'
-
-
ชื่อ: 'King1',
ผ่าน: '234'
-
-
console.log (objinarray.indexof ({
ชื่อ: 'ราชา'
ผ่าน: '123'
- // -1
var elementofarray = objinarray [0];
console.log (objinarray.indexof (Elementofarray)); // 0
จากด้านบนเราจะเห็นได้ว่าสำหรับอาร์เรย์ที่มีวัตถุวิธีดัชนีของวิธีการไม่ได้รับผลการค้นหาที่สอดคล้องกันผ่านการเปรียบเทียบที่ลึก แต่เปรียบเทียบเฉพาะการอ้างอิงกับองค์ประกอบที่เกี่ยวข้อง
4 การเชื่อมต่ออาร์เรย์
เมื่อใช้ concat โปรดทราบว่าอาร์เรย์ใหม่จะถูกสร้างขึ้นหลังจากใช้ concat
การคัดลอกรหัสมีดังนี้: var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat (array2); // หลังจากใช้การเชื่อมต่ออาร์เรย์จะมีการสร้างอาร์เรย์ใหม่
console.log (array3);
5 หมวดหมู่ของการดำเนินการรายการ
ในการเพิ่มองค์ประกอบคุณสามารถใช้ push และ unshift ตามลำดับและเพื่อลบองค์ประกอบคุณสามารถใช้ POP และ Shift ตามลำดับ
คัดลอกรหัสดังนี้: // push/pop/shift/unshift
var array = [2, 3, 4, 5];
// เพิ่มไปยังส่วนท้ายของอาร์เรย์
array.push (6);
console.log (อาร์เรย์); // [2, 3, 4, 5, 6]
// เพิ่มลงในส่วนหัวอาร์เรย์
array.unshift (1);
console.log (อาร์เรย์); // [1, 2, 3, 4, 5, 6]
// ลบองค์ประกอบสุดท้าย
var elementofpop = array.pop ();
console.log (elementofpop); // 6
console.log (อาร์เรย์); // [1, 2, 3, 4, 5]
// ลบองค์ประกอบแรก
var elementofshift = array.shift ();
console.log (Elementofshift); // 1
console.log (อาร์เรย์); // [2, 3, 4, 5]
6 วิธีประกบ
การใช้งานหลักสองครั้ง:
①เพิ่มและลบองค์ประกอบจากกลางอาร์เรย์
②รับอาร์เรย์ใหม่จากอาร์เรย์ดั้งเดิม
แน่นอนว่าการใช้งานทั้งสองนั้นถูกสังเคราะห์ในก๊าซเดียว สถานการณ์บางอย่างมุ่งเน้นไปที่จุดประสงค์หนึ่งในขณะที่คนอื่นมุ่งเน้นไปที่จุดประสงค์สอง
เพิ่มและลบองค์ประกอบจากตำแหน่งกลางของอาร์เรย์ วิธีการประกบเพิ่มองค์ประกอบให้กับอาร์เรย์ จำเป็นต้องมีพารามิเตอร์ต่อไปนี้
①เริ่มดัชนี (นั่นคือที่ที่คุณต้องการเริ่มเพิ่มองค์ประกอบ)
②จำนวนองค์ประกอบที่ต้องลบหรือจำนวนองค์ประกอบที่สกัด (พารามิเตอร์ถูกตั้งค่าเป็น 0 เมื่อเพิ่มองค์ประกอบ)
③องค์ประกอบที่คุณต้องการเพิ่มในอาร์เรย์
การคัดลอกรหัสมีดังนี้: var nums = [1, 2, 3, 7, 8, 9];
nums.splice (3, 0, 4, 5, 6);
console.log (nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// จากนั้นทำการลบหรือแยกอาร์เรย์ใหม่
var newNums = nums.splice (3, 4);
console.log (nums); // [1, 2, 3, 8, 9]
console.log (newnums); // [4, 5, 6, 7]
7 จัดเรียง
การแนะนำหลักเกี่ยวกับวิธีการย้อนกลับและการเรียงลำดับ การผกผันของอาร์เรย์ใช้ย้อนกลับวิธีการเรียงลำดับสามารถใช้ไม่เพียง แต่สำหรับการเรียงลำดับง่าย ๆ แต่ยังสำหรับการเรียงลำดับที่ซับซ้อน
คัดลอกรหัสดังนี้:/ กลับอาร์เรย์
var array = [1, 2, 3, 4, 5];
array.Reverse ();
console.log (อาร์เรย์); // [5, 4, 3, 2, 1]
ก่อนอื่นเราเรียงลำดับอาร์เรย์ขององค์ประกอบสตริง
var arrayofnames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayofnames.sort ();
console.log (arrayofnames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]
เราเรียงลำดับอาร์เรย์ขององค์ประกอบตัวเลข
คัดลอกรหัสดังต่อไปนี้:/ หากองค์ประกอบอาร์เรย์เป็นประเภทตัวเลขผลลัพธ์การเรียงลำดับเมธอด () จะไม่เป็นที่น่าพอใจ
var nums = [3, 1, 2, 100, 4, 200];
nums.sort ();
console.log (nums); // [1, 100, 2, 200, 3, 4]
วิธีการเรียงลำดับองค์ประกอบในลำดับพจนานุกรมดังนั้นจึงถือว่าองค์ประกอบเป็นประเภทสตริงทั้งหมดดังนั้นแม้ว่าองค์ประกอบจะเป็นประเภทตัวเลข แต่ก็ถือว่าเป็นประเภทสตริง ในเวลานี้คุณสามารถผ่านฟังก์ชั่นการเปรียบเทียบขนาดเมื่อเรียกวิธีการ เมื่อเรียงลำดับวิธีการเรียงลำดับ () จะเปรียบเทียบขนาดของสององค์ประกอบในอาร์เรย์ตามฟังก์ชันดังนั้นจึงกำหนดลำดับของอาร์เรย์ทั้งหมด
คัดลอกรหัสดังนี้: var compare = function (num1, num2) {
ส่งคืน num1> num2;
-
nums.sort (เปรียบเทียบ);
console.log (nums); // [1, 2, 3, 4, 100, 200]
var objinarray = [
-
ชื่อ: 'ราชา'
ผ่าน: '123',
ดัชนี: 2
-
-
ชื่อ: 'King1',
ผ่าน: '234',
ดัชนี: 1
-
-
// คำสั่งซื้อจากน้อยไปมากตามดัชนีสำหรับองค์ประกอบวัตถุในอาร์เรย์
var compare = function (O1, O2) {
ส่งคืน o1.index> o2.index;
-
objinarray.sort (เปรียบเทียบ);
console.log (objinarray [0] .index <objinarray [1] .index); // จริง
8 วิธีตัววนซ้ำ
ส่วนใหญ่รวมถึง foreach และทุกแผนที่และตัวกรอง
ฉันเชื่อว่าทุกคนสามารถทำมัน foreach และฉันจะแนะนำอีกสี่วิธีอื่น ๆ
ทุกวิธียอมรับฟังก์ชั่นที่มีค่าส่งคืนบูลีนซึ่งใช้สำหรับแต่ละองค์ประกอบในอาร์เรย์ หากฟังก์ชั่นส่งคืนจริงสำหรับองค์ประกอบทั้งหมดวิธีการจะกลับมาเป็นจริง
การคัดลอกรหัสมีดังนี้: var nums = [2, 4, 6, 8];
// เมธอดตัววนซ้ำที่ไม่ได้สร้างอาร์เรย์ใหม่
var iseven = function (num) {
ส่งคืนจำนวน % 2 === 0;
-
// ถ้าทั้งหมดเป็นตัวเลขให้ส่งคืนจริง
console.log (nums.ery (iseven)); // จริง
บางวิธียังยอมรับฟังก์ชั่นที่มีค่าส่งคืนบูลีน ตราบใดที่มีองค์ประกอบที่ทำให้ฟังก์ชั่นกลับมาเป็นจริงวิธีการจะกลับมาเป็นจริง
var iseven = function (num) {
ส่งคืนจำนวน % 2 === 0;
-
var nums1 = [1, 2, 3, 4];
console.log (nums1.some (iseven)); // จริง
ทั้งวิธีแผนที่และตัวกรองสามารถสร้างอาร์เรย์ใหม่ได้ อาร์เรย์ใหม่ที่ส่งคืนด้วยแผนที่เป็นผลมาจากการใช้ฟังก์ชั่นกับองค์ประกอบดั้งเดิม ชอบ:
คัดลอกรหัสดังนี้: var up = function (เกรด) {
ส่งคืนเกรด += 5;
-
เกรด var = [72, 65, 81, 92, 85];
var newGrades = grades.ma
วิธีการกรองนั้นคล้ายกับทุกวิธีการส่งผ่านในฟังก์ชั่นที่มีค่าคืนบูลีน ซึ่งแตกต่างจากทุกวิธี () เมื่อใช้ฟังก์ชันกับองค์ประกอบทั้งหมดในอาร์เรย์และผลลัพธ์เป็นจริงวิธีนี้จะไม่ส่งคืนจริง แต่ส่งคืนอาร์เรย์ใหม่ที่มีองค์ประกอบที่ผลลัพธ์เป็นจริงหลังจากใช้ฟังก์ชัน
คัดลอกรหัสดังนี้: var iseven = function (num) {
ส่งคืนจำนวน % 2 === 0;
-
var isodd = function (num) {
ส่งคืน num % 2! == 0;
-
var nums = [];
สำหรับ (var i = 0; i <20; i ++) {
nums [i] = i + 1;
-
var evens = nums.filter (iseven);
console.log (evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
var odds = nums.filter (isodd);
console.log (อัตราต่อรอง); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
3. สรุป
ข้างต้นยังมีปัญหาที่บางวิธีไม่ได้รับการสนับสนุนในเบราว์เซอร์ระดับต่ำและต้องใช้วิธีการอื่น ๆ สำหรับการใช้งานที่เข้ากันได้
นี่เป็นวิธีการทั่วไปที่อาจไม่ใช่เรื่องง่ายสำหรับทุกคนที่จะคิด ทุกคนอาจให้ความสนใจมากขึ้น
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน