零基礎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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。