本篇文章给大家介绍一下 6 种 JS 数组遍历方法: for,foreach,for in,for of,. each, ().each 的区别. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
一, for
JavaScript 中的 for 循环, 它用来遍历数组
- var arr = [1,2,3,4]
- for(var i = 0 ; i<arr.length ; i++){
- console.log(arr[i])
- }
- //1,2,3,4
九九乘法表:
- for ( var x = 1; x <= 9; x++) {
- var str="";
- for ( var y = 1; y <= x; y++) {
- str+=x + "*" + y + "=" + (x * y)+" ";
- }
- console.log(str);
- }
二, foreach
forEach 循环我们可以直接取到元素, 同时也可以取到 index 值. 但是 forEach 也有一些局限, 不能 continue 跳过或者 break 终止循环
- let arr = ['a', 'b', 'c', 'd']
- arr.forEach(function (val, index, arr) {
- console.log('index:'+index+','+'val:'+val) // val 是当前元素, index 当前元素索引, arr 数组
- console.log(arr)
- })
- //index:0,val:a
- //["a", "b", "c", "d"]0: "a"1: "b"2: "c"3: "d"
- //index:1,val:b
- //["a", "b", "c", "d"]
- //index:2,val:c
- //["a", "b", "c", "d"]
- //index:3,val:d
- //["a", "b", "c", "d"]
- [].forEach(function(value,index,array){
- //do something
- });
等价于:
- $.each([],function(index,value,array){
- //do something
- })
三, for in
for(var item in arr|obj){} 可以用于遍历数组和对象
遍历数组时, item 表示索引值, arr 表示当前索引值对应的元素 arr[item]
遍历对象时, item 表示 key 值, arr 表示 key 值对应的 value 值 obj[item]
for in 一般循环遍历的都是对象的属性, 遍历对象本身的所有可枚举属性, 以及对象从其构造函数原型中继承的属性
- var obj = {a:1, b:2, c:3};
- for (let item in obj) {
- console.log("obj." + item + "=" + obj[item]);
- }
- // obj.a = 1
- // obj.b = 2
- // obj.c = 3
- var arr = ['a','b','c'];
- for (var item in arr) {
- console.log(item) //0 1 2
- console.log(arr[item]) //a b c
- }
四, for of
ES6 中新增加的语法 for of 语句创建一个循环来迭代可迭代的对象. 在 ES6 中引入的 for of 循环, 以替代 for in 和 forEach() , 并支持新的迭代协议. for of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合) 等可迭代的数据结构等.
循环一个数组:
- let arr = ['A', 'B', 'C']
- for (let val of arr) {
- console.log(val)
- }
- // A B C
循环一个字符串:
- let iterable = "abc";
- for (let value of iterable) {
- console.log(value);
- }
- // "a"
- // "b"
- // "c"
循环一个 Map:
- let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
- for (let [key, value] of iterable) {
- console.log(value);
- }
- // 1
- // 2
- // 3
- for (let entry of iterable) {
- console.log(entry);
- }
- // [a, 1]
- // [b, 2]
- // [c, 3]
循环一个 Set:
- let iterable = new Set([1, 1, 2, 2, 3, 3]);
- for (let value of iterable) {
- console.log(value);
- }
- // 1
- // 2
- // 3
循环一个拥有 enumerable 属性的对象
for of 循环并不能直接使用在普通的对象上, 但如果我们按对象所拥有的属性进行循环, 可使用内置的 Object.keys() 方法:
- for (var key of Object.keys(someObject)) {
- console.log(key + ":" + someObject[key]);
- }
循环一个生成器 (generators):
- function* fibonacci() { // a generator function
- let [prev, curr] = [0, 1];
- while (true) {
- [prev, curr] = [curr, prev + curr];
- yield curr;
- }
- }
- for (let n of fibonacci()) {
- console.log(n);
- // truncate the sequence at 1000
- if (n>= 1000) {
- break;
- }
- }
五, jQuery 里面的 $.each
$.each(arr|obj, function(k, v))
可以用来遍历数组和对象, 其中 k 表示索引值或者 key 值, v 表示 value 值
- var arr = ['a','b','c']
- $.each(arr, function(key, val) {
- console.log(key, val);
- })
- //0 a
- //1 b
- //2 c
六, jQuery 里面的 $().each()
$().each() 在 dom 处理上面用的较多, 主要是用来遍历 DOMList. 如果页面有多个 input 标签类型为 checkbox, 对于这时用 $().each() 来处理多个 checkbox, 例如:
- $("input[name='checkbox']").each(function(i){
- if($(this).attr('checked')==true){
- // 操作代码
- }
结论:
推荐在循环对象属性的时候使用 for in, 在遍历数组的时候的时候使用 for of;
for in 循环出的是 key,for of 循环出的是 value;
for of 是 ES6 新引入的特性. 修复了 ES5 的 for in 的不足;
for of 不能循环普通的对象, 需要通过和 Object.keys() 搭配使用.
跳出循环的方式有如下几种:
return 函数执行被终止;
break 循环被终止;
continue 循环被跳过.
本文转载自: https://segmentfault.com/a/1190000017394445
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17565.html