NUK JavaScript #4：陣列、物件、for

📆 2019年9月30日

此篇文章介紹陣列、物件、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);
9

算出長度：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'
5

2. pop：刪除最後一筆資料

1var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
2arr.pop();
3

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']
6

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"]
7

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]
8

如果想找「Tom」會回傳空陣列，表示找不到。

1var names = ['Sean', 'Jack', 'Bob'];
2
3var filtered = names.filter(function (value) {
4  return value === 'Tom';
5});
6
7filtered; // []
8

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
16

範例：數字陣列.sort

1let InStock = [12, 3, 5, 53, 12, 53, 47];
2
3InStock.sort();
4console.log(InStock);
5// 12, 12, 3, 47, 5, 53, 53
6

數字陣列預設下是以 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
12

for 迴圈 + 陣列寫法

有重複性質的內容想執行：for

1for (let i = 0; i < 3; i++) {
2  console.log(i);
3}
4

在 JS 的世界裡，物件是從 0 開始計算

1let pens = ['red', 'black', 'white'];
2console.log(pens[0]);
3

組合技

1for (let i = 0; i < pens.length; i++) {
2  console.log(pens[i]);
3}
4

範例：九九乘法表

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('</>');
11

物件

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);
21

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>
19

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;
21

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫

Sean's Blog

Hi, I'm Sean