
JavaScript基础知识
文章平均质量分 77
故里有长安丶丶
这个作者很懒,什么都没留下…
展开
-
JavaScript两个实用的图片懒加载优化方法
文章目录一、方法一二、方法二 InterSectionObserver一、方法一重点:1.getBoundingClientRect().top > window.innerHeight 图片未出现2.getBoundingClientRect().top < window.innerHeight 图片出现了HTML:<ul> ...... <li>2222222222</li> <li>2222222222原创 2022-03-25 22:51:59 · 5392 阅读 · 8 评论 -
ES6:Generator生成器的介绍及场景应用
文章目录一、Generator生成器函数二、使用步骤1.引入库2.读入数据总结一、Generator生成器函数在JavaScript中,一旦一个函数开始执行,就会一次执行到最后或者遇到return时结束,在函数运行期间没有任何代码可以让它在执行过程中暂停。而Generator生成器函数的出现,使得这样一个不可能成为可能。Generator函数是ES6提供的一种异步编程解决方案,其形式上与普通函数稍微有些差别:function关键字后跟一个星号(*)yield语句可以暂停函数functio原创 2022-03-14 22:02:39 · 1712 阅读 · 0 评论 -
【总结】:大厂面试常考手撕代码 —— JavaScript实现效果
文章目录一、Js实现拖动元素二、Js实现once效果三、Js实现深/浅拷贝1.通用方法2. 对象、数组3. 数组四、实现fetch(Promise封装Ajax)一、Js实现拖动元素const div = document.getElementsByTagName('div')[0]//是否按下let isDown = false//鼠标至边框let numX = 0let numY = 0//鼠标点下div.onmousedown = (e) => { //计算鼠标至边原创 2022-03-13 21:57:00 · 1429 阅读 · 0 评论 -
【总结】:JavaScript优化 —— 防抖节流 - 应用场景
文章目录一、防抖代码实现二、节流代码实现三、总结区别一、防抖触发高频事件后n秒内只执行一次,如果n秒内再次触发就会重新计算时间。防抖的设计思路:触发事件清除定时设置定时如果在规定时间内仍然有请求/事件的操作,会清除定时,重设置定时如果在规定时间内没有请求/事件,就可以执行提交或者下面的操作了代码实现let btn = document.querySelector('button')function payMoney() { console.log('已剁');}f原创 2022-03-06 19:50:02 · 627 阅读 · 0 评论 -
JavaScript事件流详解
文章目录DOM事件流事件冒泡事件捕获情景一:直接在HTML中绑定事件情景二:[domNode].onclick()方式 —— DOM0级情景三:[domNode].addEventListener()方式 —— DOM2级DOM事件流要明白事件流,首先我们要明白三点:元素不是独立的,是串联在一起的单个元素触发事件以后还会影响其他元素事件流的方式:事件捕获(网景提出)、事件冒泡(IE提出)我们就以上图为例,假设你给div绑定了点击事件,当你点击了div后,其他元素也会受之牵连,会引起牵一发原创 2022-03-06 19:31:21 · 1574 阅读 · 1 评论 -
前端面试必考题:JavaScript事件循环(Event loop)、宏任务微任务
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、事件循环二、宏任务/微任务无渲染有渲染一、事件循环我们都知道,Js引擎是单线程的,也就是说每次执行一堆程序,必须是一个执行完再去执行另一个。那可能有人要问了:平时我们开启setTimeout定时器,也没见影响到后面程序的运行啊!是因为javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。而它的非阻塞性是通过异步任务来实现的,可见setTimeout就是一个异步任务。那么从上图我们就可以得知:实现异步任务,就原创 2022-03-05 19:18:05 · 1841 阅读 · 1 评论 -
看完这篇文章,前端面试不许你再说不懂【Promise】
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、回调地狱?二、Promise1.引入库2.读入数据总结一、回调地狱?要想明白Promise,我就要先了解一下什么是回调地狱?(若了解,请调到下一节)异步函数无法保证执行循序const fs = require('fs')fs.readFile('./data/a.txt', 'utf-8', (err, data) => { if (err) { console.log('读取失败')原创 2022-03-01 17:20:38 · 861 阅读 · 0 评论 -
用白话讲解:如何实现a==1 && a==2 && a==3 为true
前两天遇到了这个有意思的面试题,真的是想破脑袋也没有想明白“a怎么可能同时等于三个数呢”? 最后看了答案才恍然大悟。虽然那个答案讲的比较抽象,但是今天我就用自己的话来简单给大家讲解一下这道题的一个解法:在讲解这道题之前,我们首先得了解一下JS的语法规(天)范(坑),那就是:如果两个值类型相同,则直接比较(双等号比较)如果两个值不是同原创 2022-02-20 23:21:36 · 1469 阅读 · 0 评论 -
【ES6】Iterator遍历器对象
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一、Iterator(遍历器)的概念二、默认Iterator接口三、调用 Iterator 接口的场合结构赋值扩展运算符其他场合四、字符串的 Iterator 接口一、Iterator(遍历器)的概念 JavaScript 原有的表示 “集 ”的数据结构主要是数组(Array)和对象(Object),ES6又添加了 Map和Set。这原创 2022-02-09 13:32:36 · 923 阅读 · 1 评论 -
【ES6】Map数据结构
文章目录一、Map的含义和基本用法二、实例的属性和操作方法三、遍历方法一、Map的含义和基本用法 JavaScript 的对象( Object )本质上是键值对的集合( Hash 结构),但是只能用字符串作为键。这给它的使用带来了很大的限制。为了解决这个问题,提供了Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 .原创 2022-02-09 11:30:58 · 2808 阅读 · 0 评论 -
【ES6】Set数据结构
文章目录一、Set理解二、Set实例的属性和方法1.下面先介绍4个操作方法:2.遍历操作一、Set理解ES6 提供了新的数据结构 —— Set。它类似于数组,但是成员的值都是唯一的,没有重复。Set 本身是一个构造函数,用来生成Set 数据结构。const s = new Set()[2,3,4,2,2].forEach(item => s.add(item))for(let i if s) { console.log(i) //2 3 4}上面的代码通过 add 方法向 Set原创 2022-02-08 22:12:46 · 1175 阅读 · 1 评论 -
【ES6】数据类型Symbol
文章目录一、Symbol的由来?二、写法三、作为属性名的Symbol四、属性名的遍历五、Symbol其他创建方法Symbol.for( )一、Symbol的由来?ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,我们使用了他人提供的对象,但又想为这个对象添加新的方法,新方法名字就有可能与现有方法产生冲突 。如果有种机制,能够保证每个属性的名字都是独一无二的就好了,这样就能从根本上防止属性名冲突。这就是 S6引入类型 Symbol 原因。ES6 引入了种新的原始数据类型 Symbol .原创 2022-02-05 17:46:29 · 728 阅读 · 0 评论 -
【JavaScript】执行上下文与作用域的区别
如果不太了解什么是执行上下文,可以点击查看我的这篇博客什么是执行上下文1. 区别1全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时全局执行上下文环境是在全局作用域确定之后,js代码马上执行之前创建的函数执行上下文是在调用函数时,执行函数体代码之前创建2. 区别2作用域是静态的。只要函数定义好了就一直存在,且不会再变化执行上下文环境是动态的,调用函数时创建,函数调用结束时上下文环境就会被释放3. 联系执行上下文环境原创 2022-01-24 16:49:31 · 1282 阅读 · 0 评论 -
【JavaScript】变量提升 - 函数提升 - 执行上下文 - 执行上下文栈
文章目录一、变量提升、函数提升1. 变量(声明)提升2. 函数(声明)提升二、执行上下文1. 全局执行上下文2. 函数执行上下文三、执行上下文栈四、经典面试题面试题1面试题2面试题3一、变量提升、函数提升1. 变量(声明)提升通过var定义(声明)的变量,在定义语句之前就可以访问到不过值为:undefined来看一个经典面试题var a = 3function fn() { console.log(a) //undefined var a = 4}fn()通过打印结果我们能原创 2022-01-24 15:48:00 · 773 阅读 · 0 评论 -
JavaScript深拷贝与浅拷贝
文章目录一、理解二、浅拷贝1.用Js实现浅拷贝2. 浅拷贝语法糖2.1 写法2.3 应用三、深拷贝用Js实现深拷贝一、理解浅拷贝:只是拷贝一层,更深层次对象级别的只拷贝了地址深拷贝:层层拷贝,每一级别的数据都会拷贝二、浅拷贝1.用Js实现浅拷贝var obj = { id:1, name:'Andy', msg: { age:18 }}var newObj = {}for(var key in obj) { //key是当前属性名, obj[k]是当前属性值 ne原创 2022-01-23 16:48:57 · 3616 阅读 · 1 评论 -
通俗理解JavaScript闭包
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、闭包是什么?因此得出结论:能够读取其他函数内部变量的函数,就是闭包二、满足闭包的两个个特征三、经典案例四、经典面试题总结闭包的好吃与坏处前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、闭包是什么?闭包是js的一个难点也是它的一个特色,是我们必须掌原创 2022-01-22 16:37:37 · 299 阅读 · 0 评论 -
JavaScript中改变this指向的方法【总结】- 【各自主要应用场景】
文章目录一、pandas是什么?总结一、pandas是什么?总结提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...原创 2022-01-20 14:52:46 · 993 阅读 · 0 评论 -
JavaScript中基本数据类型和引用数据类型的区别
文章目录1、基本数据类型和引用数据类型2、常见的基本数据类型:3、引用类型数据:4、总结区别1、基本数据类型和引用数据类型ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型。基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象。当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值。2、常见的基本数据类型:Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的,因为可以直接操作保存在原创 2022-01-20 11:33:41 · 138 阅读 · 0 评论