JavaScript數(shù)組實例的9個方法
更新時間：2022年07月13日 09:55:52 作者：??一碗周?
這篇文章主要介紹了JavaScript數(shù)組實例的9個方法,文章圍繞主題展開詳細的內(nèi)容介紹沒具有一定的參考價值，需要的朋友可以參考一下
前言
手寫JS原生API在面試中很常見，今天努力工作之余（摸魚的時候）翻到了MDN文章中關(guān)于數(shù)組實例方法這部分，正好無聊就手寫幾個實例方法玩玩，復(fù)習(xí)一下基礎(chǔ)內(nèi)容，并記錄一下。
如果你還不知道數(shù)組實例中迭代方法有什么區(qū)別，可以看下面這張圖：
map
這個方法會返回一個新的數(shù)組，數(shù)組中的每一項都是執(zhí)行過map提供的回調(diào)函數(shù)結(jié)果。
實現(xiàn)代碼如下：
const map = (array, fun) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
// 定義一個空數(shù)組，用于存放修改后的數(shù)據(jù)
let res = []
for (let i = 0; i < array.length; i++) {
res.push(fun(array[i]))
}
return res
}
// 測試
let res = map([1, 2, 3], item => {
return item * 2
})
console.log(res) // [ 2, 4, 6 ]filter
這個方法會返回一個新的數(shù)組，數(shù)組中的值是滿足filter提供的回調(diào)函數(shù)的值，
實現(xiàn)代碼如下：
const filter = (array, fun) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
// 定義一個空數(shù)組，用于存放符合條件的數(shù)組項
let res = []
for (let i = 0; i < array.length; i++) {
// 將數(shù)組中的每一項都調(diào)用傳入的函數(shù)，如果返回結(jié)果為true，則將結(jié)果push進數(shù)組，最后返回
fun(array[i]) && res.push(array[i])
}
return res
}
// 測試
let res = filter([1, 2, 3], item => {
return item > 2
})
console.log(res) // [ 3 ]some
該方法會判斷數(shù)組中的每一項，如果有一項滿足回調(diào)函數(shù)中條件就返回true都不滿足則返回false。
實現(xiàn)代碼如下：
const some = (array, fun) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
let flag = false
for (let i of array) {
if (fun(i)) {
flag = true
break
}
}
return flag
}
let res = some([1, 2, 3], item => {
return item > 2
})
console.log(res) // trueevery
該方法會判斷數(shù)組中的每一項，如果所有項滿足回調(diào)函數(shù)中條件就返回true否則返回false。
實現(xiàn)代碼如下：
const every = (array, fun) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
let flag = true
for (let i of array) {
if (!fun(i)) {
flag = false
break
}
}
return flag
}
let res = every([1, 2, 3], item => {
return item > 0
})
console.log(res) // truereduce
該方法會讓數(shù)組中的每個元素執(zhí)行我們提供的回調(diào)函數(shù)，并將結(jié)果匯總返回，實現(xiàn)代碼如下：
const reduce = (array, fun, initialValue) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
let accumulator = initialValue
for (let i = 0; i < array.length; i++) {
accumulator = fun(accumulator, array[i], i, array)
}
return accumulator
}
const arr = [1, 2, 3]
console.log(arr.reduce(v => v + 10, 10)) // 40
console.log(reduce(arr, v => v + 10, 10)) // 40forEach
這個方法比較簡答了，就是遍歷數(shù)組方法，數(shù)組中的每一項都執(zhí)行回調(diào)函數(shù)，實現(xiàn)代碼如下：
const forEach = (array, fun) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
for (let i of array) {
fun(i)
}
}
let res = forEach([1, 2, 3], item => {
console.log(item)
})find和findIndex
這兩個方法比較類似，一個返回元素，一個返回元素的索引，這里就編寫一個，實現(xiàn)代碼如下：
const myFind = (array, fun) => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof fun !== 'function') throw new TypeError(fun + ' is not a function')
let res
for (let i = 0; i < array.length; i++) {
if (fun(array[i])) {
res = array[i]
}
}
return res
}
// 測試
let res = myFind([1, 2, 3], item => {
return item > 2
})
console.log(res) // 3join
該方法可以將數(shù)組中的所有元素根據(jù)指定的字符串進行拼接，并返回拼接后的字符串，
實現(xiàn)代碼如下：
const join = (array, separator = ',') => {
// 類型約束
if (Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError(array + ' is not a array')
if (typeof separator !== 'string')
throw new TypeError(separator + ' is not a string')
let res = array[0].toString()
for (let i = 0; i < array.length - 1; i++) {
res += separator + array[i + 1].toString()
}
return res
}
// 測試
let res = join([1, 2, 3], '-')
console.log(res) // 1-2-3總結(jié)
這里手寫了數(shù)組實例中的9個方法，總體沒有多少代碼，有些也不夠完善，編寫這些方法的目的是對js基礎(chǔ)的一個練習(xí)。
到此這篇關(guān)于JavaScript數(shù)組實例的9個方法的文章就介紹到這了,更多相關(guān)JS數(shù)組實例方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
網(wǎng)上關(guān)于這方面的文章有很多，重復(fù)的東西本文不再贅述，僅提供思路，并解釋一些其他文章講述模糊的地方。重點給大家介紹下rem.有需要的小伙伴可以參考下。2015-05-05
本文主要分享了js實現(xiàn)清除輸入框內(nèi)的空格的代碼，代碼簡單易懂，需要的朋友一起來看下吧2016-12-12
日常開始中常用到的一些原生JavaScript函數(shù),比較實用, 今天特地整理一下,分享給大家,希望對大家有用,會常更新,同時也歡迎大家補充.2010-09-09
這篇文章主要給大家介紹了關(guān)于three.js中多線程的使用及性能測試的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JavaScript面向?qū)ο笾钊肓私釫S6的class
class盡管只算是一個語法糖,但它卻是語言規(guī)范方面的一大成就,也對之前的繼承進行了一定的增強,下面這篇文章主要給大家介紹了關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的相關(guān)資料,需要的朋友可以參考下2022-03-03
項目需要做了如下的東西，希望能給其他需要的同學(xué)們一點參考。2010-08-08
javascript 面向?qū)ο罄^承，需要的朋友可以參考下。2009-11-11
promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較
這篇文章主要介紹了promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較，在es6中引入的原生Promise為js的異步回調(diào)問題帶來了一個新的解決方式co模塊搭配Generator函數(shù)的同步寫法，更是將js的異步回調(diào)帶了更優(yōu)雅的寫法。感興趣的小伙伴們可以參考一下2018-05-05
自從用firefox瀏覽器以來，就幾乎養(yǎng)成了一個習(xí)慣，就想用WebDeveloper把一些漂亮網(wǎng)站的js包括css給down下來分析一下，用來學(xué)習(xí)。2008-10-10
一種Javascript解釋ajax返回的json的好方法(推薦)
下面小編就為大家?guī)硪黄环NJavascript解釋ajax返回的json的好方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06