數(shù)組常見方法

數(shù)組的方法

一、join() 方法 ----->不會(huì)改變?cè)瓟?shù)組

二、concat() 方法 ----->不會(huì)改變?cè)瓟?shù)組

三、splice(index, num, item) ----->會(huì)改變?cè)瓟?shù)組

1. splice(index, num) 刪除功能
   
2. splice(index, 0, ...item)
   
3. splice(index, num, item)
   
4. splice(index)
   
   四、slice() -----> 不會(huì)改變?cè)瓟?shù)組
   
   五、push() 和 pop() ----->會(huì)改變?cè)瓟?shù)組
   
   六、shift() 和 unshift() -----> 會(huì)改變?cè)瓟?shù)組
   
   七、sort() -----> 會(huì)改變?cè)瓟?shù)組
   
   八、reverse() ----->會(huì)改變?cè)瓟?shù)組
   
   九、indexOf() 和 lastIndexOf()
   
   十、includes()
   
   十一、forEach()
   
   十二、map() -----> 不會(huì)改變?cè)瓟?shù)組
   
   十三、filter() -----> 不會(huì)改變?cè)瓟?shù)組
   
   十四、every()
   
   十五、some()
   
   十六、reduce() 和 reduceRight()
   
   十七、Array.from() 將類數(shù)組轉(zhuǎn)化為數(shù)組
   
   十八、Array.of() 方法用于將一組值轉(zhuǎn)化為數(shù)組
   
   十九、數(shù)組實(shí)例的 find() 和 findIndex()
   
   二十、扁平化數(shù)組 flat() 方法 -----> 不會(huì)改變?cè)瓟?shù)組
   
   數(shù)組的方法
   
   一、join() 方法 ----->不會(huì)改變?cè)瓟?shù)組
   
   該方法可以將數(shù)組里面的元素，通過指定的分隔符以字符串的形式連接起來
   
   返回值：返回新的字符串
   
   
   
   // join() 將數(shù)組轉(zhuǎn)化為字符串
   
   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
   
   // 當(dāng)傳空字符串時(shí)
   
   let str2 = arr.join('') // 12345
   
   // 當(dāng)不傳時(shí)
   
   let str3 = arr.join() // 1,2,3,4,5
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   二、concat() 方法 ----->不會(huì)改變?cè)瓟?shù)組
   
   該方法可以把兩個(gè)數(shù)組里的元素拼接成一個(gè)新的數(shù)組
   
   返回值：返回拼接后的新數(shù)組
   
   
   
   let arr1 = [0, 1, 2]
   
   let arr2 = [2, 3, 4]
   
   let arr = arr1.concat(arr2)
   
   // 傳入二維數(shù)組
   
   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 擴(kuò)展運(yùn)算符
   
   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) ----->會(huì)改變?cè)瓟?shù)組
   
   index 參數(shù)：必傳，整數(shù)，規(guī)定添加或者刪除的位置，使用負(fù)數(shù)時(shí)，從數(shù)組尾部規(guī)定位置
   
   num 參數(shù)：必傳，要?jiǎng)h除的數(shù)量，如果為 0，則不刪除項(xiàng)目
   
   item 參數(shù)：可選參數(shù)，可以是多個(gè)，想數(shù)組添加的新項(xiàng)目
   
   splice 具有刪除，插入，替換的功能
   
   
   
5. splice(index, num) 刪除功能
   
   index 參數(shù)：開始位置的索引
   
   
   
   num 參數(shù)：要?jiǎng)h除元素的個(gè)數(shù)
   
   
   
   返回值：返回的是包含被刪除元素的數(shù)組對(duì)象
   
   
   
   // 刪除功能
   
   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
   
6. splice(index, 0, …item)
   
   index 參數(shù)：插入元素的索引值
   
   0 參數(shù)：不刪除
   
   // 插入功能
   
   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
   
7. splice(index, num, item)
   
   index 參數(shù)：開始的索引位置
   
   num 參數(shù)：刪除的項(xiàng)個(gè)數(shù)
   
   item 參數(shù)：替換項(xiàng)
   
   返回值：返回包含被刪除的元素的數(shù)組對(duì)象
   
   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
   
