IFE JS練習(二|三) 數組的sort,forEach,slice和filter方法

代碼塊:

var aqiData = [
    ["北京", 90],
    ["上海", 50],
    ["福州", 10],
    ["廣州", 50],
    ["成都", 90],
    ["西安", 100]
];

/*
    在註釋下方編寫代碼
    遍歷讀取aqiData中各個城市的數據
    將空氣質量指數大於60的城市顯示到aqi-list的列表中
*/
         
var aqiUl = document.getElementById('aqi-list');
    var city = aqiData.filter(function (a) {   //參數a等於aqiData[a]
        return a[1] > 60;                 //判斷數組中數字大於60
    });
    city.sort(function (a,b) {
        return b[1] - a[1];
    });
    (function write(){
        city.forEach(function(v,i,a) { //參數爲一個回調函數，回調函數有三個參數：當前元素，元素索引，整個數組
        var li = document.createElement('li');
        aqiUl.append(li);
        li.innerHTML = "第" + (i + 1) + "名" + v[0] + "," + v[1];
    });
})();

解題思路

1.使用filter方法獲取空氣質量大於60的城市
2.使用sort方法將空氣質量大於60的城市排序
3.使用forEach方法將數組元素遍歷到追加到<ul>的innerHTML中

解題思路總結

1.使用filter方法獲取空氣質量大於60的城市

//不使用filter方法
var city = [];
for(var i = 0; i < aqiData.length; i++){
    if(aqiData[i][1] > 60){
        city.push(aqiData[i][1]);
    }
}

//使用filter方法
var city = aqiData.filter(function (a) {   
//參數a等於aqiData[i],當前的元素的值
    return a[1] > 60;                 
    //filter爲數組每一個元素調用一次callback，判斷數組中數字大於60
});

Array.prototype.filter()

filter 用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組

語法：var new_array = arr.filter(callback[, thisArg])

參數

callback
用來測試數組的每一個元素的函數。調用時使用參數 (element, index, array)。
返回true表示保留該元素（經過測試），false則不保留。
thisArg
可選。執行 callback 時的用於 this 的值。
返回值
一個新的經過測試的元素的集合的數組

描述

filter 爲數組中的每一個元素調用一次 callback 函數，並利用全部使得 callback 返回 true 或 等價於 true 的值 的元素建立一個新數組。callback 只會在已經賦值的索引上被調用，對於那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有經過 callback 測試的元素會被跳過，不會被包含在新數組中。

callback被調用時傳入了三個參數
1.元素的值
2.元素的索引
3.被遍歷的數組
如:

//參數a等於aqiData[i]，當前元素的值
//參數b等於i，當前元素的索引(下標)
//參數c等於aqiData，整個數組
var city = aqiData.filter(function (a,i,v) {   
    return a[1] > 60;                 
    console.log(a[1]) //90,50,10,50,90,100
    console.log(aqiData[i][1]) //90,50,10,50,90,100
    console.log(v[i][1])  //90,50,10,50,90,100
});

若是爲 filter 提供一個 thisArg 參數，則它會被做爲 callback 被調用時的 this 值。不然，callback 的 this 值在非嚴格模式下將是全局對象，嚴格模式下爲 undefined。

2.使用sort方法將空氣質量大於60的城市排序

//不使用sort方法
function swap(arr,index1,index2){
    var temp = arr[index1];
    arr[index1] = arr[index2];
    arr[index2] = temp;
}

var arr = city,i,j;
//冒泡排序
for(j = 0; j < arr.length; j++){
    for(i = 0; i < arr.length - j; i++){
        if(arr[i] > arr[i+1]){
            swap(arr,i,i+1);
        }
    }
}

//使用sort方法
city.sort(function (a,b) {
    return b[1] - a[1];
});

Array.prototype.sort()

sort() 方法在適當的位置對數組的元素進行排序，並返回數組。 sort 排序不必定是穩定的。默認排序順序是根據字符串Unicode碼點。

語法： arr.sort() arr.sort(compareFunction)

描述

若是是a - b就按照升序排列 [1,2,3]
若是是b - a就按照降序排列[3,2,2]

city.sort(function (a,b) {
    return b[1] - a[1]  // 100,90,90
    return a[1] - b[1]  //90,100,100
});

3.使用forEach方法將數組元素遍歷到追加到<ul>的innerHTML中

(function write(){
    //參數爲一個回調函數，回調函數有三個參數：當前元素，元素索引，整個數組
        city.forEach(function(v,i,a) { 
        var li = document.createElement('li');
        aqiUl.append(li);
        li.innerHTML = "第" + (i + 1) + "名" + v[0] + "," + v[1];
    });
})();

語法:

array.forEach(callback(currentValue, index, array){
    //do something
}, this)
array.forEach(callback[, thisArg])

參數

callback
爲數組中每一個元素執行的函數，該函數接收三個參數：

• currentValue(當前值)
  數組中正在處理的當前元素。

• index(索引)
  數組中正在處理的當前元素的索引。

• array
  forEach()方法正在操做的數組。

thisArg可選
可選參數。當執行回調 函數時用做this的值(參考對象)。

//此時的city是已經篩選完排好序
//參數爲一個回調函數，回調函數有三個參數：當前元素，元素索引，整個數組
//參數a等於city[i]，當前元素的值
//參數b等於i，當前元素的索引(下標)
//參數c等於city，整個數組
city.forEach(function(v,i,a) { 
    var li = document.createElement('li');
    aqiUl.append(li);
    li.innerHTML = "第" + (i + 1) + "名" + v[0] + "," + v[1];
    console.log(v[1]) //100,90,90
    console.log(city[i][1]) //100,90,90
    console.log(a[i][1])  //100,90,90
});

獲取二維數組

這裏有一段HTML,要怎麼獲取它並存入一個二維數組呢

<!--
數組格式以下:
data = [
       ["北京", 90],
       ["北京", 90]
       ……
       ]  
-->
<ul id="source">
    <li>北京空氣質量：<b>90</b></li>
    <li>上海空氣質量：<b>70</b></li>
    <li>天津空氣質量：<b>80</b></li>
    <li>廣州空氣質量：<b>50</b></li>
    <li>深圳空氣質量：<b>40</b></li>
    <li>福州空氣質量：<b>32</b></li>
    <li>成都空氣質量：<b>90</b></li>
</ul>

1.首先咱們先建立個一維數組並獲取到全部的li
2.經過for循環遍歷全部的li而且將每一個li中的城市和空氣存入新數組咱們將經過slice()方法來實現

var source = document.getElementById('source').getElementsByTagName('li');
var data = new Array();  //建立一個一維數組
for(var i = 0; i < source.length; i++){
    var data[i] = new Array(); //此時是個二維數組
    //這裏經過slice將li中前兩位字符截取並存入數組中
    //由於innerHTML都是string類型，利用slice裁剪字符串。
    data[i][0] = source[i].innerHTML.slice(0,2);    
    //getElementsByTagName('b')是數組組因此要帶[0]，用Number轉換爲數值類型。
    data[i][1] = Number(source[i].getElementsByTagName('b')[0].innerHTML);
        
}

總結：

filter 方法用於數組篩選
sort 方法用於數組排序
forEach 方法用於數組遍歷
slice 方法用於截取
Number 方法轉換數值類