常用前端手寫功能進(jìn)階示例詳解
更新時(shí)間：2022年07月05日 11:52:40 作者：前端阿飛
這篇文章主要為大家介紹了前端手寫功能進(jìn)階的相關(guān)技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
1、Promise.all
Promise.myAll = function (promises) {
return new Promise((resolve, reject) => {
// promises 可以不是數(shù)組，但必須要具有 Iterator 接口
if (typeof promises[Symbol.iterator] !== 'function') {
reject('TypeError: promises is not iterable')
}
if (promises.length === 0) {
resolve([])
} else {
const res = []
const len = promises.length
let count = 0
for (let i = 0; i < len; i++) {
// Promise.resolve 的作用是將普通值或 thenable 對(duì)象轉(zhuǎn)為 promise，promise 則直接返回
Promise.resolve(promises[i])
.then((data) => {
res[i] = data
count += 1
if (count === len) {
resolve(res)
}
})
.catch((err) => {
reject(err)
})
}
}
})
}
// test
function p1() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 1)
})
}
function p2() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 2)
})
}
Promise.myAll([p1(), p2()]).then(res => {
console.log(res) // [1, 2]
})
2、Promise.race
Promise.myRace = function (promises) {
return new Promise((resolve, reject) => {
// promises 可以不是數(shù)組，但必須要具有 Iterator 接口
if (typeof promises[Symbol.iterator] !== 'function') {
reject('TypeError: promises is not iterable')
}
for (const item of promises) {
// 先出來(lái)的結(jié)果會(huì)被 resolve 或 reject 出去, 一旦狀態(tài)變化就不會(huì)再變
Promise.resolve(item).then(resolve, reject)
}
})
}
// test
function p1() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 1)
})
}
function p2() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 2)
})
}
Promise.myRace([p1(), p2()]).then((res) => {
console.log(res) // 1
})
3、Promise.any
Promise.myAny = function (promises) {
return new Promise((resolve, reject) => {
// promises 可以不是數(shù)組，但必須要具有 Iterator 接口
if (typeof promises[Symbol.iterator] !== 'function') {
reject('TypeError: promises is not iterable')
}
const len = promises.length
let count = 0
for (let i = 0; i < len; i++) {
Promise.resolve(promises[i]).then(resolve, (err) => {
count += 1
if (count === promises.length) {
reject(new Error('所有 promise 都失敗'))
}
})
}
})
}
// test
function p1() {
return new Promise((resolve, reject) => {
setTimeout(reject, 1000, 1)
})
}
function p2() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 2)
})
}
Promise.myAny([p1(), p2()]).then((res) => {
console.log(res) // 2
})
4、冒泡排序
function bubbleSort(arr) {
let len = arr.length
for (let i = 0; i < len - 1; i++) {
// 從第一個(gè)元素開(kāi)始，比較相鄰的兩個(gè)元素，前者大就交換位置
for (let j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
// 交換位置
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
}
}
// 每次遍歷結(jié)束，都能找到一個(gè)最大值，放在數(shù)組最后
}
return arr
}
// test
const arr = [3, 1, 2, 5, 4]
console.log(bubbleSort(arr)) // [1, 2, 3, 4, 5]
5、選擇排序
function selectSort(arr) {
let len = arr.length
for (let i = 0; i < len - 1; i++) {
// 假設(shè)每次循環(huán)，最小值就是第一個(gè)
let minIndex = i
for (let j = i + 1; j < len; j++) {
// 如果最小值大于其他的值，則修改索引，從而找到真正的最小值
if (arr[minIndex] > arr[j]) {
minIndex = j
}
}
// 最小值和第一個(gè)交換位置
[arr[i], arr[minIndex]] = [arr[minIndex], arr[i]]
}
return arr
}
// test
const arr = [3, 1, 2, 5, 4]
console.log(bubbleSort(arr)) // [1, 2, 3, 4, 5]
6、快速排序
function quickSort(arr) {
if (arr.length <= 1) return arr
// 每次取第一個(gè)元素作為基準(zhǔn)值
const pivot = arr.shift()
const left = []
const right = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
// 如果小于基準(zhǔn)值，則把它放在左數(shù)組
left.push(arr[i])
} else {
// 如果大于等于基準(zhǔn)值，則放在右數(shù)組
right.push(arr[i])
}
}
// 遞歸處理，并把左中右三個(gè)數(shù)組拼接起來(lái)
return quickSort(left).concat([pivot], quickSort(right))
}
// test
const arr = [3, 1, 2, 5, 4]
console.log(quickSort(arr)) // [1, 2, 3, 4, 5]
7、call
Function.prototype.myCall = function (context = globalThis) {
// 把方法添加到 context 上，這樣使用context[key]調(diào)用的時(shí)候，內(nèi)部的 this 就指向了 context
// 使用 Symbol 防止 context 原有屬性被覆蓋
const key = Symbol('key')
context[key] = this
const args = [...arguments].slice(1)
const res = context[key](...args)
delete context[key]
return res
}
// test
const myName = { name: 'Jack' }
function say() {
const [age, height] = arguments
console.log(`My name is ${this.name}, My age is ${age}, My height is ${height}`)
}
say.myCall(myName, 16, 170) // My name is Jack, My age is 16, My height is 170
8、apply
Function.prototype.myApply = function (context = globalThis) {
// 把方法添加到 context 上，這樣使用context[key]調(diào)用的時(shí)候，內(nèi)部的 this 就指向了 context
// 使用 Symbol 防止 context 原有屬性被覆蓋
const key = Symbol('key')
context[key] = this
let res
if (arguments[1]) {
res = context[key](...arguments[1])
} else {
res = context[key]()
}
delete context[key]
return res
}
// test
const myName = { name: 'Jack' }
function say() {
const [age, height] = arguments
console.log(`My name is ${this.name}, My age is ${age}, My height is ${height}`)
}
say.myApply(myName, [16, 170]) // My name is Jack, My age is 16, My height is 170
9、bind
Function.prototype.myBind = function (context = globalThis) {
const fn = this
const args = [...arguments].slice(1)
const newFunc = function () {
const newArgs = args.concat(...arguments)
if (this instanceof newFunc) {
// 通過(guò) new 調(diào)用，this 為新創(chuàng)建的對(duì)象實(shí)例，將函數(shù)內(nèi)部的 this 替換為這個(gè)新對(duì)象
fn.apply(this, newArgs)
} else {
// 普通方式調(diào)用，將函數(shù)內(nèi)部的 this 替換為 context
fn.apply(context, newArgs)
}
}
// 支持 new 調(diào)用
newFunc.prototype = Object.create(fn.prototype)
return newFunc
}
// test
const myName = { name: 'Jack' }
function say() {
const [age, height] = arguments
console.log(`My name is ${this.name}, My age is ${age}, My height is ${height}`)
}
const mySay = say.myBind(myName, 16, 170)
mySay() // My name is Jack, My age is 16, My height is 170
10、instanceof
function myInstanceOf(obj, Fn) {
// 判斷構(gòu)造函數(shù) Fn 是否出現(xiàn)在 obj 的原型鏈上
let proto = Object.getPrototypeOf(obj)
while (proto) {
if (proto === Fn.prototype) return true
proto = Object.getPrototypeOf(proto)
}
return false
}
11、new
function myNew(Fn, ...args) {
const obj = new Object()
obj.__proto__ = Fn.prototype
// 將構(gòu)造函數(shù)內(nèi)部的 this 替換為新對(duì)象，并執(zhí)行構(gòu)造函數(shù)方法
const res = Fn.apply(obj, args)
if (typeof res === 'object' && res !== null) {
// 如果構(gòu)造函數(shù)有返回值，且類型為 object, 則把這個(gè)值返回
return res
} else {
return obj
}
}
12、統(tǒng)計(jì)頁(yè)面中所有標(biāo)簽的種類和個(gè)數(shù)
function getTagCount() {
// 獲取頁(yè)面上所有標(biāo)簽元素
const tags = document.getElementsByTagName('*')
const tagNames = []
for (const val of tags) {
// 把所有標(biāo)簽名轉(zhuǎn)為小寫，添加到數(shù)組中
tagNames.push(val.tagName.toLocaleLowerCase())
}
const res = {}
for (const val of tagNames) {
if (!res[val]) {
res[val] = 1
} else {
res[val]++
}
}
return res
}
// test
console.log(getTagCount()) // { html: 1, head: 1, body: 1, div: 2, script: 1 }
以上就是今天的分享，你是不是全都掌握了呢，歡迎在評(píng)論區(qū)交流。如果文章對(duì)你有所幫助，不要忘了點(diǎn)上寶貴的一贊！
聽(tīng)說(shuō)點(diǎn)贊的人運(yùn)氣都不差，相信下一個(gè)升職加薪的一定是你~??
相關(guān)鏈接：10個(gè)常見(jiàn)的前端手寫功能，你全都會(huì)嗎？
以上就是前端手寫功能進(jìn)階的詳細(xì)內(nèi)容，更多關(guān)于前端手寫功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
mui開(kāi)發(fā)中獲取單選按鈕、復(fù)選框的值(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇mui開(kāi)發(fā)中獲取單選按鈕、復(fù)選框的值(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JS簡(jiǎn)單實(shí)現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法,結(jié)合實(shí)例形式分析了JavaScript使用fileCreatedDate屬性、fileModifiedDate屬性、lastModified屬性和fileSize屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例
本文主要介紹了Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
javascript 數(shù)組(list)添加/刪除的實(shí)現(xiàn)
這篇文章主要介紹了javascript 數(shù)組(list)添加/刪除，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Javascript獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值示例
獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值可以利用split函數(shù)來(lái)按參數(shù)切成數(shù)組、利用正則表達(dá)式來(lái)獲取，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
js項(xiàng)目中前端如何實(shí)現(xiàn)無(wú)感刷新token
本文主要介紹了js項(xiàng)目中前端如何實(shí)現(xiàn)無(wú)感刷新token，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要給大家介紹了關(guān)于JS中常見(jiàn)的8種繼承方法,在js中所有的引用類型都繼承了Object,而繼承也是通過(guò)原型鏈實(shí)現(xiàn)的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
基于JavaScript實(shí)現(xiàn)每日簽到打卡軌跡功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)每日簽到打卡軌跡功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了JavaScript引用類型和基本類型詳解的相關(guān)資料,需要的朋友可以參考下2016-01-01