常用web前端手写功能实例分析
今天小编给大家分享一下常用web前端手写功能实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
1、Promise.all
Promise.myAll = function (promises) {
return new Promise((resolve, reject) => {
// promises 可以不是数组，但必须要具有 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 对象转为 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 可以不是数组，但必须要具有 Iterator 接口
if (typeof promises[Symbol.iterator] !== 'function') {
reject('TypeError: promises is not iterable')
}
for (const item of promises) {
// 先出来的结果会被 resolve 或 reject 出去, 一旦状态变化就不会再变
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 可以不是数组，但必须要具有 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++) {
// 从第一个元素开始，比较相邻的两个元素，前者大就交换位置
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]]
}
}
// 每次遍历结束，都能找到一个最大值，放在数组最后
}
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++) {
// 假设每次循环，最小值就是第一个
let minIndex = i
for (let j = i + 1; j < len; j++) {
// 如果最小值大于其他的值，则修改索引，从而找到真正的最小值
if (arr[minIndex] > arr[j]) {
minIndex = j
}
}
// 最小值和第一个交换位置
[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
// 每次取第一个元素作为基准值
const pivot = arr.shift()
const left = []
const right = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
// 如果小于基准值，则把它放在左数组
left.push(arr[i])
} else {
// 如果大于等于基准值，则放在右数组
right.push(arr[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]调用的时候，内部的 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]调用的时候，内部的 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) {
// 通过 new 调用，this 为新创建的对象实例，将函数内部的 this 替换为这个新对象
fn.apply(this, newArgs)
} else {
// 普通方式调用，将函数内部的 this 替换为 context
fn.apply(context, newArgs)
}
}
// 支持 new 调用
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) {
// 判断构造函数 Fn 是否出现在 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
// 将构造函数内部的 this 替换为新对象，并执行构造函数方法
const res = Fn.apply(obj, args)
if (typeof res === 'object' && res !== null) {
// 如果构造函数有返回值，且类型为 object, 则把这个值返回
return res
} else {
return obj
}
}
12、统计页面中所有标签的种类和个数
function getTagCount() {
// 获取页面上所有标签元素
const tags = document.getElementsByTagName('*')
const tagNames = []
for (const val of tags) {
// 把所有标签名转为小写，添加到数组中
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 }
以上就是“常用web前端手写功能实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论