iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
Modern Web

JavaScript Easy Go!系列 第 4

#4 Array & Object in JavaScript

因為感覺在操作上還蠻常用到 arrayobject 的各種方法,所以這篇就來說說 JavaScript 中 arrayobject 的各常用方法,以及 for infor of

Array is Object

在 JavaScript 中,當你使用

typeof [1, 2, 3]

會出現

"object"

沒錯,在 JavaScript 中 array 其實也是 object
所以在判別兩者時,不能使用 typeof,而要使用 Array.isArray()

// true
Array.isArray(["Charlie", "the", "Unicorn"]);

// false
Array.isArray({
    type: "Unicorn",
    name: "Charlie"
});

Array

我們每個方法都使用以下陣列做示範:

// 先做一個可憐的白老鼠陣列
let students = ["Jacob", "Pascal", "Jack"];

請想成每個試驗前都重新變成以上狀態。

push & pop

students.push("Jeromy");
// ["Jacob", "Pascal", "Jack", "Jeromy"]

students.push("Eric", "Peter");
// ["Jacob", "Pascal", "Jack", "Jeromy", "Eric", "Peter"]

let lastOne = student.pop()
// ["Jacob", "Pascal", "Jack", "Jeromy", "Eric"]

// lastOne: "Peter"

push 會在陣列後方加上東西,可以一次加上多項東西。
pop 則會移除陣列最後方的一個東西並回傳該東西。

unshift & shift

students.unshift("Jeromy");
// ["Jeromy", Jacob", "Pascal", "Jack"]

students.unshift("Eric", "Peter");
// ["Eric", "Peter", "Jeromy", "Jacob", "Pascal", "Jack"]

let firstOne = student.shift()
// ["Peter", "Jeromy", "Jacob", "Pascal", "Jack"]

// firstOne: "Eric"

unshift 會在陣列前方加上東西,可以一次加上多項東西。 值得注意的是,加上多項東西時,它們在陣列中的位置會與傳入的順序相同
shift 則會移除陣列最前方的一個東西並回傳該東西。

slice & splice

let firstTwo = students.slice(0, 2);
// firstTwo: ["Jacob", "Pascal"]

let secondStu = students.slice(1, 2);
// secondStu: ["Pascal"]

let removed = students.splice(0, 1);
// students: ["Pascal", "Jack"]
// removed: ["Jacob"]

students.splice(0, 1, ...removed);
// students: ["Jacob", "Jack"]

slice 會自第一個參數的位置開始至第二個參數的位置淺拷貝並回傳。不會修改原陣列!

array.slice(start, ?end) // end 未指定會到底

splice 會自第一個參數的位置開始刪除第二個參數數量的元素,再加上後方參數至該位置。會修改原陣列!

array.splice(start, delCount, add1, add2, ...)

concat

let moreStu = ["Peter", "Eric", "Jeromy"];

students = students.concat(moreStu);
// students: ["Jacob", "Pascal", "Jack", "Peter", "Eric", "Jeromy"]

concat 可以合併多陣列,但記得不會修改原陣列!

array.concat(addArray1, addArray2, ...)

sort & reverse

students.sort((a, b) => b.length - a.length);
// ["Pascal", "Jacob", "Jack"]

students.reverse();
// ["Jack", "Jacob", "Pascal"]

sort 用來排序陣列,其參數為一個「比較函式」,其有參數 a, b 代表兩個被比較的元素,如果回傳值大於 0 則 b 排在 a 前,反之,a 排在 b 前。此方法直接修改原陣列!

可以想成如果大於 0 則 b 超 a 車跑到前面去

reverse 則是將陣列反過來。此方法直接修改原陣列!

forEach & map

students.forEach((name, idx) => {
    console.log(idx, name);
});
// Console:
// 0 "Jacob"
// 1 "Pascal"
// 2 "Jack"

students = students.map(name => {
    return "Student " + name;
});
// ["Student Jacob", "Student Pascal", "Student Jack"]

forEach 用來遍歷陣列的值,並對每項進行操作。不修改原陣列且沒有回傳值。

array.forEach((value, index, array) => {
    // do something
})
// 沒有回傳值

map 也是用來遍歷陣列的值,並對每項進行修改不修改原陣列但會回傳經修改過的陣列。

array.map((value, index, array) => {
    // do something
    // and return new value
})
// 回傳修改後的陣列

filter & find

let namesWithJ = students.filter(name => name.includes("J"));
// namesWithJ: ["Jacob", "Jack"]

let firstNameWithJ = students.find(name => name.includes("J"));
// firstNameWithJ: "Jacob"

filter 用來過濾陣列中符合條件的值,並回傳該符合條件的陣列。如果判別函式回傳 true 就是符合,反之則是不符合。不修改原陣列。

array.filter((value, index, array) => {
    // 如果符合條件回傳 true 反之回傳 false
})

findfilter 很像,但只回傳第一個符合條件的值。不修改原陣列。

