5 kaedah tatasusunan tatasusunan: indexOf, filter, forEach, peta, kurangkan penggunaan examples_javascript kemahiran

Standard ECMAScript5 telah dikeluarkan pada 3 Disember 2009. Ia membawa beberapa kaedah baharu untuk menambah baik operasi tatasusunan Array sedia ada. Walau bagaimanapun, kaedah tatasusunan model baru ini tidak pernah benar-benar ditangkap kerana terdapat kekurangan penyemak imbas berdaya ES5 di pasaran pada masa itu.

Susun "Tambahan"

Tiada siapa yang meragui kepraktisan kaedah ini, tetapi menulis poliisi (PS: pemalam yang serasi dengan penyemak imbas lama) tidak berbaloi untuk mereka. Ia bertukar "mesti dicapai" kepada "tercapai terbaik". Sesetengah orang sebenarnya memanggil kaedah tatasusunan ini "Tambahan". Kenapa!

Tetapi zaman berubah. Jika anda melihat projek JS sumber terbuka yang popular di Github, anda akan melihat bahawa keadaan sedang berubah. Semua orang mahu mengurangkan banyak kebergantungan (pustaka pihak ketiga) dan hanya menggunakan kod tempatan untuk mencapainya.

Baiklah, mari kita mulakan.

5 tatasusunan saya

Dalam ES5, terdapat sejumlah 9 kaedah Tatasusunan http://kangax.github.io/compat-table/es5/

Nota* Sembilan kaedah

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototaip.beberapa
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

Saya akan memilih 5 kaedah yang saya fikir secara peribadi adalah yang paling berguna dan akan dihadapi oleh ramai pembangun.

1) indeksDari

Kaedah indexOf() mengembalikan kedudukan elemen pertama yang ditemui dalam tatasusunan, atau -1 jika ia tidak wujud.

Apabila tidak menggunakan indexOf

var arr = ['apple','orange','pear'],
found = false;

for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}

console.log("found:",found);

Selepas digunakan

var arr = ['apple','orange','pear'];

console.log("found:", arr.indexOf("orange") != -1);

2) penapis

Kaedah penapis() mencipta tatasusunan baharu yang sepadan dengan keadaan penapis.

Apabila penapis() tidak digunakan

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
  
var newArr = [];

for(var i= 0, l = arr.length; i< l; i++){
  if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}

console.log("Filter results:",newArr);

Penapis terpakai():

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
  
var newArr = arr.filter(function(item){
  return item.name === "orange";
});


console.log("Filter results:",newArr);

3) untukSetiap()

forEach melaksanakan kaedah yang sepadan untuk setiap elemen

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}

console.log("========================");

//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

forEach digunakan untuk menggantikan gelung for

4) peta()

Selepas map() melakukan operasi tertentu (pemetaan) pada setiap elemen tatasusunan, ia akan mengembalikan tatasusunan baharu,

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(){
  
  var newArr = [];
  
  for(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());

Selepas 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() ialah fungsi yang sangat praktikal apabila memproses data yang dikembalikan oleh pelayan.

5) kurangkan()

reduce() boleh melaksanakan fungsi penumpuk, mengurangkan setiap nilai tatasusunan (dari kiri ke kanan) kepada nilai.

Sejujurnya, pada mulanya agak sukar untuk memahami ayat ini kerana ia terlalu abstrak.

Senario: Kira berapa banyak perkataan unik yang terdapat dalam tatasusunan

Apabila pengurangan tidak digunakan

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
  var obj = {};
  
  for(var i= 0, l = arr.length; i< l; i++){
    var item = arr[i];
    obj[item] = (obj[item] +1 ) || 1;
  }
  
  return obj;
}

console.log(getWordCnt());

Selepas menggunakan reduce()

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
  return arr.reduce(function(prev,next){
    prev[next] = (prev[next] + 1) || 1;
    return prev;
  },{});
}

console.log(getWordCnt());

Biar saya terangkan dahulu pemahaman saya tentang reduce. reduce(callback, initialValue) akan lulus dalam dua pembolehubah. Fungsi panggil balik (panggilan balik) dan nilai awal (initialValue). Andaikan bahawa fungsi mempunyai parameter masuk, sebelum dan seterusnya, indeks dan tatasusunan. Anda mesti faham sebelum dan seterusnya.

Secara umumnya, prev bermula dari elemen pertama dalam tatasusunan, dan seterusnya ialah elemen kedua. Tetapi apabila anda memasukkan nilai awal (initialValue), prev pertama akan menjadi initialValue, dan seterusnya akan menjadi elemen pertama dalam tatasusunan.

Contohnya:

/*
* 二者的区别，在console中运行一下即可知晓
*/

var arr = ["apple","orange"];

function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    
    return prev + " " +next;
  });
}
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    
    prev[next] = 1;
    return prev;
  },{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());