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