JavaScript中常用的數(shù)組操作方法總結(jié)
前言
函數(shù)和方法的區(qū)別:
函數(shù)function:獨(dú)立的function,那么稱之為是一個函數(shù)。
function foo() {}
方法method:當(dāng)我們的一個函數(shù)屬于某一個對象時,我們稱這個函數(shù)是這個對象的方法。
var obj = { foo: function() {} } obj.foo()
例如,對一個數(shù)組的操作方法:filter,我們就稱之為是一個方法。
// filter:過濾 var nums = [10, 5, 11, 100, 55] nums.filter((item) => item > 10)
在以下對數(shù)組的操作中,我們統(tǒng)稱方法。
文章中通用常量意義:
item
:某一項(xiàng)。當(dāng)作為參數(shù)時,為遍歷數(shù)組中的每一項(xiàng)。當(dāng)作為返回值時,意思為某項(xiàng)數(shù)據(jù),可以為任意類型。
index
:下標(biāo)。當(dāng)作為參數(shù)時,為遍歷數(shù)組中的item在數(shù)組中下標(biāo)。當(dāng)作為返回值時,意思為下標(biāo)。
arr
:數(shù)組。當(dāng)作為返回值時,意思為改變數(shù)組本身。當(dāng)作為參數(shù)時,意思為自身數(shù)組。
length
:數(shù)組長度。當(dāng)作為返回值時,意思為數(shù)組長度
newarr
:新數(shù)組。當(dāng)作為返回值時,意思為產(chǎn)生一個新數(shù)組,
boolean
:布爾值。當(dāng)作為方法體時以為:條件的返回值為布爾值。
num
:數(shù)值類型。
start
:數(shù)組遍歷開始下標(biāo)(包含)
end
:數(shù)組遍歷結(jié)束下標(biāo)(不包含)
數(shù)組基礎(chǔ)遍歷方法
for
for(var i = 0, len = arr.length; i < len; i++ ){ console.log(arr[i]) }
for基礎(chǔ)循環(huán)可以用來遍歷數(shù)組,字符串,類數(shù)組,DOM節(jié)點(diǎn)等。
for of
for (var item of arr) { console.log(item); }
for of:for-of獲取的是數(shù)組的值??梢允褂?break、continue、return 來中斷循環(huán)遍歷。
for in
for (var value in arr) { console.log(value); }
for in:一般用于對對象的遍歷,但也可以用于數(shù)組。用于數(shù)組遍歷時,for-in獲取的是數(shù)組的索引
var arr = [10, 7, 9, 100, 11] for (var value in arr) { console.log(value); } // 0 1 2 3 4
注意:
1).index索引為字符串型數(shù)字,不能直接進(jìn)行幾何運(yùn)算。
2).使用for in會遍歷數(shù)組所有的可枚舉屬性,包括原型。例如上栗的原型方法method和name屬性。
Array.prototype.myfun=function(){ alert('myfun'); } var arr = [0,1,2,3]; for(var i in arr){ console.log(arr[i]); } console.log(Array.prototype) /* 輸出結(jié)果: 0 1 2 3 ? (){ alert('myfun'); } */
數(shù)組的基礎(chǔ)操作方法
push:尾部追加元素
var length = arr.push(item)
push() 方法用于對數(shù)組尾部插入新的元素。返回值為追加后的數(shù)組長度。
var nums = [10, 7, 9, 100, 11] var length = nums.push(2) console.log(length) // 2
pop:尾部移出元素
var item = arr.pop()
pop() 方法用于刪除數(shù)組的最后一個元素并返回刪除的元素。無參,返回值為刪除的元素。
var nums = [10, 7, 9, 100, 11] var item = nums.pop() console.log(item) // 11
unshift:頭部追加元素
var length = arr.unshift(item)
unshift() 方法用于對數(shù)組頭部插入新的元素。返回值為追加后的數(shù)組長度。
shift:頭部移出元素
var item = arr.unshift()
shift() 方法用于對數(shù)組頭部插移出元素。返回值為追出后的元素。
splice:刪除添加替換
var newarr = arr.splice(index, howmany, item)
splice() 方法用于對數(shù)組元素進(jìn)行刪除添加替換操作。返回值為刪除的元素組成的數(shù)組。
index(必填):數(shù)組下標(biāo),代表從第幾個元素開始執(zhí)行操作。
howmany(可選):規(guī)定刪除多少個元素,如果未規(guī)定此參數(shù),則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。
item(可選):插入元素,可以為多個。從下標(biāo)位置插入。
var nums = [10, 7, 9, 100, 11] var newarr= nums.splice(2,2,99,77,55) console.log(newarr) // [9, 100] console.log(nums) // [10, 7, 99, 77, 55, 11]
注意:splice() 方法會改變原數(shù)組。
concat:連接
newarr = arr.concat(nums1, nums2)
concat() 方法用于連接兩個或多個數(shù)組。
var nums1 = [2,5,7,9] var nums2 = [1,3,55] var newarr = [] var newarr = newarr.concat(nums1, nums2)
concat() 方法不會改變原數(shù)組。
join:分割
Str = arr.join(separator)
separator:分割符,如果為空,則已 “,” 分割。
join() 方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個字符串。
var nums = [10, 7, 9, 100, 11] var Str = nums.join('x') console.log(Str) // 10x7x9x100x11
slice:切割
newarr = arr.slice(start, end)
從數(shù)組的 [start, end)位置截取數(shù)組元素。
slice() 方法可從已有的數(shù)組中返回選定的元素。
slice() 方法可提取字符串的某個部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不會改變原始數(shù)組。
includes:查詢
boolean = arr.includes(value, start)
value(必填): 查找的元素,可以為字符串或數(shù)值。
start(可選):開始查找的位置下標(biāo)。
includes() 方法用于判斷字符串是否包含指定的子字符串。返回值為布爾值。
indexOf:查詢
index = arr.indexOf(value, start)
value(必填): 查找的元素,可以為字符串或數(shù)值。
start(可選):開始查找的位置下標(biāo)。
indexOf() 方法用于判斷字符串是否包含指定的子字符串。返回值為查詢到下標(biāo),若為查詢到則為 -1。
lastIndexOf()方法類似,返回值為 value 最后一次出現(xiàn)的下標(biāo) 。
fill:填充/替換
fruits.fill(value, start, end)
value(必填):用來填充數(shù)組元素的值。
start(可選):可選開始索引值(包含),默認(rèn)值為0。
end(可選):可選終止索引(不包含),默認(rèn)值為 arr.length 。
通常與 new Array
搭配使用。
var arr = new Array(10).fill('10') // ['10', '10', '10', '10', '10', '10', '10', '10', '10', '10']
或是用于替換掉數(shù)組中元素的值。
var arr3 = [0, 1, 2, 3, 4, 5, 6] console.log(arr3.fill(1, 3)); //[0, 1, 2, 1, 1, 1, 1]
es6中帶來的數(shù)組高階方法
接下來是es6中帶來的數(shù)組高階方法。
高階函數(shù):一個函數(shù)如果接收另一個函數(shù)作為參數(shù),或者該函數(shù)會返回另外一個函數(shù)作為返回值的函數(shù),那么這個函數(shù)就稱之為是一個高階函數(shù)。
數(shù)組的高階方法通常會接收一個回調(diào)函數(shù)作為參數(shù),在回調(diào)中遍歷數(shù)組,執(zhí)行操作。
接下來
寫在前面:接下來介紹的數(shù)組高階方法,回調(diào)函數(shù)的寫法均采用的是箭頭函數(shù)的寫法,因箭頭沒有自己的 this 指向,就不介紹第二個參數(shù) thisValue 了。
forEach:迭代(枚舉)
arr.forEach((item, index, arr) => { 寫想要枚舉的操作 })
forEach 方法不會改變原數(shù)組,也沒有返回值;
var nums = [10, 7, 9, 100, 11] nums.forEach((item) => { if (item > 10) { console.log(item) } }) // 100, 11
forEach無法使用 break 跳出循環(huán)。使用 return 時,效果和在 for 循環(huán)中使用 continue 一致。
forEach如果想要跳出循環(huán),可以通過 throw new Error() 拋出錯誤的方式實(shí)現(xiàn)。
var nums = [10, 7, 9, 100, 11] nums.forEach((item) => { if (item == 100) { throw new Error("miss 100") } else { console.log(item) } }) // 10 7 9 Error: miss 100
filter:過濾
newarr = arr.filter((item, index, arr) => boolean)
例子:
var nums = [10, 7, 9, 100, 11] var newNums = nums.filter((item) => { return item % 2 === 0 // 偶數(shù) }) console.log(newNums) // [10, 100] console.log(nums) // [10, 5, 11, 100, 55]
返回值是過濾后的新數(shù)組
map:映射
newarr = arr.map((item, index, arr) => { 寫指定方法體 })
map() 方法返回一個由原數(shù)組中的每個元素調(diào)用一個指定方法后的返回值組成的新數(shù)組。
var nums = [10, 7, 9, 100, 11] var newNums = nums.map((item) => { return item * 10 }) console.log(newNums) // [100, 50, 110, 1000, 550] console.log(nums) // [10, 5, 11, 100, 55]
注意:map 方法中的 callback 函數(shù)只需要接受一個參數(shù),就是正在被遍歷的數(shù)組元素本身。
但這并不意味著 map 只給 callback 傳了一個參數(shù)(會傳遞3個參數(shù))。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。
// 下面的語句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能覺的會是[1, 2, 3] // 但實(shí)際的結(jié)果是 [1, NaN, NaN] // num.parseInt() , parseInt()接收兩個參數(shù),第一個為要轉(zhuǎn)換的字符串,第二個參數(shù)是進(jìn)制數(shù)(2-36之間)如果省略該參數(shù)或其值為 0,則數(shù)字將以 10 為基礎(chǔ)來解析,超過返回NaN。 // map的 callback,會給它傳遞三個參數(shù):當(dāng)前正在遍歷的元素, 元素索引, 原數(shù)組本身。第三個參數(shù)被忽略 // 所以就相當(dāng)于執(zhí)行了,parseInt("1", 0),parseInt("2", 1),parseInt("3", 2), // 正確的寫法應(yīng)該為: function returnInt(element){ return parseInt(element,10); } ["1", "2", "3"].map(returnInt); // 返回[1,2,3]
find:查找
item = arr.find((item, index, arr) => { boolean })
find()方法用于獲取數(shù)組中符合指定條件的第一個元素。沒有找到返回 undefined。
var family = [ { name: 'xiaoming', age: 18 }, { name: 'xiaocheng', age: 40 }, { name: 'xiaoli', age: 42 } ] var item = family.find((item) => { return item.name === 'xiaoming' }) console.log(item) // { name: 'xiaoming', age: 18 }
注意,返回的item為淺拷貝。
item.name = 'kkk' console.log(family) /* * {name: 'kkk', age: 18} * {name: 'xiaocheng', age: 40} * {name: 'xiaoli', age: 42} */
這里就反應(yīng)出 find() 方法返回的結(jié)果內(nèi)存指向依然是 family 所指向的內(nèi)存地址,
所以這里返回的是淺拷貝的數(shù)據(jù)。
findIndex:查找下標(biāo)
index = arr.findIndex((item, index, arr) => { boolean })
findIndex() 返回符合條件的數(shù)組第一個元素位置(索引),沒有找到符合條件則返回 -1。
var family = [ { name: 'xiaoming', age: 18 }, { name: 'xiaocheng', age: 40 }, { name: 'xiaoli', age: 42 } ] var index = family.findIndex((item) => { return item.name === 'xiaoming' }) console.log(index) // 0
以上就是JavaScript中常用的數(shù)組操作方法總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于JavaScript數(shù)組操作方法的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報效果的示例代碼
本文主要介紹了Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報效果的示例代碼,對于UI給出的設(shè)計(jì)圖,各個氣象網(wǎng)站都有類似的效果,分享給大家2021-10-10PHP實(shí)現(xiàn)本地圖片上傳和驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了PHP實(shí)現(xiàn)本地圖片上傳和驗(yàn)證功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02ionic2打包android時gradle無法下載的解決方法
這篇文章主要為大家詳細(xì)介紹了ionic2打包android時gradle無法下載的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04js bind 函數(shù) 使用閉包保存執(zhí)行上下文
在javascript中,函數(shù)總是在一個特殊的上下文執(zhí)行(稱為執(zhí)行上下文),如果你將一個對象的函數(shù)賦值給另外一個變量的話,這個函數(shù)的執(zhí)行上下文就變?yōu)檫@個變量的上下文了。下面的一個例子能很好的說明這個問題2011-12-12JS正則表達(dá)式大全(整理詳細(xì)且實(shí)用)
JS正則表達(dá)式大全(整理詳細(xì)且實(shí)用)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
函數(shù)式編程語言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長一段時間了,但是從歷史上看,它們沒有豐富的工具和庫可供使用。隨著 .NET 平臺上的 Haskell 的出現(xiàn),函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語言,例如 C++ 和 JavaScript,引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下,JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程,就可以避免這些問題。此外,可以利用函數(shù)式編程風(fēng)格編寫更加優(yōu)美的回調(diào)。2008-05-05