Я не могу этого вынести, я не могу этого вынести
Ах~~~~~~
Прошлой ночью писал больше 3 часов, сегодня утром ушел на работу, с работы пошел писать дальше, 555555
Танабата только что прошла Т_Т, у меня действительно нет выбора, я не хочу писать гидрологию, время торопится, я могу только выжимать из себя, и я могу выжимать, пока я молодой
Это только 14-й день, а в августе еще 17 дней, а это значит, что для выполнения августовской цели нужно написать еще 17 статей.
Зависит от!
Настойчиво, давай~~! !
Не сдавайтесь, если у вас есть цель! !
В этой статье много кода, большая часть инструкций в комментариях
Разобрать параметры URL
Это предложить параметры в URL-адресе и преобразовать их в объекты.
function getUrlParams(url){
let reg = /([^?&=]+)=([^?&=]+)/g
let obj = { }
url.replace(reg, function(){
obj[arguments[1]] = arguments[2]
})
// 或者
const search = window.location.search
search.replace(/([^&=?]+)=([^&]+)/g, (m, $1, $2)=>{obj[$1] = decodeURIComponent($2)})
return obj
}
let url = 'https://www.junjin.cn?a=1&b=2'
console.log(getUrlParams(url)) // { a: 1, b: 2 }
call
Измените это, чтобы указать, может получать несколько параметров
Function.prototype.myCall = function(ctx) {
ctx = ctx || window // ctx 就是 obj
let fn = Symbol()
ctx[fn] = this // this 就是 foo
let result = ctx[fn](...arguments)
delete ctx[fn]
return result
}
let obj = { name: 沐华 }
function foo(){ return this.name }
// 就是把 foo 函数里的 this 指向，指向 obj
console.log( foo.myCall(obj) ) // 沐华
использоватьSymbolЭто потому, что он уникален и избегает того же имени, что и свойство в obj.
Принцип состоит в том, чтобы добавить foo к obj, выполнить foo, чтобы получить возвращаемое значение, а затем удалить foo из obj.
apply
Принцип тот же, что и выше, за исключением того, что вторым параметром apply является массив, а третий параметр не поддерживается.
Function.prototype.myApply = function(ctx) {
ctx = ctx || window
let fn = Symbol()
ctx[fn] = this
let result
if (arguments[1]) {
result = ctx[fn](...arguments[1])
} else {
result = ctx[fn]()
}
delete ctx[fn]
return result
}
bind
Function.prototype.myBind = function (ctx, ...args) {
const self = this
const fn = function(){}
const bind = function(){
const _this = this instanceof fn ? this : ctx
return self.apply(_this, [...args, ...arguments])
}
fn.prototype = this.prototype
bind.prototype = new fn()
return bind
}
bind не будет выполняться немедленно, он вернет функцию
- Функции могут выполняться напрямую и передавать параметры, такие как
foo.myBind(obj, 1)(2, 3), так нужно[ ...args, ...arguments ]Объединить параметры - функция также может
new, так что судить о прототипеthis instanceof fn
Затем реализуйте прототип наследования. Если вы не знаете много о прототипах, пожалуйста, перейдите к моей последней статьеПомогите атаковать большие фабрики, сводка тестового сайта JavaScript
Разница между вызовом, применением и привязкой
- может быть изменено
thisнаправление - звони и оставляй заявку
立即执行, bind не делает, а возвращает функцию - вызов и привязка могут получить
多个参数,applyможет принять только два, второй数组 - Параметр связывания может быть передан несколько раз
instanceof
В комментарии примите два параметра, чтобы определить, находится ли второй параметр в цепочке прототипов первого параметра.
function myInstanceof(left, right) {
// 获得实例对象的原型 也就是 left.__proto__
let left = Object.getPrototypeOf(left)
// 获得构造函数的原型
let prototype = right.prototype
// 判断构造函数的原型 是不是 在实例的原型链上
while (true) {
// 原型链一层层向上找，都没找到 最终会为 null
if (left === null) return false
if (prototype === left) return true
// 没找到就把上一层拿过来，继续循环，再向上一层找
left = Object.getPrototypeOf(left)
}
}
Дедупликация массива
Лично я считаю, что это хороший тест.
// 来个示例数组
let arr = [1, 1, "1", "1", true, true, "true", {}, {}, "{}", null, null, undefined, undefined]
// 方法一
let unique1 = Array.from(new Set(arr))
console.log(unique1) // [1, "1", true, "true", {}, {}, "{}", null, undefined]
// 方法二
let unique2 = arr => {
let map = new Map() // 或者用空对象 let obj =｛｝利用对象属性不能重复的特性
let brr = []
arr.forEach( item => {
if(!map.has(item)){ // 如果是对象的话就判断 !obj[item]
map.set(item, true) // 如果是对象的话就 obj[item] = true 其他一样
brr.push(item)
}
})
return brr
}
console.log(unique2(arr)) // [1, "1", true, "true", {}, {}, "{}", null, undefined]
// 方法三
let unique3 = arr => {
let brr = []
arr.forEach(item => {
// 使用 indexOf 返回数组是否包含某个值 没有就返回 -1 有就返回下标
if(brr.indexOf(item) === -1) brr.push(item)
// 或者使用 includes 返回数组是否包含某个值 没有就返回false 有就返回true
if(!brr.includes(item)) brr.push(item)
})
return brr
}
console.log(unique3(arr)) // [1, "1", true, "true", {}, {}, "{}", null, undefined]
// 方法四
let unique4 = arr => {
// 使用 filter 返回符合条件的集合
let brr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
return brr
}
console.log(unique4(arr)) // [1, "1", true, "true", {}, {}, "{}", null, undefined]
Вышеупомянутый метод не может дедуплицировать ссылочные типы, если только указатель не совпадает, указатель может быть дедуплицирован, например, следующее может быть дедуплицировано.
let crr = []
let arr = [crr,crr]
Выравнивание массива
заключается в преобразовании многомерного массива в одномерный массив
// 来个示例数组
let arr = [1, [2, [3, [4, [5]]]]]
// 方法一
// flat() 默认拉平一层嵌套数组，传入数字几就拉平几层
// Infinity 是无穷大，不管嵌套多少层都给你拉平
let brr1 = arr.flat(Infinity)
console.log(brr1) // [1, 2, 3, 4, 5]
// 方法二
// 转成字符串，再去掉字符串里的 “[” 和 “]”，再把字符串转回数组
let brr2 = JSON.parse( "[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]")
console.log(brr2) // [1, 2, 3, 4, 5]
// 方法三
let brr3 = arr => {
// 用递归，用 for 循环加递归也可以，这里用 reduce
// reduce 累计器，本质上也是循环，
// cur 是循环的当前一个值，相当于 for循环里的arr[i]， pre 是前一个值，相当于for循环里的arr[i-1]
let crr = arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? brr3(cur) : cur);
}, [])
return crr
}
console.log(brr3(arr)) // [1, 2, 3, 4, 5]
Стабилизатор
В случае непрерывных кликов он не будет выполнен, он будет выполнен только через указанное количество секунд после последнего клика
Сценарии применения: нажатие кнопок, нечеткий запрос в поле ввода, ассоциация слов и т. д.
function debounce(fn, wait) {
let timeout = null
return function(){
// 每一次点击判断有延迟执行的任务就停止
if(timeout !== null) clearTimeout(timeout)
// 否则就开启延迟任务
timeout = setTimeout(fn, wait)
}
}
function sayDebounce() {
console.log("防抖成功！")
}
btn.addEventListener("click", debounce(sayDebounce,1000))
дросселирование
Когда он запускается часто, например, при прокрутке или непрерывном щелчке, он будет выполняться только один раз в течение указанного интервала.
Сценарии применения: изменение размера, прокрутка и т. д.
// 方案1 连续点击的话，每过 wait 秒执行一次
function throttle(fn, wait) {
let bool = true
return function() {
if(!bool) return
bool = false
setTimeout(() => {
// fn() // fn中this指向window
fn.call(this, arguments) // fn中this指向btn 下面同理
btn = true
}, wait)
}
}
// 方案2 连续点击的话，第一下点击会立即执行一次 然后每过 wait 秒执行一次
function throttle(fn, wait) {
let date = Date.now()
return function() {
let now = Date.now()
// 用当前时间 减去 上一次点击的时间 和 传进来的时间作对比
if (now - date > wait) {
fn.call(this, arguments)
date = now
}
}
}
// 方案三 结合
function throttle(fn, wait){
let bool = true, date = Date.now(), timer = null;
return function(){
clearTimeout(timer)
let now = Date.now();
let lave = wait - (now - date)
if(lave <= 0){
fn.call(this, arguments)
date = Date.now()
}else{
timer = setTimeout(fn, lave)
}
}
}
function sayThrottle() {
console.log("节流成功！")
}
btn.addEventListener("click", throttle(sayThrottle,1000))
new
function myNew(fn,...args){
// 不是函数不能 new
if(typeof fn !== "function"){
throw new Error('TypeError')
}
// 创建一个继承 fn 原型的对象
const newObj = Object.create(fn.prototype);
// 将 fn 的 this 绑定给新对象，并继承其属性，然后获取返回结果
const result = fn.apply(newObj, args);
// 根据 result 对象的类型决定返回结果
return result && (typeof result === "object" || typeof result == "function") ? result : newObj;
}
Object.create
function createObj(obj){
function Fn(){}
Fn.prototype = obj
return new Fn()
}
Создайте пустой объект и измените прототип, это ничего не говорит, обычно передайте нулевое значение, чтобы объект, созданный без прототипа, не был загрязнен прототипом, или передайте прототип объекта для наследования
наследование Es5
// 创建一个父类
function Parent(){}
Parent.prototype.getName = function(){ return '沐华' }
// 子类
function Child(){}
// 方式一
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child // 重新指定 constructor
// 方式二
Child.prototype = Object.create(Parent.prototype，{
constructor:{
value: Child,
writable: true, // 属性能不能修改
enumerable: true, // 属性能不能枚举(可遍历性)，比如在 for in/Object.keys/JSON.stringify
configurable: true, // 属性能不能修改属性描述对象和能否删除
}
})
console.log(new Child().getName) // 沐华
В ES5 существует множество способов наследования, таких как наследование по цепочке прототипов, наследование композиции, паразитное наследование и т. д. Достаточно понять одно интервью
наследование Es6
// 创建一个父类
class Parent(){
constructor(props){
this.name = '沐华'
}
}
// 创建一个继承自父类的子类
class Child extends Parent{
// props是继承过来的属性， myAttr是自己的属性
constructor(props, myAttr){
// 调用父类的构造函数，相当于获得父类的this指向
super(props)
}
}
console.log(new Child().name) // 沐华
глубокая копия
// 用 while 写一个通用的遍历
function myEach(array, iteratee) {
let index = -1;
const length = array.length;
while (++index < length) {
iteratee(array[index], index);
}
return array;
}
function myClone(target, map = new WeakMap()){
// 引用类型才继续深拷贝
if (target instanceof Object) {
const isArray = Array.isArray(target)
// 克隆对象和数组类型
let cloneTarget = isArray ? [] : {}
// 防止循环引用
if (map.get(target)) {
// 有拷贝记录就直接返回
return map.get(target)
}
// 没有就存储拷贝记录
map.set(target,cloneTarget)
// 是对象就拿出同级的键集合 返回是数组格式
const keys = isArray ? undefined : Object.keys(target)
// value是对象的key或者数组的值 key是下标
myEach(keys || target, (value, key) => {
if (keys) {
// 是对象就把下标换成value
key = value
}
// 递归
cloneTarget[key] = myClone(target[key], map)
})
return cloneTarget
} else {
return target
}
}
получить тип данных
function getType(value) {
if (value === null) {
return value + ""
}
if (typeof value === "object") {
// 数组、对象、null 用 typeof 都是 object，所以需要处理下 以 {} 为例
let valueClass = Object.prototype.toString.call(value) // 转成这样 [object, Object]
let type = valueClass.split(" ")[1].split("") // 变成这样 ["O", "b", "j", "e", "c", "t", "]"]
type.pop() // 再变成这样 ["O", "b", "j", "e", "c", "t"]
return type.join("").toLowerCase() // object
} else {
return typeof value;
}
}
console.log( getType(1) ) // number
console.log( getType("1") ) // string
console.log( getType(null) ) // null
console.log( getType(undefined) ) // undefined
console.log( getType({}) ) // object
console.log( getType(function(){}) ) // function
каррирование функций
Каррирующие функции — это тип функций высшего порядка. Основные преимущества заключаются в повторном использовании параметров и отложенном выполнении, но производительность будет не такой хорошей. Для создания массивов для хранения параметров, создания замыканий и доступа к аргументам, а не к хранилищу. параметры медленнее
выполнитьadd(1)(2)(3)Требуемые параметры не фиксированы, аналогичноadd(1)(2, 3, 4)(5)()Это тоже нормально, я реализовал то, что средний не может передавать параметры, а последний не передает параметры, чтобы отличить, что это последний вызов, а затем накапливать результаты.
// 每次调用的传进来的参数做累计处理
function reduce (...args) {
return args.reduce((a, b) => a + b)
}
function currying (fn) {
// 存放每次调用的参数
let args = []
return function temp (...newArgs) {
if (newArgs.length) {
// 有参数就合并进去，然后返回自身
args = [ ...args, ...newArgs ]
return temp
} else {
// 没有参数了，也就是最后一个了，执行累计结果操作并返回结果
let val = fn.apply(this, args)
args = [] //保证再次调用时清空
return val
}
}
}
let add = currying(reduce)
console.log(add(1)(2, 3, 4)(5)()) //15
console.log(add(1)(2, 3)(4, 5)()) //15
AJAX
// 这是调用下面函数的结构，这个结果大家应该很熟悉，就不解释了，应该都用过
myAjax({
type: "get",
url: "https://xxx",
data: { name: "沐华", age:18 },
dataType: "json",
async: true,
success:function(data){
console.log(data);
},
error:function(){
alert('报错');
}
})
// 定义一个将 { name: "沐华", age:18 } 转成 name=沐华&age=18 这种格式的方法
function fn(data){
let arr = []
for(let i in data){
arr.push( i+'='+data[i])
}
return arr.join('&')
}
// 下面就是实现上面调用和传参的函数
function myAjax(options){
let xhr = null
let str = fn(options.data)
// 创建 xhr
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest()
}else{
xhr = new ActiveXObject('Microsoft,XMLHTTP')
}
// 这里只配置了 get 和 post
if(options.type === 'get' && options.data !== undefined){
// 创建 http 请求
xhr.open(options.type, options.url+'?'+str, options.async || true)
// 发送请求
xhr.send(null)
}else if(options.type === 'post' && options.data !== undefined){
xhr.open(options.type, options.url, options.async || true)
// 设置请求头
xhr.setRequestHeaders('Content-type','application/x-www-form-urlencoede')
xhr.send(str)
}else{
xhr.open(options.type, options.url, options.async || true)
xhr.send(null)
}
// 监听状态
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
let res = xhr.responseText
try{
if(options.success === undefined){
return xhr.responseText
}else if(typeof res === 'object'){
options.success(res)
}else if(options.dataType === 'json'){
options.success(JSON.parse(res))
}else{
throw new Error()
}
}catch(e){
if(options.error !== undefined){
options.error()
throw new Error()
}else{
throw new Error()
}
}
}
}
}
Promise
class MyPromise {
constructor(fn){
// 存储 reslove 回调函数列表
this.callbacks = []
const resolve = (value) => {
this.data = value // 返回值给后面的 .then
while(this.callbacks.length) {
let cb = this.callbacks.shift()
cb(value)
}
}
fn(resolve)
}
then(onResolvedCallback) {
return new MyPromise((resolve) => {
this.callbacks.push(() => {
const res = onResolvedCallback(this.data)
if (res instanceof MyPromise) {
res.then(resolve)
} else {
resolve(res)
}
})
})
}
}
// 这是测试案例
new MyPromise((resolve) => {
setTimeout(() => {
resolve(1)
}, 1000)
}).then((res) => {
console.log(res)
return new MyPromise((resolve) => {
setTimeout(() => {
resolve(2)
}, 1000)
})
}).then(res =>{console.log(res)})
Полный промис слишком длинный, намного длиннее, чем AJAX, поэтому реализована минималистская версия, толькоresolveа такжеthenметодов, может быть неограниченным.then
Promise.all
Promise.all может упаковать несколько экземпляров Promise в новый экземпляр Promise. Передайте массив из нескольких объектов Promise и верните массив результатов в случае успеха. Порядок возвращаемых значений соответствует порядку переданных. Если это не удается, возвращается значение первого состояния отклонения.
Если вам нужно отправить несколько запросов одновременно и вернуть результаты по порядку, Promise.all прекрасно решит эту проблему.
MyPromise.all = function (promisesList) {
return new MyPromise((resolve, reject) => {
if (!Array.isArray(promiselList) return reject(new Error('必须是数组'))
if (!promisesList.length) return resolve([])
let arr = [], count = 0
// 直接循环同时执行传进来的promise
for (let i = 0, len = promisesList.length; i < len; i++) {
// 因为有可能是 promise 有可能不是，所以用resolve()不管是不是都会自动转成promise
Promise.resolve(promise).then(result => {
// 由到promise在初始化的时候就执行了，.then只是拿结果而已，所以执行完成的顺序有可能和传进来的数组不一样
// 也就是说直接push到arr的话，顺序有可能会出错
count++
arr[i] = result
// 不能用arr.length===len，是因为数组的特性
// arr=[]; arr[3]='xx'; console.log(arr.length) 这打印出来会是4 而不是1
if(count === len) resolve(arr)
}).catch(err => reject(err))
}
})
}
Promise.race
Передача параметров точно такая же, как и выше, передача массива коллекций экземпляров Promise, а затем все они выполняются одновременно.Тот, кто выполнит первым, будет возвращен, и будет возвращен только один результат.
MyPromise.race = function(promisesList) {
return new MyPromise((resolve, reject) => {
// 直接循环同时执行传进来的promise
for (const promise of promisesList) {
// 直接返回出去了，所以只有一个，就看哪个快
promise.then(resolve, reject)
}
})
}
двусторонняя привязка данных
let obj = {}
let input = document.getElementById('input')
let box = document.getElementById('box')
// 数据劫持
Object.defineProperty(obj, 'text', {
configurable: true,
enumerable: true,
get() {
// 获取数据就直接拿
console.log('获取数据了')
},
set(newVal) {
// 修改数据就重新赋值
console.log('数据更新了')
input.value = newVal
box.innerHTML = newVal
}
})
// 输入监听
input.addEventListener('keyup', function(e) {
obj.text = e.target.value
})
маршрутизация
// 简易版的 hash 路由
class myRoute{
constructor(){
// 路由存储对象
this.routes = {}
// 当前hash
this.currentHash = ''
// 绑定this，避免监听时this指向改变
this.freshRoute = this.freshRoute.bind(this)
// 监听
window.addEventListener('load', this.freshRoute, false)
window.addEventListener('hashchange', this.freshRoute, false)
}
// 存储
storeRoute (path, cb) {
this.routes[path] = cb || function () {}
}
// 更新
freshRoute () {
this.currentHash = location.hash.slice(1) || '/'
this.routes[this.currentHash]()
}
}
Эпилог
Ставь лайк и поддержи, оставь аромат в руке и будь почетным
Спасибо за то, что вы здесь!