JavaScript
文章平均质量分 58
JavaScript相关个人总结
无响应乱码元素
这个作者很懒,什么都没留下…
展开
-
什么是[].slice.call(arguments)
今天刷牛客的时候碰到一道题是这样的,[].slice.call()这种用法之前没见过[].slice.call(arguments)能将具有length属性的对象转成数组简单解释一下就是arguments是一个类数组对象[]是一个空数组,也是一个对象slice()方法可以从已有的数组中返回选定的元素[].slice.call(arguments)就可以理解为arguments借用[]的slice()方法...原创 2022-05-27 18:18:12 · 452 阅读 · 1 评论 -
JavaScript函数柯里化的实现
函数柯里化指的是一种将多种参数的一个函数转换成一系列使用一个参数的函数的技术function curry(fn,args){ //获取函数需要的参数长度 let length = args.length; args = args || []; return function(){ let subArgs=args.slice(0); //拼接得到现有的所有参数 for(let i=0;i<arguments.length;i++)原创 2022-05-10 19:12:57 · 158 阅读 · 0 评论 -
JavaScript之手写call、apply、bind函数
😎 手写call函数实现步骤:判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用call等方式调用的情况判断传入上下文对象是否存在,如果不存在,则设置为window处理传入的参数,截取第一个参数后的所有参数将函数作为上下文对象的一个属性使用上下文对象来调用这个方法,并保存返回结果删除刚才新增的属性 Function.prototype.myCall=function(context){ //判断调用对象 if(typeof this !== 'fun原创 2022-05-10 19:05:16 · 122 阅读 · 0 评论 -
JavaScript如何用setTimeout模拟setInterval
思路就是递归调用function myInterval(fun,time){ function inside(){ fun(); setTimeout(inside,time); } setTimeout(inside,time);}myInterval(fn,1000);function fn(){ console.log('嘿嘿');}原创 2022-05-02 23:10:01 · 628 阅读 · 0 评论 -
JavaScript手写Promise、Promise.then()、Promise.all()、Promise.race()
我始终认为要想真正的理解一个API也好,内置对象也罢,最好的方式就是手写一遍。😎 手写Promise const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "rejected"; function MyPromise() { //保存初始化状态 let selt = this; //初始化状态 this.state = PENDING原创 2022-05-01 00:08:23 · 328 阅读 · 0 评论 -
JavaScript中6种继承方式总结
😎 原型链继承第一种是以原型链的方式来实现继承,但是这种方式实现存在的缺点是,在包含引用类型的数据时,会被所有的实例对象所共享,容易造成修改的混乱,还有就是在创建子类型的时候不能向超类型传递参数。 function Parent() { this.type = '赛亚人'; this.skill = ['变身', '气功'] } function Child() { this.name = '卡卡罗特'; } Child.prototype = new Pa原创 2022-04-29 16:03:10 · 961 阅读 · 0 评论 -
浅谈JavaScript中new与Object.create()的差别
最近一直在读《你不知道的JavaScript(上)》这本书,里面的内容刷新了我对JavaScript的认知,其中有一段话是这样的,引起了我的思考。🤓 new关于new运算符的详细讲解可以看这篇文章😎 Object.create()MDN文档Object.create(Obj)的内部,并没有去调用Obj构造函数,而是调用了创建新对象的构造函数,因此Obj上的属性不会继承到Object.create创建的实例中😇 区别new创建出的空对象会绑定Object的prototype原型对象,但是O原创 2022-04-26 21:17:50 · 340 阅读 · 0 评论 -
JavaScript手写实现AJAX请求以及使用Promise封装AJAX请求
😌 AJAX概念AJAX是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的 异步通信,从服务器 获取 XML 文档从中提取数据,再更新当前网⻚的对应部分,而不用刷新整个网⻚。🤓 实现步骤创建一个XMLHttpRequest对象在这个对象上使用open()方法创建一个http请求,open方法所需要的参数是请求的方法,请求的地址,是否异步和用户的认证信息。在发起请求之前,可以为这个对象添加一些信息和监听函数。比如可以通过setReque原创 2022-04-22 17:45:21 · 418 阅读 · 0 评论 -
JavaScript手写instanceof
😇 作用instanceof运算符用于判断构造函数的prototype属性是否存在在对象的原型链中的任何位置。🥹 实现步骤首先获取类型的原型然后获得对象的原型然后一直循环判断对象的原型是否等于类型的原型,直到对象原型为null,因为原型链最终为null😎 代码实现function myInstanceof(left,right){ let proto=Object.getPrototypeOf(left),//获取对象的原型 prototype=right.prototype;//获原创 2022-04-21 22:20:34 · 244 阅读 · 0 评论 -
JavaScript手写new实现构造函数实例化
😇 思路在调用new操作符的时候会发生以下四件事首先创建一个空对象设置原型,将对象的__proto__纸箱构造函数的protype对象让函数的this指向这个对象,执行构造函数的代码(为这个新对象添加属性)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用型对象,则返回这个引用类型的对象😎 代码实现function objectFactory(){ let object=null; //shift() 方法移除数组的第一项,并返回该值 //在这里是获得接收到的第一个参数原创 2022-04-21 17:28:50 · 795 阅读 · 0 评论 -
JavaScript数据类型检测的四种方式
🧐 typeofconsole.log(typeof 1);// 'number'console.log(typeof true);// 'boolean'console.log(typeof 'str');// 'string'console.log(typeof []);// 'object'console.log(typeof function(){});// 'function'console.log(typeof {});// 'object'console.log(typeof u原创 2022-04-21 00:38:51 · 904 阅读 · 0 评论 -
JavaScript手写防抖和节流函数
🤓防抖函数防抖是指在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发 ,则重新计时。这可以使用在一些点击请求的事件,避免因用户的多次点击向后端发送多次请求。应用场景按钮提交场景:防止多次提交按钮,只执行最后提交的一次服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次还有搜索联想词功能类似生存环境请用lodash.debounce代码实现function debounce(fn,wait){ let timer=null; return function(原创 2022-04-20 23:09:13 · 717 阅读 · 0 评论 -
还搞不清JS里for..in for...of forEach map各种遍历方式的区别吗
forfor循环是JS里最简单也是最通用的遍历方式,我们需要知道遍历的次数。for循环里return,break等关键字都是可以用的 let arr=[1,2,3,4,5]; for (let i = 0; i < arr.length; i++) { console.log(i + ':' + arr[i]) //0:1 1:2 2:3 ... }for infor…in 是es5标准, 此方法遍历数组效率比较低,它的作用主要是去遍历对象的可枚举属性。遍历原创 2022-04-12 23:51:07 · 490 阅读 · 0 评论 -
【字节前端青训营】跟着月影学JavaScript—— 前端代码优化三大原则之组件封装,用原生JS写一个轮播图并封装
前言组件封装对于学过React或者Vue框架的同学应该都不陌生,就我个人而言我之前的原生JS基础并不太是太好,一开始接触前端是因为参加学校的实验室做React Native项目,我是稍微了解一下原生JS之后就直接学React了,对于React组件的封装已经是比较熟悉了,而封装原生JS组件对我来说还是很新鲜的。上完这次课,自己跟着把代码敲了一遍真的是受益匪浅,让我对框架的理解又加深了一步,希望大家有时间的话都好好做一下这个轮播图组件,很棒。什么是组件封装组件是指Web页面上抽出来一个个包含模板(HTML原创 2022-01-18 01:07:18 · 1123 阅读 · 0 评论 -
【字节前端青训营】跟着月影学JavaScript——前端代码优化三大原则之各司其职,夜间模式小案例
前言最近参与字节的青训营活动开课没几天就已经收获颇丰,写写笔记巩固一下学到的知识。什么是各司其职?我们都知道前端基础三大件,HTML、CSS、JavaScript,HTML是页面的骨架,CSS是页面的皮肤,JavaScript就是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分,尽可能的少用JS干扰CSS/HTML,能让他们内部自己搞定的就不要借助JavaScript来满足需求。下面我们来看几个小例子。夜间模式效果线上预览地址夜间模式 版本一版本1代码 <hea原创 2022-01-17 21:50:44 · 791 阅读 · 2 评论 -
CSRF跨站请求伪造保护demo
源码:提取码:7uk1一、CSRF跨站请求伪造CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造。CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求。包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账…造成的问题:个人隐私泄露以及财产安全。CSRF请求伪造的示意图:二、CSRF防护防护思路:1、请求转账页面的时候,服务器响应转账页面,在cookie中设置一个csrf_token值(随机48位字符串)。2、客户端在进行pos原创 2022-01-16 20:19:39 · 212 阅读 · 0 评论 -
原生JS加localStorage实现数据持久化的ToDoList
预览代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &原创 2022-01-14 22:38:34 · 448 阅读 · 0 评论 -
一句话解决对JS单线程异步操作的困惑
相关知识什么是异步? 一个视频告诉你“并发、并行、异步、同步”的区别JS异步编程写法 异步编程: 一次性搞懂 Promise, async, await (#js#javascript)Promise用法 阮一峰Promise 对象JS事件循环 【JS】深入理解事件循环,这一篇就够了!(必看)JS执行机制 这一次,彻底弄懂 JavaScript 执行机制Node异步I/O机制: 详解Node异步I/O机制《深入浅出NodeJS》 ——朴灵JavaScript是单线程的,而JavaSc原创 2022-01-09 18:13:31 · 312 阅读 · 0 评论 -
Javascript中如何实现对象的深拷贝 (前端高频面试题)
最近参加百度前端训练营有节课讲到了JS对象的深拷贝,于是上网搜了一下相关文章,发现这是面试高频考题,于是乎写篇文章总结一下。一. JS中为什么需要用到深拷贝?要说到为什么需要深拷贝,就不得不提一嘴JS的对象引用传递了。什么是对象引用传递?var a = {name:'卡卡罗特'}var b = a ;a===b // trueb.name = '贝吉塔'a.name //'贝吉塔'在这里我们用=号把a的值赋给了b,但实际上a给b传的是a指向的地址罢了。如果一个变量绑定到一个非基本数据原创 2022-01-08 00:46:37 · 1000 阅读 · 0 评论 -
无内鬼 整点AJAX
一、AJAX技术简介AJAX 即 “Asynchronous JavaScript and XML”(异步的 JavaScript 与 XML 技术),指的是一套综合了多项技术的浏览器端网页开发技术。AJAX 的概念由 Jesse James Garrett 所提出,说白了就可以使用 JavaScript 代码发送网络请求并处理响应,由浏览器实现。出现的很早 1998 年出来,首次是微软提出来的,并没有引起重视;直到2005年左右,谷歌推出 gmail,gmap 使得ajax技术一时间流行起来。原创 2021-12-10 22:03:31 · 107 阅读 · 0 评论 -
优雅的异步编程版本答案async和await解析
什么是aysnc和awaitasync 函数就是 Generator 函数的语法糖。用Generator 函数,依次读取两个文件。var fs = require('fs');var readFile = function (fileName){ return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) reject.原创 2021-12-09 11:49:18 · 484 阅读 · 0 评论 -
ES6 Promise详解之缝合红宝书ES6标准入门
去年暑假的时候就学了Promise,最近在学node的时候又遇到了再复习一遍,写个博客缝合一波阮佬的ES6标准入门与红宝书中的内容,用我自己的白话给大家讲一下。什么是Promise所谓Promise简单来说就是一个容器,里面保存着未来才会结束的事件(通常是异步操作)的结果。从语法上来说,Promise是一个对象,从它可以获取异步操作的消息Promise对象的特点promise是一个有状态的对象(状态机)(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pend原创 2021-12-08 10:05:18 · 157 阅读 · 0 评论 -
JavaScript事件机制实现的一些理解
我们都知道JavaScript是一门事件驱动的语言,想要进一步深入了解JavaScript我们就要搞明白其中的事件机制。什么是事件机制?当浏览器载入界面后,尽管会先读取JS代码,但是这些代码并不会马上执行,而是必须要等到事件被触发后才会对对应代码段执行。通俗的说,我们平常宅在家摆烂的时候门是关着的,自己不会主动去开门,直到有人敲门我们才会去把门打开,而开门就相当于执行代码块。事件机制的组成通过上面的实例,我们可以抽象出一个事件机制有三个组成部分:1.事件源:即事件的发送者;(比如上例中的原创 2021-11-20 10:25:55 · 516 阅读 · 0 评论 -
JavaScript中this的一些简单理解
什么是this?this是JavaScript中的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。this实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数。this的四种模式1.默认绑定这是函数最通常的用法,func()是直接调用的(独立函数调用),没有应用其他的绑定规则,这里进行了默认绑定,将全局对象绑定this上,因此this就代表全局对象Globalvar name = '贝吉塔'var func = fun原创 2021-09-17 15:18:56 · 124 阅读 · 0 评论 -
如何用JavaScript实现数组扁平化
🧐 什么是数组扁平化将嵌套多层的数组“拉平”,变为一维数组。🤔 为什么要数组扁平化去除冗余,厚重和繁杂的装饰效果。😎 如何进行数组扁平化方法一:递归实现思路就是通过循环递归的方式,一项一项的去遍历,如果每一项还是一个数组,那么就继续往下遍历,利用递归程序的方法,来实现数组每一项的连接let arr=[1,[2,[3,4,5]]];function flatten(arr){ let result=[]; for(let i=0;i<arr.length;i++){原创 2022-04-29 18:26:36 · 846 阅读 · 0 评论