js数组操作的for，forEach，for in，for of等区别

最新推荐文章于 2024-09-19 10:50:52 发布

原创最新推荐文章于 2024-09-19 10:50:52 发布 · 3.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #数组 #forEach

javascript 专栏收录该内容

8 篇文章

订阅专栏

数组操作是我们使用后端数据必不可少的知识

无论是json、数据库还是后台的nodejs，vue都需要我们熟练的操作数组等。

数组操作的区别

1、forEach:
1、不能遍历对象
2、不支持break，支持return
2、for in:
1、可以遍历数组和对象

2、会把序列转换为字符串

3、支持break跳出循环，不支持return

3、for of:
1、只能遍历数组，不能遍历对象
2、支持return

常规for遍历

1、可以清晰看出运行流程

2、可以通过break跳出循环遍历，不支持return

3、可以遍历对象

var arr = [1,2,3,4,5] ;
var num = 3 ;
for(let i = 0;i<arr.length;i++){
	if(i==num){        //当i=3，即第4次时，跳出循环，不再执行后面的循环
	    break;
	};
	console.log(arr[i]);
};

forEach遍历

forEach()是数组的一个方法（把数组当成对象看）

forEach(回调函数) 回调函数填写function(item多个数组参数,index多个序号,arr数组本身){遍历进行的行为}

一般不需要用到index序列,arr数组本身

1、声明式编程，不关心如何实现，不知道运行流程，不知道原理，就可以直接用

2、不支持break的使用，支持return

3、不能遍历对象，这个.forEach()方法是数组的方法，不能用于对象 obj.forEach()不存在，可以自己封装

运行示例：

与普通循环一样，循环数组length次

var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index){
	console.log(item);
});

测试break和return结果：

break：

var arr = [1,2,3,4,5] ;
var num = 3 ;
arr.forEach(function(item,index){
	if(index==num){
		break;    //forEach不支持break跳出循环，会报错
	};
	console.log(item);
})

return：

var arr=[1,2,3,4,5];
var num = 3 ;
arr.forEach(function(item,index){
	if(index==num){
		return;    //当执行到return 可跳出当前循环，执行下一次循环
                           //无法使用return操作输出值，只能用于控制跳出当前循环
	};
	console.log(item);
})

遍历对象：

var obj = {name:'kingan',age:'20'};
obj.forEach(function(item,index){        //.forEach()方法不能用于对象
	console.log(item);
})

for in 遍历

for in是原生js里的一种循环语法，并不是数组的方法

输出的不是数组参数而是数组参数的序列(字符串类型)

可以遍历对象

缺点：把数组内的参数变成字符串类型

少用，因为并不是我们需要使用的值

for in 示例

var arr = [1,2,3,4,5] ;
for(let key in arr){
	console.log(key);            //key是数组参数的序列
	console.log(typeof key);    //输出多个数组参数序列 会发现是字符string类型
}

测试break结果

for(let key in arr){
	if(key==num){
		break;        //当符合if条件时，跳出循环
	};
	console.log(key);
	console.log(typeof key);
}

遍历对象：

var obj={name:'kingan',age:'20'}
for(let key in obj){
	console.log(key，obj[key]);        //key是对象属性名，obj.key对象属性值，这里用obj[key]连接符
}

for of 遍历

支持return，能中途停止遍历

不能遍历对象

for of 示例

var arr = [1,2,3,4,5] ;           //for of不能遍历对象
var num = 3;
for(let val of arr){
	console.log(val);        //val是数组内的参数
	console.log(typeof val); //for of不会把数组参数变成字符串类型
}

测试break结果

var arr = [1,2,3,4,5] ;
var num = 3;
for(let val of arr){
        if(val==num){
		break;            //支持break跳出循环，当符合if跳出循环；不支持return会报错
	};
	console.log(val);        //val是数组内的参数
	console.log(typeof val); //for of不会把数组参数变成字符串类型
}

遍历对象：

var obj = {name:'kingan',age:'20'};
for(let val of obj){
	console.log(val);    //for of这个循环语法不能遍历对象
}

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com