数组迭代

数组迭代是处理各数组的利器,编写代码时常常会用到,为我们提供了大大的便利。如果还不知道,真的别告诉别人你知道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数组迭代精髓,拿去花的更多相关文章

  1. 松软科技web课堂:JavaScript 数组迭代方法

    数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法.(文章来源:www.sysoft.net.cn,加v:15844800162深度交流) Array. ...

  2. javaScript 数组迭代方法

    map 方法 解释:map即映射,返回对每项操作后组成的新数组 let arr=[1,2,3,4,5,6,7,8]; let newArr=arr.map((item)=>{ if(item&g ...

  3. Javascript数组系列三之迭代方法2

    今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...

  4. Javascript数组系列二之迭代方法1

    我们在<Javascript数组系列一之栈与队列 >中介绍了一些数组的用法.比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数 ...

  5. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  6. 19 JavaScript数组 &数组增删&最值&排序&迭代

    关联数组(散列) 关联数组又叫做散列,即使用命名索引. JavaScript数组只支持数字索引. JavaScript对象使用命名索引,而数组使用数字索引,JavaScript数组是特殊类型的对象. ...

  7. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  8. JavaScript 数组

    JavaScript 数组 简介:数组是值的有序集合,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 一:创建数组 ...

  9. 也谈面试必备问题之 JavaScript 数组去重

    Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

随机推荐

  1. PHP相关_几个操作记录下

    1.JSON转换 var cloneTesttaskList = <?php echo json_encode(json_encode($cloneTesttaskList));?>; v ...

  2. Java IO(十五)FilterReader 和 FilterWriter、FilterReader 子类 PushBackReader

    Java IO(十五)FilterReader 和 FilterWriter.FilterReader 子类PushBackReader 一.介绍 FilterReader 和 FilterWrite ...

  3. django-模型层(ORM语法)

    今日内容概要(重要) 模型层(ORM语法):跟数据库打交道的 单表查询(增删改查) 常见的十几种查询方法 神奇的双下划线查询 多表操作 外键字段的增删改查 跨表查询(重点) 子查询 联表查询 今日内容 ...

  4. Rocket - tilelink - ProbePicker

      简单介绍ProbePicker的实现.   ​​   1. 基本介绍   用于把多个Cache client合并成一个: ​​   2. diplomacy node   ProbePicker的 ...

  5. 概念辨析-Description Language还是Description Library?

    https://mp.weixin.qq.com/s/p7eyD6GkniFGHrnr8t2SZQ   概念辨析-Description Language还是Description Library? ...

  6. eclipse中的Invalid text string (xxx).

    这个是说明在eclipse中引用HTML的时候,语法出现了不规范的错误 可以到https://www.w3school.com.cn/index.html里面找找对应对象的问题 我之前就是option ...

  7. SpringMVC(二)返回值设置、数据在域中的保存与SpringMVC案例

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.返回值的设置 1.返回 String [1]返回 String 默认情况 @RequestMappi ...

  8. Java实现 蓝桥杯 算法提高 三进制数位和

    算法提高 三进制数位和 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 给定L和R,你需要对于每一个6位三进制数(允许前导零),计算其每一个数位上的数字和,设其在十进制下为S. 一个 ...

  9. Java实现二阶魔方旋转

    魔方可以对它的6个面自由旋转. 我们来操作一个2阶魔方(如图1所示): 为了描述方便,我们为它建立了坐标系. 各个面的初始状态如下: x轴正向:绿 x轴反向:蓝 y轴正向:红 y轴反向:橙 z轴正向: ...

  10. Linux 工作管理

    把进程放入后台 进程后加&,这时,进程在后台是运行的 tar -zcf etc.tar.gz /etc & 在执行程序时,快速按下ctrl+z快捷键,这时,进程在后台是停止的 查看后台 ...