js中數(shù)組常用方法總結(jié)(推薦)
前言
從事前端到現(xiàn)在也有快兩年了,平時也會收集整理一些筆記放在印象筆記,不過收集過之后就在沒有看過,經(jīng)大佬指點,真正掌握一個知識點,最好的方式就是用自己的話把內(nèi)容講明白,就開始將以前零散的東西整合一下,和各位道友一起提高。
操作數(shù)組
印象中數(shù)組有很多方法,系統(tǒng)的整理一下,放在自己家里方便回頭查~
Array.map()
此方法是將數(shù)組中的每個元素調(diào)用一個提供的函數(shù),結(jié)果作為一個新的數(shù)組返回,并沒有改變原來的數(shù)組
let arr = [1, 2, 3, 4, 5] let newArr = arr.map(x => x*2) //arr= [1, 2, 3, 4, 5] 原數(shù)組保持不變 //newArr = [2, 4, 6, 8, 10] 返回新數(shù)組
Array.forEach()
此方法是將數(shù)組中的每個元素執(zhí)行傳進(jìn)提供的函數(shù),沒有返回值,直接改變原數(shù)組,注意和map方法區(qū)分
let arr = [1, 2, 3, 4, 5] num.forEach(x => x*2) // arr = [2, 4, 6, 8, 10] 數(shù)組改變,注意和map區(qū)分
Array.filter()
此方法是將所有元素進(jìn)行判斷,將滿足條件的元素作為一個新的數(shù)組返回
let arr = [1, 2, 3, 4, 5] const isBigEnough => value => value >= 3 let newArr = arr.filter(isBigEnough ) //newNum = [3, 4, 5] 滿足條件的元素返回為一個新的數(shù)組
Array.every()
此方法是將所有元素進(jìn)行判斷返回一個布爾值,如果所有元素都滿足判斷條件,則返回true,否則為false:
let arr = [1, 2, 3, 4, 5] const isLessThan4 => value => value < 4 const isLessThan6 => value => value < 6 arr.every(isLessThan4 ) //false arr.every(isLessThan6 ) //true
Array.some()
此方法是將所有元素進(jìn)行判斷返回一個布爾值,如果存在元素都滿足判斷條件,則返回true,若所有元素都不滿足判斷條件,則返回false:
let arr= [1, 2, 3, 4, 5] const isLessThan4 => value => value < 4 const isLessThan6 => value => value > 6 arr.some(isLessThan4 ) //true arr.some(isLessThan6 ) //false
Array.reduce()
此方法是所有元素調(diào)用返回函數(shù),返回值為最后結(jié)果,傳入的值必須是函數(shù)類型:
let arr = [1, 2, 3, 4, 5] const add = (a, b) => a + b let sum = arr.reduce(add) //sum = 15 相當(dāng)于累加的效果 與之相對應(yīng)的還有一個 Array.reduceRight() 方法,區(qū)別是這個是從右向左操作的
Array.push()
此方法是在數(shù)組的后面添加新加元素,此方法改變了數(shù)組的長度:
Array.pop()
此方法在數(shù)組后面刪除最后一個元素,并返回數(shù)組,此方法改變了數(shù)組的長度:
let arr = [1, 2, 3, 4, 5] arr.pop() console.log(arr) //[1, 2, 3, 4] console.log(arr.length) //4
Array.shift()
此方法在數(shù)組后面刪除第一個元素,并返回數(shù)組,此方法改變了數(shù)組的長度:
let arr = [1, 2, 3, 4, 5] arr.shift() console.log(arr) //[2, 3, 4, 5] console.log(arr.length) //4
Array.unshift()
此方法是將一個或多個元素添加到數(shù)組的開頭,并返回新數(shù)組的長度:
let arr = [1, 2, 3, 4, 5] arr.unshift(6, 7) console.log(arr) //[6, 7, 2, 3, 4, 5] console.log(arr.length) //7
Array.isArray()
判斷一個對象是不是數(shù)組,返回的是布爾值
Array.concat()
此方法是一個可以將多個數(shù)組拼接成一個數(shù)組:
let arr1 = [1, 2, 3] arr2 = [4, 5] let arr = arr1.concat(arr2) console.log(arr)//[1, 2, 3, 4, 5]
Array.toString()
此方法將數(shù)組轉(zhuǎn)化為字符串:
let arr = [1, 2, 3, 4, 5]; let str = arr.toString() console.log(str)// 1,2,3,4,5
Array.join()
此方法也是將數(shù)組轉(zhuǎn)化為字符串:
let arr = [1, 2, 3, 4, 5];
let str1 = arr.toString()
let str2 = arr.toString(',')
let str3 = arr.toString('##')
console.log(str1)// 12345
console.log(str2)// 1,2,3,4,5
console.log(str3)// 1##2##3##4##5
通過例子可以看出和toString的區(qū)別,可以設(shè)置元素之間的間隔~
Array.splice(開始位置, 刪除的個數(shù),元素)
萬能方法,可以實現(xiàn)增刪改:
let arr = [1, 2, 3, 4, 5]; let arr1 = arr.splice(2, 0 'haha') let arr2 = arr.splice(2, 3) let arr1 = arr.splice(2, 1 'haha') console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一個元素 console.log(arr2) //[1, 2] 刪除三個元素 console.log(arr3) //[1, 2, 'haha', 4, 5] 替換一個元素
結(jié)尾
第一次寫,都是很簡單的數(shù)組用法,千里之行始于足下,重新把基礎(chǔ)夯實一下,如果存在錯誤或者表達(dá)不當(dāng),還望及時告知,thx
以上所述是小編給大家介紹的js中數(shù)組常用方法總結(jié)詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JS實現(xiàn)將二維數(shù)組轉(zhuǎn)為json格式字符串操作示例
- PHP實現(xiàn)數(shù)組轉(zhuǎn)JSon和JSon轉(zhuǎn)數(shù)組的方法示例
- js 數(shù)組詳細(xì)操作方法及解析合集
- JS數(shù)組去重常用方法實例小結(jié)【4種方法】
- JavaScript數(shù)組,JSON對象實現(xiàn)動態(tài)添加、修改、刪除功能示例
- JS刪除數(shù)組里的某個元素方法
- js判斷數(shù)組是否包含某個字符串變量的實例
- JS實現(xiàn)的數(shù)組去除重復(fù)數(shù)據(jù)算法小結(jié)
- js 獲取json數(shù)組里面數(shù)組的長度實例
- JS實現(xiàn)數(shù)組去重方法總結(jié)(六種方法)
- JS查找數(shù)組中重復(fù)元素的方法詳解
相關(guān)文章
JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼
這篇文章主要介紹了JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實踐
這篇文章主要介紹了基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實踐,小程序提供了一種能力-模板消息,基于微信的通知渠道,我們?yōu)殚_發(fā)者提供了可以高效觸達(dá)用戶的模板消息能力,以便實現(xiàn)服務(wù)的閉環(huán)并提供更佳的體驗,需要的朋友可以參考下2019-07-07
解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題
今天小編就為大家分享一篇解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript顯示表單內(nèi)元素數(shù)量的方法
這篇文章主要介紹了JavaScript顯示表單內(nèi)元素數(shù)量的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
JavaScript使用structuredClone實現(xiàn)深拷貝
在JavaScript中,實現(xiàn)深拷貝的方式有很多種,每種方式都有其優(yōu)點和缺點,今天介紹一種原生JavaScript提供的structuredClone實現(xiàn)深拷貝,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03

