這篇文章要來介紹容器,首先先來談談陣列,陣列是有順序地存放大量資料的結構,大多數程式語言都是 0 為起始點,例如 arr[0]
, JavaScript 也不例外,當然 JavaScript 的陣列也內建很多函式可以直接呼叫例如 length、match...等。
陣列的初始化有兩種方式一種是立即給值,另一種是後續給值。
const arr = [1, 2, 3]
console.log(arr.length) // 3
const arr = []
arr[0] = 1
arr[1] = 2
arr[2] = 3
console.log(arr.length) // 3
展開運算值是 ES6 的一個新的特性,可以使用 ...
代表陣列,以下用函式來做示範,當不知道引數有多少時可以很方便使用,這邊先粗略提起稍後會拉出來更詳細解說。
const call = (...arr) => {
console.log(arr); // [ 1, 2, 3 ]
};
call(1, 2, 3);
物件是現今儲存資料最常見的一種型態,主要是以一個鍵 (key) 搭配一個值 (value) ,如下範例。
const dog = {
name: 'Tom',
breed: 'Golden Retriever',
weight: 60
}
有兩種方法分別如下,第一種是利用 物件名稱.key
拿取值,第二種方法是利用陣列回傳方式 物件名稱[key]
取得相對應內容。
console.log(dog.breed) // Golden Retriever
console.log(dog["breed"]) // Golden Retriever
這邊介紹陣列的 forEach 方法,雖然 for...in 也是可以,但 ESLint 並不推薦你這樣做,所以就不再今天討論範圍囉!
const dog = {
name: 'Tom',
breed: 'Golden Retriever',
weight: 60
};
Object.keys(dog).forEach((key) => {
console.log(dog[key]);
});
輸出:
// Tom
// Golden Retriever
// 60
是的沒錯在物件中不僅僅只儲存值方法也行,就把它想成一個 function 存在一個變數中就對了使用方法延伸上面的例子如下。
const dog = {
name: 'Tom',
breed: 'Golden Retriever',
weight: 60,
breaks() {
console.log('woof');
}
};
dog.breaks(); // woof
// 陣列展開用法
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];
console.log(newNumbers);
output: [1, 2, 3, 4]
// 物件展開用法
const person = {
name: 'Andy',
};
const newPerson = {
...person,
age: 21,
};
console.log(newPerson);
output: { name: 'Andy', age: 21 }
Array.filter()方法會過濾陣列的元素,並將通過測試的元素傳回成為一個新陣列。
Array.filter()方法使用回呼函式來對元素進行過濾,須由設計師自行撰寫過濾程式。
// Array.filter() 過濾陣列元素
const filter = (...args) => args.filter(el => el === 2);
console.log(filter(1, 2, 3));
output: [ 2 ]
Easily extract array elements or object properties and store them in variables
解構解構允許你拉出單個元素或屬性,並將他們儲存在數組的變數中
Array Destructuring
const numbers = [1, 2, 3];
const [num1, num2] = numbers;
console.log(num1, num2);
let num1 = 1;
const num2 = num1;
num1 = 2;
console.log(num1, num2);
output: 2 1
const person = {
name: 'Andy'
};
const secondPerson = person;
person.name = 'Tank';
console.log(secondPerson);
output: { name: 'Tank' }
此方法是複製屬性而不是整個物件
const person = {
name: 'Andy'
};
const secondPerson = {
...person
};
person.name = 'Tank';
console.log(secondPerson);
output: { name: 'Andy' }
文章同時發表於:https://andy6804tw.github.io/2017/12/20/js-tutorial-psrt3/
請問console.log(dog[breed]) // Golden Retriever
這個key是不是要加雙引號才能使用?
console.log(dog["breed"])
謝謝
Cheng® 對!感謝勘誤~ 單、雙引號都行!