Standar ECMascript5 dirilis pada 3 Desember 2009, dan membawa beberapa cara baru untuk meningkatkan operasi array array yang ada. Namun, metode array baru ini tidak benar-benar menjadi populer karena ada kekurangan browser yang mendukung ES5 di pasaran pada waktu itu.
Array "ekstra"
Tidak ada yang meragukan tentang kepraktisan metode ini, tetapi menulis Polyfill (PS: Plugin yang kompatibel dengan browser yang lebih tua) tidak layak untuk mereka. Ternyata "harus diimplementasikan" menjadi "implementasi terbaik". Beberapa orang benar -benar menyebut metode array ini "ekstra". Mengapa!
Tapi waktu berubah. Jika Anda melihat proyek JS open source populer di GitHub, Anda akan melihat bahwa tren berubah. Semua orang ingin mengurangi banyak dependensi (perpustakaan pihak ketiga) dan mengimplementasikannya hanya dengan kode lokal.
Oke, mari kita mulai.
5 array saya
Di ES5, ada 9 metode array secara total http://kangax.github.io/compat-table/es5/
Catatan* Sembilan metode
Array.prototype.indexof
Array.prototype.lastIndexof
Array.prototype.Every
Array.prototype.some
Array.prototype.foreach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceright
Saya akan memilih 5 metode, yang menurut saya pribadi adalah yang paling berguna dan banyak pengembang akan bertemu.
1) Indeks
Metode indexof () mengembalikan posisi elemen pertama yang ditemukan dalam array, dan -1 jika tidak ada.
Saat Indexof tidak digunakan
var arr = ['apple', 'oranye', 'pear'], found = false; for (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] === 'oranye') {found = true;}} konsol.log ("ditemukan:", ditemukan);Setelah digunakan
var arr = ['apel', 'oranye', 'pear']; console.log ("ditemukan:", arr.indexof ("oranye")! = -1);2) Filter
Metode filter () membuat array baru yang cocok dengan kriteria filter.
Saat filter () tidak digunakan
var arr = [{"name": "apple", "count": 2}, {"name": "oranye", "count": 5}, {"name": "pear", "count": 3}, {"name": "oranye", "count": 16},]; var newarr = []; untuk (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] .name === "oranye") {newarr.push (arr [i]);}} console.log ("Hasil filter:", newarr);Gunakan filter ():
var arr = [{"name": "apple", "count": 2}, {"name": "oranye", "count": 5}, {"name": "pear", "count": 3}, {"name": "oranye", "count": 16},]; var newarr = arr.filter (function (item) {return item.name === "oranye";}); console.log ("Hasil filter:", newarr);3) foreach ()
Foreach menjalankan metode yang sesuai untuk setiap elemen
var arr = [1,2,3,4,5,6,7,8]; // menggunakan "loop" untuk iterate for (var i = 0, l = arr.length; i <l; i ++) {console.log=========== iteratearr.foreach (function (item, index) {console.log (item);});Foreach digunakan untuk mengganti loop untuk
4) peta ()
Setelah MAP () melakukan operasi tertentu (MAP) pada setiap elemen array, array baru akan dikembalikan.
Jangan gunakan peta
var oldarr = [{first_name: "colin", last_name: "toh"}, {first_name: "addy", last_name: "osmani"}, {first_name: "yehuda", last_name: "katz"}]; function getNewarr () {varr = = []; untuk (var i = 0, l = oldarr.length; i <l; i ++) {var item = oldarr [i]; item.full_name = [item.first_name, item.last_name] .join ("); newarr [i] = item;} return newarr;} console.log (getNewarr ());Setelah menggunakan peta
var oldarr = [{first_name: "colin", last_name: "toh"}, {first_name: "addy", last_name: "osmani"}, {first_name: "yehuda", last_name: "katz"}]; function getNewarR () {return oldarr.map (function (item, index) {item.full_name = [item.first_name, item.last_name] .join (""); return item;}); } console.log (getNewarr ());MAP () adalah fungsi yang sangat praktis saat memproses data yang dikembalikan oleh server.
5) mengurangi ()
reduping () dapat mengimplementasikan fungsi akumulator, mengurangi setiap nilai array (dari kiri ke kanan) ke nilai.
Sejujurnya, agak sulit untuk memahami kalimat ini di awal, itu terlalu abstrak.
Skenario: Statistik Berapa banyak kata yang tidak dapat diulangi dalam array
Saat tidak menggunakan Reduksi
var arr = ["apel", "oranye", "apel", "oranye", "pear", "oranye"]; function getWordcnt () {var obj = {}; untuk (var i = 0, l = arr.length; i <l; i ++) {var item = arr [i]; obj [item] = (obj [item] +1) || 1; } return obj;} console.log (getwordcnt ());Setelah menggunakan reduksi ()
var arr = ["apple", "oranye", "apple", "oranye", "pear", "oranye"]; function getWordcnt () {return arr.reduce (function (prev, next) {prev [next] = (prev [next] + 1) || 1; return prev;}, {});} konsol.log (getWordcnt ());Izinkan saya menjelaskan pemahaman saya sendiri tentang pengurangan terlebih dahulu. Kurangi (Callback, InitialValue) akan lulus dalam dua variabel. Fungsi Callback (Callback) dan InitialValue. Misalkan fungsi memiliki parameter yang masuk, PREV dan Next, Index dan Array. Anda harus memahami PREV dan Next.
Secara umum, PREV dimulai dengan elemen pertama dalam array, dan selanjutnya adalah elemen kedua. Tetapi ketika Anda lulus dalam nilai awal (InitialValue), PREV pertama adalah InitialValue, dan berikutnya akan menjadi elemen pertama dalam array.
Misalnya:
/** Perbedaan antara keduanya, jalankan di konsol dan Anda akan tahu*/var arr = ["apel", "oranye"]; function nopassValue () {return arr.reduce (function (prev, next) {console.log ("prev:", prev); console.log ("next:", next); return ("prev:", prev); console.log ("next:" next); return ("prev: {{) {{{{{{{" next); arr.reduce (function (prev, next) {console.log ("prev:", prev); console.log ("next:", next); prev [next] = 1; return prev;}, {});} console.log ("tidak ada parameter tambahan:", nopassValue ()); console.log ("------ ("-", nopassValue ()); console.log ("-"-", nopassValue ()); console.log ("--------- ("-",-" ("); console ("-------- ("-", nopassValue ()); console.log ("--------- ("-",-" ,- "("); console ("-------- ("-", NOPASSVALUE (); parameter: ", passValue ());