百度前端技术学院task13-task15的总结

前言：之前学了js，但是都是基础，而且前段时间忙期末，忙专利，也忘得差不多了。。。最近在看js高级程序设计，感觉收获挺多。本来想每看一个阶段就来这里写一下读书笔记的，但是又觉得有点浪费时间，还是就在书上写写画画算了。以后用到再进一步具体总结。这两天写了三个小任务，来总结一下吧。

task13

代码：https://github.com/sunyueru/IFE/tree/master/task13

demo：https://sunyueru.github.io/IFE/task13/task13.html

这个任务比较简单，而且题目也给好了框架。大体上就是一个自调用函数里面有一个事件处理函数，然后给按钮绑定点击事件就可以。

主要就是要注意判断条件，我一开始就没加 。。。还有一个小优化，我也是review别人的代码学到的，就是添加onkeyup事件。

下面说一下onkeyup这个之前没有接触过的知识点吧：

onkeyup事件本身不难，在js中的语法就是：object.onkeyup=function(){};

指的是键盘松开时发生。

结合这段代码来看一下：

input.onkeyup=function(event){
if(event.keyCode===13){
handle();
}
}

这里的function传入的是一个event对象（之后细说这个对象的知识点），接着event有一个属性keyCode，它指的是被敲击的键的虚拟键盘码。这里13对应的就是enter。

所以这段代码的意思就是按回车键，执行handle（）函数。

task14

代码：https://github.com/sunyueru/IFE/blob/master/task14/task14.html

demo：https://sunyueru.github.io/IFE/task14/task14.html

这个任务我想记录两个知识点：

数组排序以及二维数组的排序

如何动态的创建dom的内容。

最后就是要记得先排序再筛选，总体逻辑要清晰。

数组排序sort（）

先来说明一下sort函数：

sort（）函数本身是通过比较字符串来实现排序的，所以直接使用的时候必然不理想。sort函数可以接受一个比较函数作为参数，来指定排序方式。

例如：

function compare(value1,value2){
if(value1<value2)
4000
{
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}

简单写就是：

function compare(a,b)
{
return a - b
}

var values=[1,,3,5,10,2];
values.sort(compare);
alert(values);//1,2,3,5,10

至于为什么传入compare就可以做到按序排列，涉及冒泡排序的思想以及高阶函数的知识。不细说了，我也说不太明白。。。。

那么，如果一个数组是二维的，第一项不是数字，要给第二项排序，怎么办呢？

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

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

比如这里aqiData是一个二维数组。那么对应的a,b也应该是一个二维数组对象，所以在排序的时候返回值应该是数组的第二项（第二项才是数字），a[1]和b[1]的差值。

最后啰嗦一下，sort返回值是被排序之后的数组。也就是说会改变原有数组。

动态创建dom内容

var myLi=document.createElement("li");
myLi.innerHTML="第"+num[i]+"名:"+aqiData[i][0]+','+aqiData[i][1];
aqiList.appendChild(myLi);

createElement是创建一个对象，一般要和appendChild一起使用。

执行完第一句代码之后，就会创建一对

<li></li>

标签。可以自己console.log看看。然后就是定义li里面的内容，最后就是使用appendChild，把创建的标签加到其父元素上面。

function render(data) {
var resort=document.getElementById("resort");
var list=["一","二","三","四","五","六","七"];
var myinnerHTML="";
for(var i=0;i<data.length;i++){
myinnerHTML += "<li>第"+list[i]+"名："+data[i][0]+"空气质量："+"<b>"+data[i][1]+"</b></li>";
}
resort.innerHTML=myinnerHTML;
}

还有一种就是不使用createElement，直接通过字符串的拼接，不断添加内容。

要注意几点：

不要忘记初始化myinnerHTML，即 var myinnerHTML=”“;

因为不止要创建一对li标签，所以不要忘记是字符串的拼接，也就是使用“+=”

最后结束了for循环了，就把object的innerHTML设置为拼接好的字符串就行了。

task15

代码：https://github.com/sunyueru/IFE/tree/master/task15

demo：https://sunyueru.github.io/IFE/task15/task15.html

这个任务的框架题目也搭建好了，最开始调用init（）函数。init函数就是一个按钮点击触发事件。触发事件函数内部又有几个小函数，分别是读取数据，给数据排序，把数据动态添加到dom里。

写的时候，render函数和前一个任务差不多，排序也没问题了。主要就是getData函数写的时候，小bug不断的。。。。还是对dom的操作不够熟悉。

function getData() {
var ul=document.getElementById("source");
var lis=ul.getElementsByTagName("li");
var data=new Array();
for(var i=0;i<lis.length;i++){
var city=lis[i].innerHTML.split("空气质量：")[0];
// var num=lis[i].getElementsByTagName("b")[0],不加[0]试试？
var num=lis[i].getElementsByTagName("b")[0].innerHTML;
data.push([city,num]);
}
//alert(data);
return data;
}

getData的主要任务就是要从一串字符中选取你需要的片段。

如何获取城市名

如何获取数字

城市名称的获取主要是要用到string对象的split方法。

先说一下这个方法的语法：

var city=lis[i].innerHTML.split("空气质量：")[0];

对应这里的代码解释：因为通过“空气质量：”切割之后返回的数组有两个元素，第一个元素是城市，这个不难。只要注意lis【i】是一个object，后面不要忘记加innerHTML。

可以试一下console.log第二个元素是什么？

console.log(lis[0].innerHTML.split("空气质量：")[1])

结果是：

<b>数字</b>

.

所以直接写

var city=lis[i].innerHTML.split("空气质量：")[1];

是不行的。这条路貌似走不通，其实我觉得有办法，但是我没有继续了。

所以如何获取数字？

思路就是直接通过getElementsByTagName（“b”）

但是这里有一个问题没有想通，就是这个返回的是一个数组？

所以需要在后面加【0】，不加有问题。

错误代码：

var num=lis[i].getElementsByTagName("b").innerHTML;

正确代码：

var num=lis[i].getElementsByTagName("b")[0].innerHTML;

我再研究研究，之后再来追加修改吧。

最后需要注意的就是使用push来追加data数组元素。栈方法

每次添加一个data【i】，每个data【i】都是一个数组【city，num】

这个注意一下就行，data是一个二维数组撒。