JavaScript
周士森
我的屏幕是13的!
展开
-
一行代码构造 0-n 的数组
用一行代码构造一个内部元素值为从 0 - n 的数组,其实用 for 循环当然也可以做,但是语法糖不可谓不甜呀!Array(n).fill().map((_, i) => i+1);思路:通过Array(n)创建长度为 n 的新数组,此时内部元素都为 empty ;通过 map 对每个元素进行处理并返回一个新数组,arr.map(function callback(currentValue[, index[, array]]){}。currentValue callback原创 2021-06-01 09:03:05 · 455 阅读 · 0 评论 -
jQuery-缓慢回到顶部
HTML<div class="div1">段落1</div> <div class="div2">段落2</div><div class="div3">段落3</div><div class="div4">段落4</div><div class="div5">段落5<...原创 2019-12-10 17:34:42 · 112 阅读 · 0 评论 -
jQuery-优雅弹窗(模态框)
HTML<button>触发弹窗</button> <div class="madel"> <div class="content"> </div></div>CSS* {padding: 0; margin: 0;}.madel { width: 100%; height: 10...原创 2019-12-11 13:43:07 · 1938 阅读 · 0 评论 -
jQuery-轮播图(一)
HTML<div class="banner"> //图片容器 <div class="slide"> <img src="img/14.jpg" class="pic c"/> <img src="img/02.jpg" class="pic a"/> <i...原创 2019-12-12 13:40:38 · 125 阅读 · 0 评论 -
箭头函数 -- this 指向
在 ES6 的箭头函数中 this 是静态的始终指向函数声明时所在作用域下的 this 值。function getName1(){ console.log(this.name);}let getName2 = () => { console.log(this.name);}window.name = "学小习";const school = { name: "learning"}//直接调用getName1();getName2();//call调用 c原创 2020-09-28 20:04:38 · 186 阅读 · 0 评论 -
promise--改变状态与指定回调的顺序问题
(补充)常见的几种异步程序:fs文件操作数据库操作ajax定时器(setInterval()、setTimeout() ) 改变 promise 状态和指定回调函数谁先谁后?(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调(2) 如何先改状态再指定回调? 1 在执行器中直接调用 resolve()/reject();此时为同步执行。//先改状态, 后指定回调函数new Promise((resolve, reject) => { res原创 2020-12-07 10:55:36 · 669 阅读 · 0 评论 -
JavaScript 垃圾回收机制
JavaScript 它有自己的一套垃圾回收机制(Garbage Collection)。它的解释器可以检测到何时程序不再使用一个对象了,当他确定了一个对象是无用的时候,他就知道不再需要这个对象,可以把它所占用的内存释放掉了。垃圾回收的方法:标记清除、计数引用。 标记清除 这是最常见的垃圾回收方式,当变量进入环境时,就标记这个变量为”进入环境“,从逻辑上讲,永远不能释放进入环境的变量所占的内存,永远不能释放进入环境变量所占用的内存,只要执行流程进入相应的环境,就可能用到他们。当离开环境时,就标原创 2021-03-29 16:15:53 · 92 阅读 · 0 评论 -
闭包
目录引入01_理解闭包1. 如何产生闭包?2. 闭包到底是什么?3. 产生闭包的条件?02_常见的闭包03_闭包的作用1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)问题:04_闭包的生命周期05_闭包的应用_自定义JS模块闭包的应用2 : 定义JS模块06_闭包的缺点及解决1. 缺点2. 解决引入//需求: 点击某个按钮, 提示"点击的是第n个按钮"var btns = document.getEle原创 2021-03-21 14:51:05 · 131 阅读 · 0 评论 -
Javascript 实现冒泡排序
冒泡排序原理及不同进阶冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法. 冒泡排序算法的原理如下:比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。针对所有的元素重复以上的步骤,除了最后一个。持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需...原创 2018-12-16 15:22:17 · 141 阅读 · 0 评论 -
src-href ,资源跳转-资源嵌入
href href 指向网络资源位置,建立当前文档和资源的连接,一般用于超链接。src src将资源嵌入到当前文档中,在请求src资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也是如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。其实这里更偏向于说是 资源跳转 和 资源嵌入 的区别。1.) 资源跳转: A链接、原创 2021-03-11 21:40:07 · 282 阅读 · 0 评论 -
Javascript 实现快速排序
Javascript + 快速排序基本思想算法描述代码实现基本思想 通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,再使用冒泡与递归结合分治法分别对这两部分记录继续进行排序,以达到整个序列有序。 算法描述快速排序使用冒泡与递归结合分治法来把一个串(list)分为两个子串(sub-lists);从数列中挑出一个元素,称为 “基准”(pivot);重新排序数列,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的摆在基准的后面(相同的数可以到任一边)原创 2021-03-08 21:19:32 · 562 阅读 · 1 评论 -
前端的debug调试
Debug,快速定位,,理顺逻辑,调试代码。看到后端使用Debug,总会露出羡慕的小眼神。于是手指轻跳,前端也有自己的Debug。如console.log,confirm,alert,Breakpoint等,在此备忘。 alert() ,confirm(),虽然也可以起到调试的作用,但是它适合传达信息的场景就是有限的,因为它会使甚至关闭窗口这样的操作无效化。而且alert的样式也依赖于浏览器的默认样式,并且只能显示文本,不适合自定义。总的来说就是阻塞页面加载,降低网页的性能与质量。 接下来的内容原创 2020-10-26 17:50:34 · 9810 阅读 · 1 评论 -
变量提升与函数提升_执行上下文与执行上下文栈
01_变量提升与函数提升变量声明提升通过var定义(声明)的变量, 在定义语句之前就可以访问到值: undefined函数声明提升通过function声明的函数, 在之前就可以直接调用值: 函数定义(对象)问题: 变量提升和函数提升是如何产生的?02_执行上下文代码分类(位置)全局代码函数(局部)代码全局执行上下文在执行全局代码前将window确定为全局执行上下文对全局数据进行预处理var定义的全局变量==>undefined, 添加为原创 2020-10-24 21:31:25 · 217 阅读 · 0 评论 -
JavaScript单线程执行
1. 如何证明js执行是单线程的? * setTimeout()的回调函数是在主线程执行的 * 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行2. 为什么js要用单线程模式, 而不用多线程模式? * JavaScript的单线程,与它的用途有关。 * 作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。 * 这决定了它只能是单线程,否则会带来很复杂的同步问题3. 代码的分类: * 初始化代码 * 回调代码4. js引擎执行代码的基本流程 * 先执原创 2020-10-03 20:57:56 · 400 阅读 · 0 评论 -
JavaScript中的内存溢出与内存泄漏
内存溢出与内存泄漏 1. 内存溢出 * 一种程序运行时出现的错误; * 当程序运行时需要的内存超过了剩余的内存,就会出现抛出内存溢出的错误。 2. 内存泄漏 * 占用的内存没有计时释放; * 内存泄漏积累多了就容易导致内存溢出。 * 常见的内存泄漏 * 意外的全局变量; * 没有及时清理的计时器或回调函数; * 闭包。...原创 2020-10-03 15:42:11 · 441 阅读 · 0 评论 -
ES6--解构赋值
ES6 允许按照一定模式从数组和对象中提取值,对变量进行赋值,成为解构赋值。适用于变量较多且同名时,或者频繁调用某对象属性或方法。//1、数组的结构const F4 = ['小沈阳','刘能','赵四','宋小宝'];let [xiao,liu,zhao,song] = F4;console.log(xiao); //'小沈阳'console.log(zhao); //'赵四'//2、对象的解构const zhao = { name: '赵本山原创 2020-09-24 08:36:58 · 123 阅读 · 0 评论 -
ES6--let、const
//1、代码不能重复声明let star = '周士森';let star = 'zss';//2、块级作用域 全局 函数 eval//if else while for{ let girl = '周士森';}console.log(girl); //undefined//3、不存在变量提升console.log(song);let song = "好歌曲";//4、不影响作用域链{ let school = '尚硅谷';原创 2020-09-23 17:47:08 · 127 阅读 · 0 评论 -
变量提升、函数提升以及提升优先级
在JS执行前会对代码进行预处理,把当前作用域的变量和函数提升到顶部 (全局作用域、局部作用域)。变量只提升声明,赋值依旧在实际代码所在处;函数是声明和赋值都提升,且函数提升,函数提升优先级高于变量提升。变量提升var testVar = 1;console.log(testVar); //1-------------解析完实际执行时var testVar;console.log(testVar); // undefinedtestVar = 1;console.log(te原创 2020-09-13 17:54:28 · 2013 阅读 · 3 评论 -
JavaScript 数据类型判断===、typeof、instanceof
JavaScript 中共有8中数据类型,基本数据类型5种(值类型),引用类型3种(对象类型)。当我们要对这些数据进行操作时,首先要知道他们的数据类型是什么,可以用哪些方法,所以,数据类型判断就成了重要的一步。基本数据类型: Number String Boolean undefined null引用数据类型: Object Array function 在这里我们首先说一下,为什么判断数据类型不用 == ,而用 === 。这是因为在比较时,== 默认转换数据格式原创 2020-09-09 09:12:08 · 240 阅读 · 0 评论 -
form表单默认提交事件、数据验证、判空
在form表单中,总会出现触发提交事件,这是因为在form表单中button的默认类型是submit,如果不明确button的type,那可能触发提交事件。如果提交前需要数据判空或者数据检验,则需要把button的type设置为button,给其他事件留下时间。<form action="/doLogin" method="post" id="submit"> <input type="submit" name="submit" id="submit" value="" />原创 2020-09-06 21:52:35 · 1428 阅读 · 0 评论 -
JavaScript-inner(Width+Height)、outer(Width+Height)
inner: innerheight 返回窗口的文档显示区的高度。 innerwidth 返回窗口的文档显示区的宽度。 使用本属性获取 去除 工具条与滚动条的窗口高度与宽度。图1outer: outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。 outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)...原创 2019-12-16 22:30:02 · 260 阅读 · 0 评论 -
验证码倒计时按钮禁用
初学分享,一起成长!希望大神路过多指点!!!HTML<!--验证码--><div class="registe-exambox"> <div class="exam-inputbox"> <input type="text" name="examcode" id="examcode" value="" placeholder=" 验证码"...原创 2019-09-27 23:47:46 · 371 阅读 · 0 评论 -
js判断登录是否input的输入值有误后为输入框和所填内容设置红色提醒
为增强体验,在用户输入有误时会提供一些样式提示用户,比如改变输入框的颜色:正常效果图:改变后效果图:HTML、、、HTML<!-- 账号 --><div class="username-Box"> <span><i class="fa fa-user"></i></span> <input typ...原创 2019-09-27 23:36:19 · 5717 阅读 · 0 评论 -
JavaScript&Css3实现翻书特效
js,css3实现翻书特效HTML<div class="book"> <div id="page1"> <div class="page-back"></div> <div class="page-front">HTML5</div> </div> <div id="p...转载 2019-07-28 18:40:57 · 573 阅读 · 0 评论 -
Js实现动态更新时钟
Js实现动态更新时钟 时钟有两个特点:1. 动态更新 2. 外表美观Html<!-- 调用方法 --> <body onload="startTime()"> <div class="Box"> <div id="Time"> </div> </div> </...原创 2019-07-21 16:08:23 · 521 阅读 · 0 评论