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

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

/*
    在注釋下方編寫代碼
    遍歷讀取aqiData中各個(gè)城市的數(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ù)為一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)有三個(gè)參數(shù)：當(dāng)前元素，元素索引，整個(gè)數(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ù)組每個(gè)元素調(diào)用一次callback，判斷數(shù)組中數(shù)字大于60
});

Array.prototype.filter()

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

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

參數(shù)

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

描述

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

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

//參數(shù)a等于aqiData[i]，當(dāng)前元素的值
//參數(shù)b等于i，當(dāng)前元素的索引(下標(biāo))
//參數(shù)c等于aqiData，整個(gè)數(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 提供一個(gè) thisArg 參數(shù)，則它會(huì)被作為 callback 被調(diào)用時(shí)的 this 值。否則，callback 的 this 值在非嚴(yán)格模式下將是全局對(duì)象，嚴(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ù)奈恢脤?duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。 sort 排序不一定是穩(wěn)定的。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。

語(yǔ)法： 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ù)為一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)有三個(gè)參數(shù)：當(dāng)前元素，元素索引，整個(gè)數(shù)組
        city.forEach(function(v,i,a) { 
        var li = document.createElement("li");
        aqiUl.append(li);
        li.innerHTML = "第" + (i + 1) + "名" + v[0] + "," + v[1];
    });
})();

語(yǔ)法:

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

參數(shù)

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

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

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

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

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

//此時(shí)的city是已經(jīng)篩選完排好序
//參數(shù)為一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)有三個(gè)參數(shù)：當(dāng)前元素，元素索引，整個(gè)數(shù)組
//參數(shù)a等于city[i]，當(dāng)前元素的值
//參數(shù)b等于i，當(dāng)前元素的索引(下標(biāo))
//參數(shù)c等于city，整個(gè)數(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,要怎么獲取它并存入一個(gè)二維數(shù)組呢

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

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

var source = document.getElementById("source").getElementsByTagName("li");
var data = new Array();  //創(chuàng)建一個(gè)一維數(shù)組
for(var i = 0; i < source.length; i++){
    var data[i] = new Array(); //此時(shí)是個(gè)二維數(shù)組
    //這里通過(guò)slice將li中前兩位字符截取并存入數(shù)組中
    //因?yàn)閕nnerHTML都是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ù)值類