影響原數(shù)組：sort()、reverse()、push、pop、unshift、shift、splice、delete、fill、copyWithin

不影響原數(shù)組: filter、map、some、every、forEach、for…in、for…of、reduce&reduceRight、find、finIndexOf、indexOf、lastIndexOf、flat、includes、from、slice、join、concat。

寫法比較簡潔 部分語法請參考作者其他文章

1.sort （排序-影響原數(shù)組）

const arr = [4, 5, 7, 4, 3, 1, 6, 9, 2]// 默認升序arr.sort() //輸出 [1, 2, 3, 4, 4, 5, 6, 7, 9]// 降序arr.sort((a, b) => b - a) // 輸出 [9, 7, 6, 5, 4, 4, 3, 2, 1]// 指定對象屬性排序 此處以`age`排序const arrObj = [{ name: '思聰', age: 38 }, { name: '筍一林', age: 24 }, { name: '老牛吃能草', age: 18 }]arrObj.sort(({ age: age1 }, { age: age2 }) => age1 - age2) // 輸出 [{ name: '老牛吃能草', age: 18 }, { name: '筍一林', age: 24 },{ name: '思聰', age: 38 }]// 讓數(shù)組亂序arr.sort((a, b) => Math.random() - 0.5) // 輸出 [4, 4, 5, 1, 6, 2, 7, 9, 3]

2. reverse （逆序-影響原數(shù)組）

const arr = [4, 5, 7, 4, 3, 1, 6, 9, 2]const arr1 = ['q', 'w', 'e', 'r']arr.reverse() //輸出 [2, 9, 6, 1, 3, 4, 7, 5, 4]arr1.reverse() // 輸出 [ 'r', 'e', 'w', 'q' ]

3.push、pop、unshift、shift （數(shù)組首位添加、刪除）

// 1、push（數(shù)組末尾添加-影響原數(shù)組-有返回值）let arr = ['阿嬌', '百合', '馬蓉']arr.push('小豬') // 輸出 ['阿嬌', '百合', '馬蓉', '小豬' ] // 有返回值 返回數(shù)組長度 同時添加元素const re = arr.push('冠希') console.log(re, arr) // 輸出 5 [ '阿嬌', '百合', '馬蓉', '小豬', '冠希' ]// 2、pop (刪除數(shù)組最后一元素-影響原數(shù)組-有返回值)let arr1 = ['阿嬌', '百合', '馬蓉']arr1.pop() // 輸出 ['阿嬌', '百合'] // 有返回值 返回刪除的元素 同時刪除數(shù)組最后一個元素const pre = arr1.pop()console.log(pre, arr1) // 輸出 百合 ['阿嬌']// 3、unshift (數(shù)組的首部添加-影響原數(shù)組-有返回值) let arr2 = ['阿嬌', '百合', '馬蓉']arr2.unshift('小豬') // 輸出 ['小豬','阿嬌', '百合', '馬蓉'] // 有返回值 返回數(shù)組長度 同時添加元素const ure = arr2.push('冠希') console.log(ure, arr2) // 輸出 5 ['冠希','小豬', '阿嬌', '百合', '馬蓉']// 4、shift (刪除數(shù)組首位-影響原數(shù)組-有返回值)let arr3 = ['阿嬌', '百合', '馬蓉']arr3.shift() // 輸出 ['百合', '馬蓉'] // 有返回值 返回刪除的元素 同時刪除數(shù)組最后一個元素const sre = arr3.shift()console.log(sre, arr3) // 輸出 百合 ['馬蓉']

4.filter (過濾數(shù)組-不影響原數(shù)組-返回新數(shù)組)

