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

此篇文章介紹陣列、物件、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'); // 刪除 'c',新增 'e'
console.log(array); // ['a', 'b', 'e' , 'd']

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

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

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

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

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; //[99, 101]

找「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);
// Buick, Cadillac, GMC, Holden, Oldsmobile, Pontiac, Saturn

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

數字陣列.sort

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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]);
}

九九乘法表

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

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
// 高雄輕軌月均運量統計(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;

GITHUB

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