數組常見方法
數組的方法
一、join() 方法 ----->不會改變原數組
二、concat() 方法 ----->不會改變原數組
三、splice(index, num, item) ----->會改變原數組
- splice(index, num) 刪除功能
- splice(index, 0, ...item)
- splice(index, num, item)
- splice(index)
四、slice() -----> 不會改變原數組
五、push() 和 pop() ----->會改變原數組
六、shift() 和 unshift() -----> 會改變原數組
七、sort() -----> 會改變原數組
八、reverse() ----->會改變原數組
九、indexOf() 和 lastIndexOf()
十、includes()
十一、forEach()
十二、map() -----> 不會改變原數組
十三、filter() -----> 不會改變原數組
十四、every()
十五、some()
十六、reduce() 和 reduceRight()
十七、Array.from() 將類數組轉化為數組
十八、Array.of() 方法用于將一組值轉化為數組
十九、數組實例的 find() 和 findIndex()
二十、扁平化數組 flat() 方法 -----> 不會改變原數組
數組的方法
一、join() 方法 ----->不會改變原數組
該方法可以將數組里面的元素，通過指定的分隔符以字符串的形式連接起來
返回值：返回新的字符串
// join() 將數組轉化為字符串
let arr = [1, 2, 3, 4, 5]
let str1 = arr.join('|')
console.log(arr) // [1, 2, 3, 4, 5]
console.log(str1) // 1|2|3|4|5
// 當傳空字符串時
let str2 = arr.join('') // 12345
// 當不傳時
let str3 = arr.join() // 1,2,3,4,5
1
2
3
4
5
6
7
8
9
二、concat() 方法 ----->不會改變原數組
該方法可以把兩個數組里的元素拼接成一個新的數組
返回值：返回拼接后的新數組
let arr1 = [0, 1, 2]
let arr2 = [2, 3, 4]
let arr = arr1.concat(arr2)
// 傳入二維數組
let arrCopy = arr1.concat([12, [17, 26]])
console.log(arrCopy) // [0, 1, 2, 12, [17, 26]]
console.log(arr) // [0, 1, 2, 2, 3, 4]
console.log(arr1) // [0, 1, 2]
console.log(arr2) // [2, 3, 4]
// ES6 擴展運算符
let a = [1, 2]
let b = [2, 3]
let ab = [...a, ...b] // [1, 2, 2, 3]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
三、splice(index, num, item) ----->會改變原數組
index 參數：必傳，整數，規定添加或者刪除的位置，使用負數時，從數組尾部規定位置
num 參數：必傳，要刪除的數量，如果為 0，則不刪除項目
item 參數：可選參數，可以是多個，想數組添加的新項目
splice 具有刪除，插入，替換的功能
- splice(index, num) 刪除功能
index 參數：開始位置的索引
num 參數：要刪除元素的個數
返回值：返回的是包含被刪除元素的數組對象
// 刪除功能
let array = [1, 2, 3, 4, 5]
let newArr = array.splice(2, 2)
console.log(newArr) // [1, 2, 5]
console.log(array) // [3, 4]
1
2
3
4
5
6
- splice(index, 0, …item)
index 參數：插入元素的索引值
0 參數：不刪除
// 插入功能
let arr = ['a', 'b', 'c', 'd', 'e']
let newArr = arr.splice(1, 0, ['插入', 1217])
console.log(newArr) // []
console.log(arr) // ['a', ['插入', 1217], 'b', 'c', 'd', 'e']
1
2
3
4
5
6
- splice(index, num, item)
index 參數：開始的索引位置
num 參數：刪除的項個數
item 參數：替換項
返回值：返回包含被刪除的元素的數組對象
let arr = [1, 2, 3, 4, 5]
let newArr = arr.splice(2, 2, '替換', '1226')
console.log(newArr) // [3, 4]
console.log(arr) // [1, 2, '替換', '1226', 5]
1
2
3
4
5
- splice(index)
當只傳一個值時，表示從傳入的 index 索引值開始截取到最后
let arr = [1, 2, 3, 4, 5]
let newArr = arr.splice(3)
console.log(newArr) // [4, 5]
console.log(arr) // [1, 2, 3]
1
2
3
4
四、slice() -----> 不會改變原數組
返回從原數組中指定開始下標到結束下標之間的項組成的新數組
slice() 方法可以接受一或兩個參數，即要返回項的起始位置和結束位置
array.slice(2) 若只設置一個參數，起始位置為2（包含下標2）開始到數組最后
array.slice(2, 5) 若設置兩個參數，起始下標為2（包含下標2）到結束下標5（不包含下標5）的數組
當 slice() 參數中有負數時，將負數加上數組的長度值來替換該位置的數
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let copyArr1 = arr.slice(2) // [3, 4, 5, 6, 7, 8, 9]
let copyArr2 = arr.slice(2, 5) // [3, 4, 5]
let copyArr3 = arr.slice(-2) // [8, 9]
let copyArr4 = arr.slice(2, -2) // [3, 4, 5, 6, 7]
let copyArr5 = arr.slice(-2, -5) // []
let copyArr6 = arr.slice(-5, -2) // [5, 6, 7]
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
1
2
3
4
5
6
7
8
9
五、push() 和 pop() ----->會改變原數組
push() 可以接受任意數量的參數，將其逐個添加到數組的末尾，并返回修改后數組的長度（改變了原數組）
pop() 刪掉數組末尾最后一項，改變了數組的 length 值，并返回刪除的項
let arr = [1, 2, 3, 4, 5]
let count = arr.push(0, 1217)
console.log(count) // 7
console.loh(arr) // [1, 2, 3, 4, 5, 0, 1217]
let item = arr.pop()
console.log(item) // 1217
console.log(arr) // [1, 2, 3, 4, 5, 0]
1
2
3
4
5
6
7
8
六、shift() 和 unshift() -----> 會改變原數組
shift() 刪除原數組的第一項，并返回刪除元素的值，如果數組為空折返回 undefined
unshift() 將參數添加到原數組的開頭，并返回數組的長度
let arr = [1, 2, 3, 4, 5]
let item = arr.shift()
console.log(item) // 1
console.log(arr) // [2, 3, 4, 5]
let count = arr.unshift(0, 'Jack')
console.log(count) // 6
console.log(arr) // [0, 'Jack', 2, 3, 4, 5]
1
2
3
4
5
6
7
8
七、sort() -----> 會改變原數組
在排序時，sort() 方法會調用每個數組項的 toString() 轉型方法，然后比較得到的字符串，已確定如何排序，其本質是比較字符串的 ASCII 編碼
即使數組中的每一項都是數值，sort() 方法比較的也是字符串，因此會出現以下情況：
let arr1 = ['a', 'd', 'e', 'b', 'c']
console.log(arr1.sort()) // ['a', 'b', 'c', 'd', 'e']
let arr2 = [12, 26, 3, 99, 52]
console.log(arr2.sort()) // [12, 26, 3, 52, 99]
1
2
3
4
5
6
解決辦法
let arr3 = [12, 26, 3, 99, 52]
arr3.sort((a, b) => {
return a -b
})
console.log(arr3) // [3, 12, 26, 52, 99]
1
2
3
4
5
冒泡排序（優化版）
function mySort (arr) {
let count = 0 // 記錄循環次數
// 外層循環 控制循環的次數，每次找到最大值
for (let i = 0; i < arr.length - 1; i++) {
count++
// 判斷是否排序好了
let isSort = true // 初始值默認已經排序好了
for (let j = 0; j < arr.length - 1 - i; j++) {
count++
if (arr[j] > arr[j + 1]) {
isSort = false
// 交換位置
let tmp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = tmp
}
}
// 某一趟結束，判斷一下是否結束
// 如何判斷是否排序好，根據是否發生了位置交換，如果發生了位置交換就說明沒有排序好
if (isSort) {
break
}
}
console.log(count)
return arr
}
mySort([12, 26, 17, 520, 99])
// 打印結果：count 9
// arr [12, 17, 26, 99, 520]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
八、reverse() ----->會改變原數組
反轉數組項的順序
let arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr) // [5, 4, 3, 2, 1]
1
2
3
4
九、indexOf() 和 lastIndexOf()
indexOf() 接受兩個參數：要查找的項和查找起點位置的索引（可選項），其中從數組的開頭開始向后查找
lastIndexOf() 接受兩個參數：要查找的項和查找起點位置的索引（可選項），其中是從數組的末尾開始向前查找
返回值：當存在時，返回要查找的項在數組中首次出現的索引值；當不存在時，返回 -1
可以用來判斷一個值是否存在數組中
let arr = [1, 2, 3, 5, 7, 7, 8, 5, 12, 17]
console.log(arr.indexOf(5)) // 3
console.log(arr.lastIndexOf(5)) // 7
console.log(arr.indexOf(5, 2)) // 3
console.log(arr.lastIndexOf(5, 4)) // 3
console.log(arr.indexOf('5')) // -1
1
2
3
4
5
6
7
8
十、includes()
Array.prototype.includes() 數組實例的方法
返回一個布爾值，表示某個數組是否包含給定的值
推薦使用：可以用來判斷一個值是否存在數組中
let arr = [1, 2, 3, 4, 5]
console.log(arr.includes(3)) // true
console.log(arr.includes(0)) // false
1
2
3
十一、forEach()
對數組進行遍歷，對數組中的每一項運行給定函數，沒有返回值
forEarch(function (item, index, array) {})
參數 item：表示數組中的每一項
參數 index：表示數組中每一項對應的索引值
參數 array：表示數組本身
let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, array) => {
console.log(item + '---' + index + '---' + (arr === array))
})
1
2
3
4
十二、map() -----> 不會改變原數組
map() 方法是將數組中的每一項調用提供的函數，結果返回一個新數組，并沒有改變原來的數組
映射
let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(item => item * item)
console.log(newArr) // [1, 4, 9, 16, 25]
console.log(arr) // [1, 2, 3, 4, 5]
1
2
3
4
5
十三、filter() -----> 不會改變原數組
filter() 方法是將數組中所有的元素進行判斷，將滿足條件的元素作為一個新數組返回
過濾
let arr = [12, 17, 26, 520, 1314]
let newArr = arr.filter((item, index) => {
return item > 20
})
console.log(newArr) // [26, 520, 1314]
1
2
3
4
5
十四、every()
every() 判斷數組中每一項都是否滿足條件，只有所有項都滿足條件才返回 true，否則返回 false
let arr = [1, 2, 3, 4, 5]
let boolean1 = arr.every(item => item > 0)
let boolean2 = arr.every(item => item > 3)
console.log(boolean1) // true
console.log(boolean2) // false
1
2
3
4
5
6
十五、some()
some() 判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回 true，否則返回 false
let arr = [1, 2, 3, 4, 5]
let boolean3 = arr.some(item => item > 3)
let boolean4 = arr.some(item => item < 0)
console.log(boolean3) // true
console.log(boolean4) // false
1
2
3
4
5
6
十六、reduce() 和 reduceRight()
reduce() 方法是所有元素調用返回函數，返回值為最后結果，傳入的值必須是函數類型
接受兩個參數：每一項調用的函數和作為歸并基礎的初始值（可選項）
這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。
// 利用 reduce() 方法實現數組求和，給數組一開始家里一個初始值 3
let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((prev, cur, index, array) => {
// 函數接受 4 個參數：
// 前一個值、當前值、項的索引值、原數組對象
console.log(prev, '---', cur, '---', index, '---', array)
return prev + cur
}, 3)
console.log(sum) // 18 = 15 + 3
1
2
3
4
5
6
7
8
9
與之相對應的還有一個 Array.reduceRight() 方法，區別是這個是從右向左操作的
十七、Array.from() 將類數組轉化為數組
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
'3': 'd',
length: 4
}
// ES5 寫法
let arr1 = [].slice.call(arrayLike) // ['a', 'b', 'c', 'd']
// ES6
let arr2 = Array.from(arrayLike) // ['a', 'b', 'c', 'd']
1
2
3
4
5
6
7
8
9
10
11
12
十八、Array.of() 方法用于將一組值轉化為數組
Array.of總是返回參數值組成的數組。如果沒有參數，就返回一個空數組。
Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
Array.of('abcd') // ['abcd']
Array.of('abcd').length // 1
Array.of() // []
// Array.of 方法的實現
function ArrayOf () {
return [].slice.call(arguments)
}
1
2
3
4
5
6
7
8
9
十九、數組實例的 find() 和 findIndex()
數組實例的 find() 方法，用于找出第一個符合條件的數組成員
它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為 true 的成員，然后就返回該成員，如果沒有符合條件的成員，則返回 undefined
let arr = [1, 2, 3, 4, 5]
let value= arr.find((item, index, array) => {
// item 表示循環遍歷數組的每一項
// index 每一項對應的索引值
// array 原數組對象
return item > 3
})
console.log(value) // 4
console.log(arr) // [1, 2, 3, 4, 5]
1
2
3
4
5
6
7
8
9
10
數組實例的 findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回 -1
let arr = [1, 2, 3, 4, 5]
let index = arr.findIndex((item, index, array) => {
return item > 3
})
console.log(index) // 3
[NaN].indexOf(NaN) // -1
[NaN].findIndex(value => Object.is(NaN, value)) // 0
[NaN].includes(NaN) // true
1
2
3
4
5
6
7
8
9
10
由此可見：一般用來判斷數組中是否存在某個值，推薦使用 includes
二十、扁平化數組 flat() 方法 -----> 不會改變原數組
let arr = [1, [2, 3, [4, 5, [6]]]]
let arrFlat = arr.flat(Infinity)
console.log(arrFlat) // [1, 2, 3, 4, 5, 6]
console.log(arr) // [1, [2, 3, [4, 5, [6]]]]
1
2
3
4
利用遞歸實現數組扁平化
let arrayFlat = []
let myFlat = (arr) => {
for (let i = 0; i < arr.length; i++) {
let item= arr[i]
// 判斷 arr[i] 是否是數組
if (Array.isArray(item)) {
// 如果是數組，繼續調用函數 myFlat
myFlat(item)
} else {
arrayFlat.push(item)
}
}
return arrayFlat
}
藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
