一、源码
//源码 --- start
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<h2>污染城市列表</h2>
<ul id="showCity">
<li>第一名:福州,(样例)10</li>
<li>第二名:福州,(样例)10</li>
</ul>
<script type="text/javascript">
var apiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
//这里可以调map处理的
appendNode(apiData);
// traditionFor(apiData)
// ESFor(apiData)
function traditionFor(apiData) {
/*
在注释下方编写代码
遍历读取aqiData中各个城市的数据
将空气质量指数大于60的城市显示到aqi - list的列表中 */
//传统的for循环
var newArr = [];
var html = '';
//获取ul下之前的子节点并转为字符串形式
html=document.getElementById('showCity').outerHTML.replace('<ul id="showCity">','').replace('</ul>','');
console.log(html)
for (var i = 0, len = apiData.length; i < len; i++) {
if(apiData[i][1]>60){
newArr.push(apiData[i]);
//性能较优这里只是字符串的拼装,并不涉及到dom的渲染
html += '<li>'+apiData[i]+'</li>';
//性能较差涉及到dom渲染
/* var node=document.createElement("li");//创造一个li标签
var textNode = document.createTextNode(apiData[i]);
node.appendChild(textNode);
document.getElementById('showCity').appendChild(node);*/
}
}
console.log(html)
document.getElementById('showCity').innerHTML = html;
return newArr;//返回实现的新数组
}
//使用map的方法实现,返回一个新数组,map返回后是可以在进行遍历的
/* eg:var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(obj =>{
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
})*/
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],
function appendNode (arr) {
var html = '';
var newArr = [];
var dealArr=arr.map((item,index)=>{
if(item[1]>60){
html += '<li>'+item+'</li>';
newArr.push(item);
return item;
}
})
document.getElementById('showCity').innerHTML = html;
console.log(1,dealArr);
console.log(2,newArr)
return newArr
}
//forEach方法返回值undefined。实现 forEach()除了抛出异常外,没有办法停止或打破循环。
//如果您需要这样的行为,该forEach()方法是错误的工具。用一个简单的循环或for ...来 代替。
//如果您正在为谓词测试数组元素并需要布尔返回值,则可以使用every()or some()替代。
//如果可用的话,新的方法find()或者findIndex()可以用于提前终止真正的谓词
// forEach和map一样是传回调函数[2, 5, , 9].forEach(logArrayElements),回调函数的参数为(element, index, array),当前元素,
// index下标,目标数组
function ESFor(arr){
let newArr=[];
let html='';
arr.forEach((value)=> {
if(value[1]>60) {
html += '<li>'+ value +'</li>';
newArr.push(value);
}
})
document.getElementById('showCity').innerHTML = html;
return newArr
}
</script>
</body>
</html>
//源码 --- end
二、总结
这部分涉及的是数组的遍历以及拼字符串,以及上一blog的innerHTML和outerHTML. 1、数组遍历传统的for。 2、es5 新增的forEach()、map()方法,里面都是传一个回调函数,回调函数的值为function(currentValue,index,targetArr); 3、forEach()的特点。 forEach方法返回值undefined。实现 forEach()除了抛出异常外,没有办法停止或打破循环。即:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。如果您需要这样的行为,该forEach()方法是错误的工具。用一个简单的循环或for ...来 代替。如果您正在为谓词测试数组元素并需要布尔返回值,则可以使用every()or some()替代。如果可用的话,新的方法find()或者findIndex()可以用于提前终止真正的谓词 // forEach和map一样是传回调函数[2, 5, , 9].forEach(logArrayElements),回调函数的参数为(element, index, array),当前元素,index下标,目标数组。 4、map() 的特点。 //使用map的方法实现,返回一个新数组,map返回后是可以在进行遍历的 /* eg:var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]; var reformattedArray = kvArray.map(obj =>{ var rObj = {}; rObj[obj.key] = obj.value; return rObj; })*/ 5、es6对于对象下标遍历可使用for。。。in ,他也可以遍历数组的下标; 6、es6属于数组的遍历可使用for。。。of,他可以遍历Set,和Map的集合数组 7、es6提供了一个将对象的key转化为数组的方法,Object.keys; 8、es66提供了一个将对象的value转化为数组的方法,Object.values; 9、es6解构 10、...扩展运算符,可以解析数组,字符串,类似数组对象,如果没有部署 Iterator 接口,就使用Array.from方法将arrayLike转为真正的数组。 Map 和 Set 结构, Generator 函数是可以直接使用...的。 let aa='qwrtwtwert';[...aa] (10) ["q", "w", "r", "t", "w", "t", "w", "e", "r", "t"]//字符串转化为数组;==Array.from(aa) 11,Array.from一般与new Set(),创建一个去重的数组 eg: cc= ["q", "w", "r", "t", "w", "t", "w", "e", "r", "t"]; let dd=Array.from(new Set(cc));console.log(1,dd); 打印出:1 (5) ["q", "w", "r", "t", "e"]
三、github链接:https://github.com/Mrliu1/newife/tree/master/blogTwo
欢迎交流和斧正。更欢迎点赞额!