8. splice(index)
   
   當(dāng)只傳一個(gè)值時(shí)，表示從傳入的 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() -----> 不會(huì)改變?cè)瓟?shù)組
   
   返回從原數(shù)組中指定開始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組
   
   slice() 方法可以接受一或兩個(gè)參數(shù)，即要返回項(xiàng)的起始位置和結(jié)束位置
   
   array.slice(2) 若只設(shè)置一個(gè)參數(shù)，起始位置為2（包含下標(biāo)2）開始到數(shù)組最后
   
   array.slice(2, 5) 若設(shè)置兩個(gè)參數(shù)，起始下標(biāo)為2（包含下標(biāo)2）到結(jié)束下標(biāo)5（不包含下標(biāo)5）的數(shù)組
   
   當(dāng) slice() 參數(shù)中有負(fù)數(shù)時(shí)，將負(fù)數(shù)加上數(shù)組的長(zhǎng)度值來替換該位置的數(shù)
   
   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() ----->會(huì)改變?cè)瓟?shù)組
   
   push() 可以接受任意數(shù)量的參數(shù)，將其逐個(gè)添加到數(shù)組的末尾，并返回修改后數(shù)組的長(zhǎng)度（改變了原數(shù)組）
   
   pop() 刪掉數(shù)組末尾最后一項(xiàng)，改變了數(shù)組的 length 值，并返回刪除的項(xiàng)
   
   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() -----> 會(huì)改變?cè)瓟?shù)組
   
   shift() 刪除原數(shù)組的第一項(xiàng)，并返回刪除元素的值，如果數(shù)組為空折返回 undefined
   
   unshift() 將參數(shù)添加到原數(shù)組的開頭，并返回?cái)?shù)組的長(zhǎng)度
   
   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() -----> 會(huì)改變?cè)瓟?shù)組
   
   在排序時(shí)，sort() 方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的 toString() 轉(zhuǎn)型方法，然后比較得到的字符串，已確定如何排序，其本質(zhì)是比較字符串的 ASCII 編碼
   
   即使數(shù)組中的每一項(xiàng)都是數(shù)值，sort() 方法比較的也是字符串，因此會(huì)出現(xiàn)以下情況：
   
   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
   
   冒泡排序（優(yōu)化版）
   
   
   
   function mySort (arr) {
   
   let count = 0 // 記錄循環(huán)次數(shù)
   
   // 外層循環(huán)  控制循環(huán)的次數(shù)，每次找到最大值
   
   for (let i = 0; i < arr.length - 1; i++) {
   
   count++
   
   // 判斷是否排序好了
   
   let isSort = true // 初始值默認(rèn)已經(jīng)排序好了
   
   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
   
   }
   
   }
   
   // 某一趟結(jié)束，判斷一下是否結(jié)束
   
   // 如何判斷是否排序好，根據(jù)是否發(fā)生了位置交換，如果發(fā)生了位置交換就說明沒有排序好
   
   if (isSort) {
   
   break
   
   }
   
   }
   
   console.log(count)
   
   return arr
   
   }
   
   mySort([12, 26, 17, 520, 99])
   
   
   
   // 打印結(jié)果：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() ----->會(huì)改變?cè)瓟?shù)組
   
   反轉(zhuǎn)數(shù)組項(xiàng)的順序
   
   let arr = [1, 2, 3, 4, 5]
   
   arr.reverse()
   
   console.log(arr) // [5, 4, 3, 2, 1]
   
   
   
   1
   
   2
   
   3
   
   4
   
   九、indexOf() 和 lastIndexOf()
   
   indexOf() 接受兩個(gè)參數(shù)：要查找的項(xiàng)和查找起點(diǎn)位置的索引（可選項(xiàng)），其中從數(shù)組的開頭開始向后查找
   
   lastIndexOf() 接受兩個(gè)參數(shù)：要查找的項(xiàng)和查找起點(diǎn)位置的索引（可選項(xiàng)），其中是從數(shù)組的末尾開始向前查找
   
   返回值：當(dāng)存在時(shí)，返回要查找的項(xiàng)在數(shù)組中首次出現(xiàn)的索引值；當(dāng)不存在時(shí)，返回 -1
   
   可以用來判斷一個(gè)值是否存在數(shù)組中
   
   
   
   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() 數(shù)組實(shí)例的方法
   
   返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值
   
   推薦使用：可以用來判斷一個(gè)值是否存在數(shù)組中
   
   
   
   let arr = [1, 2, 3, 4, 5]
   
   console.log(arr.includes(3)) // true
   
   console.log(arr.includes(0)) // false
   
   1
   
   2
   
   3
   
   十一、forEach()
   
   對(duì)數(shù)組進(jìn)行遍歷，對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，沒有返回值
   
   
   
   forEarch(function (item, index, array) {})
   
   
   
   參數(shù) item：表示數(shù)組中的每一項(xiàng)
   
   參數(shù) index：表示數(shù)組中每一項(xiàng)對(duì)應(yīng)的索引值
   
   參數(shù) array：表示數(shù)組本身
   
   let arr = [1, 2, 3, 4, 5]
   
   arr.forEach((item, index, array) => {
   
   console.log(item + '---' + index + '---' + (arr === array))
   
   })
   
   1
   
   2
   
   3
   
   4
   
   十二、map() -----> 不會(huì)改變?cè)瓟?shù)組
   
   map() 方法是將數(shù)組中的每一項(xiàng)調(diào)用提供的函數(shù)，結(jié)果返回一個(gè)新數(shù)組，并沒有改變?cè)瓉淼臄?shù)組
   
   映射
   
   
   
   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() -----> 不會(huì)改變?cè)瓟?shù)組
   
   filter() 方法是將數(shù)組中所有的元素進(jìn)行判斷，將滿足條件的元素作為一個(gè)新數(shù)組返回
   
   過濾
   
   
   
   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() 判斷數(shù)組中每一項(xiàng)都是否滿足條件，只有所有項(xiàng)都滿足條件才返回 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() 判斷數(shù)組中是否存在滿足條件的項(xiàng)，只要有一項(xiàng)滿足條件，就會(huì)返回 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() 方法是所有元素調(diào)用返回函數(shù)，返回值為最后結(jié)果，傳入的值必須是函數(shù)類型
   
   接受兩個(gè)參數(shù)：每一項(xiàng)調(diào)用的函數(shù)和作為歸并基礎(chǔ)的初始值（可選項(xiàng)）
   
   這個(gè)函數(shù)返回的任何值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)。第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上，因此第一個(gè)參數(shù)是數(shù)組的第一項(xiàng)，第二個(gè)參數(shù)就是數(shù)組的第二項(xiàng)。
   
   
   
   // 利用 reduce() 方法實(shí)現(xiàn)數(shù)組求和，給數(shù)組一開始家里一個(gè)初始值 3
   
   let arr = [1, 2, 3, 4, 5]
   
   let sum = arr.reduce((prev, cur, index, array) => {
   
   // 函數(shù)接受 4 個(gè)參數(shù)：
   
   // 前一個(gè)值、當(dāng)前值、項(xiàng)的索引值、原數(shù)組對(duì)象
   
   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
   
   與之相對(duì)應(yīng)的還有一個(gè) Array.reduceRight() 方法，區(qū)別是這個(gè)是從右向左操作的
   
   
   
   十七、Array.from() 將類數(shù)組轉(zhuǎn)化為數(shù)組
   
   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() 方法用于將一組值轉(zhuǎn)化為數(shù)組
   
   Array.of總是返回參數(shù)值組成的數(shù)組。如果沒有參數(shù)，就返回一個(gè)空數(shù)組。
   
   
   
   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 方法的實(shí)現(xiàn)
   
   function ArrayOf () {
   
   return [].slice.call(arguments)
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   十九、數(shù)組實(shí)例的 find() 和 findIndex()
   
   數(shù)組實(shí)例的 find() 方法，用于找出第一個(gè)符合條件的數(shù)組成員
   
   它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個(gè)返回值為 true 的成員，然后就返回該成員，如果沒有符合條件的成員，則返回 undefined
   
   let arr = [1, 2, 3, 4, 5]
   
   let value= arr.find((item, index, array) => {
   
   // item 表示循環(huán)遍歷數(shù)組的每一項(xiàng)
   
   // index 每一項(xiàng)對(duì)應(yīng)的索引值
   
   // array 原數(shù)組對(duì)象
   
   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
   
   數(shù)組實(shí)例的 findIndex方法的用法與find方法非常類似，返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回 -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
   
   由此可見：一般用來判斷數(shù)組中是否存在某個(gè)值，推薦使用 includes
   
   
   
   二十、扁平化數(shù)組 flat() 方法 -----> 不會(huì)改變?cè)瓟?shù)組
   
   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
   
   利用遞歸實(shí)現(xiàn)數(shù)組扁平化
   
   
   
   let arrayFlat = []
   
   let myFlat = (arr) => {
   
   for (let i = 0; i < arr.length; i++) {
   
   let item= arr[i]
   
   // 判斷 arr[i] 是否是數(shù)組
   
   if (Array.isArray(item)) {
   
   // 如果是數(shù)組，繼續(xù)調(diào)用函數(shù) myFlat
   
   myFlat(item)
   
   } else {
   
   arrayFlat.push(item)
   
   }
   
   }
   
   return arrayFlat
   
   }
   

   
   

   
   

   藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。