มาตรฐาน ECMASCRIPT5 ได้รับการปล่อยตัวเมื่อวันที่ 3 ธันวาคม 2552 และนำวิธีการใหม่ ๆ ในการปรับปรุงการดำเนินงานอาร์เรย์อาร์เรย์ที่มีอยู่ อย่างไรก็ตามวิธีการอาร์เรย์นวนิยายเหล่านี้ไม่ได้รับความนิยมจริง ๆ เพราะไม่มีเบราว์เซอร์ที่เปิดใช้งาน ES5 ในตลาดในเวลานั้น
อาร์เรย์ "พิเศษ"
ไม่มีใครสงสัยเกี่ยวกับการใช้งานจริงของวิธีการเหล่านี้ แต่การเขียน polyfill (PS: ปลั๊กอินที่เข้ากันได้กับเบราว์เซอร์รุ่นเก่า) ไม่คุ้มค่าสำหรับพวกเขา มันเปลี่ยน "ต้องใช้" เป็น "การนำไปใช้ที่ดีที่สุด" บางคนเรียกวิธีการอาร์เรย์เหล่านี้อาร์เรย์ "พิเศษ" ทำไม!
แต่เวลากำลังเปลี่ยนแปลง หากคุณดูโครงการ JS โอเพนซอร์สยอดนิยมใน GitHub คุณจะเห็นว่าแนวโน้มกำลังเปลี่ยนแปลง ทุกคนต้องการลดการพึ่งพาจำนวนมาก (ห้องสมุดบุคคลที่สาม) และนำไปใช้กับรหัสท้องถิ่นเท่านั้น
โอเคมาเริ่มกันเถอะ
5 อาร์เรย์ของฉัน
ใน ES5 มีวิธีการอาร์เรย์ 9 วิธีใน http://kangax.github.io/compat-table/es5/
หมายเหตุ* เก้าวิธี
array.prototype.indexof
array.prototype.lastindexof
array.prototype.ish
array.prototype.some
array.prototype.foreach
array.prototype.map
array.prototype.filter
array.prototype.reduce
array.prototype.reduceright
ฉันจะเลือก 5 วิธีซึ่งโดยส่วนตัวแล้วฉันคิดว่ามีประโยชน์มากที่สุดและนักพัฒนาหลายคนจะพบ
1) ดัชนีของ
เมธอดดัชนี () ส่งคืนตำแหน่งขององค์ประกอบแรกที่พบในอาร์เรย์และ -1 หากไม่มีอยู่
เมื่อไม่ได้ใช้ดัชนี
var arr = ['Apple', 'Orange', 'Pear'], Found = false; สำหรับ (var i = 0, l = arr.length; i <l; i ++) {ถ้า (arr [i] === 'Orange') {found = true;}} console.log ("พบ:" พบ);หลังการใช้งาน
var arr = ['Apple', 'Orange', 'Pear']; console.log ("พบ:", arr.indexof ("Orange")! = -1);2) ตัวกรอง
เมธอดตัวกรอง () สร้างอาร์เรย์ใหม่ที่ตรงกับเกณฑ์ตัวกรอง
เมื่อไม่ได้ใช้ตัวกรอง ()
var arr = [{"name": "Apple", "count": 2}, {"name": "Orange", "Count": 5}, {"Name": "Pear", "Count": 3}, {"Name": "Orange", "Count": 16},]; var newarr = []; สำหรับ (var i = 0, l = arr.length; i <l; i ++) {ถ้า (arr [i] .name === "orange") {newarr.push (arr [i]);}} console.log ("ผลการกรอง:", newarr);ใช้ตัวกรอง ():
var arr = [{"name": "Apple", "count": 2}, {"name": "Orange", "Count": 5}, {"Name": "Pear", "Count": 3}, {"Name": "Orange", "Count": 16},]; var newarr = arr.filter (ฟังก์ชั่น (รายการ) {return item.name === "Orange";}); console.log ("ผลลัพธ์ตัวกรอง:", newarr);3) foreach ()
Foreach ดำเนินการวิธีการที่สอดคล้องกันสำหรับแต่ละองค์ประกอบ
var arr = [1,2,3,4,5,6,7,7,8]; // ใช้ "ปกติ" สำหรับ "วนซ้ำไปยัง (var i = 0, l = arr.length; i <l; i ++) {console.log (arr [i]);} console.log (" ========================== iterateArr.foreach (ฟังก์ชั่น (รายการ, ดัชนี) {console.log (รายการ);});Foreach ใช้เพื่อแทนที่ for for loop
4) แผนที่ ()
หลังจาก MAP () ทำการดำเนินการบางอย่าง (แผนที่) ในแต่ละองค์ประกอบของอาร์เรย์จะส่งคืนอาร์เรย์ใหม่
อย่าใช้แผนที่
var oldarr = [{first_name: "colin", last_name: "toh"}, {first_name: "addy", last_name: "osmani"}, {first_name: "yehuda", last_name: "katz"} สำหรับ (var i = 0, l = oldarr.length; i <l; i ++) {var item = oldarr [i]; item.full_name = [item.first_name, item.last_name] .oin ("); newarr [i] = item;} return newarr;} console.log (getNewarr ());หลังจากใช้แผนที่
var oldarr = [{first_name: "colin", last_name: "toh"}, {first_name: "addy", last_name: "osmani"}, {first_name: "yehuda", last_name: "katz"}]; ฟังก์ชั่น getNewarr () {return oldarr.map (ฟังก์ชั่น (รายการ, ดัชนี) {item.full_name = [item.first_name, item.last_name] .oin (""); return item;}); } console.log (getNewarr ());MAP () เป็นฟังก์ชั่นที่ใช้งานได้จริงเมื่อประมวลผลข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์
5) ลด ()
ลด () สามารถใช้ฟังก์ชั่นของตัวสะสมลดค่าแต่ละค่าของอาร์เรย์ (จากซ้ายไปขวา) เป็นค่า
พูดตามตรงมันเป็นเรื่องยากที่จะเข้าใจประโยคนี้ในตอนแรกมันเป็นนามธรรมเกินไป
สถานการณ์: สถิติจำนวนคำที่ไม่สามารถทำซ้ำได้ในอาร์เรย์
เมื่อไม่ได้ใช้การลดลง
var arr = ["Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; ฟังก์ชั่น getwordcnt () {var obj = {}; สำหรับ (var i = 0, l = arr.length; i <l; i ++) {var item = arr [i]; obj [item] = (obj [item] +1) || 1; } return obj;} console.log (getwordcnt ());หลังจากใช้ลด ()
var arr = ["Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; ฟังก์ชั่น getwordcnt () {return arr.reduce (ฟังก์ชั่น (prev, ถัดไป) {prev [next] = (prev [ถัดไป] + 1) || 1; return prev;ให้ฉันอธิบายความเข้าใจของตัวเองในการลดก่อน ลด (การโทรกลับ, ค่าเริ่มต้น) จะผ่านในสองตัวแปร ฟังก์ชั่นการโทรกลับ (การโทรกลับ) และค่าเริ่มต้น สมมติว่าฟังก์ชั่นมีพารามิเตอร์ที่เข้ามาก่อนหน้าและถัดไปดัชนีและอาร์เรย์ คุณต้องเข้าใจก่อนหน้าและต่อไป
โดยทั่วไปการพูดก่อนหน้านี้เริ่มต้นด้วยองค์ประกอบแรกในอาร์เรย์และถัดไปเป็นองค์ประกอบที่สอง แต่เมื่อคุณผ่านค่าเริ่มต้น (ค่าเริ่มต้น) ก่อนหน้านี้จะเป็นค่าเริ่มต้นและถัดไปจะเป็นองค์ประกอบแรกในอาร์เรย์
ตัวอย่างเช่น:
/** ความแตกต่างระหว่างทั้งสองใช้ในคอนโซลและคุณจะรู้*/var arr = ["Apple", "Orange"]; function nopassvalue () {return arr.reduce (ฟังก์ชั่น (ก่อนหน้า, ถัดไป) {console.log ("prev:", prev); console.log ("ถัดไป:", ถัดไป) arr.reduce (ฟังก์ชั่น (ก่อนหน้า, ถัดไป) {console.log ("prev:", prev); console.log ("ถัดไป:", ถัดไป); prev [ถัดไป] = 1; return prev;}, {});} console.log ("ไม่มีพารามิเตอร์เพิ่มเติม:", nopassvalue () พารามิเตอร์: ", passvalue ());