Js遍历数组总结
Js遍历数组总结
遍历数组的主要方法为for
、forEach
、map
、for in
、for of
。
for
var arr = [1,2,3,4,5];
var n = arr.length; // 直接取长度,避免每次循环都读取arr对象的属性
for(let i=0; i<n; ++i ){
console.log(arr[i]);
}
// 1 2 3 4 5
//循环体也可以这么写
for(let i=0, len=arr.length; i<len; ++i ){
console.log(arr[i]);
}
// 1 2 3 4 5
forEach
Array.prototype.forEach()
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
callback
为数组中每个元素执行的函数,该函数接收一至三个参数
currentValue
数组中正在处理的当前元素
index
可选 数组中正在处理的当前元素的索引
array
可选 正在操作的数组
thisArg
可选 当执行回调函数callback
时,用作this
的值
注意如果使用箭头函数表达式来传入callback
,thisArg
参数会被忽略,因为箭头函数在词法上绑定了this
值
注意如果想在遍历执行完之前结束遍历,那么forEach
与map
并不是好的选择
var arr = [1,2,3,4,5];
var obj = { a: 1 }; // 定义obj为了演示this用
arr.forEach( function(currentValue,index,array) {
console.log("当前值",currentValue);
console.log("当前值索引",index);
console.log("当前处理数组",array);
console.log("当前this指向",this);
console.log("结束一次回调,无需返回值");
console.log("");
},obj);
/*
当前值 1
当前值索引 0
当前处理数组 (5)[1, 2, 3, 4, 5]
当前this指向 {a: 1}
结束一次回调,无需返回值
当前值 2
当前值索引 1
当前处理数组 (5)[1, 2, 3, 4, 5]
当前this指向 {a: 1}
结束一次回调,无需返回值
...........
*/
// forEach使用频率较高,但是性能不如普通for循环
map
Array.prototype.map()
arr.map(callback(currentValue [, index [, array]])[, thisArg])
callback
为数组中每个元素执行的函数,该函数接收一至三个参数
currentValue
数组中正在处理的当前元素
index
可选 数组中正在处理的当前元素的索引
array
可选 正在操作的数组
thisArg
可选 当执行回调函数callback
时,用作this
的值
注意如果使用箭头函数表达式来传入callback
,thisArg
参数会被忽略,因为箭头函数在词法上绑定了this
值
注意map
回调函数return
的结果组成了新数组的每一个元素,原数组被映射成对应新数组
var arr = [1,2,3,4,5];
var obj = { a: 1 }; // 定义obj为了演示this用
var newArr = arr.map( function(currentValue,index,array) {
console.log("当前值",currentValue);
console.log("当前值索引",index);
console.log("当前处理数组",array);
console.log("当前this指向",this);
console.log("");
return currentValue + 10; // 将arr值加10返回成为新数组
},obj);
console.log(newArr); // [11, 12, 13, 14, 15]
/*
当前值 1
当前值索引 0
当前处理数组 (5)[1, 2, 3, 4, 5]
当前this指向 {a: 1}
当前值 2
当前值索引 1
当前处理数组 (5)[1, 2, 3, 4, 5]
当前this指向 {a: 1}
...........
*/
//这种方式也是用的比较广泛的,但性能不如forEach
for in
// 此方法遍历数组效率非常低,主要是用来循环遍历对象的属性
// 遍历数组
var arr = [1,2,3,4,5];
for(item in arr){
console.log(arr[item]);
}
// 1 2 3 4 5
// 数组遍历时需注意,数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。
// 不能保证for ... in将以任何特定的顺序返回索引。
// for ... in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。
// 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。
// 因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环
// 遍历对象
var obj = {a:1,b:2};
for(item in obj){
console.log(obj[item]);
}
// 1 2
// for ... in是为遍历对象属性而构建的
for of
for of
为ES6
新增,其在可迭代对象包括Array
,Map
,Set
,String``TypedArray
,arguments
对象等等上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
var arr = [1,2,3,4,5];
for (let value of arr) {
console.log(value);
}
// 1 2 3 4 5
operate
Array.prototype
还提供了对于数组的判断与过滤操作,every()
、some()
、find()
、findIndex()
、filter()
var arr = [1,2,3,4,5];
// arr.everymap(callback(currentValue [, index [, array]])[, thisArg])
// every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
console.log(arr.every( (currentValue ) => {
return currentValue > 1;
})) // false
console.log(arr.every( (currentValue ) => {
return currentValue > 0;
})) // true
// arr.some(callback(element[, index[, array]])[, thisArg])
// some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
console.log(arr.some( (currentValue ) => {
return currentValue > 1;
})) // true
console.log(arr.some( (currentValue ) => {
return currentValue > 6;
})) // false
// arr.find(callback(element[, index[, array]])[, thisArg])
// find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
console.log(arr.find( (currentValue ) => {
return currentValue > 2;
})) // 3
console.log(arr.find( (currentValue ) => {
return currentValue > 6;
})) // undefined
// arr.findIndex(callback(element[, index[, array]])[, thisArg])
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。
console.log(arr.findIndex( (currentValue ) => {
return currentValue > 2;
})) // 2
console.log(arr.findIndex( (currentValue ) => {
return currentValue > 6;
})) // -1
// arr.filter(callback(element[, index[, array]])[, thisArg])
// filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
console.log(arr.filter( (currentValue ) => {
return currentValue > 2;
})) // [3, 4, 5]
参考
https://blog.csdn.net/function__/article/details/79555301
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
Js遍历数组总结的更多相关文章
- 【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
- JS遍历数组类型元素
已停供用户不能再次停供,之前没太处理过多维数组的遍历,趁这个机会回顾一下js数组遍历 可以看出rows 获取了两条数据,为二维数组类型 方法 function batchTgWin() { var r ...
- JavaScript的使用以及JS常用函数(JS 遍历数组和集合)
JavaScript入门 学习总结 1. 什么是 JavaScript 2. JavaScript 的特点 3. JS的使用 编写位置 基本语法 变量 打印变量 数据类型 innerHTML和inne ...
- js遍历数组的错误方法
for (var index in myArray) { // don't actually do this console.log(myArray[index]); } 缺点: 数组的索引值inde ...
- js遍历数组和遍历对象的区别
<script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.l ...
- js遍历数组对象和非数组对象
//---------for用来遍历数组对象 var i,myArr = ["a","b","c"]; ; i < myArr.len ...
- js 遍历数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- js遍历数组和遍历对象
可以用for in来遍历对象,具体内容如下: <script type="text/javascript"> var objs = { ...
- js遍历数组和数组对象
<script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.l ...
随机推荐
- JVM类文件结构
作为一名Java后台开发的程序员, 深入理解JVM, 重要性不言而喻, 这篇文章主要是记录JVM类文件结构相关知识. 2. 实例 这部分比较抽象, 所以以实例的形式来学习. 这部分作为资料, 以便后面 ...
- 导入项目@override 报错处理
将项目导入MyEclipse中后总有错:@override总是报错,没关系,不用着急,偶来告诉你解决办法. @override报错,鼠标放上去让你移除,是因为你的JDK版本太低,一般JDK是要在1.6 ...
- Python——11面向对象编程基础
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- Java工作流引擎结合可视化表单开发,10分钟完成一个业务流程发布
回忆以前工作流引擎的应用,感觉历历在目啊!当初公司接了一个项目关于政府单位公文流转的管理系统,一开始客户跟我画了十多张业务流程图.话说这十多张业务流程图,涉及的业务范围还蛮多,像用审批授权,开通流程, ...
- Spring 事务传播机制和数据库的事务隔离级别
Propagation(事务传播属性) 类别 传播类型 说明 支持当前事务 REQUIRED 如果当前没有事务,就新建一个事务.@Transaction的默认选择 支持当前事务 SUPPORTS 就以 ...
- python+opencv->边缘提取与各函数参数解析
前情提要:作为刚入门机器视觉的小伙伴,第一节课学到机器视觉语法时觉得很难理解, 很多人家的经验,我发现都千篇一律,功能函数没解析,参数不讲解,就一个代码,所以在此将搜集的解析和案例拿出来汇总!!! 一 ...
- (26)ASP.NET Core EF保存(基本保存、保存相关数据、级联删除、使用事务)
1.简介 每个上下文实例都有一个ChangeTracker,它负责跟踪需要写入数据库的更改.更改实体类的实例时,这些更改会记录在ChangeTracker中,然后在调用SaveChanges时会被写入 ...
- vmware企业虚拟化平台vSphere管理与配置
├─1-CCIE-DC课程介绍.avi ├─2-vSphere-简介.avi ├─3-vSphere-新功能介绍.avi ├─4-vSphere-授权介绍.avi ├─5-vSphere-课程拓扑介绍 ...
- ES6的原始类型数据——Symbol
javascript中原始值,即基本数据类型,像Number,String,Boolean,undefined,Null都是基本类型值,保存在栈中,但是有个疑问: Symbol打印出来明明是个函数,具 ...
- 用python实现LBP特征点计算
import cv2 import numpy as np def olbp(src): dst = np.zeros(src.shape,dtype=src.dtype) for i in rang ...