// filter 接收一個回調(diào)函數(shù)(callback(參數(shù)1,參數(shù)2,參數(shù)3)) 回調(diào)函數(shù)需要return過濾條件！！！ // 參數(shù)1: 遍歷的數(shù)組每一項 // 參數(shù)2: 索引 // 參數(shù)3: 數(shù)組本身 const arr = ['5', 6, 2, 4, '大巴誰修哈',] const newArr = arr.filter((v, i, arr) => ~~v > 4) console.log(newArr) //輸出 ['5', 6]const newArr1 = arr.filter((v, i, arr) => {console.log(v) // 輸出每次遍歷的值console.log(i) // 輸出當前索引console.log(arr) // 輸出遍歷數(shù)組本身return typeof v === 'string' }) console.log(newArr1) //輸出 ['5', '大巴誰修哈']// 用filter去重 const arr = [1, 1, 3, 4, 4, '1', '1', 3, 4] const newArr 2 = arr.filter((v, i) => arr.indexOf(v) === i) //輸出 [ 1, 3, 4, '1' ]

?? 5. map (映射新的數(shù)組-不影響原數(shù)組-返回新數(shù)組)

// map 接收一個回調(diào)函數(shù)(callback(參數(shù)1,參數(shù)2,參數(shù)3))，必須返回返回操作好的元素const arr = [1, 2, 3]newArr = arr.map((v, i) => v + i) //輸出 [ 1, 3, 5 ]const arr1 = [{ name: '三笠', age: '18' }, { name: '艾倫', age: '18' }]const newArrr1 = arr1.map((v, i, arr) => ({...v, address: '瑪麗亞之墻'})) // 輸出 [{ name: '三笠', age: '18', address: '瑪麗亞之墻'},{ name: '艾倫', age: '18', address: '瑪麗亞之墻' }]

?? 6. some (查找數(shù)組- 不影響原數(shù)組-返回布爾值)

// some 查找到滿足條件的第一個值后立馬退出 不會再往后循環(huán) // 找到返回true 否則返回false 也接受三個參數(shù) 和filter一樣 const arr = [1, 3, 5, 7, 9] const B = arr.some((v, i, arr) => v > 5) // 輸出 true const Bo = arr.some((v, i, arr) => v > 9) // 輸出 false

7. every (查找數(shù)組- 不影響原數(shù)組-返回布爾值)

// every 查找數(shù)組 只有數(shù)組中的元素 // 全部滿足條件才返回true 否則返回false 一個元素不滿足條件 立馬跳出循環(huán) 也接受三個參數(shù) 和filter一樣 const arr = [1, 2, 3, 4, 5, 'string', 6] let B = arr.every((v, i, arr) => v + 1 > 0) //輸出 trueB = arr.every((v, i, arr) => typeof v === 'number') //輸出 falseB = arr.every((v, i, arr) => typeof v === 'number' || 'string') //輸出 true

?? 8. forEach (遍歷數(shù)組-不影響原數(shù)組-沒有返回值)

// forEach 遍歷數(shù)組 直接對數(shù)組進行操作 接收一個回調(diào)函數(shù)(callback(參數(shù)1,參數(shù)2,參數(shù)3)) const arr = [1, 2, 3, 4, 5, 6] arr.forEach((v, i, arr) => {arr[i] = v + 1// console.log(v) // 輸出每次遍歷的值// console.log(i) // 輸出當前索引//console.log(arr) // 輸出遍歷數(shù)組本身 }) console.log(arr) //輸出 [2, 3, 4, 5, 6, 7]

9. for…in (遍歷數(shù)組 | 對象-不影響原數(shù)組-沒有返回值)

// for...in 遍歷 (數(shù)組 | 對象) 的索引值或者鍵名 const arr = [1, 2, 3, 4, 5, 6] const obj = { name: '提莫', address: '約德爾', sex: '0 | 1'} // 數(shù)組用法 輸出索引 for (let i in arr) {console.log(i) // 輸出 arr的每一項索引值 } // 對象用法 輸出鍵名 for (let v in obj) {console.log(obj[v]) // 輸出 提莫 約德爾 0 | 1 }

?? 10. for…of (遍歷數(shù)組 | 對象-不影響原數(shù)組-沒有返回值)

