js数组循环的几种方式总结

rubyshen 发布于2019-08-23 11:27 / 1752人阅读

摘要：循环最基本的循环方式，不多说。就是这循环循环是用来遍历对象的。输出循环都是新增数组的方法。循环数组指的的就是数组每一项的值。总结以上就是常用的几种循环总结，很多细节，原理之类的没有写。

前言

只描述了一些最基本的用法，和一些可能遇到的问题。一些细节，或者特殊写法之类的，没有。

1.for循环

最基本的循环方式，不多说。但是我在其它某篇文章上，听别人说，这种最基本的循环才是速度最快的，效率最高的。(就是这https://www.jb51.net/article/...

for(var i = 0;i<5;i++){
 console.log(i)
}

2.for in循环

for in循环是用来遍历对象的。要知道JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。（注意：遍历时不仅能读取对象自身上面的成员属性，也能遍历出对象的原型属性）

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指对象的属性名
console.log(prop, obj[prop]);
}
// 输出:
// a,1
// b,2
// c,3

for in同样可以用来循环数组,但是不推荐这么做。由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for in循环可以直接循环出Array的索引，但得到的是String而不是Number，所以一旦你想用这个index去进行计算，就会出错。而且因为会遍历原型属性，所以可能得出的结果不会是你想要的(具体细节不多说，需要了解的自己查询，反正很多坑)。虽然可以用hasOwnProperty()方法避免这个缺陷，但是何必呢，循环方法那么多，换一个就是了。

for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}

3. forEach循环

没什么好说的，看例子。(注意：forEach循环里面没办法用break跳出循环。而且在IE中无法实现，需要做兼容处理。)

let arr = ["123","qwewq","sfds"];
myArray.forEach(function (value, index) {
    console.log(value,index);
});
//输出
//"123",1
//"qwewq",2
//"sfds",3

4.map循环

forEach、map都是ECMA5新增数组的方法。map支持return

let arr = ["123","qwewq","sfds"];
arr.map(function(value,index){
    console.log(value,index);
});

//输出
//"123",1
//"qwewq",2
//"sfds",3

5.for of循环

作为ES6新增的循环方法，个人觉得相当好用，而且方便。这个方法避开了for-in循环的所有缺陷。而且，它可以正确响应break、continue和return语句。

//循环数组
let arr = ["123","qwewq","sfds"];
for(let item of arr){
    console.log(item);    //item指的的就是数组每一项的值。不是索引。
}
//输出
//"123"
//"qwewq"
//"sfds"

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。但是for of也有一个致命伤，就像例子看到的，没有索引。对，这是优点也是缺点。遍历数组对象，直接就是item.属性(或者item[属性]),而不用像for循环那样arr[index].属性(arrindex)。但是你有的时候真的就得用到index。不好意思，只能把数组转成Map()。但我觉得真的需要用到index，还是换成forEach吧。

//遍历字符串
let name = "Asher";
for (let char of name){
    console.log(char);         //A s h e r
}

此外，对于在ES6中新增的两种类型，Map和Set(如果学过Java或者其他有这两种类型的语言，会发现用法几乎一样)。for of同样适用。

let mapArray = new Map();
for (let [key, value] of mapArray) {
   console.log(key,value);
}
//Set集合同理，不列举了。

总结

以上就是常用的几种for循环总结，很多细节，原理之类的没有写。因为这只是一个简单使用的介绍，不想写那么多。此外，还有很多像while循环，do-while循环之类的其它循环方法，都没提。因为根据我的使用经验，上面的几种已经可以应对几乎所有情况了。

GPU云服务器云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96994.html

JS中轻松遍历对象属性的几种方式

摘要：当普通对象要转换成时就很有用，因为返回的格式与构造函数接受的格式完全相同。使用常规的构造函数可以将一个二维键值对数组转换成一个对象。在和早期标准中，根本没有指定属性的顺序。此函数还可以轻松地将纯对象属性映射到对象中。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！自身可枚举属性 Object.keys() 方法会返回一个...

isLishude 2019-08-26 10:35 评论0 收藏0
JavaScript知识点总结

摘要：参与任何数值计算的结构都是，而且。。面向人类的理性事物，而不是机器信号。达到无刷新效果。的工作原理总是指向一个对象，具体是运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。原型对象上有一个属性，该属性指向的就是构造函数。 1.JS面向对象的理解面向对象的三大特点：继承、封装、多态 1、JS中通过prototype实现原型继承 2、JS对象可以通过对象冒充，实现多重继承， 3...

sean 2019-08-22 13:51 评论0 收藏0
js类型检测的几种方式盘点

摘要：开始之前，必须要知道中关于类型的定义。作为基本类型也返回，因为在中的定义就是用来表示一个空对象指针。返回值类型总结一般用来检测，无法正确检测基本数据类型。但是注意，因为和都是类型。返回值类型总结这也是比较好的返回方式了。开始之前，必须要知道js中关于类型的定义。js中有6种基本类型，null，undefined,boolean,string,number,symbol(es6新增的类...

fantix 2019-08-23 18:29 评论0 收藏0
javascript的几种常见遍历数据结构的语法

摘要：接触这么多年，第一次总结一下它的遍历语法。而且你必须借助特定的结构才能遍历数据结构。它的作用是遍历对象的键名。建议仅在遍历数组的时候使用。另一个优点是，它可以遍历任何部署了接口的数据结构，甚至是非的数据类型，即自己定义的数据结构。接触JavaScript这么多年，第一次总结一下它的遍历语法。以前我大部分时间都在老版本的JavaScript下写代码，所以大部分时间都是用for...in...

kohoh_ 2019-08-22 10:41 评论0 收藏0