NUK JavaScript #4：陣列、物件、for
此篇文章介紹陣列、物件、for 迴圈。
陣列
1let pens = ['red', 'black', 'white']; 2console.log(pens.length); 3 4pens.push('pink'); 5console.log(pens.length); 6 7pens.push(3); 8console.log(pens);
- 算出長度：pens.length
- 新增資料：pens.push
- 也可以放不同格式的資料，但通常不會這樣做
陣列實用語法
- 新增資料：pens.push('內容')
- 算出長度：pens.length
- 刪除：delete arr[i]
- 合併：array1.concat(array2)
- 排序：array.sort()
- 關鍵字搜尋：filter
1. delete：刪除第一筆資料
刪除物件的屬性或方法，但不會刪除物件原型的屬性或方法，意思就是會留下 undefined。
在刪除元素之後，陣列長度不會改變，原本位置變為 undefined。
1var array = ['a', 'b', 'c', 'd']; 2delete array[2]; // 刪除 'c' 3console.log(array.length); // 4 4console.log(array[2]); // 'undefined'
2. pop：刪除最後一筆資料
1var arr = ['a', 'b', 'c', 'd', 'e', 'f']; 2arr.pop();
arr 剩下：a, b, c, d, e
數組長度：5
3. splice
splice(index，howmany，item1，…..，itemX)
選擇元素後，向後刪除 N 個，或者新增元素
1// 刪除第三筆資料 2 3var array = ['a', 'b', 'c', 'd']; 4array.splice(2, 1, 'e'); // 刪除 'c'，新增 'e' 5console.log(array); // ['a', 'b', 'e' , 'd']
4. concat：合併兩個陣列
Array.prototype.concat()
合併兩個陣列，並把新的陣列返回。
1let array1 = ['1', '2', '3']; 2let array2 = ['a', 'b', 'c']; 3let array3 = array1.concat(array2); 4console.log(array3); 5 6// result : ["1", "2", "3", "a", "b", "c"]
5. filter：關鍵字搜尋陣列裡面的文字
使用 Array.prototype.filter() 回傳符合條件的元素，得到一個新陣列。
例如：回傳大於 10 的數字
1var numbers = [1, 3, 6, 10, 99, 101]; 2 3var filteredNum = numbers.filter(function (value) { 4 return value > 10; 5}); 6 7filteredNum; // [99, 101]
如果想找「Tom」會回傳空陣列，表示找不到。
1var names = ['Sean', 'Jack', 'Bob']; 2 3var filtered = names.filter(function (value) { 4 return value === 'Tom'; 5}); 6 7filtered; // []
6. sort：將陣列進行重新排序
範例：按照開頭字母順序排列
1let Brand = [ 2 'Oldsmobile', 3 'Pontiac', 4 'Buick', 5 'Cadillac', 6 'Holden', 7 'Saturn', 8 'GMC', 9]; 10 11Brand.sort(); // 陣列重新排序 12console.log(Brand); // Buick, Cadillac, GMC, Holden, Oldsmobile, Pontiac, Saturn 13 14Brand.reverse(); // 順序反轉 15console.log(Brand); // Saturn, Pontiac, Oldsmobile, Holden, GMC, Cadillac, Buick
範例：數字陣列.sort
1let InStock = [12, 3, 5, 53, 12, 53, 47]; 2 3InStock.sort(); 4console.log(InStock); 5// 12, 12, 3, 47, 5, 53, 53
數字陣列預設下是以 ASCII 字符順序，有些時候我們需要使用 function 函數來進行。
1InStock.sort(function (a, b) { 2 return a - b; 3}); 4console.log(InStock); 5// 3, 5, 12, 12, 47, 53, 53 6 7InStock.sort(function (a, b) { 8 return b - a; //順序反轉 9}); 10console.log(InStock); 11// 53, 53, 47, 12, 12, 5, 3
for 迴圈 + 陣列寫法
有重複性質的內容想執行：for
1for (let i = 0; i < 3; i++) { 2 console.log(i); 3}
在 JS 的世界裡，物件是從 0 開始計算
1let pens = ['red', 'black', 'white']; 2console.log(pens[0]);
組合技
1for (let i = 0; i < pens.length; i++) { 2 console.log(pens[i]); 3}
範例：九九乘法表
1document.write('<ul class="multiplicationTable">'); 2 3for (let i = 1; i < 10; i++) { 4 for (let j = 1; j < 10; j++) { 5 console.log(i * j); 6 document.write('<li>' + i + '*' + j + '=' + i * j + '</li>'); 7 } 8} 9 10document.write('</>');
物件
1let school = { 2 student: 5927, 3 teacher: 300, 4 dog: ['Tom', 'John', 'Bob'], 5 light: 3, 6 校長: 'Bob', 7}; 8 9console.log(school.student); // 5927 10console.log(school.dog[1]); // John 11console.log(school.校長); // Bob 12 13school.classRoom = 200; 14console.log(school); 15 16// 可以對既有的值做更改或累加 17school.classRoom = 250; 18console.log(school.classRoom); 19school.classRoom = school.classRoom + 50; 20console.log(school.classRoom);
JSON
1<!-- HTML --> 2 3<html lang="en"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>Document</title> 9 </head> 10 <body> 11 <h2>高雄輕軌月均運量統計</h2> 12 <ul class="list"></ul> 13 <h3> 14 篩選：高雄輕軌 107 年總運量： 15 <span class="total"></span> 16 </h3> 17 </body> 18</html>
1// JavaScript 2 3let data = [...]; // 高雄輕軌月均運量統計(https://data.kcg.gov.tw/dataset/lightrail-trafficvolume) 4 5let el = document.querySelector('.list'); 6let dataLen = data.length; 7let str = ''; 8let total = document.querySelector('.total'); 9let totalNum = 0; 10 11for (let i = 0; i < dataLen; i++) { 12 if (data[i].年 == 107) { 13 totalNum += data[i].總運量; 14 } 15 let content = '<li>' + data[i].年 + ' 年 ' + data[i].月 + ' 月的總運量：' + data[i].總運量 + '</li>'; 16 str += content; 17} 18el.innerHTML = str; 19 20total.innerHTML = totalNum;
以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