array.find((value, index, array) => {
    // 如果符合條件回傳 true 反之回傳 false
})

reduce & flat & join

let str = students.reduce((accu, name, idx) => {
    return accu + name + ((idx !== students.length - 1) ? ", " : ".");
}, "Students: ");
// str: "Students: Jacob, Pascal, Jack."

let numbers = [[1,2], [3,4]];
let flatted = numbers.flat();
// flatted: [1, 2, 3, 4]

let str2 = students.join(", ");
// str2: "Jacob, Pascal, Jack"

reduce flat join 都是用來減少陣列的維度。三者都不會修改原陣列。
reduce 應該是三者靈活度最高的,flatjoin 可以當 shorthand 來用。

array.reduce((accumulator, value, index, array) => {
    // 一項一項的把東西合併到 accumulator
    // 記得要回傳東西,做為新的 accumulator
}, initialAccumulator)

flat 用來拆高維陣列,它可以放一個參數表示拆的深度。

array.flat(depth); // depth 代表要拆的深度

join 用來把陣列變字串,同時可指定中間插入的字串。

array.join(str) // 每項元素間會加上 str

split

split 就是用來反向操作 join 的,回傳一分割後的陣列。

string.split(str) // str 會用來作為刀子切 string

Object

關於物件也有幾個有用的工具。請注意,它們都是 static 所以需要在前面加上 Object.

// 白老鼠物件
let charlie = {
    type: "unicorn",
    age: 1000
}

entries & keys & values

let entries = Object.entries(charlie);
// entries: [
//     ["type", "unicorn"],
//     ["age", 1000]
// ]

let keys = Object.keys(charlie);
// keys: ["type", "age"]

let values = Object.values(charlie);
// values: ["unicorn", 1000]

entries keys values 都是用來將物件轉換成陣列用的,因為陣列有比較多好操作的方法。三者都不會修改原物件。

assign

let fix = {
    age: 500,
    mood: ["angry", "tired"]
};

Object.assign(charlie, fix);
// charlie: {    
//     type: "unicorn",
//     age: 500,
//     mood: ["angry", "tired"]
// }

assign 用來複製物件內容,第一個參數是目標物件,後方參數為一或多個物件,其值會複製至目標物件。它會修改目標物件,且回傳目標物件!

Object.assign(target, source1, source2, ...); // target 會被修改

// 不想直接修改 target? 把第一個位置放 {} 就好了
let newThings = Object.assign({}, target, source1, source2, ...)

for of & for in

for 也常常用來遍歷陣列或物件。

最簡單的 (length)

直接用陣列長度及 i 來遍歷。

let arr = ["Ha", "Haha", "Lalala"];

for(let i = 0; i < arr.length; i++) { // arr.length === 3
    console.log(i, arr[i]); // 0 "Ha" 1 "Haha" 2 "Lalala"
}

for of

for of 也可以用來遍歷陣列。

let arr = ["Ha", "Haha", "Lalala"];

for(const str of arr) {
    console.log(str); // "Ha" "Haha" "Lalala"
}

for in

for in 可以用於遍歷物件的鍵 (key)。

let charlie = {
    type: "unicorn",
    age: 1000
}

for(const key in charlie) {
    console.log(key, charlie[key]);
}

每日鐵人賽熱門 Top 10 (0917)

以 9/17 12:00 ~ 9/18 12:00 文章觀看數增加值排名

  1. +592 Day 3 雲端四大平台比較:AWS . GCP . Azure . Alibaba
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  2. +556 Day 1 無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  3. +456 Day 2 AWS 是什麼?又為何企業這麼需要 AWS 人才?
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  4. +454 Day 5 網路寶石:AWS VPC 架構 Routes & Security (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  5. +442 Day 4 網路寶石:AWS VPC Region/AZ vs VPC/Subnet 關係介紹
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  6. +422 Day 6 網路寶石:AWS VPC 架構 Routes & Security (下)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  7. +420 Day 7 網路寶石:【Lab】VPC外網 Public Subnet to the Internet (IGW) (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  8. +396 Day 8 網路寶石:【Lab】VPC外網 Public Subnet to the Internet (IGW) (下)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  9. +388 Day 9 運算寶石:EC2 重點架構
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  10. +386 Day 12 運算寶石:【Lab】EC2儲存資源 EBS Volume 建立與使用 (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題

WOW!!
今天前十都是「無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題」系列!
看來大家都很愛 AWS,我是不是也該學學了?


上一篇
#3 JavaScript Crash Course 2
下一篇
#5 JavaScript in Browser
系列文
JavaScript Easy Go!31

2 則留言

0
limitx0
iT邦新手 5 級 ‧ 2021-09-18 17:02:56

AWS學起來?

GCP 學起來!

0
WeiYuan
iT邦新手 4 級 ‧ 2021-09-21 02:27:36

是因為在 facebook 社團被洗版吧(?

我要留言

立即登入留言