前一段时间一直在写 CSS，以后这段时间会把百度前端学院有关 JavaScript 的任务写一写

任务一

任务目的

JavaScript初体验
初步明白JavaScript的简单基本语法，如变量、函数
初步了解JavaScript的事件是什么
初步了解JavaScript中的DOM是什么

任务描述

参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写
本任务完成的功能为：用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边

最终代码

<label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>
<div>您输入的值是：<span id="aqi-display">尚无录入</span></div>
<script type="text/javascript">
  (function() {
      /*    
      在注释下方写下代码
      给按钮button绑定一个点击事件
      在事件处理函数中
      获取aqi-input输入的值，并显示在aqi-display中
      */
      var $ = function(id){
        return document.getElementById(id);
      }
      var handler = function(){
        var num = parseInt($("aqi-input").value)
        if (!isNaN(num) && num >= 0 && num <= 500) {
          $("aqi-display").innerHTML = $("aqi-input").value;
        }else{
          $("aqi-display").innerHTML = "请输入范围为0-500的效数字";
        }
      }
      $("button").addEventListener("click",handler,false);

  })();
</script>

第一个任务还是很哪里不会点哪里的。

任务二

任务目的

在上一任务基础上继续JavaScript的体验
学习JavaScript中的if判断语法，for循环语法
学习JavaScript中的数组对象
学习如何读取、处理数据，并动态创建、修改DOM中的内容

任务描述

参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

最终代码

<h3>污染城市列表</h3>
<ul id="aqi-list">
<!--   
  <li>第一名：福州（样例），10</li>
  <li>第二名：福州（样例），10</li> -->
</ul>
<script type="text/javascript">
  var aqiData = [
    ["北京", 90],
    ["上海", 50],
    ["福州", 10],
    ["石家庄", 320],
    ["邯郸", 301],
    ["广州", 50],
    ["成都", 90],
    ["西安", 100]

  ];

  (function () {
      /*
      在注释下方编写代码
      遍历读取aqiData中各个城市的数据
      将空气质量指数大于60的城市显示到aqi-list的列表中
      */
      var $ = function(id){
        return document.getElementById(id);
      }
      var result = aqiData.filter(function(value){
        return (value[1] > 60);
      });
      result.sort(function(a,b){
        return b[1] - a[1];
      });
      for(var i = 0; i < result.length; i++){
        $("aqi-list").innerHTML += "<li>第" + (i+1) + "名：" + result[i][0] + "(样例)，" + result[i][1] + "</li>";
      }
   })();
</script>

这里对数组操作比较多，下面简单复习下数组。

Array

Array的创建

数组的创建方式分为以下两种

使用Array构造函数

var persons = new Array();
可以指定数组长度，比如长度为5的数组
var persons = new Array(5);
可以直接在构造函数中传递数组中包含的项
var persons = new Array("张三","李四","王五");

使用构造函数时可以省略new关键字
var persons = Array(4);

使用数组字面量

var persons = []; //空数组
var persons = ["张三","李四","王五"];

数组的长度

var persons = ["张三","李四","王五"];
alert(persons.length);  //3

可以利用lenght来给数组添加新的项

persons[persons.length] = "赵六";  //在数组末尾添加新的项

数组的判断

想要判断某个对象是否是数组，可以利用Array.isArray()方法

if(Array.isArray(someObject)){
  //对数组进行操作
}

转换方法

toString()方法

数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

var persons = ["张三","李四","王五"];
alert(persons.toString());  //返回一个字符串"张三,李四,王五"

关于toString和valueOf这两个方法的区别请点这里

join()方法

如果想要用不同的分隔符来构建字符串可以使用join方法，该方法只接收一个参数，用来作为字符串的分隔符。

var persons = ["张三","李四","王五"];
alert(persons.join("&"));

栈方法

栈是一种先进后出的数据结构在JavaScript数组中可以利用push和pop进行入栈和出栈。
push方法可以接收任意数量的参数，把它们添加到数组末尾，并返回修改后的数组长度。pop方法从数组末尾移除最后一项，减少数组的长度值，然后返回移除的项。

var persons = ["张三","李四","王五"];
var length = persons.push("赵六","麻七");
alert(persons.pop());  //麻七

队列方法

队列即先进先出利用shift()移除数组第一项并返回该项，数组长度减1，push()向数组末端添加新的项，并返回数组长度
unshift()方法能在数组前端添加任意个项并返回新数组的长度

重排序

数组的反转

可以利用reverse()对数组进行反转

var test = [1,2,3];
alert(test.reverse()); //3,2,1

数组的排序

可以使用sort()方法按照升序对数组进行排序。sort方法会调用每个数组项的toString方法，对得到的字符串进行比较，即使数组项是数值，也是比较的字符串。
sort方法可以接收一个比较函数，该函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数
在第二个任务中的sort就进行了降序排列

result.sort(function(a,b){
    return b[1] - a[1];
});

操作方法

数组的合并

concat方法

这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat()方法法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。

var persons = ["张三","李四"];
var people = persons.concat("Tom",["王五","赵六"]);

reduce或者reduceright方法

JS中的归并下面说，这里直接贴小例子了

var num = [1,2,3];
var num2 = [4,5,6]
var result = num2.reduce(function(pre,cur,index,array){
    pre.push(cur);
    return pre;
},num);
alert(result);  //1,2,3,4,5,6

数组的复制

利用slice()方法可以对数组进行复制，该方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项（不包括结束位置的项）

var persons = ["张三","李四","Tom","王五","赵六"];
alert(persons.slice(1,3))  //李四,Tom

数组的插入

在数组中一般使用splice来进行插入。详细用法如下

删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。

var persons = [“张三”,”李四”,”Tom”,”王五”,”赵六”];
persons.splice(0,2); //删除前两项
插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。

var persons = ["张三","李四","Tom","王五","赵六"];
person.splice(1,0,"John","Snow"); //张三,John,Snow,李四...
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等

var persons = ["张三","李四","Tom","王五","赵六"];
person.splice(1,2,"John","Snow"); //张三,John,Snow,王五...

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项(如果没有删除任何项，则返回一个空数组)

位置方法

利用indexOf和lastIndexOf，两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。最终返回查找项在数组中的索引，如果没有查到则返回-1
indexOf默认从索引为0出向后查找，lastIndexOf反之。

迭代方法

以下方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。

some() ：对数组中的每一项运行给定函数，如果该函数对任一项返回 true ，则返回 true
every() ：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true
forEach() ：对数组中的每一项运行给定函数。这个方法没有返回值。
map() ：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
filter() ：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。

下面列几个小例子

var num = [90,50,10,200,320];
num.some(function(item){
  return item>20;
});  //true
num.every(function(item){
  return item>20;
});  //false
num.forEach(function(item){
  //对每一项进行某些操作
});
num.map(function(item){
  return item-10;
});  //[80,40,0,190,310]
num.filter(function(item){
  return item>60;
}); [90,200,320]

归并方法

也就是刚才在数组合并那里用到的reduce和reduceRight，这两个函数会接收四个参数：
前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
比如求数组中所有数值的和

ar values = [1,2,3,4,5];
var sum = values.reduce(function(pre,cur,index,array){
    return pre + cur;
});
alert(sum)  //15;