摘要：返回表示保留該元素通過測試，則不保留。否則，的值在非嚴(yán)格模式下將是全局對象，嚴(yán)格模式下為。索引數(shù)組中正在處理的當(dāng)前元素的索引。當(dāng)執(zhí)行回調(diào)函數(shù)時用作的值參考對象。是數(shù)組組所以要帶，用轉(zhuǎn)換為數(shù)值類型。

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

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

1.使用filter方法獲取空氣質(zhì)量大于60的城市
2.使用sort方法將空氣質(zhì)量大于60的城市排序
3.使用forEach方法將數(shù)組元素遍歷到追加到

的innerHTML中
解題思路總結(jié)

1.使用filter方法獲取空氣質(zhì)量大于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) {   
//參數(shù)a等于aqiData[i],當(dāng)前的元素的值
    return a[1] > 60;                 
    //filter為數(shù)組每個元素調(diào)用一次callback，判斷數(shù)組中數(shù)字大于60
});

Array.prototype.filter()

filter 用指定的函數(shù)測試所有元素，并創(chuàng)建一個包含所有通過測試的元素的新數(shù)組

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

參數(shù)

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

描述

filter 為數(shù)組中的每個元素調(diào)用一次 callback 函數(shù)，并利用所有使得 callback 返回 true 或 等價于 true 的值 的元素創(chuàng)建一個新數(shù)組。callback 只會在已經(jīng)賦值的索引上被調(diào)用，對于那些已經(jīng)被刪除或者從未被賦值的索引不會被調(diào)用。那些沒有通過 callback 測試的元素會被跳過，不會被包含在新數(shù)組中。

callback被調(diào)用時傳入了三個參數(shù)
1.元素的值
2.元素的索引
3.被遍歷的數(shù)組
如:

//參數(shù)a等于aqiData[i]，當(dāng)前元素的值
//參數(shù)b等于i，當(dāng)前元素的索引(下標(biāo))
//參數(shù)c等于aqiData，整個數(shù)組
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 參數(shù)，則它會被作為 callback 被調(diào)用時的 this 值。否則，callback 的 this 值在非嚴(yán)格模式下將是全局對象，嚴(yán)格模式下為 undefined。

2.使用sort方法將空氣質(zhì)量大于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() 方法在適當(dāng)?shù)奈恢脤?shù)組的元素進(jìn)行排序，并返回數(shù)組。 sort 排序不一定是穩(wěn)定的。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。

語法： 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方法將數(shù)組元素遍歷到追加到

的innerHTML中

(function write(){
    //參數(shù)為一個回調(diào)函數(shù)，回調(diào)函數(shù)有三個參數(shù)：當(dāng)前元素，元素索引，整個數(shù)組
        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])

參數(shù)

callback
為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收三個參數(shù)：

currentValue(當(dāng)前值)
數(shù)組中正在處理的當(dāng)前元素。

index(索引)
數(shù)組中正在處理的當(dāng)前元素的索引。

array
forEach()方法正在操作的數(shù)組。

thisArg可選
可選參數(shù)。當(dāng)執(zhí)行回調(diào) 函數(shù)時用作this的值(參考對象)。

//此時的city是已經(jīng)篩選完排好序
//參數(shù)為一個回調(diào)函數(shù)，回調(diào)函數(shù)有三個參數(shù)：當(dāng)前元素，元素索引，整個數(shù)組
//參數(shù)a等于city[i]，當(dāng)前元素的值
//參數(shù)b等于i，當(dāng)前元素的索引(下標(biāo))
//參數(shù)c等于city，整個數(shù)組
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
});

獲取二維數(shù)組

這里有一段HTML,要怎么獲取它并存入一個二維數(shù)組呢

    
北京空氣質(zhì)量：90
    
上?？諝赓|(zhì)量：70
    
天津空氣質(zhì)量：80
    
廣州空氣質(zhì)量：50
    
深圳空氣質(zhì)量：40
    
福州空氣質(zhì)量：32
    
成都空氣質(zhì)量：90

1.首先我們先創(chuàng)建個一維數(shù)組并獲取到所有的li
2.通過for循環(huán)遍歷所有的li并且將每個li中的城市和空氣存入新數(shù)組我們將通過slice()方法來實現(xiàn)

var source = document.getElementById("source").getElementsByTagName("li");
var data = new Array();  //創(chuàng)建一個一維數(shù)組
for(var i = 0; i < source.length; i++){
    var data[i] = new Array(); //此時是個二維數(shù)組
    //這里通過slice將li中前兩位字符截取并存入數(shù)組中
    //因為innerHTML都是string類型，利用slice裁剪字符串。
    data[i][0] = source[i].innerHTML.slice(0,2);    
    //getElementsByTagName("b")是數(shù)組組所以要帶[0]，用Number轉(zhuǎn)換為數(shù)值類型。
    data[i][1] = Number(source[i].getElementsByTagName("b")[0].innerHTML);
        
}

總結(jié)：

filter 方法用于數(shù)組篩選
sort 方法用于數(shù)組排序
forEach 方法用于數(shù)組遍歷
slice 方法用于截取
Number 方法轉(zhuǎn)換數(shù)值類