摘要：返回表示保留該元素通過測試，則不保留。否則，的值在非嚴格模式下將是全局對象，嚴格模式下為。索引數組中正在處理的當前元素的索引。當執行回調函數時用作的值參考對象。是數組組所以要帶，用轉換為數值類型。

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方法將數組元素遍歷到追加到

的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方法將數組元素遍歷到追加到

的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,要怎么獲取它并存入一個二維數組呢

    
北京空氣質量：90
    
上海空氣質量：70
    
天津空氣質量：80
    
廣州空氣質量：50
    
深圳空氣質量：40
    
福州空氣質量：32
    
成都空氣質量：90

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 方法轉換數值類