JavaScript數(shù)組實(shí)例的9個(gè)方法
前言
手寫JS原生API在面試中很常見，今天努力工作之余（摸魚的時(shí)候）翻到了MDN文章中關(guān)于數(shù)組實(shí)例方法這部分，正好無聊就手寫幾個(gè)實(shí)例方法玩玩，復(fù)習(xí)一下基礎(chǔ)內(nèi)容，并記錄一下。
如果你還不知道數(shù)組實(shí)例中迭代方法有什么區(qū)別，可以看下面這張圖：
map
這個(gè)方法會(huì)返回一個(gè)新的數(shù)組，數(shù)組中的每一項(xiàng)都是執(zhí)行過map提供的回調(diào)函數(shù)結(jié)果。
實(shí)現(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')
// 定義一個(gè)空數(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
這個(gè)方法會(huì)返回一個(gè)新的數(shù)組，數(shù)組中的值是滿足filter提供的回調(diào)函數(shù)的值，
實(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')
// 定義一個(gè)空數(shù)組，用于存放符合條件的數(shù)組項(xiàng)
let res = []
for (let i = 0; i < array.length; i++) {
// 將數(shù)組中的每一項(xiàng)都調(diào)用傳入的函數(shù)，如果返回結(jié)果為true，則將結(jié)果push進(jìn)數(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
該方法會(huì)判斷數(shù)組中的每一項(xiàng)，如果有一項(xiàng)滿足回調(diào)函數(shù)中條件就返回true都不滿足則返回false。
實(shí)現(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
該方法會(huì)判斷數(shù)組中的每一項(xiàng)，如果所有項(xiàng)滿足回調(diào)函數(shù)中條件就返回true否則返回false。
實(shí)現(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
該方法會(huì)讓數(shù)組中的每個(gè)元素執(zhí)行我們提供的回調(diào)函數(shù)，并將結(jié)果匯總返回，實(shí)現(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
這個(gè)方法比較簡答了，就是遍歷數(shù)組方法，數(shù)組中的每一項(xiàng)都執(zhí)行回調(diào)函數(shù)，實(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
這兩個(gè)方法比較類似，一個(gè)返回元素，一個(gè)返回元素的索引，這里就編寫一個(gè)，實(shí)現(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ù)指定的字符串進(jìn)行拼接，并返回拼接后的字符串，
實(shí)現(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ù)組實(shí)例中的9個(gè)方法，總體沒有多少代碼，有些也不夠完善，編寫這些方法的目的是對(duì)js基礎(chǔ)的一個(gè)練習(xí)。
到此這篇關(guān)于JavaScript數(shù)組實(shí)例的9個(gè)方法的文章就介紹到這了,更多相關(guān)JS數(shù)組實(shí)例方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
超簡單JS二級(jí)、多級(jí)聯(lián)動(dòng)的簡單實(shí)例
本篇文章主要是對(duì)超簡單JS二級(jí)、多級(jí)聯(lián)動(dòng)的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
js中使用DOM復(fù)制（克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
使用DOM復(fù)制（克?。┲付ü?jié)點(diǎn)名數(shù)據(jù)到新的XML文件中 ,用到三個(gè)類的相關(guān)知識(shí)點(diǎn) ： DOMDocument - DOMNodeList - DOMNode2011-07-07
javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
這里主要介紹瀑布流的一種實(shí)現(xiàn)方法：絕對(duì)定位(css)+javascript+ajax+json。簡單一點(diǎn)如果不做滾動(dòng)加載的話就是絕對(duì)定位(css)+javascript了，ajax和json是滾動(dòng)加載更多內(nèi)容的時(shí)候用到的，感興趣的你可以參考下哦2013-02-02
小程序getLocation需要在app.json中聲明permission字段
這篇文章主要介紹了小程序getLocation需要在app.json中聲明permission字段，個(gè)別需要獲取用戶地理位置的在開發(fā)者工具調(diào)試時(shí)會(huì)出現(xiàn)getLocation需要在app.json中聲明permission字段 ，下面我們就一起來解決一下2019-04-04
這篇文章主要介紹了微信小程序系列之自定義頂部導(dǎo)航功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了taro開發(fā)微信小程序的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
在JavaScript中，有6大數(shù)據(jù)類型，分別包括string,number,boolean,undefined,null 和 object。下面通過通過本文給大家介紹JavaScript中的特殊數(shù)據(jù)類型，需要的朋友參考下吧2017-12-12
jsGantt是一個(gè)可定制的、靈活的、多語言的甘特圖組件，由原生 JavaScript構(gòu)建，它使用客戶端渲染以獲得快速的性能和動(dòng)態(tài)的交互性，非常適用于任何需要交互式時(shí)間線或時(shí)間表顯示的項(xiàng)目，本文就給大家介紹一下JavaScript多功能甘特圖組件jsGantt2023-07-07
本文主要分享了原生JS實(shí)現(xiàn)圖片左右不停運(yùn)動(dòng)的完整示例代碼，可直接保存到HTML文檔打開可以查看效果。下面跟著小編一起來看下吧2016-12-12