文档章节

js数组的迭代器方法

放开那个女孩
 放开那个女孩
发布于 2017/09/29 20:12
字数 769
阅读 23
收藏 0

1.不生成新数组的迭代器方法

  • forEach() 该方法接受一个函数作为参数,对数组中的每个元素使用该函数。
function square(num) {
    console.log(num*num);
}
var num = [1,2,3,4,5];
num.forEach(square);//输出1,4,9,16,25
  • every() 该方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数均返回true,则该方法放回true。
function isEven(num) {
    return num % 2 == 0;
}
var num = [2,4,6,8,10];
var even = num.every(isEven);
if (even) {
    console.log("all numbers are even");//输出这条
} else {
    console.log("not all numbers are even");
}
  • some() 该方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回为true,该方法就返回true。
function isEven(num) {
    return num % 2;
}
var num = [1,2,3,4,5,6,7,8,9,10];
var someEven = num.some(isEven);
if (someEven) {
    console.log("some numbers are even");//输出这条
} else {
    console.log("no numbers are even");
}
num = [1,3,5,7,9];
someEven = num.some(isEven);
if (someEven) {
    console.log("some numbers are even");
} else {
    console.log("no numbers are even");//输出这条
}
  • reduce() 该方法接受一个函数,返回一个值。该方法会从一个累加值开始,不断对累加值和数组中的后续元素调用改函数,直到数组中的最后一个元素,最后返回得到的累加值。
function add(runningTotal, currentValue) {
    return runningTotal + currentValue;
}
var num = [1,2,3,4,5,6,7,8,9,10];
var sum = num.reduce(add);
//其执行原理如下图所示
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 方法也可以用来将数组中的元素连接成一个长的字符串

function concat(accumulatedString, item) {
    return accumulatedString + item;
}
var words = ["the ", "quick ", "brown ", "fox"];
var sentence = words.reduce(concat);
console.log(sentence);//the quick brown fox;

JavaScript还提供了reduceRight() 方法,和reduce()方法不同,它是从右到左执行。

function concat(accumulatedString, item) {
    return accumulatedString + item;
}
var word = ["the ", "quick ", "brown ", "fox"];
var sentence = word.reduceRight(concat);
console.log(sentence);//" fox brown quick the";

 

2.生成新数组的迭代器方法

  • map() 该方法对数组中的每个元素使用某个函数,返回一个新的数组,该数组的元素是对原有元素应用某个函数得到的结果。
function curve(grade) {
    return grade += 5;
}
var grades = [1,2,3,4,5];
var newGrades = grades.map(curve);
console.log(newGrades);//6,7,8,9,10
  • filter() 该方法传入一个返回值为布尔类型的函数,当对数组中的所有元素应用改函数,结果均为true时,该方法并不返回true,而是返回一个新的数组。改数组包含应用该函数后结果为true的元素。
function isEven(num) {
    return num % 2 == 0;
}
function isOdd(num) {
    return num % 2 != 0;
}
var num = [];
for (var i = 0; i < 20; ++i) {
    num[i] = i + 1;
}
var evens = num.filter(isEven);
console.log(evens);//2,4,6,8,10,12,14,16,18,20
var odds = num.filter(isOdd);
console.log(odds);//1,3,5,7,9,11,13,15,17,19

下面是另一个使用filter()方法的有趣案例(筛选出随机数中大于60的数)

function passing(num) {
    return num >= 60;
}
var grads = [];
for (var i = 0; i < 20; ++i) {
    grads[i] = Math.floor(Math.random() * 101);
}
var passGrads = grads.filter(passing);
console.log(grads);
console.log(passGrads);

还可以使用filter()方法过滤字符串数组(过滤掉那些不包含“cie”的单词)

function afterc(str) {
    if (str.indexOf("cie") > -1) {
        return true;
    }
    return false;
}
var word = ["recieve","deceive","percieve","deceit","concieve"];
var misspelled = word.filter(afterc);
console.log(misspelled);//recieve,percieve,convieve

© 著作权归作者所有

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
数据结构与算法-数组(Array)

Javascript 中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。但是,这些数字索引在内部被转换为字符串类型,这是因为Javascript对象中的属性名必须是字符串...

山河木马
05/13
0
0
前端开发指南:ES6的生成器和迭代器

     ES6为JavaScript语言带来了许多新特性。其中两个特性,生成器和迭代器,极大地改变了我们在更复杂的前端代码中编写特定函数的方式。   虽然他们之间的关系很好,但他们实际上做的...

webstack前端栈
2018/04/19
0
0
Javascript ES6 Iterators建议指南(含实例)

由Arfat Salman发布 本文旨在分析理解 Iterators 。 Iterators 是 JavaScript 中的新方法,可以用来循环任意集合。在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,现...

前端全栈开发学习
2018/11/13
0
0
Async/Await 如何通过同步的方式实现异步

Async/Await 如何通过同步的方式实现异步 作为前端人员要回答这个问题,需要了解这三个知识点: 同步 异步 Async/Await 首先,js 是单线程的(重复三遍),所谓单线程, 通俗的讲就是,一根筋...

蝈蝈2010
07/16
0
0
JavaScript 高阶函数介绍

如果你正在学习或使用 JavaScript, 那么一定遇到过高级函数这个术语。听起来很高级复杂,其实不然。 First-Class Functions JavaScript 将函数作为一等公民。这是因为函数是对象。 在 JavaSc...

chen9527
06/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python中使用epoll开发服务端程序

这是个很简单的C/S模型的程序,流程其实和C语言相差不大,客户端发送字符串,服务端再将该字符串返回客户端,epoll中使用的边缘触发。   #服务端代码 import socket, logging import select...

shzwork
27分钟前
1
0
C# .Net技术面试

1、引子   最近一直在负责.net(B/S方向)技术面试相关的工作,前前后后面试了不少人,但是通过率较低,大概只有20%左右;有颇多感慨。   最近也一直比较困惑,原因究竟是什么?   是我们...

元歌
31分钟前
1
0
趣图:苦逼的后端工程师

扩展阅读 趣图:前端程序员想改后台代码时,后台程序员的样子 趣图:后端工程师是怎样调试CSS的 趣图:程序猿和运维狗的工作日常……

Java面经
38分钟前
1
0
理解矩阵乘法

http://www.ruanyifeng.com/blog/2015/09/matrix-multiplication.html

gdxz110
38分钟前
2
0
Centos 安装 python2.7

Centos 安装 python2.7 参考资料 How To Set Up Python 2.7.6 and 3.3.3 on CentOS 6.4 (CentOS6.4 上安装 Python2.7.6 和 3.3.3 的方法) 清华大学 pip 源 Python 虚拟环境 virtualenv 安装......

汉高祖
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部