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

此篇文章介紹陣列、物件、for 迴圈。

陣列

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
也可以放不同格式的資料，但通常不會這樣做

陣列實用語法

新增資料：pens.push(‘內容’)
算出長度：pens.length
刪除：delete arr[i]
合併：array1.concat(array2)
排序：array.sort()
關鍵字搜尋：filter

1. delete：刪除第一筆資料

刪除物件的屬性或方法，但不會刪除物件原型的屬性或方法，意思就是會留下 undefined。
在刪除元素之後，陣列長度不會改變，原本位置變為 undefined。

var array = ["a", "b", "c", "d"];
delete array[2]; // 刪除 'c'
console.log(array.length); // 4
console.log(array[2]); // 'undefined'

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

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 個，或者新增元素

// 刪除第三筆資料

var array = ["a", "b", "c", "d"];
array.splice(2, 1, "e"); // 刪除 'c'，新增 'e'
console.log(array); // ['a', 'b', 'e' , 'd']

4. concat：合併兩個陣列

Array.prototype.concat()
合併兩個陣列，並把新的陣列返回。

let array1 = ["1", "2", "3"];
let array2 = ["a", "b", "c"];
let array3 = array1.concat(array2);
console.log(array3);

// result : ["1", "2", "3", "a", "b", "c"]

5. filter：關鍵字搜尋陣列裡面的文字

使用 Array.prototype.filter() 回傳符合條件的元素，得到一個新陣列。

例如：回傳大於 10 的數字

var numbers = [1, 3, 6, 10, 99, 101];

var filteredNum = numbers.filter(function (value) {
  return value > 10;
});

filteredNum; // [99, 101]

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

var names = ["Sean", "Jack", "Bob"];

var filtered = names.filter(function (value) {
  return value === "Tom";
});

filtered; // []

6. sort：將陣列進行重新排序

範例：按照開頭字母順序排列

let Brand = [
  "Oldsmobile",
  "Pontiac",
  "Buick",
  "Cadillac",
  "Holden",
  "Saturn",
  "GMC",
];

Brand.sort(); // 陣列重新排序
console.log(Brand); // Buick, Cadillac, GMC, Holden, Oldsmobile, Pontiac, Saturn

Brand.reverse(); // 順序反轉
console.log(Brand); // Saturn, Pontiac, Oldsmobile, Holden, GMC, Cadillac, Buick

範例：數字陣列.sort

let InStock = [12, 3, 5, 53, 12, 53, 47];

InStock.sort();
console.log(InStock);
// 12, 12, 3, 47, 5, 53, 53

數字陣列預設下是以 ASCII 字符順序，有些時候我們需要使用 function 函數來進行。

InStock.sort(function (a, b) {
  return a - b;
});
console.log(InStock);
// 3, 5, 12, 12, 47, 53, 53

InStock.sort(function (a, b) {
  return b - a; //順序反轉
});
console.log(InStock);
// 53, 53, 47, 12, 12, 5, 3

for 迴圈 + 陣列寫法

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

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

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

let pens = ["red", "black", "white"];
console.log(pens[0]);

組合技

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

範例：九九乘法表

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

物件

let school = {
  student: 5927,
  teacher: 300,
  dog: ["Tom", "John", "Bob"],
  light: 3,
  校長: "Bob",
};

console.log(school.student); // 5927
console.log(school.dog[1]); // John
console.log(school.校長); // Bob

school.classRoom = 200;
console.log(school);

// 可以對既有的值做更改或累加
school.classRoom = 250;
console.log(school.classRoom);
school.classRoom = school.classRoom + 50;
console.log(school.classRoom);

JSON

<!-- HTML -->

<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

let data = [...]; // 高雄輕軌月均運量統計(https://data.kcg.gov.tw/dataset/lightrail-trafficvolume)

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;