Home >Web Front-end >JS Tutorial >Detailed explanation of key and value steps obtained by js loop map

Detailed explanation of key and value steps obtained by js loop map

php中世界最好的语言Original: 2018-05-22 11:54:245171browse

This time I will bring you a detailed explanation of the key and value steps obtained by js loop map. What are the precautions for the key and value obtained by js loop map. The following is a practical case, let's take a look.

Method 1: json format definition

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
var dxy={
//Page地址 
  pageUrl : { 
    menu      :  "loadPage.htm?url=/collect/menu.page",     // 进入菜单页面 
    guangfaPage   :  "loadPage.htm?url=/collect/menu.page",     // 进入广发信息收集页面 
    pinganPage   :  "loadPage.htm?url=/collect/menu.page",     // 进入平安信息收集页面 
    nuonuoPage   :  "loadPage.htm?url=/collect/menu.page",     // 进入诺诺信息收集页面 
    youbangPage   :  "loadPage.htm?url=/collect/menu.page",     // 进入友邦信息收集页面 
    inputMobileNo : "loadPage.htm?url=/collect/inputMobileNo.page",  // 进入输入手机号页面 
    readIdCard   : "loadPage.htm?url=/collect/readIdCard.page",    // 进入读取身份证页面 
    member     : "loadPage.htm?url=/collect/member.page",      // 进入输入会员卡号页面 
    bankCard    : "loadPage.htm?url=/collect/bankCard.page",     // 进入插入银行卡页面 
    url      : "loadPage.htm?url=/collect/url.page"        // 进入跳转url页面 
  } 
}
for(var key in dxy.pageUrl){ 
  alert(key+" : "+dxy.pageUrl[key]); 
}
</script>
</body>
</html>

Code 2,

var obj = { 
 "a": 1, 
 "b": 2, 
 "c": 3 
}; 
 
for (var prop in obj) { 
 if (obj.hasOwnProperty(prop)) {  
 // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety... 
  alert("prop: " + prop + " value: " + obj[prop]) 
 } 
}

Script House editor’s demonstration

li One row, four columns, alternate rows are displayed without using colors

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
var obj = { 
"http://www.2016idc.com/cdn.html" : "◆◆◆◆◆高防免备案CDN◆◆◆◆◆",
"http://www.zoneidc.com/" : "1G香港云49元/美国云49元/韩国云89元",
"http://click.aliyun.com/m/15321/" : "30余款阿里云产品免费6个月",
"http://www.kaivps.com/cloud.html": "◆好优云◆抗攻击◆无视CC◆免备◆稳定◆",
"http://www.laoyuming.com/new.html" : "【15000个备案老域名】每天更新400个",
"http://seo.whbtsj.com/" : "★百度快速上首页，无效果不收费★",
"http://www.osssnet.com/" : "◆50M香港/美国/日本服务器380免备案◆",
"http://www.cuwww.com" : "█香港服务器租用百兆带宽1300起█",
"http://www.guowaidiaocha.com/" : "★国外调查 月赚两万，一对一教学带你★",
"http://www.enkj.com/idc/" : "【亿恩】DELL品牌服务器，月付799元起",
"http://www.hkcn2.com/51.htm" : "**香港高防10m大带宽独服，低至999元**",
"https://www.zllyun.com/cloud.shtml" : "知了云,OpenStack云服务器◆5折优惠◆",
"http://www.8000idc.com" : "— — 香港云33元美国云39元快云21元 — —",
"https://www.50vm.com/" : "4核独服199/16核独服360|创梦网络",
"https://cloud.tencent.com/act/campus?fromSource=gwzcw.846004.846004.846004" : "腾讯云拼团福利 1核2G云服务器10元/月",
"http://www.zitian.cn/" : "中原地区核心数据中心，月付299元起",
"http://www.7yc.com/rent.html" : "██云彩网络██100G防服务器450元",
"http://www.dsx.top/" : "产品发布、创业开店、需求任务找大师兄",
"http://www.gwidc.com/rent/home/index.html" : "港湾网络-徐州百独16核16G 800/月~",
"http://www.ssf.cc/" : "免备vps20/百独799/双线350/45互联",
"http://www.ushk.net/server.html" : "██美港数据██高端香港服务器租用",
"http://vps.zzidc.com/tongji/jb51w.html" : "★☆云服务器5折，天天抽红包抵扣☆★",
"http://www.ku86.com/" : "百兆 12核24线程 16G内存 2T 999/月",
"http://www.xiaozhiyun.com/2016/" : "韩国\香港\美国站群服务器 巨牛网络",
"http://www.wsisp.net/sale/20170518/?indexjb" : "█▇▆5M独享云主机599/年▆▇█",
"http://www.qy.com.cn/" : "群英云服务器送10M带宽30G防御,49元起",
"http://www.tuidc.com/" : "服务器租用/托管-域名空间/认准腾佑科技",
"http://www.jjidc.com/" : "九九数据 — 工信部认可正规资质IDC接入商",
"https://www.95idc.com" : "95IDC█香港沙田CN2服务器 599/月",
"http://www.33ip.com/" : "枫信科技-江苏双线10M保证-399/元",
"https://youhui.jb51.net/" : "★★领取天猫淘宝最高2018元红包★★",
"http://www.pdidc.com/" : "浦东数据中心上海电信4星云主机30元/月起",
"http://www.139w.com/" : "鼎点网络百兆独享服务器仅需999元",
"http://www.360jq.com/hkshuang.htm" : "[香港双高防]无视CC★DDOS/堪比广东！",
"http://www.cyidc.cc/" : "畅游网络 百独服务器 包跑满 998元",
"http://www.wdw6.com/" : "服务器租用 199元起"
}; 
var jbstr="";
var i=0;
var color="blue";
for (var jbkey in obj) {
 if (obj.hasOwnProperty(jbkey)) {	 
 // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety... 
 //alert(i);
  if(i % 4 == 0){
		if(color=="blue"){
			color="red";
		}else{
			color="blue";
		}
 	}
	jbstr+='<li><a href="&#39;+jbkey+&#39;" rel="external nofollow" target="_blank"><span style="color:&#39;+color+&#39;;">'+obj[jbkey]+'</span></a></li>';
i++
 }
} 
document.write(jbstr);
</script>
</body>
</html>

Code 3, Double Map Loop

var msg = ""; 
for(var key in Pin) { 
  for(var i in Pin[key]){ 
  msg+=i+": "+Pin[key][i]+"\n"; 
  } 
} 
alert(msg);

The following are the supplements from other netizens, you can refer to them

javascriptLoop Traverse the arrayOutput key value

javascript loops through the array to output key value
Using the $.each method will definitely not work, so the following method is used

markers = [];
    markers[2]=3;
    markers[3]=7;
    for(var key in markers){
      console.log( key )
      console.log( markers[key] )
    }

I believe I read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Detailed explanation of key and value steps obtained by js loop map

Related articles