const arr = [{name: '提莫', address: '約德爾'}, {name: '蓋倫', address: '德瑪西亞'}] // 數(shù)組用法 輸出值 for (let i of arr) {console.log(i) // 輸出 arr的每一項值 } ?? // 用 for...of 拿到索引值 for (let [i, v] in obj.entries()) {console.log(i) // 輸出 索引值console.log(v) // 輸出 每一項值 }

?? 11. reduce & reduceRight (累計器- 不影響原數(shù)組-返回新數(shù)組)

// reduce 累計器 接收兩個參數(shù) 第一個參數(shù)為回調(diào)函數(shù)(callback(參數(shù)1-初始化值, 參數(shù)2-值, 參數(shù)3-索引, 參數(shù)4-數(shù)組本身)) 第二個參數(shù)為初始化值(不傳則初始化值為數(shù)組的第一項) // 一般用法 const arr = [1, 2, 3, 4, 5] const number = arr.reduce((h, v, i, arr) => h + ~~v ) // 輸出 15 const number1 = arr.reduce((h, v, i, arr) => h + ~~v, 2 ) // 輸出 17// 初始化值 用法 const arr = [{name: '提莫', height: 121, age: 11, job: '毒師'},{name: '蘭博', height: 125, age: 18, job: '縱火犯'} ] // 將 arr 中的所有身高和年齡加起來 并返回身高 年齡的對象 const obj = arr.reduce((obj, v, i, arr) => {console.log(v.name) // 輸出 提莫 蘭博obj.height = ~~obj.height + ~~v.height obj.age = ~~obj.age + ~~v.agereturn obj }, { height: 0, age: 0}) console.log(obj) // 輸出 { height: 246, age: 29 }// reduceRight 和`reduce`一樣 只是`reduceRight` 是從后向前累計

?? 12. find (查詢數(shù)組-不影響原數(shù)組-返回查詢到的值)

// find 查詢數(shù)組 返回查詢到的第一個元素,并結(jié)束循環(huán) 未找到返回undefined // 接收一個回調(diào)函數(shù)(callback(參數(shù)1,參數(shù)2,參數(shù)3)) 需要return 查詢條件const arr = [{name: '提莫', height: 121, age: 11, job: '毒師'},{name: '蘭博', height: 125, age: 18, job: '縱火犯'}]const value = arr.find((v, i, arr) => v.job === '縱火犯')console.log(value) // 輸出 {name: '蘭博', height: 125, age: 18, job: '縱火犯'}const value1 = arr.find((v, i, arr) => v.job === '縱火犯' && i === 2)console.log(value1) // 輸出 undefined

13. findIndex (查詢數(shù)組-不影響原數(shù)組-返回查詢到的索引值)

// findIndex 查詢數(shù)組 返回查詢到符合條件的索引值,并結(jié)束循環(huán) // 未找到返回-1 接收一個回調(diào)函數(shù)(callback(參數(shù)1,參數(shù)2,參數(shù)3)) 需要return 查詢條件const arr = [1, 5, 6, 7, 9, 3]const index = arr.findIndex((v, i, arr) => v === 6)console.log(index) // 輸出 2const index1 = arr.findIndex((v, i, arr) => v === 2)console.log(index1) // 輸出 -1

14. indexOf (查詢數(shù)組-不影響原數(shù)組-返回查詢到的索引值)

// indexOf 查詢數(shù)組 返回查詢到符合條件的索引值,并結(jié)束循環(huán) 未找到返回-1 // 接收兩個參數(shù)(參數(shù)1-查找的元素, 參數(shù)2-從什么位置開始查詢(索引值))const arr = [1, 5, 6, 7, 9, 3]const index = arr.indexOf(6)console.log(index) // 輸出 2const index1 = arr.indexOf(6, 3)console.log(index1) // 輸出 -1

15. lastIndexOf (查詢數(shù)組-不影響原數(shù)組-返回查詢到的索引值)

// lastIndexOf 和 `indexOf`用法一致 只是`lastIndexOf`是從后往前進行搜索

