快捷導(dǎo)航

總結(jié)javascript中的六種迭代器

更新時(shí)間：2016年08月16日 10:29:27 投稿：daisy

本文總結(jié)了javascript中的六種迭代器的使用實(shí)例，分別是forEach迭代器、every迭代器、some迭代器、reduce迭代器、map迭代器和fiter迭代器，有需要的小伙伴們可以參考借鑒。

1.forEach迭代器

forEach方法接收一個(gè)函數(shù)作為參數(shù)，對(duì)數(shù)組中每個(gè)元素使用這個(gè)函數(shù)，只調(diào)用這個(gè)函數(shù)，數(shù)組本身沒(méi)有任何變化

//forEach迭代器
function square(num){
  document.write(num + ' ' + num*num + '<br>');
}

var nums = [1,2,3,4,5,6,7,8];
nums.forEach(square);

在瀏覽器中輸出的結(jié)果是：

2.every迭代器

every方法接受一個(gè)返回值為布爾類型的函數(shù)，對(duì)數(shù)組中的每個(gè)元素使用這個(gè)函數(shù)，如果對(duì)于所有的元素，該函數(shù)均返回true，則該方法返回true，否則返回false

//every迭代器
function isEven(num){
  return num % 2 == 0;
}
var nums = [2,4,6,8];
document.write(nums.every(isEven));

3.some迭代器

some方法也是接受一個(gè)返回值為布爾類型的函數(shù)，只要有一個(gè)元素使得該函數(shù)返回true，該方法就返回true

//some迭代器
function isEven(num){
  return num % 2 == 0;
}
var nums = [1,3,5,7];
document.write(nums.some(isEven));

4.reduce迭代器

reduce方法接受一個(gè)函數(shù)，返回一個(gè)值，該方法從一個(gè)累加值開(kāi)始，不斷對(duì)累加值和數(shù)組中的后續(xù)元素調(diào)用該函數(shù)，知道數(shù)組中最后一個(gè)元素，最后得到返回的累加值

//reduce迭代器
function add(runningTotal, currentValue){
  return runningTotal + currentValue;
}
var nums = [1,2,3,4,5,6,7,8,9,10];
var sum = nums.reduce(add);
document.write(sum);

得到的結(jié)果是：55

reduce()函數(shù)和add()函數(shù)一起，從左到右，一次對(duì)數(shù)組中的元素求和，執(zhí)行過(guò)程如下：

add(1,2) -> 3
add(3,3) -> 6
add(6,4) -> 10
add(10,5) -> 15
add(15,6) -> 21
add(21,7) -> 28
add(28,8) -> 36
add(36,9) -> 45
add(45,10) -> 55

reduce方法也可以用來(lái)將數(shù)組中的元素鏈接成一個(gè)長(zhǎng)的字符串，代碼如下

//使用reduce連接數(shù)組元素
function concat(accumulatedString, item){
  return accumulatedString + item;
}
var words = ['the ', 'quick ', 'brown ', 'fox'];
var sentence = words.reduce(concat);
document.write(sentence);

最后輸出結(jié)果如下：

javascript還提供了reduceRight方法，和Reduce方法不同，它是從右到左執(zhí)行，如下：

//使用reduce連接數(shù)組元素
function concat(accumulatedString, item){
  return accumulatedString + item;
}
var words = ['the ', 'quick ', 'brown ', 'fox '];
var sentence = words.reduceRight(concat);
document.write(sentence);

執(zhí)行結(jié)果如下：

5.map迭代器

map迭代器和forEach有些類似，但是map會(huì)改變數(shù)組，生成新的數(shù)組，如下代碼

//使用map迭代器生成新的數(shù)組
function curve(grade){
  return grade+5;
}
var grades = [77,65,81,92,83];
var newgrades = grades.map(curve);
document.write(newgrades);

輸出結(jié)果：

6.fiter迭代器

和every迭代器類似，傳入一個(gè)返回值為布爾類型的函數(shù)，和every方法不同的是，當(dāng)數(shù)組中所有元素對(duì)應(yīng)該函數(shù)返回的結(jié)果均為true時(shí)，該方法并不返回true，而是返回一個(gè)新的數(shù)組，該數(shù)組包含對(duì)應(yīng)函數(shù)返回結(jié)果為true的元素，代碼如下

function isEven(num){
  return num % 2 == 0;
}

function isOdd(num){
  return num % 2 != 0;
}

var nums = [];
for (var i=0; i<20; i++) {
  nums[i] = i+1;
}
var evens = nums.filter(isEven);
document.write(evens);
document.write('<br>');
var odds = nums.filter(isOdd);
document.write(odds);

輸出結(jié)果如下：