天堂AV一区,欧美午夜不卡,亚洲av在线观看

數組常用的方法

2019-10-15 seo達人

數組常見方法

數組的方法

一、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.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

« 以人為中心的設計指南（一）目錄頁該如何設計？-8個常用的排版方式 »

數組常用的方法

分類

日歷

鏈接

個人資料

存檔