?? 16. flat (扁平化數(shù)組-不影響原數(shù)組-返回扁平化后的數(shù)組)

此方法 需要瀏覽器兼容 IE瀏覽器不支持 chrome 需要 69及以上版本才支持 可采用其他方法

// flat 將數(shù)組扁平化 可傳入一個參數(shù)為 要扁平化的層數(shù) 傳入`Infinity`則代表不管多少層 全部扁平化為一層 const arr = [1, [1,2,3,[4,5,6]], 6, 7, 9, 3] // 三維數(shù)組 const newArr1 = arr.flat(1) console.log(newArr1) // 輸出 [ 1, 1, 2, 3, [ 4, 5, 6, [ 7, 8, 9 ] ], 6 ] const newArr2 = arr.flat(2) console.log(newArr2) // 輸出 [ 1, 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ], 6 ] const newArr3 = arr.flat(Infinity) console.log(newArr3) // 輸出 [1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 6]

?? 17. includes (數(shù)組查詢-不影響原數(shù)組-返回布爾值)

// includes 查詢數(shù)組 返回布爾值 接收兩個參數(shù)(參數(shù)1-查找的元素, 參數(shù)2-從什么位置開始查詢(索引值)) const arr = [1, 5, 6, 7, 9, 3] const value = arr.includes(6) // 輸出 true const value1 = arr.includes(6, 3) // 輸出 false

18. from (將類數(shù)組轉(zhuǎn)換為真數(shù)組)

// from 轉(zhuǎn)換有l(wèi)ength的類數(shù)組 //可傳入三個參數(shù)（轉(zhuǎn)換的數(shù)組-參數(shù)一，轉(zhuǎn)換數(shù)組的每一個值-參數(shù)三，映射參數(shù)二的this-參數(shù)三）const arr = Array.from('abc') // 輸出 [a, b, c]const arr1 = Array.from([1,2,3],v => v + 1) // 輸出 [2,3,4]// 用 Set 和 from 去重const arr2 = Array.from(new Set([1,2,1,2,3,4,5,3,5,4])) // 輸出 [ 1, 2, 3, 4, 5 ]const arr3 = [...new Set([1,2,1,2,3,4,5,3,5,4])] // 輸出 [ 1, 2, 3, 4, 5 ]

?? 19. slice (截取數(shù)組-不影響原數(shù)組-返回截取的數(shù)組)

// slice 截取數(shù)組 // 可傳入倆個參數(shù)(開始截取位置-參數(shù)一，結(jié)束截取位置-參數(shù)二) 如果不傳參數(shù)則淺拷貝原數(shù)組 const arr = [1,2,3,4,5] const arr1 = arr.slice() //輸出 [1,2,3,4,5] const arr2 = arr.slice(2,4) // 從索引值為2的元素開始截取 截取到索引值為4的元素(不包括索引值為4的元素) // 輸出 [3, 4]

?? 20. splice (刪除數(shù)組元素-影響原數(shù)組)

// splice 截取原數(shù)組 有三個參數(shù)(開始刪除的索引位置-參數(shù)一,刪除的個數(shù)-參數(shù)二,刪除后添加的值) const arr = ['提莫', '凱蘭', '蘭博'] arr.splice(1) // 只傳一個參數(shù) 則刪除掉參數(shù)一后面的所有元素 //輸出 ['提莫'] arr.splice(1,2,'崔絲塔娜') // 從索引值為1的元素開始刪除(包括索引值) 刪除掉兩位 并填充參數(shù)三 // 輸出['提莫', '崔絲塔娜']

?? 21. join (數(shù)組轉(zhuǎn)字符串-不影響原數(shù)組-返回轉(zhuǎn)完的字符串)

// join 數(shù)組轉(zhuǎn)字符串 可傳入一個字符串參數(shù) 數(shù)組以什么方式分割 const arr = [‘打工人', '打工魂', '打工能做人上人'] const arr1 = arr.join('呀') // 輸出 '打工人呀打工魂呀打工能做人上人' const arr2 = arr.join('￥ ') // 輸出 打工人￥ 打工魂￥ 打工能做人上人

