Javascript数组迭代精髓,拿去花
数组迭代
数组迭代是处理各数组的利器,编写代码时常常会用到,为我们提供了大大的便利。如果还不知道,真的别告诉别人你知道js哈哈。
以下迭代方法均不会改变原数组,带*为必选对象。
1、arr.forEach(function(*cur,index,arraySelf)) 此方法为每个数组元素调用一次函数(回调函数)
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(cur, index, array) {
txt = txt + cur;
}
console.log(txt) //返回:45491625
2、arr.map(function(*cur,index,arrSelf))对每个数组元素执行函数来创建新数组,不会对没有值的数组元素执行函数
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
console.log(number2) //返回[90,8,18,32,50]
3、arr.filter(function(*cur,index,arrSelf)) 创建一个包含通过测试的数组元素的新数组
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(over18); //返回[45,25]
4、arr.reduce(function(prev,cur,index,arrSelf),[initialValue]) 从左到右为每一个数组元素执行函数,并缩减数组的元素(不是改变原数组),最终计算为一个值,initialValue为初始值,没设置默认数组第一个元素为初始值,然后函数从数组第二个元素开始执行
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(*prev,*cur, index, arrSelf) {
console.log(prev, cur, index); //返回1,3,1
return prev + cur; //返回10
})
console.log(arr, sum); //这里没有设置初始值,默认为第一个元素1,最后返回**[1,2,3,4] 10 **,若设置初始值为10,则最后sum值为20
arr.every(function(*cur,index,arrSelf)) 检查所有数组值是否通过测试,如全部通过返回true,否则返回false
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(allOver18); //返回false
arr.some(function(*cur,index,arrSelf)) 检查是否存在数组值通过测试,如存在返回true,否则返回false
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(allOver18); //返回true
arr.find(function(*cur,index,arrSelf)) 返回通过测试函数的第一个数组元素的值
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(first); //返回25
以上对各方法的解释和例子参考w3cschool:https://www.w3school.com.cn/js/js_array_iteration.asp
如有不正确,欢迎指出改正
Javascript数组迭代精髓,拿去花的更多相关文章
- 松软科技web课堂:JavaScript 数组迭代方法
数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法.(文章来源:www.sysoft.net.cn,加v:15844800162深度交流) Array. ...
- javaScript 数组迭代方法
map 方法 解释:map即映射,返回对每项操作后组成的新数组 let arr=[1,2,3,4,5,6,7,8]; let newArr=arr.map((item)=>{ if(item&g ...
- Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...
- Javascript数组系列二之迭代方法1
我们在<Javascript数组系列一之栈与队列 >中介绍了一些数组的用法.比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数 ...
- JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))
JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...
- 19 JavaScript数组 &数组增删&最值&排序&迭代
关联数组(散列) 关联数组又叫做散列,即使用命名索引. JavaScript数组只支持数字索引. JavaScript对象使用命名索引,而数组使用数字索引,JavaScript数组是特殊类型的对象. ...
- Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...
- JavaScript 数组
JavaScript 数组 简介:数组是值的有序集合,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 一:创建数组 ...
- 也谈面试必备问题之 JavaScript 数组去重
Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...
随机推荐
- [转]前人挖坑,后人填坑—如何把那些bug挖掘出来
当我们放下一个项目转投下一个时,手头的东西就要转交给他人处理,或者..不再有人处理,可代码还在那里,搞不好你就引用了别人的东西,保不准哪天别人的代码里就爆出了个大 bug,当然这里的“别人”也可能是 ...
- [Wireshark]_002_玩转数据包
通过前一篇文章,我们大概了解了Wireshark,现在可以准备好进行数据包的捕获和分析了.这一片我们将讲到如何使用捕获文件,分析数据包以及时间格式显示等. 1.使用捕获文件 进行数据包分析时,其实很大 ...
- [C#打包部署教程]002.VS2012 + Dotfuscator
前言: C#程序界流传着一句古话:"成也Reflector,败也Reflector!" C#编写的代码如果不进行一定程度的混淆和加密,那么是非常容易被反编译进行破解的,特别是对于一 ...
- Java中的集合类型体系(一)
Java中的集合类型体系(一) 提问:为什么需要集合? 通常情况下,程序需要根据运行时才知道创建了多少对象.若非程序运行时,而在开发阶段,我们并不知道创建了多少对象,甚至不知道对象的准确类型,为了满足 ...
- 值得注意的Java基础知识
1)Java语言中默认(即缺省没写出)的访问权限,不同包中的子类不能访问. 中有4中访问修饰符:friendly(默认).private.public和protected. public :能被所有的 ...
- 第四篇-用Flutter手撸一个抖音国内版,看看有多炫
前言 这次对布局进行优化,主要包含了首页tabview pageview 以及添加几个按钮的操作过程.主要使用到stack层叠布局,tabpview和pageview,tabview两个页面,一个关注 ...
- [03]HTML基础之行内标签
1.<ruby>标签 显示东亚字符的发音(如中文,日文等),与<rp>,<rt>标签搭配. //<ruby>为单个发音字符的容器,<rp>为 ...
- JavaScript (六) js的基本语法 - - - Math 及 Date对象、String对象、Array对象
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Math 1.Math对象的案例 var result= Math.max(10,20,30,40) ...
- Java实现 LeetCode 754 到达终点数字(暴力+反向)
754. 到达终点数字 在一根无限长的数轴上,你站在0的位置.终点在target的位置. 每次你可以选择向左或向右移动.第 n 次移动(从 1 开始),可以走 n 步. 返回到达终点需要的最小移动次数 ...
- Java实现 LeetCode 557 反转字符串中的单词 III(StringBuilder的翻转和分割)
557. 反转字符串中的单词 III 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. 示例 1: 输入: "Let's take LeetCode c ...