取出数组里边对象的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) + "月";
//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;//先全部为false
if (name == item.Name) { //判断item,操作item
item.checked = true;
} else {
item.checked = false;
}
})
},
//判断index 操作item
list.forEach((item, i) => {
item.checked = false;
if (index == i) { //判断i,操作item
item.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 无论怎样,总返回undefined
var 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 为 index
console.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
}
原文地址:https://www.jb51.cc/wenti/3283724.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。