學習目標
- 了解 ES6 的箭頭函數( Arrow functions ) 使用方式
- 了解 Template literals 使用方式
- 了解【 for-in 】、【 for-of 】、【 forEach 】、【 filter 】、【 find 】、【 map 】、【 reduce 】、【 every 】、【 some 】、【 slice 】 的使用方式
內容
- 初始化陣列
- 新增元素到陣列尾端
- 從陣列尾端取出元素
- 新增元素到陣列頭端
- 從陣列頭端取出元素
- 判斷元素是否在陣列中
- 兩陣列結合
- 取值
- 陣列
- 物件陣列
- 元素檢查
- filter
- find
- every
- some
- map / reduce
- map
- reduce
- 擷取 slice
陣列方法
Array Methods
初始化陣列
- 【 功能 】
- 初始化陣列
- 【 Console 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
新增元素到陣列尾端
- 【 Methods 】
- Array.prototype.push()
- 【 特性 】
- 新增元素到陣列尾端
- 會改變陣列的長度
- 【 Console 1 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 Console 2 】
[ 'Jack', 'Archer', 'Festum', 'David', 'Mike' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
people.push("Mike")
console.log(people)
從陣列尾端取出元素
- 【 Methods 】
- Array.prototype.pop()
- 【 特性 】
- 從陣列尾端取出元素
- 會改變陣列的長度
- 【 Console 1 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 Console 2 】
David
- 【 Console 3 】
[ 'Jack', 'Archer', 'Festum' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
console.log(people.pop())
console.log(people)
新增元素到陣列頭端
- 【 Methods 】
- Array.prototype.unshift()
- 【 特性 】
- 新增元素到陣列頭端
- 會改變陣列的長度
- 【 Console 1 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 Console 2 】
[ 'Jeremy', 'Harvey', 'Jack', 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
people.unshift("Jeremy", "Harvey")
console.log(people)
從陣列頭端取出元素
- 【 Methods 】
- Array.prototype.shift()
- 【 特性 】
- 從陣列頭端取出元素
- 會改變陣列的長度
- 【 Console 1 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 Console 2 】
[ 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
people.shift()
console.log(people)
判斷元素是否在陣列中
- 【 Methods 】
- Array.prototype.includes()
- 【 特性 】
- 判斷元素是否在陣列中,存在的話回傳 true ,否則回傳 false
- 【 Console 1 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 Console 2 】
true
- 【 Console 3 】
false
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
console.log(people.includes('Archer'))
console.log(people.includes('QQ'))
兩陣列結合
- 【 Methods 】
- Array.prototype.concat()
- 【 特性 】
- 兩陣列結合
- 【 Console 1 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 Console 2 】
[ 'Jack', 'Archer', 'Festum', 'David', 'Java', 'Script', 'Good' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
console.log(people)
let array2 = ['Java', 'Script', 'Good']
console.log(people.concat(array2))
陣列取值 for
- 【 Methods 】
- for
- 【 特性 】
- 依序取出陣列值
- 【 Console 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
for (let i = 0; i < people.length; i++) {
console.log(people[i])
}
陣列取值 for-in
- 【 Methods 】
- for-in
- 【 特性 】
- 依序取出陣列值
- 【 Console 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
for (let index in people) {
console.log(people[index])
}
陣列取值 for-of
- 【 Methods 】
- for-of
- 【 特性 】
- 依序取出陣列值
- 【 Console 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
for (let value of people) {
console.log(value)
}
陣列取值 forEach
- 【 Methods 】
- Array.prototype.forEach()
- 【 功能 】
- 透過 forEach 取得 family 資料
- 【 Console 】
[ 'Jack', 'Archer', 'Festum', 'David' ]
- 【 程式 】
let people = ["Jack", "Archer", "Festum", "David"]
let forEachPeopleItem1 = people.forEach((item, index, array) => {
console.log(item)
})
物件陣列取值 for
- 【 功能 】
- 透過 for 取得 family 資料
- 【 Console 】
{
name: 'John',
age: 32,
employed: true
}
{
name: 'Morris',
age: 65,
employed: false
}
{
name: 'Alex',
age: 55,
employed: true
}
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
for (let i = 0; i < family.length; i++) {
console.log(family[i])
}
物件陣列取值 for-in
- 【 功能 】
- 透過 for in 取得 family 資料
- 【 Console 】
{
name: 'John',
age: 32,
employed: true
}
{
name: 'Morris',
age: 65,
employed: false
}
{
name: 'Alex',
age: 55,
employed: true
}
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
for (let key in family) {
console.log(family[key])
}
物件陣列取值 for-of
- 【 功能 】
- 透過 for of 取得 family 資料
- 【 Console 】
{
name: 'John',
age: 32,
employed: true
}
{
name: 'Morris',
age: 65,
employed: false
}
{
name: 'Alex',
age: 55,
employed: true
}
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
for (let value of family) {
console.log(value)
}
物件陣列取值 forEach (1)
- 【 Methods 】
- Array.prototype.forEach()
- 【 功能 】
- 透過 forEach 取得 family 資料
- 【 Console 】
{
name: 'John',
age: 32,
employed: true
}
{
name: 'Morris',
age: 65,
employed: false
}
{
name: 'Alex',
age: 55,
employed: true
}
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let forEachFamilyItem1 = family.forEach((item, index, array) => {
console.log(item)
})
物件陣列取值 forEach (2)
- 【 Methods 】
- Array.prototype.forEach()
- 【 功能 】
- 透過 forEach 取得 family 資料
- 取出一家之主的名字、年齡
- 【 Console 】
姓名: John, 年齡: 32
姓名: Morris, 年齡: 65
姓名: Alex, 年齡: 55
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let forEachFamilyItem2 = family.forEach((item, index, array) => {
let str = ''
str += `姓名: ${item.name}, 年齡: ${item.age}`
console.log(str)
})
物件陣列取值 forEach (3)
- 【 Methods 】
- Array.prototype.forEach()
- 【 功能 】
- 透過 forEach 取得 family 資料
- 取出一家之主的名字、年齡與幾個小孩及姓名
- 【 Console 】
姓名: John, 年齡: 32, 共有 2 小孩 ( Richard Susan )
姓名: Morris, 年齡: 65, 共有 1 小孩( Eason )
姓名: Alex, 年齡: 55, 共有 3 小孩( Tom Jeremy Sam )
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true,
children: [
{
name: 'Richard',
age: 7
},
{
name: 'Susan',
age: 5
}
]
},
{
name: 'Morris',
age: 65,
employed: false,
children: [
{
name: 'Eason',
age: 35
}
]
},
{
name: 'Alex',
age: 55,
employed: true,
children: [
{
name: 'Tom',
age: 27
},
{
name: 'Jeremy',
age: 25
},
{
name: 'Sam',
age: 22
}
]
}
]
let forEachFamilyItem2 = family.forEach((item, index, array) => {
let str = ''
str += `姓名: ${item.name}, 年齡: ${item.age}, 共有 ${item.children.length} 小孩 ( `
let items = item.children
items.forEach(key => {
str += key.name + ' '
})
str += ')'
console.log(str)
})
元素檢查 filter
- 【 Methods 】
- Array.prototype.filter()
- 【 特性 】
- 回傳條件為 true 的陣列
- 【 Console 1 】
[
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Alex',
age: 55,
employed: true
}
]
- 【 Console 2 】
[
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let employedItems = family.filter((item, index, array) => {
return item.employed === true
})
console.log(employedItems)
let ageItems1 = family.filter((item, index, array) => {
return item.age > 50
})
console.log(ageItems1)
元素檢查 find
- 【 Methods 】
- Array.prototype.find()
- 【 特性 】
- 如果檢測元素中有 1 個元素滿足條件,則回傳 true, 剩餘的元素不會再進行檢測
- 如果没有符合條件的元素,則回傳 undefined
- 【 Console 】
{
name: 'Morris',
age: 65,
employed: false
}
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let ageItems2 = family.find((item, index, array) => {
return item.age > 50
})
console.log(ageItems2)
map
- 【 Methods 】
- Array.prototype.map()
- 【 特性 】
- 產生新陣列以存放回傳值,且新陣列長度等於原始陣列長度
- 如不回傳,則回傳 undefined
- 【 Console 1 】
[ false, true, true ]
* 【 Console 2 】
[ 'John 未滿 50 歲', 'Morris 滿 50 歲', 'Alex 滿 50 歲' ]
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let ageItems3 = family.map((item, index, array) => {
return item.age > 50
})
console.log(ageItems3)
let ageItems4 = family.map((item, index, array) => {
if (item.age > 50) {
return `${item.name} 滿 50 歲`
} else {
return `${item.name} 未滿 50 歲`
}
})
console.log(ageItems4)
reduce
- 【 Methods 】
- Array.prototype.reduce()
- 【 特性 】
- 若在呼叫 reduce() 時
- 有提供 initialValue,則 accumulator 將會等於 initialValue
- 且 currentValue 會等於陣列中的第一個元素值
- 若沒有提供 initialValue,則 accumulator 會等於陣列的第一個元素值
- 且 currentValue 將會等於陣列的第二個元素值
- 【 功能 】
- 取出一家之主之最大年紀
- 【 Console 】
65
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let mapReduceItems = family.map(item => item.age)
reduce((accumulator, currentValue, currentIndex, array) => {
return Math.max(accumulator, currentValue)
})
console.log(mapReduceItems)
元素檢查 every
- 【 Methods 】
- Array.prototype.every()
- 【 特性 】
- 如果檢測元素中有 1 個元素不滿足條件,則回傳 false, 剩餘的元素不會再進行檢測
- 如果所有元素都滿足條件,則回傳 true
- 【 Console 】
false
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let ageItems5 = family.every((item, index, array) => {
return item.age < 35
})
console.log(ageItems5)
元素檢查 some
- 【 Methods 】
- Array.prototype.some()
- 【 特性 】
- 如果有 1 個元素滿足條件,则回傳 true, 剩餘的元素不會再進行檢測
- 如果没有滿足條件的元素,则回傳 false
- 【 Console 】
true
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let ageItems6 = family.some((item, index, array) => {
return item.age < 35
})
console.log(ageItems6)
擷取 slice
- 【 Methods 】
- Array.prototype.slice()
- 【 特性 】
- 第一個參數是要擷取的位置索引,第二參數表示要擷取到的結束位置,但是不包括結束位置
- 當參數為負數時,將參數和陣列長度相加得到的正數作為實際的數值
- 不會改變原始數值
- 【 Console 1 】
[
{
name: 'Morris',
age: 65,
employed: false
}
]
- 【 Console 2 】
[
{
name: 'Morris',
age: 65,
employed: false
}
]
- 【 程式 】
let family = [
{
name: 'John',
age: 32,
employed: true
},
{
name: 'Morris',
age: 65,
employed: false
},
{
name: 'Alex',
age: 55,
employed: true
}
]
let sliceItems1 = family.slice(1, 2)
console.log(sliceItems1)
let sliceItems2 = family.slice(-2, -1)
console.log(sliceItems2)