es6方法實現陣列的遍歷以及js高效能的拼字串,以及es6的部分方法的使用
一、原始碼
//原始碼 --- 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
歡迎交流和斧正。更歡迎點贊額！