array

Array

2020/09/16

2020/09/27 (補充資料)

基本概念

定義一個陣列

let persons = ["Ben", "Mary", "Tom"];

列出所有陣列的元素，有幾種做法:

//基本寫法

for (let i = 0; i < 3; i ++) {

console.log(persons[i]);

}


for (i in persons) {

console.log(persons[i]);

}


//類似php及java的foreach

for (person of persons) {

console.log(person);

}

Array的操作

javascript有一些內建的陣列方法，pop是從最後面取出一筆資料，push是從最後面新增一筆資料，shift是從最前面取出一筆資料，unshift是從最前面新增一筆資料，splice是從中間插入並刪除資料。

let persons = ["Ben", "Mary", "Tom"];

function listPersons(){

for (person of persons) {

console.log(person);

}

}

console.log(persons.pop());

persons.push("Sam");

listPersons();

console.log(persons.shift());

persons.unshift("Victoria");

listPersons();

persons.splice(1, 1, "Adam", "Kate");

listPersons();

輸出結果是:

Tom

Ben

Mary

Sam

Ben

Victoria

Mary

Sam

Victoria

Adam

Kate

Sam

Array的排序

在javascript可以很容易的針對陣列排序:

function listPersons(){

for (person of persons) {

console.log(person);

}

}

let persons = ["Mary", "Ben", "Tom"];

persons.sort();

listPersons();

persons.reverse();

listPersons();

輸出結果是:

Ben

Mary

Tom

Tom

Mary

Ben

進階概念

Array的iteration

陣列裡有些方法會用到callback function，例如，forEach()、map()、filter()、reduce() (JavaScript Array Iteration Methods )

以forEach為例，會去呼叫myFunction，並把陣列裡的每一個內容(value)、內容的位置(index)以及陣列本身(array)傳到myFunction

let numbers = [2, 4, 6, 8, 10];

numbers.forEach(myFunction);


function myFunction(value, index, array) {

console.log(value);

}

//output:

//2

//4

//6

//8

//10

因為我們只用到value，所以，可以改為:

let numbers = [2, 4, 6, 8, 10];

numbers.forEach(myFunction);


function myFunction(value) {

console.log(value);

}

//output:

//2

//4

//6

//8

//10

Destructuring

javascript的destructuring(解構賦值)有時候可以簡化語法。

let numbers = [2, 4, 6, 8, 10];

const [first, second] = numbers;

console.log(first);

console.log(second);

//output:

//2

//4

其實就等於:

let numbers = [2, 4, 6, 8, 10];

const first = numbers[0];

const second = numbers[1];

console.log(first);

console.log(second);

Spread/Rest

ES6有個「...」的語法，這個語法有兩個功能:spread、rest，Spread就是展開內容的意思，Rest就是取剩餘的內容的意思。這個語法可以用物件、陣列即function的參數。在以陣列為例，當我們要產生一個新的陣列，需要原本陣列的內容，就可以利用:

let numbers = [2, 4, 6, 8, 10];
let second = [...numbers];
second[1] = 100;
console.log(numbers);
console.log(second);
//output:
//[2,4,6,8,10]
//[2,100,6,8,10]

如果在陣列前後增加元素:

let numbers = [2, 4, 6, 8, 10];
let second = [0,...numbers,150];
second[1] = 100;
console.log(numbers);
console.log(second);
//output:
//[2,4,6,8,10]
//[0,100,4,6,8,10,150]

參考資料