Js中forEach,for in,for of循环的用法
取出数组里边对象的key和value值: 取出数组里边对象的key和value值_chu_geng的博客-CSDN博客_获取数组里面对象的value值
转自:js中forEach,for in,for of循环的用法 - 探索之路慢慢 - 博客园
一般的遍历数组的方法:
var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i++) { console.log(i,array[i]); }
二、用for in的方遍历可以数组,也可以遍历对象,数组 得到数组的下标或者对象的key key:value -> a:1
//遍历数组
for(let index in array) { console.log(index,array[index]);
};
其中 index代表 key//遍历对象
var A = {a:1,b:2,c:3,d:"hello world"};
for(let k in A) { console.log(k,A[k]);
}
五、在ES6中,增加了一个for of循环,使用起来很简单、直接得到值(不能作用于对象)
for(let value of array) { console.log(value); };
总结来说:for in总是得到对象的key或数组,字符串的下标,(let key in obj,键=> key) 值=> obj[key]
而for of和forEach一样,是直接得到值、for of不能作用于对象
三、forEach 只能操作数组 //(item,index) 系统固定第一个是值item,第二个是index下标 不可以改变顺序
基本类型我们当次循环拿到的ele,只是forEach给我们在另一个地方复制创建新元素,是和原数组这个元素没有半毛钱联系的!所以,我们使命给循环拿到的ele赋值都是无用功!
专业的概念说就是:JavaScript是有基本数据类型与引用数据类型之分的。对于基本数据类型:number
,string
,Boolean
,null
,undefined
它们在栈内存中直接存储变量与值。而Object对象的真正的数据是保存在堆内存,栈内只保存了对象的变量以及对应的堆的地址,所以操作Object其实就是直接操作了原数组对象本身。
forEach 的基本原理也是for循环,使用arr[index]的形式赋值改变,无论什么就都可以改变了。
一般在项目中数组操作的都是对象数组(即操作会改变原数组),而不是字符串等基本数据类型的数组
1、基本数据类型 -> 死都改不动原数组!const array = [1, 2, 3, 4];
array.forEach(ele => {
ele = ele * 3
})
console.log(array); // [1,2,3,4]2、引用类型 -> 类似对象数组可以爽快改变偶~const objArr = [{name: 'wxw',age: 22
}, {name: 'wxw2',age: 33
}]
objArr.forEach(ele => {if (ele.name === 'wxw2') {ele.age = 88}
})
console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]4、终极无敌屡试不爽的方法!// 基本类型可以欧~
const numArr = [33,4,55];
numArr.forEach((ele, index, arr) => {if (ele === 33) {arr[index] = 999}
})
console.log(numArr); // [999, 4, 55]
cltIssueArr.forEach((ele, index, arr) => {arr[index] = ele.slice(-2) + "月";arr[index].month = item.month + "月";/*or*/ele.name = ele.name + "s"//return arr;//一般不加return,会终端代码向下执行,处理单个数据的时候可以,多个不行,只能最后return
});// 引用类型也可以欧~
const allChangeArr = [{name: 'wxw',age: 22
}, {name: 'wxw2',age: 33
}]
allChangeArr.forEach((ele, index, arr) => {if (ele.name === 'wxw2') {arr[index] = {name: 'change',age: 77}}
})
console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]array.forEach((item,index,array)=>{ //item为遍历的当前元素,index为当前索引,array为正在操作的数组console.log(item);
});//举例
//判断item,操作item (item与i 是相对应关系,属于同一组)
isChecks(val) {let name = val;let list = this.data.list;list.forEach((item, i) => {item.checked = false;//先全部为falseif (name == item.Name) { //判断item,操作itemitem.checked = true;} else {item.checked = false;}})},//判断index 操作item
list.forEach((item, i) => {item.checked = false;if (index == i) { //判断i,操作itemitem.checked = true;} else {item.checked = false;}})
用map吧let newarr = arr.map(item=>item*5)
四、用for in不仅可以对数组,也可以对enumerable对象操作
var A = {a:1,b:2,c:3,d:"hello world"};
for(let k in A) { console.log(k,A[k]);
}
let s = "helloabc";
for(let c of s) {
console.log(c);
}
总结来说:for in总是得到对象的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
结果for of不能对象用
对于新出来的Map,Set上面
var set = new Set(); set.add("a").add("b").add("d").add("c"); var map = new Map(); map.set("a",1).set("b",2).set(999,3); for (let v of set) { console.log(v); } console.log("--------------------"); for(let [k,v] of map) { console.log(k,v); }
javascript遍历对象详细总结
1.原生javascript遍历
(1)for循环遍历
let array1 = ['a','b','c'];
for (let i = 0;i < array1.length;i++){console.log(array1[i]); // a b c
}
(2)JavaScript 提供了 foreach() map() 两个可遍历 Array对象 的方
forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;
Array.forEach(function(value , index , array){ //value为遍历的当前元素,index为当前索引,array为正在操作的数组//do something
},thisArg) //thisArg为执行回调时的this值
不同点:
forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined;
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组;
例子如下:
var array1 = [1,2,3,4,5];var x = array1.forEach(function(value,index){console.log(value); //可遍历到所有数组元素return value + 10
});
console.log(x); //undefined 无论怎样,总返回undefinedvar y = array1.map(function(value,index){console.log(value); //可遍历到所有数组元素return value + 10
});
console.log(y); //[11, 12, 13, 14, 15] 返回一个新的数组
对于类似数组的结构,可先转换为数组,再进行遍历
let divList = document.querySelectorAll('div'); //divList不是数组,而是nodeList//进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){element.classList.add('test')
})Array.prototype.slice.call(divList).forEach(function(element,index){element.classList.remove('test')
})[...divList].forEach(function(element,index){ //<strong>ES6写法</strong>//do something
})
(3)for ··· in ··· / for ··· of ···
for...in
语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。每次迭代时,分配的是属性名
补充 : 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。
let array2 = ['a','b','c']
let obj1 = {name : 'lei',age : '16'
}for(variable in array2){ //variable 为 indexconsole.log(variable ) //0 1 2
}for(variable in obj1){ //variable 为属性名console.log(variable) //name age
}
ES6新增了 遍历器(Iterator)机制,为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作 ( Iterator详解 : http://es6.ruanyifeng.com/#docs/iterator ),每次迭代分配的是 属性值
原生具备 Iterator 接口的数据结构如下:
Array Map Set String TypedArray 函数的arguments对象 NodeList对象
let array2 = ['a','b','c']
let obj1 = {name : 'lei',age : '16'
}for(variable of array2){ //<strong>variable 为 value</strong>console.log(variable ) //'a','b','c'
}for(variable of obj1){ //<strong>普通对象不能这样用</strong>console.log(variable) // 报错 : main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
}<br><br>let divList = document.querySelectorAll('div');<br><br>for(element of divlist){ //可遍历所有的div节点<br> //do something <br>}
如何让普通对象可以用for of 进行遍历呢? http://es6.ruanyifeng.com/#docs/iterator 一书中有详细说明了!
除了迭代时分配的一个是属性名、一个是属性值外,for in 和 for of 还有其他不同 (MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)
for...in循环会遍历一个object所有的可枚举属性。
for...of会遍历具有iterator接口的数据结构
for...in
遍历(当前对象及其原型上的)每一个属性名称,而 for...of遍历(当前对象上的)每一个属性值
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};let iterable = [3, 5, 7];
iterable.foo = "hello";for (let i in iterable) {console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}for (let i of iterable) {console.log(i); // logs 3, 5, 7
}
Js中forEach,for in,for of循环的用法相关推荐
- js中forEach以及forEach跳出循环
for与forEach的区别 1.for循环可以使用break跳出循环,但forEach不能.那forEach能不能跳出循环呢?可以,不过不是使用break,而是结合try catch操作(下面有写如 ...
- JS中 new FormData() - FormData对象的作用及用法
JS中 new FormData() - FormData对象的作用及用法 js FormData 方法介绍 formData是ajax2.0(XMLHttpRequest Level2)新提出的接口 ...
- js中substr,substring,indexOf,lastIndexOf,split 的用法
js中substr,substring,indexOf,lastIndexOf,split等的用法 1.substr substr(start,length)表示从start位置开始,截取length ...
- js中foreach有三种写法,你知道吗
JavaScript的foreach 初始化 写法 1.经典写法 2.js的foreach 3.es6的foreach 初始化 先创建一个h5文件,并定义一个数组 <!DOCTYPE html& ...
- JS 中 Math 对象的【三角函数】的用法与实战例子【打靶游戏】 | Math.tan(), Math.cos(), Math.sin()
不少人在学习JavaScript的时候,都知道有那么一个用于数学计算的类 Math,现在来简单回顾以下,强大的 Math 类中,有哪些属性和哪些方法: 如果用JS做前端的时候,就会发现跟 Math 类 ...
- JavaScript中forEach、for-in、for-of循环的比较
传统for循环 传统for循环遍历数组 var arr=[2,56,78,34,7]; for(var i=0;i<arr.length;i++) {console.log(arr[i]); / ...
- JS中 forEach 方法添加属性遇到 “obj“ is not extensible 的解决方法 (不可扩展、密封、冻结的对象添加属性)
项目中有可能会遇到not extensible的对象,这个时候我们只能拷贝一份对象,然后再我们新拷贝的对象中进行数据操作. 以下为sample代码: var copiedData = [] // 用于 ...
- js中bind、call、apply函数的用法
最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web 的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站. ...
- Vue中foreach数组与js中遍历数组的写法
场景 Vue中使用Axios发送get或者post请求,发送请求时需要在js中 对请求参数进行遍历并处理. 接收响应时需要对响应结果进行遍历和处理. 注意区分在vue和js中foreach数组的区别. ...
最新文章
- 为特定用户创建监牢 chroot
- C++实现在正方体8个顶点上放数字使得三组相对的面上的4个顶点的和都相等
- UVa11019 Matrix Matcher(hash+kmp)
- Spring入门第一例
- vim的代码折叠:设置默认代码不折叠
- 苹果新手机软件测试,苹果即将发布iOS 14.5正式版,测试工作已进入最后阶段
- 在Eclipse中使用JUnit4进行单元测试(图文教程一)
- “AS3.0高级动画编程”学习:第二章转向行为(下)
- C# 字符、字符串过滤,只能输入数字、中文、英文、大写、小写(转)
- Android 系统(197)---USB VID
- 工业互联网:制造业的二次升级
- android截图保存在哪,电脑f12截屏一般保存在什么位置 | 手游网游页游攻略大全...
- 经典蓝牙Inquiry过程的跳频
- 1015 计算摄氏温度值
- Mybatis最拿得出手的功能之一 SpringBoot整合Mybatis-Plus 实战之动态SQL
- maya! board_3D角色模型很难做?Maya、Zbrush人头建模终极秘笈
- 酯化反应固体酸催化剂
- 前端学习日记2-html表单元素
- 游戏的衰落,更迭的结果
- [2021.9.29]某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米。
热门文章
- python画两个科赫雪花_Python 绘制科赫雪花的简单实现
- location.href的几种用法
- java计算椭圆的面积_java算法3_蒙特卡洛方法(Monte Carlo method)求PI和椭圆面积
- 计算机必读经典教材图书推荐
- 颈椎病的知识介绍系列文章
- 150多个神奇的网站
- 调用海康工业相机图像获取方式之主动取流(getimagebuffer )
- 小学算术运算测试c语言,用C语言制作一个小学算术运算测试
- 电子表格控件SpreadJS V14.0 Update2全新来袭——增强表格编辑器
- ESP32学习笔记 - ESP32使用GUI-Guider制作LVGL图形界面