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 方法转换数值类