NUK JavaScript Lesson 04：陣列、物件、for

發表於 2019-09-30 更新於 2020-11-01 分類於課堂筆記

此篇文章介紹陣列、物件、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
也可以放不同格式的資料，但通常不會這樣做

陣列實用語法

我們可以向 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'); // 刪除 'c'，新增 'e'
console.log(array); // ['a', 'b', 'e' , 'd']

delete
刪除物件的屬性或方法，但不會刪除物件原型的屬性或方法。
就是會留下 undefined。

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

4. 合併兩個陣列

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. 將陣列進行重新排序例如，[9,3,5] 變成 [3,5,9]

陣列.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

新增資料：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]);
}

九九乘法表

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

// 高雄輕軌月均運量統計(https://data.kcg.gov.tw/dataset/lightrail-trafficvolume)
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;