文档章节

[转发]for 循环,jQuery循环遍历详解

o
 osc_g8254g7s
发布于 2019/08/19 18:28
字数 1592
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1.for 循环
原生JS最基本的使用:

for (var i=0;i<cars.length;i++)
{
    .....
}


for - 循环代码块一定的次数
2.for in
for/in - 循环遍历对象的属性
以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行

 

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);

// for (variable in object) {...}
// variable
// 在每次迭代时,将不同的属性名分配给变量。
// object
// 被迭代其枚举属性的对象。

 

for…in 不应该被用来迭代一个下标顺序很重要的 Array .

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
}


3.forEach()和map()
JavaScript 提供了 foreach() map() 两个可遍历 Array对象 的方法 forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;
forEach() 方法对数组的每个元素执行一次提供的函数。

let a = ['a', 'b', 'c'];
a.forEach(function(element) {
    console.log(element);
});
array.forEach(callback(currentValue, index, array){
    //do something
}, this)

array.forEach(callback[, thisArg])

参数:

callback为数组中每个元素执行的函数,该函数接收三个参数:

currentValue(当前值)
数组中正在处理的当前元素。
index(索引)
数组中正在处理的当前元素的索引。
array
forEach()方法正在操作的数组。
thisArg可选可选参数。当执行回调 函数时用作this的值(参考对象)。
forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到

两者的不同点:
不同点:

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]   返回一个新的数组


4.for…of
ECMAScript 6新方法
for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环,以替代 for…in 和 forEach() ,并支持新的迭代协议。for…of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等 for…of 循环仅适用于迭代。 而普通对象不可迭代

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}
 
for(variable  of array2){   /variable  为 value
  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


总结 :
:for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
结果for of不能对象用
对于新出来的Map,Set上面
for…in循环会遍历一个object所有的可枚举属性。
for…of会遍历具有iterator接口的数据结构

如果是数组循环:
原始的for循环比较麻烦,forEach,这种写法的问题在于,无法中途跳出forEach循环,break命令或return命令都不能奏效。
for…in数组循环有几个缺点:
数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
for…in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
某些情况下,for…in循环会以任意顺序遍历键名。
总之,for…in循环主要是为遍历对象而设计的,不适用于遍历数组
for…of循环相比上面几种做法,有一些显著的优点:
有着同for…in一样的简洁语法,但是没有for…in那些缺点。
不同于forEach方法,它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

如果是循环对象,用for in

jquery 循环的用法
jQuery的each方法的几种常用的用法

var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 }); 


//上面这个each输出的结果分别为:one,two,three,four

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});    


//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1 4 7

var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(key, val) {     
    alert(obj[key]);           
});   


//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4

jQuery更适用的遍历方法
1)先获取某个集合对象
2)遍历集合对象的每一个元素
var d=$(“div”);
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});

    $(function(){
        var con=[
            {
                "image1":"img/1524880084962.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879960117.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879605807.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879181488.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            }
            
        ]
        var html="";
        $.each(con, function(k,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
            html+='<li class="shopBox">'+
                    '<div class="shopImg"><img src='+con[k].image1+'/></div>'+
                    '<div class="shopListName">'+con[k].shopName+'</div>'+
                    '<div class="shopPrice">'+
                        '<span class="price">¥'+con[k].price+'</span>'+
                        '<span class="marketPrice">¥'+con[k].markPrice+'</span>'+
                    '</div>'+
                '</li>'
        });
        $(".shop_box").append(html);
    })

 注意如果是后台返回的是Json字符串请一定要转换一下:

//data是后台传过来的字符串
  $.each(JSON.parse(data), function (index, obj) {    //使用JSON.parse转换为JavaScript对象。 要不控制台报错  index是下标  obj是内容 如果是对象的话就 obj.(名称就可以)
  alert(index);
 });  

 如果不使用JSON.parse()来转换  会报   Uncaught TypeError: Cannot use 'in' operator to search for '156'   错误


————————————————
版权声明:本文为CSDN博主「_dalianmiao」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hani_wen/article/details/81878112

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

unity列表控件Horizontal/Vertical/Grid Layout Group用法介绍

1. Grid Layout Group 为Panel控件添加Grid Layout Group,子控件为四个按钮,分别为Grid,Calendar,Gear,User: 默认属性为 为方便演示,按钮的底色为控件自带image,按钮上面的图标为其子...

路过暴风
26分钟前
19
0
Distinct()与lambda? - Distinct() with lambda?

问题: Right, so I have an enumerable and wish to get distinct values from it. 是的,所以我有一个可枚举的,并希望从中获得不同的值。 Using System.Linq , there's of course an ext......

法国红酒甜
32分钟前
8
0
学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
今天
17
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
41
1
MySQL 常用操作

1 创建/打开/删除数据库 create database db;create database db character set utf8mb4;use db;drop database db;alter database db character set utf8mb4; 2 修复表 mysqlcheck --a......

氷泠
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部