22. split (字符串轉(zhuǎn)數(shù)組-不影響對象-返回數(shù)組)

// split 數(shù)組轉(zhuǎn)字符串 可傳入一個字符串參數(shù)-字符串轉(zhuǎn)數(shù)組的分割依據(jù) const arr = '打工人呀打工魂呀打工能做人上人' const arr1 = arr.split('呀') // 輸出 [‘打工人', '打工魂', '打工能做人上人'] const arr2 = arr.join('￥') // 輸出 [ '打工人呀打工魂呀打工能做人上人' ]

23. concat (拼接數(shù)組-可用于數(shù)組的淺拷貝-推薦用擴展運算符)

// concat 拼接數(shù)組 可傳入多個拼接的參數(shù) const arr = [1,2,3] const arr1 = [4,5,6] const arr3 = arr.concat(arr1,[7,8,9]) // 輸出 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] // 擴展運算符 const arr4 = [...arr,...arr1] // 輸出 [ 1, 2, 3, 4, 5, 6 ]

24. delete (刪除元素值-刪除后位置還在-值為undefined)

const arr = [1, 2, 3, 4] delete arr[1] // 刪除arr 索引為1的值 不刪除位置 console.log(arr[1]) // 輸出 undefined

25. fill (填充數(shù)組-影響原數(shù)組)

// fill 接收三個參數(shù)fill(填充的值,填充開始位置,填充結(jié)束位置) 如果開始位置或者結(jié)束位置值為負數(shù) 則表示從結(jié)尾往前算 const arr = [1, 2, 3, 4] arr.fill(6) // [6, 6, 6, 6] arr.fill(6, 1) // [1, 6, 6, 6] arr.fill(6, -1) // [6, 6, 6, 4] arr.fill(6, 1, -1) // [1, 6, 6, 4]

26. copyWithin (替換元素-影響原數(shù)組)

// copyWithin 有三個參數(shù)copyWithin(開始替換的位置,開始截取元素的位置,結(jié)束截取元素的位置) 會將截取的元素 從參數(shù)以的位置開始替換。如果第二個或者第三個參數(shù)為負數(shù) 則會從后往前 let arr = [1,2,3,4,5,6]; // 從索引3 截取到索引5(不包括5) (截取到[4,5]) 然后將[4,5]從索引1開始替換 arr.copyWithin(1,3,5);console.log(arr); // 輸出 [ 1, 4, 5, 4, 5, 6 ]

new Array (用于創(chuàng)建一個數(shù)組)

const arr = new Array arr[0] = 1 console.log(arr) // 輸出 [1]

length(獲取長度-截斷數(shù)組)

const arr = [1,1,4,5,6,7,32,3] console.log(arr.length) // 8 arr.length = 4 // [ 1, 1, 4, 5 ] // 定義一個超出數(shù)組長度的元素 length也會被重新定義 arr[99] = 8 console.log(arr.length) // 100

擴展運算符(…)、數(shù)組的解構(gòu)

// 擴展運算符 ... 用于展開數(shù)組 const arr = [1,2,3] console.log(...arr) // 1 2 3 // 淺拷貝 const arr1 = [...arr] arr1[0] = 4 console.log(arr) // [1,2,3] //拼接數(shù)組 const arr2 = [...arr,...arr1,9] // [ 1, 2, 3, 4, 2, 3, 9 ]// 數(shù)組的結(jié)構(gòu) const [a,b,c] = arr console.log(a,b,c) // 1 2 3 // 設(shè)置默認值 const [d,e,f,g = 4] =arr console.log(d,e,f,g) // 1 2 3 4 // const [h,i,j,k] =arr console.log(h,i,j,k) // 1 2 3 undefined

總結(jié)

以上是生活随笔為你收集整理的JS 数组方法概全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。