JavaScript
关注
分享
扫一扫
文章平均质量分 62
祥哥的说
精一技而绝天下。。。
展开
-
函数类和class类
// class类01创建形式class Person { name = 'Jack'; sayHello() { console.log('hello'); }}// class类02创建形式class Person { constructor() { this.name = "Jack; } sayHello() { console.log('hello'); }}// 函数类01.原创 2022-05-17 21:47:47 · 121 阅读 · 0 评论 -
单页面SPA和多页面MPA应用的区别
单页面应用SPA多页面应用MPA原创 2021-03-08 17:25:12 · 484 阅读 · 0 评论 -
(在构造函数中)调用 super(props) 的目的是什么
目的：在 super() 被调用之前，子类是不能使用 this 的，ES6 要求，子类的构造函数必须执行一次super函数，否则 JavaScript 引擎会报错。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。super是什么？怎么用？super是关键词角色：1、当函数使用。 2、当对象使用。1、super当函数使用super作为函数调用时，代表调用父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数原创 2021-01-25 23:04:58 · 2548 阅读 · 3 评论 -
对象及属性
1、数据属性（1）configurable: 能否通过delete删除属性从而重新定义属性，能否修改属性的特性。（2）enumrable: 能否通过for-in循环返回属性（3）writable: 能否修改属性的值（4）value：该属性的数据值，默认undefined2、访问器属性（1）configurable: 能否通过delete删除属性从而重新定义属性，能否修改属性的特性。（2）enumrable: 能否通过for-in循环返回属性（3）get: 在读取属性时调用的函数（4）set：在原创 2020-06-18 09:58:14 · 906 阅读 · 0 评论 -
二、深浅拷贝
由文章一JS变量类型引伸的考点，变量类型分为基本类型和引用类型，那么在变量拷贝赋值时，也是不一样的，分为浅拷贝和深拷贝，是面试中常考的知识点，也是实际开发中经常会用到的内容。目录浅谈深拷贝和浅拷贝 深拷贝和浅拷贝的区别 为什么要使用深拷贝？ 深拷贝的要求程度 怎么检验深拷贝成功 只对第一层级做拷贝 拷贝所有层级 存在大量深拷贝需求的代码——immutable提供的解决方案正文前言：最开始意识到深拷贝的重要性是在我使用redux的时候（react + redux）， .原创 2020-05-20 23:05:18 · 668 阅读 · 2 评论 -
Fetch的数据获取和发送以及异常处理
无论用JavaScript发送或获取信息，我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息，能使网页实现异步更新。几年前，初始化Ajax一般使用jQuery的ajax方法：$.ajax('some-url', { success: (data) => { /* do something with the data */ }, error: (err) =>...转载 2018-12-17 15:54:12 · 21953 阅读 · 1 评论 -
js实现刷新页面的方法
js 刷新当前页面的方法： reload() 方法; replace() 方法; 页面自动刷新; window.history.go(0) document.execCommand(''Refresh'')方法1：reload() 方法location.reload()reload()方法用于刷新当前文档。reload() 方法类似于你浏览器上的刷新页面按钮。...原创 2018-12-22 22:27:37 · 6477 阅读 · 0 评论 -
JavaScript操作属性节点的方法、JS获取和设置CSS样式的方法
JavaScript操作属性节点属性节点的特征：1.nodeType值为112.parentNode值为null3.在HTML中不包含子元素注意：（1）尽管属性也是节点，但却不认为是DOM文档树的一部分。（2）开发人员常用getAttribute（）、setAttribute( )、removeAttribute( )等方法来操作属性。1、设置属性值方法：（1）cr...原创 2018-12-10 17:30:43 · 4644 阅读 · 0 评论 -
Console 调试各种姿势指南
推荐一个特别赞的微信公众号，3-6分钟的零碎时间可以积累前端知识点1、console.log 的更多用法参数支持类似 C 语言的字符串替换模式。%s 字符串 %d 整数 %f 浮点值 %o Object %c 设定输出的样式，第二个参数里的值对%c后面的参数进行设置之后在控制台显示出来。示例如下：2、清空 console 面板输出内容要清空已经打印输出的内...原创 2018-12-26 15:09:02 · 1119 阅读 · 0 评论 -
详解防抖处理（debounce）以及代码实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>debounce</title> <style> #container{原创 2018-12-19 16:29:43 · 4863 阅读 · 0 评论 -
javascript 中设置、读取、删除CSS原生变量的方法
// 设置变量document.body.style.setProperty('--primary', '#7F583F');// 读取变量document.body.style.getPropertyValue('--primary').trim();// '#7F583F'// 删除变量document.body.style.removeProperty('--primary...原创 2018-12-03 22:22:18 · 1088 阅读 · 0 评论 -
Flex栅栏画廊原理以及flexbox gallery浏览器缩小后，各画廊格不等宽的问题
如图所示：在缩小到最小时出现这种不等间距问题，此时的栅格宽度有内部的字体宽度决定。这是正常情况的图片：2、英文单词或句子过长，不会自动切换到下一行 解决方法：CSS3属性：word-wrap，允许长单词或URL地址换行到下一行。 ...原创 2018-12-07 17:03:19 · 230 阅读 · 0 评论 -
js事件循环机制
一、JS单线程、异步、同步概念 从上一篇说明vue nextTick的文章中，多次出现“事件循环”这个名词，简单说明了事件循环的步骤，以便理解nextTick的运行时机，这篇文章将更为详细的分析下事件循环。在此之前需要了解JS单线程，及由此产生的同步执行环境和异步执行环境。 众所周知，JS是单线程（如果一个线程删DOM，一个线程增DOM，浏览器傻逼了～所以只能单着了），虽然有webwo...转载 2018-08-14 17:39:13 · 19255 阅读 · 1 评论 -
题目集合
1、且运算或运算---考点：逻辑操作且运算符"&&"的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。eg:返回参数 a 和 b 的逻辑且运算结果function and (a,b){ return !!(a&a...原创 2018-08-04 00:10:55 · 299 阅读 · 0 评论 -
可枚举属性和不可枚举属性（for...in循环和Objec.keys()和Object.getOwnPropertyNames()）
可枚举属性和不可枚举属性（for...in循环和Objec.keys()和Object.getOwnPropertyNames()） for...in循环是 遍历对象的每一个可枚举属性,包括原型链上面的可枚举属性,而Object.keys()只是遍历自身的可枚举属性,不可以遍历原型链上的可枚举属性. 这是for...in和Object.keys()的主要区别,而Object.getOwnPrope...转载 2018-07-11 15:09:45 · 677 阅读 · 0 评论 -
深入浅出javascript中的call,apply,bind方法
深入浅出妙用 Javascript 中 apply、call、bind2015/09/24 · JavaScript · 4 评论 · apply, bind, call本文作者： 伯乐在线 - chokcoco 。未经作者许可，禁止转载！欢迎加入伯乐在线 专栏作者。这篇文章实在是很难下笔，因为网上相关文章不胜枚举。巧合的是前些天看到阮老师的一篇文章的一句话：“对我来说，博客...转载 2018-07-18 20:33:32 · 226 阅读 · 0 评论 -
Object.create()和new object()和{}的区别
Object.create()介绍 Object.create(null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如：toString(), hasOwnProperty()等方法Object.create()方法接受两个参数:Object.create(obj,propertiesObject) ;obj:一个对象，应该...转载 2018-07-25 15:53:11 · 8512 阅读 · 0 评论 -
new Object和Object.create创建新对象时到底干了啥
new Object和Object.create到底干了啥function Car () { this.color = "red";}Car.prototype.sayHi=function(){ console.log('你好')}<br data-filtered="filtered">var car =new Car();var car2 = Object...转载 2018-07-25 16:51:03 · 1583 阅读 · 0 评论 -
js如何判断一个对象是不是Array?
js如何判断一个对象是不是Array？在开发中，我们经常需要判断某个对象是否为数组类型，在Js中检测对象类型的常见方法都有哪些呢？typeof 操作符对于Function， String， Number ，Undefined 等几种类型的对象来说，他完全可以胜任，但是为Array时1vararr=newArray("1","2","3","4","5");2alert(typeof(arr)...原创 2018-07-15 13:06:40 · 609 阅读 · 0 评论 -
JavaScript关于作用域、作用域链和闭包的图示详解
JavaScript关于作用域、作用域链和闭包的理解作用域先来谈谈变量的作用域 变量的作用域无非就是两种：全局变量和局部变量。 全局作用域： 最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：<script> var outerVar = "outer"; function fn(){ console.log(outer...转载 2018-07-15 16:50:05 · 233 阅读 · 0 评论 -
闭包中this的指代，以及四种函数调用中this的指代
说来惭愧，再讲一个故事吧。带着2年前端经验的我去面试，被闭包问住了，尴尬了整个面试气氛。第二次，OK，失败了总要知道为什么吧，于是闭包被我简单的攻略了。面试官问我闭包时，拿起笔就写了一个简易版的闭包。好啊，既然你知道闭包，那你说说在你写的这个闭包的这一段代码里，这里，这里，这里this分别是什么？啊啊啊啊，老天，Are you kidding me？ Q：// (1)这里this指...转载 2018-07-15 20:58:24 · 1056 阅读 · 0 评论 -
获取二进制数中某一位的值
题目描述获取数字 num 二进制形式第 bit 位的值。注意：1、bit 从 1 开始2、返回 0 或 13、举例：2 的二进制为 10，第 1 位为 0，第 2 位为 1示例1输入复制128, 8输出复制1我的解答：function valueAtBit(num, bit) { var str=num.toString(2); r...原创 2018-08-04 00:04:50 · 6498 阅读 · 0 评论 -
撞墙反弹程序
“撞墙反弹程序”let flag=true;if(bianliang>right||bianliang<left){ //当变量超过右墙或者越过左墙，根据“||”的短路原则，只要有条件成立就执行下面的语句。 direction =! direction; //改变方向}if(direction){ bianliang++; //当方向...原创 2018-12-25 18:05:31 · 872 阅读 · 0 评论 -
offsetWidth和width的区别
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。 4.style.width仅能返回以style方式...转载 2019-01-05 15:41:50 · 11238 阅读 · 0 评论 -
video的autoplay在Chrome下失效
声音无法自动播放这个在 IOS/Android 上面一直是个惯例，桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放，也就是说 在桌面版浏览器也将失效。--------------------- 原因大概是为了提高用户体验，防止一进入网页会自动播放声音过大的音频。...转载 2019-01-05 20:23:55 · 1895 阅读 · 0 评论 -
监听页面大小的改变
当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize=function(){ // location.reload();//页面进行刷新 }原创 2019-03-06 22:28:07 · 5014 阅读 · 2 评论 -
URL的结构与解析
原创 2019-02-27 12:52:15 · 417 阅读 · 0 评论 -
WEB API geolocation的使用和示例
Geolocation接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置，这将允许Web应用基于用户的地理位置提供定制的信息。说实话：其实Geolocation就是用来获取到当前设备的经纬度（位置）带有此接口的对象可以用由Navigator实现的属性Navigatorgeolocation.geolocation来获得。 注意：出于安全考虑，当一...原创 2019-03-02 21:56:46 · 687 阅读 · 0 评论 -
Element.getBoundingClientRect()方法
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。语法rectObject = object.getBoundingClientRect();值返回值是一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。DOMRect 对...转载 2019-03-04 23:56:39 · 637 阅读 · 0 评论 -
各种小知识点（笔记本）
1、localStorage 里面只会储存 String 类型数据如果传入的是非 String 则会直接使用 toString 转换：({}).toString() //"[object Object]"，这时候就会发生异常，所以才需要先使用JSON.stringify()将 Object 转换成 json 格式，读取出来之后再利用JSON.parse()转换为 Object。2...原创 2019-02-20 12:51:08 · 686 阅读 · 0 评论 -
序列化和反序列化
原创 2019-02-19 23:20:47 · 172 阅读 · 0 评论 -
Js中各种距离值
innerWidth、innerHeight 返回窗口的文档显示区的宽度、高度。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。注意：使用 outerWidth 和 oute...原创 2019-02-24 21:31:32 · 1066 阅读 · 0 评论 -
如何使用 JavaScript 解析 URL
在 Web 开发中，有许多情况需要解析URL,这篇主要学习如何使用URL对象实现这一点。开始创建一个以下内容的 HTML 文件，并在浏览器中打开。<html> <head> <title>JavaScript URL parsing</title> </head> <bod...转载 2019-02-28 13:38:30 · 287 阅读 · 0 评论 -
获取url参数功能--代码段分析
先贴上代码段如下： getUrlParam : function(name){ var reg =new RegExp('(^|&amp;amp;)'+name+'=([^&amp;amp;]*)(&amp;amp;|$)'); var result =window.location.search.substr(1).match(reg); return resu...原创 2018-03-30 22:07:49 · 667 阅读 · 0 评论 -
escape()、encodeURI()、encodeURIComponent()函数编码及对应的解码、三者间区别
浏览器URl地址，上网一定会用到，但是浏览器地址有中文或者浏览器url参数操作的时候，经常会用到encodeURIComponent()和decodeURIComponent()以及encodeURI()等等。关于浏览器参数操作，请看文章http://www.haorooms.com/post/js_url_canshu，今天主要讲讲escape(),encodeURI(),encodeURIC...原创 2019-02-28 11:22:22 · 4914 阅读 · 0 评论 -
让URLSearchParams帮你生成和解析参数字符串
让URLSearchParams帮你生成和解析参数字符串Henry不会做一手好菜的全栈前端不是好产品经理50 人赞了该文章无论在 Node.js 程序还是 HTML 前端程序里，我们都免不了像下面这样手工拼 URL 搜索字符串（URL Search String，或称Query String）：// 备注：习惯上我们用 k 和 p 分别代表 keywords ...转载 2019-02-28 10:55:54 · 6957 阅读 · 0 评论 -
JavaScript版数据结构与算法
最近看到一个不错的课程，慕课上的，推荐一下《JavaScript版 数据结构与算法》JavaScript版数据结构与算法原创 2019-02-18 13:09:02 · 1893 阅读 · 0 评论 -
URLSearchParams()函数
URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。一个实现了URLSearchParams的对象可以直接用在for...of结构中，例如下面两行是相等的。for (var p of mySearchParams);for (var p of mySearchParams.entries());//entries()会但会键值对的遍历器UR...原创 2019-02-27 19:49:22 · 11207 阅读 · 0 评论 -
localStorage的相关知识
http://www.runoob.com/jsref/prop-win-localstorage.html转载 2019-02-21 21:19:54 · 116 阅读 · 0 评论 -
shiftKey事件
shiftKey：检测 SHIFT 键是否被按住。事件属性可返回一个布尔值，表明当事件发生时，“SHIFT”键是否被按下并保持住，若是返回true，否则为false。语法：event.shiftKey=true|false|1|0，这里的event用this无效，用e.target无效。具体的实例应用：用于CheckBox的shift复选功能。完整源代码和图文分析：完整源代码和图...原创 2019-01-09 17:18:47 · 1521 阅读 · 0 评论