目錄
創建
訪問
常用屬性和相關方法
1. length 長度屬性
2. push() 新增元素 - 末尾添加
3. unshift() 新增元素 - 開頭添加
4. pop() 移除元素 - 末尾刪除
5. shift() 移除元素 - 開頭刪除
6. concat() 複製數組後新增
7. slice() 複製數組
8. splice() 增刪改
9. toString() 轉字符串
10. join() 轉字符串並以指定符號連接
11. isArray() 判斷是否為數組
12. forEach() 遍歷數組
13. map() 遍歷並返回新數組
14. filter() 遍歷並過濾後返回新數組
15. some() 任意命中
16. every() 全部命中
17. find() 查找
18. reduce() 歸併方法
創建
<script>
// 方式 1
let a = []
a[0] = '1'
a[1] = '2'
a[2] = '3'
console.log(a)
// 方式 2
let b = new Array()
b[0] = '1'
b[1] = '2'
b[2] = '3'
console.log(b)
// 方式 3
let c = ['1', '2', '3']
console.log(c)
// 方式 4
let d = new Array('1', '2', '3')
console.log(d)
// 方式 5 構造參數為一個數字時, 代表申請數組長度
let e = new Array(3)
console.log(e)
</script>訪問
<script>
let d = ['1', '2', '3']
console.log(d[0])
console.log(d[1])
console.log(d[2])
</script>常用屬性和相關方法
1. length 長度屬性
返回數組長度
<script>
let arr = [1, 2, 3, 4, 5];
console.log(arr.length) // 結果: 5
</script>2. push() 新增元素 - 末尾添加
將一個或多個元素添加到數組的末尾, 並返回添加後的長度
<script>
let arr = [1, 2, 3, 4, 5];
console.log(arr.push(6, 7)) // 結果: 7
console.log(arr) // 結果: [1, 2, 3, 4, 5, 6, 7]
</script>3. unshift() 新增元素 - 開頭添加
將一個或多個元素添加到數組的開頭, 原元素自動後移, 並返回添加後的長度
<script>
let arr = [1, 2, 3, 4, 5];
console.log(arr.unshift(6, 7)) // 結果: 7
console.log(arr) // 結果: [6, 7, 1, 2, 3, 4, 5]
</script>4. pop() 移除元素 - 末尾刪除
刪除數組中最後一個元素, 並返回被刪除的元素值
<script>
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.pop()) // 結果: e
console.log(arr) // 結果: ['a', 'b', 'c', 'd']
</script>5. shift() 移除元素 - 開頭刪除
刪除數組中第一個元素, 並返回被刪除的元素值
<script>
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.shift()) // 結果: a
console.log(arr) // 結果: ['b', 'c', 'd', 'e']
</script>6. concat() 複製數組後新增
複製原來數組, 並在新數組中添加元素，不會影響原數組
<script>
let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.concat('f', 'g')
console.log(arr) // 結果: ['a', 'b', 'c', 'd', 'e']
console.log(arr2) // 結果: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
</script>7. slice() 複製數組
根據起始位置和結束位置複製一份數組, 不會影響原數組
<script>
let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.slice(1)
let arr3 = arr.slice(1, 4)
console.log(arr) // 結果: ['a', 'b', 'c', 'd', 'e']
console.log(arr2) // 結果: ['b', 'c', 'd', 'e']
console.log(arr3) // 結果: ['b', 'c', 'd']
// 經典案例: 偽數組轉真數組
function func(){
console.log(Array.isArray(arguments)) // false
console.log(Array.isArray([].slice.call(arguments))) // true
}
func()
</script>8. splice() 增刪改
splice( 索引, 要刪除的個數, 新元素1, 新元素2...)
很強大的方法, 可以對數組進行增刪改, splice() 方法的返回值是被刪除的數組元素。
<script>
// 增
let arr = ['a', 'b', 'c', 'd', 'e'];
// 從索引 0 開始, 不刪除, 插入 f 和 g
console.log(arr.splice(1, 0, 'f', 'g')) // 結果：被刪除元素為 []
console.log(arr) // 結果：["a", "f", "g", "b", "c", "d", "e"]
// 刪
let arr2 = ['a', 'b', 'c', 'd', 'e'];
// 從索引 1 開始, 刪除兩個
console.log(arr2.splice(1, 2)) // 結果：被刪除元素為 ["b", "c"]
console.log(arr2) // 結果：["a", "d", "e"]
// 改
let arr3 = ['a', 'b', 'c', 'd', 'e'];
// 從索引 1 開始, 刪除兩個, 然後插入 f 和 g
console.log(arr3.splice(1, 2, 'f', 'g')) // 結果：被刪除元素為 ["b", "c"]
console.log(arr3) // 結果： ["a", "f", "g", "d", "e"]
</script>9. toString() 轉字符串
調用數組內各個元素的 toString() 方法, 並把每個元素的 toString() 結果用逗號相連
<script>
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.toString()) // 結果：a,b,c,d,e
// 重寫對象的 toString()
let arr2 = [
{
name: 'a',
toString: function () {
return this.name;
}
},
{
name: 'b',
toString: function () {
return this.name;
}
},
{
name: 'c',
toString: function () {
return this.name;
}
}]
console.log(arr2.toString()) // 結果：a,b,c
</script>10. join() 轉字符串並以指定符號連接
調用數組內各個元素的 toString() 方法, 並把每個元素的 toString() 結果用連接符相連
<script>
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.join('-')) // 結果：a-b-c-d-e
// 重寫對象的 toString()
let arr2 = [
{
name: 'a',
toString: function () {
return this.name;
}
},
{
name: 'b',
toString: function () {
return this.name;
}
},
{
name: 'c',
toString: function () {
return this.name;
}
}]
console.log(arr2.join('-')) // 結果：a-b-c
</script>11. isArray() 判斷是否為數組
判斷變量是否是數組類型, true: 數組 false: 非數組
<script>
let num = 1;
console.log(Array.isArray(num)) // 結果：false
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(Array.isArray(arr)) // 結果：true
</script>12. forEach() 遍歷數組
遍歷數組, 回調函數的參數都是可選的, 但是必須保證參數列表順序
<script>
// 語法:
// forEach(function (當前元素, 當前下標, 數組本身) {
// })
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach(function (item, index, array) {
console.log('第' + index + '個索引位置的數據是' + item)
if (index === arr.length - 1) {
console.log('數組對象:' + array)
}
})
</script>13. map() 遍歷並返回新數組
遍歷數組, 每一次遍歷都必須有一個返回值(默認返回 undefined), 最後根據每一次的返回值返回一個新的數組
回調函數的參數都是可選的, 但是必須保證參數列表順序
<script>
// 語法:
// map(function (當前元素, 當前下標, 數組本身) {
// return item
// })
let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.map(function (item, index, array) {
return item += '1'
})
console.log(arr2) // 結果：["a1", "b1", "c1", "d1", "e1"]
</script>14. filter() 遍歷並過濾後返回新數組
遍歷數組, 每一次遍歷都必須返回一個布爾值(默認返回 false), 最後把所有返回 true 的元素, 篩選成一個新的數組
<script>
// 語法:
// filter(function (當前元素, 當前下標, 數組本身) {
// return true;
// })
let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.filter(function (item, index, array) {
return item === 'a' || item === 'e'
})
console.log(arr2) // 結果：["a", "e"]
</script>15. some() 任意命中
遍歷數組, 每一次遍歷都必須返回一個布爾值(默認返回 false), 只要有一次返回了 true, 那麼 some() 的返回值就為 true
<script>
// 語法:
// some(function (當前元素, 當前下標, 數組本身) {
// return true;
// })
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.some(function (item, index, array) {
return item === 'a'
})) // 結果: true
console.log(arr.some(function (item, index, array) {
return item === 'z'
})) // 結果: false
</script>16. every() 全部命中
遍歷數組, 每一次遍歷都必須返回一個布爾值(默認返回 false), 當所有的返回都為 true, 那麼 every() 的返回值就為 true
<script>
// 語法:
// every(function (當前元素, 當前下標, 數組本身) {
// return true;
// })
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.every(function (item, index, array) {
return item.length > 0
})) // 結果: true
console.log(arr.every(function (item, index, array) {
return !item === 'e'
})) // 結果: false
</script>17. find() 查找
遍歷數組, 每一次遍歷都必須返回一個布爾值(默認返回 false), 當碰見返回 true 的元素時, 停止遍歷, 並返回該元素。
和 filter() 不同的是, filter() 會遍歷完整個數組, 而 find() 只要碰見一次 true，就會直接停止遍歷。
<script>
// 語法:
// find(function (當前元素, 當前下標, 數組本身) {
// return true;
// })
let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.find(function (item, index, array) {
return item === 'a'
}) // 結果：a
// 這個地方如果用 filter() 遍歷, 會返回 ['a', 'e'], 但是用 find() 遍歷只會返回 'a'
// 因為 find() 遍歷時, 只要有一次返回 true, 就會停止遍歷
// 第一次遍歷 item === 'a' 這個結果返回 true, 所以遍歷直接結束了
let arr3 = arr.find(function (item, index, array) {
return item === 'a' || item === 'e'
})
console.log(arr2) // 結果：a
</script>18. reduce() 歸併方法
作用：
遍歷數組。 每一次遍歷, 都會把上一次遍歷的結果，當作參數傳入，
當是第一次遍歷時, 因為沒有上一次的結果, 所以需要指定一個初始值, 來代替上一次遍歷結果
語法結構：
reduce(function (prev, item, index, array) {
return result
}, init))參數解釋：
prev: 上一次遍歷的結果
item: 當前元素
index: 當前索引
array: 數組
init: 初始值。 用來代替第一次遍歷時, 沒有上一次結果的情況。第一次遍歷時 init 賦值給 prev
使用案例：
<script>
// 累計求和
let arr = [1, 2, 3, 4, 5]
console.log(arr.reduce(function (prev, item, index, array) {
return prev + item;
}, 0)) // 結果：15
// 求最大值
console.log(arr.reduce(function (prev, item, index, array) {
return Math.max(prev, item)
}, 0)) // 結果：5
</script>案例分析：
(1) 累計求和 - 共遍歷五次：
第一次: prev = init = 0, item = 1, index = 0, array = 數組, 返回值 = 0 + 1
第二次: prev = 1, item = 2, index = 1, array = 數組, 返回值 = 1 + 2
第三次: prev = 3, item = 3, index = 2, array = 數組, 返回值 = 3 + 3
第四次: prev = 6, item = 4, index = 3, array = 數組, 返回值 = 6 + 4
第五次: prev = 10, item = 5, index = 4, array = 數組, 返回值 = 10 + 5
(2) 求最大值 - 共五次遍歷
第一次: prev = init = 0, item = 1, index = 0, array = 數組, 返回值 = Math.max(0, 1)
第二次: prev = 1, item = 2, index = 1, array = 數組, 返回值 = Math.max(1, 2)
第三次: prev = 2, item = 3, index = 2, array = 數組, 返回值 = Math.max(2, 3)
第四次: prev = 3, item = 4, index = 3, array = 數組, 返回值 = Math.max(3, 4)
第五次: prev = 4, item = 5, index = 4, array = 數組, 返回值 = Math.max(4, 5)
