原生js深刻理解系列（二）--- js數組(數組的相應方法es6,es5)

時間 2019-12-05

標籤原生深刻理解系列數組相應方法 es6 es5 欄目 JavaScript 简体版

原文原文鏈接

1、源碼javascript

//源碼 --- starthtml

<!DOCTYPE html>
<html>java

<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>node

<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}];git

</html>github

//源碼 --- endapi

2、總結數組

這部分涉及的是數組的遍歷以及拼字符串，以及上一blog的innerHTML和outerHTML.
一、數組遍歷傳統的for。
二、es5 新增的forEach（）、map()方法，裏面都是傳一個回調函數，回調函數的值爲function(currentValue,index,targetArr);
三、forEach()的特色。
forEach方法返回值undefined。實現 forEach()除了拋出異常外，沒有辦法中止或打破循環。即：你不能使用break語句中斷循環，也不能使用return語句返回到外層函數。若是您須要這樣的行爲，該forEach()方法是錯誤的工具。用一個簡單的循環或for ...來  代替。若是您正在爲謂詞測試數組元素並須要布爾返回值，則可使用every()or some()替代。若是可用的話，新的方法find()或者findIndex()能夠用於提早終止真正的謂詞
    // forEach和map同樣是傳回調函數[2, 5, , 9].forEach(logArrayElements)，回調函數的參數爲（element, index, array），當前元素，index下標，目標數組。
四、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;
})*/
五、es6對於對象下標遍歷可以使用for。。。in ,他也能夠遍歷數組的下標；
六、es6屬於數組的遍歷可以使用for。。。of，他能夠遍歷Set,和Map的集合數組
七、es6提供了一個將對象的key轉化爲數組的方法，Object.keys;
八、es66提供了一個將對象的value轉化爲數組的方法，Object.values;
九、es6解構
十、...擴展運算符，能夠解析數組，字符串，相似數組對象，若是沒有部署 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"]

3、github連接：https://github.com/Mrliu1/newife/tree/master/blogTwoapp

歡迎交流和斧正。更歡迎點贊額！