零基础JavaScript编码（二）

时间 2019-11-13

标签零基础 javascript 编码栏目 JavaScript 繁體版

原文原文链接

任务目的javascript

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

任务描述html

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

<!DOCTYPE html>java

<html>git

<head>github

<title>IFE JavaScript Task 01</title>框架

</head>函数

<body>学习

<h3>污染城市列表</h3>ui

<!--

<li>第一名：福州（样例），10</li>

<li>第二名：福州（样例），10</li> -->

</ul>

var aqiData = [

["北京", 90],

["上海", 50],

["福州", 10],

["广州", 50],

["成都", 90],

["西安", 100]

];

(function () {

在注释下方编写代码

遍历读取aqiData中各个城市的数据

将空气质量指数大于60的城市显示到aqi-list的列表中

})();

</script>

</body>

</html>

任务注意事项

实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
请注意代码风格的整齐、优雅
代码中含有必要的注释
其中的数据以及60的判断逻辑能够自行设定
建议不使用任何第三方库、框架
示例代码仅为示例，能够直接使用，也能够彻底本身重写

在线学习参考资料

任务二：零基础JavaScript编码（二）总结-数组

数组是一个特殊的变量，能够同时使用一个名字储存一个以上的值，并能够经过下标获取指定值。

一、 建立一个数组

语法：

（1）var array-name = [“item1”, “item2”, ...];

（2）var array-name = [

“item1”,

“item2”,

“item3”,

...

]

（3）var array-name = new Array(“item1”, “item2”, ...);

（4）ar array-name = new Array();

（5） var points = [];

注意:从简洁、可读性、执行速度方面考虑，使用第一种方式更好。

二、 获得数组中指定元素

使用下标获得数组中值。

获得数组中某个元素：例如：var name = cars[0];

修改数组中某个元素：cars[0] = "Opel";

数组元素小标从0开始。

三、 获得所有数组元素

JavaScript中，使用数组名可获得数组中全部元素。

例如：var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

四、 数组是特殊的对象，与对象不彻底相同

数组一个特殊的对象，数组typeof的返回值为“object”。

但JavaScript中数组更像数组而不像对象。

数组使用下标获得它的元素，对象经过成员名获得成员值。

五、 同一个数组能够有不一样类型的元素，能够有对象、函数、数组。

六、 数组的属性和方法。

（1）length属性

Length属性，返回数组长度，即数组元素个数。

（2）isArray()函数

Array.isArray(cars);

若cars为数组返回true，不是返回false。

（3）toString()函数

将数组的值转为string，元素之间以逗号分隔。

eg: cars.toString();

（4）join()函数

将数组的值转为string，与toString()不一样的是，可指定元素之间分隔符的类型。

eg: cars.join(" * ");

（5）pop()函数

移除数组中最后一个元素，返回值为被移除的元素，返回值类型为string。

（6）push() 函数

在数组元素末尾增长元素，返回值为新数组的长度。

（7）shift()函数

移除数组中第一个元素，并将其余元素“shifts”到更小的下标，返回值为被移除的元素，返回值类型为string。

（8）unshift() 函数

将元素添加到数组的第一个元素，并将其余元素“unshifts”。返回值为新数组的长度。

（9）splice()函数

向数组添加多个元素或从数组移除元素

eg: fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义新元素插入的位置。

第二个参数（0）说明有几个元素被移除。

剩下的参数（"Lemon", "Kiwi"）定义要插入的新元素。

eg: fruits.splice(0, 1);

没有新插入元素时，表示有一个元素被移除。

（10）concat()函数

将多个数组连接起来组成新的数组。

Array = arr1.concat(arr2, arr3……);

（11）slice() 函数

取出数组中的一部分造成新的数组

eg：fruits.slice(1);

截取一个新数组，从第一个元素开始到最后一个元素。

eg：fruits.slice(1, 3);

截取一个新数组，从第1个元素，到（3-1）个元素。

循环数组元素

七、 For循环是循环数组元素最好方式

八、 添加数组元素

（1）使用push方法

eg：car.push("Saab");

（2）使用length属性和下标

eg:car[car.length] = "Saab";

九、 对数组进行排序

· （1）sort()方法

按字母顺序对数组元素进行排序。

（2）reverse()方法

反转数组中元素。

（3）对数字进行排序

升序：points.sort(function(a, b){return a - b});

降序：points.sort(function(a, b){return b - a});

（4）对对象进行排序

cars.sort(function(a, b){return a.year - b.year});

十、已提交做业

代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-2

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-2/index.html