![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
bingqise5193
这个作者很懒,什么都没留下…
展开
-
es6基础 --- 9、异步编程 promise
异步编程js中的单线程是指负责执行代码的线程只有一个,这样设计的初衷是js是用来操作DOM的,多线程会产生DOM操作冲突。缺点:执行耗时任务时会阻塞代码执行,出现假死状态。解决:有同步模式和异步模式。JS代码执行是单线程,但是浏览器是多线程的,因此可以借用浏览器的多线程去执行一些耗时任务,如ajax请求。是同步模式还是异步模式是由运行环境提供的API来决定的。取个例子:一段代码中用promise封装了一个ajax请求,利用浏览器的多线程去请求这个ajax请求,该段代码继续执行,请求完成后,p原创 2020-06-29 21:52:15 · 214 阅读 · 0 评论 -
es6基础 --- 3、数组相关:数组解构、数组展开
数组解构按位置提取相应数据 <script> // 数组解构 const arr = ['foo', 'bar', 'baz']; // 按位置提取 const [foo, bar, baz] = arr; console.log(foo, bar, baz); // foo bar baz // 提取第三个 const [, , third] = arr; console.log(third); // baz // 提取第一个和剩余数组原创 2020-06-08 17:24:00 · 182 阅读 · 0 评论 -
es6基础 --- 2、字符串相关:模板字符串及一些方法
模板字符串 ``可支持多行字符串:直接在 ``内换行即可而不需要\n,对HTML字符串友好 可嵌入变量和JS语句${name} ${1+2} 不需要再拼接字符串啦 let name = 'fang' console.log(`这是一段换行的语句 换行啦……`) console.log(`可嵌入变量${1+2} 换行啦,${name}……`) // 插入HTML语句时非常好用 const box = document.getEle..原创 2020-06-08 16:56:03 · 104 阅读 · 0 评论 -
es6基础 --- 8、for of 遍历 Iterator Generator
erwr原创 2020-06-15 20:52:04 · 352 阅读 · 0 评论 -
es6基础 --- 5、函数相关:参数默认值、剩余参数、箭头函数
参数默认值 function foo (enable) { // 通常设置默认参数会通过短路运算符来设置,但如果enable传入可转为false的值时,仍会使用默认值,造成bug let e = enable || true; // 应用以下代码 let e1 = enable === 'undefined' ? true : enable; } // es6默认参数,注意:默认参数的设置必须为最后一个参数 function bar原创 2020-06-11 10:39:18 · 143 阅读 · 0 评论 -
es6基础 --- 6、Proxy与Reflect vue3.0与2.0 Object.defineProperty的对比
推头条原创 2020-06-12 10:41:16 · 339 阅读 · 0 评论 -
es6基础 --- 4、对象相关:解构、对象字面量、Object.assign
对象解构通过key值提取相应的value <script> // 对象解构,通过key提取相应value const student = { name: 'lf', age: 18 } const name = 'tom'; // name: nameObj 重命名 以防与外部变量冲突 // 可设置默认值 const { name: nameObj = 'default'} = student; console.log(name原创 2020-06-11 09:54:25 · 577 阅读 · 0 评论 -
es6基础 --- 7、Set Map Symbol
wrewr原创 2020-06-13 12:26:54 · 146 阅读 · 0 评论 -
es6基础 --- 1、var/let/const 区别
let 与 var的区别 let有块级作用域 es5中有全局作用域、函数作用域,es6中新增了块级作用域,即用let声明的变量只能在if的{}及for的(){}内访问到。 let 没有变量提升 在使用let定义变量前访问变量出错 而不是 undefined// let 没有变量提升console.log(b); // undefinedvar b = 200;console.log(a);let a = 100; // Cannot access 'a' befor.原创 2020-06-09 21:31:03 · 197 阅读 · 0 评论 -
立即执行函数详解及常见面试题
面试题引发的思考一道很经典的面试题: for(var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 1000) }输出5个5,因为setTimeout为宏任务,此时全局i为5。其中一个解决办法是将var改为es6的let, 在es5中就得用立即执行函数来解决立即执行函数通常有两种写法:(function()原创 2021-01-05 22:43:26 · 457 阅读 · 0 评论 -
各种常用正则汇总(持续整理中)
每三位数字一个逗号(兼容小数整数)var num = '12345.9990';// 取整数部分 -- 转数组后逆转var reversedNum = num.split('.')[0].split('').reverse().join('');// 整数部分加逗号 -- 转数组后逆转回来 -- 加上小数部分// 分组1回溯替换, 分组1: 匹配三个数字, $1引用分组1var...原创 2019-12-26 11:19:20 · 185 阅读 · 0 评论 -
js location 与 navigator对象
location对象href: 地址栏protocol: 协议host: 主机名端口号 或 域名 hostname: 主机名 port: 端口号pathname: 路径, host后、hash前或search前的路径hash: #号及后面的内容,如遇到?则停止,后续是searchsearch: ?及其后面的内容, 如遇到#则停止,后续是hash常用方法...原创 2019-11-14 10:37:10 · 201 阅读 · 0 评论 -
js 对象/数组/字符串常见的几个方法(不熟悉的汇总)
对象Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)常用于引用值浅拷贝Object.assign({}, obj)给对象新增属性Object.assign(obj, obj1)Object.keys()/Object.values()/Object.entries()只能遍历可遍历(enumera...原创 2019-11-13 16:23:22 · 200 阅读 · 0 评论 -
es6 export import
export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。具名export/import// 第一种写法export var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;// 函数export function multiply...原创 2019-11-09 19:57:23 · 376 阅读 · 0 评论 -
js ajax基础
作用对页面的局部内容刷新,且不会进行url跳转使用新建实例 let xhr = new XMLHttpRequest() 定义请求xhr.open("GET", "https://www.apiopen.top/journalismApi", true) 定义数据请求完成后的行为xhr.onload = function() {} 发送请求xhr.send()整体有如上...原创 2019-11-07 14:36:01 · 133 阅读 · 0 评论 -
js 闭包经典问题超详细解析
闭包经典问题闭包经典问题如下:function test() { var arr = []; for(var i = 0; i < 10; i++){ arr[i] = function () { console.log(i + " "); } } return arr;}var myArr = test();for(var j = 0; j <...原创 2019-08-20 11:12:37 · 581 阅读 · 0 评论 -
js 事件1
绑定事件绑定到对象上,句柄式 div.onclick = function() {}; 利用方法添加,封装兼容性函数如下:<!-- 绑定事件 -->function addEvent(elem, type, handle) { if(elem.addEventListener) { elem.addEventListener(type, handle, false);...原创 2019-09-09 14:27:26 · 109 阅读 · 0 评论 -
js 对象{}与null的区别及[]
{}与null的区别{ }是一个不完全空对象,原型链上有Object,null是完全空对象,原型链也没有,因此执行null.length因此null instanceof Object === false。[][]原型链上还比{}多一个Array,链的最低端还是ObjectTips在转化布尔值时,对于对象而言,只有null转为false, 其他的都为true,因此,...原创 2019-09-21 19:37:36 · 3562 阅读 · 0 评论 -
js 事件2
鼠标事件onmousedown 鼠标按下,可检测左右键的操作 onmouseup 鼠标抬起,可检测左右键的操作onclick 点击,由按下抬起这两个操作组成,只能检测左键的操作oncontextmenu 右键菜单onmousemove 鼠标移动 移动端 touchmoveonmouseenter 鼠标移入,老版本onmouseover 移动端 t...原创 2019-09-25 15:14:35 · 85 阅读 · 0 评论 -
js 渲染和加载
JSON是一种传输数据的格式,本质上就是对象,对象就是本地用的,json是用来传输的 JSON.parse() 将string转为json JSON.stringify() 将json转为stringDOM渲染domTree + cssTree = renderTree 浏览器依据renderTree进行绘制页面dom节点的增删/dom节点的宽高变化 ...原创 2019-09-26 09:57:39 · 475 阅读 · 0 评论 -
js bom操作
概念bom browser object model 提供与浏览器相关操作接口封装的兼容性函数<!-- 获取浏览器视口宽高 -->function getViewportOffset() { if(window.innerWidth) { return { width: window.innerWidth, height: window.inne...原创 2019-09-09 11:23:57 · 192 阅读 · 0 评论 -
js dom操作及原理
概念dom document object model 文档对象模型定义了表示和修改文档的方法,也就是一些操作html和xml方法的集合(操作不了css样式表,但可以通过操作HTML属性间接更改样式) document document是指啥,我们随意打开一个html文件,在控制台打印document,发现其代表整个文本。为啥叫文档对象,因为document是一个对象,...原创 2019-09-08 00:08:10 · 708 阅读 · 0 评论 -
js call/apply/bind 及 手写源码
call与apply与bind异同作用:均为改变this指向 call/bind传参为多个参数,apply传参为一个参数数组 bind的时候function函数不执行,需手动执行,call/apply的时候函数自动执行例子function Person(name, age) { this.name = name; this.age = age;}Person('doudou...原创 2019-08-26 11:08:23 · 152 阅读 · 0 评论 -
js (3) 预编译过程理解
js执行的三个步骤:语法分析:整体扫描是否有语法错误; 预编译:在函数执行前一刻进行; 解释执行:翻译一句,执行一句。预编译的几条规则:函数声明整体提升; 变量声明提升; 变量未声明则进行赋值,认为是全局变量,归window所有; 全局上的变量,即使声明了,也归window所有;预编译过程:创建AO(active object); (全局生成GO global objec...原创 2019-08-18 00:42:07 · 96 阅读 · 0 评论 -
js 对象
创建对象的方法对象字面量:var obj = {}构造函数法:系统自带构造函数var obj = new Object()注意:用系统自带的构造函数创建的对象与对象字面量方法创建的对象基本一样。自定义构造函数function Person(age) { this.hometown = 'shanghai'; this.sex = 'female'...原创 2019-08-21 21:06:21 · 108 阅读 · 0 评论 -
js (2) 函数arguments深入解析
arguments为函数内部保存的实参类数组,传入多少个参数均会被保存在arguments中。有一个很有趣的现象是:如果在函数内给形参赋新值,arguments相应的值也会随之改变,虽然值同步改变,但他们的内存空间是独立的。但如果传入实参个数小于形参个数,而又在函数内对未被传参的形参赋值,那么arguments会不会相应变化呢?请看下面的例子:function sum(a, b,...原创 2019-08-14 23:04:28 · 225 阅读 · 0 评论 -
js (1) 函数定义方式深入解析
函数有两种定义方式:1、函数声明function test() { var a = 1; return a;};console.log(test); //打印出函数体console.log(test()); //如无return打印undefined, 此处1从打印结果可以看出:函数名test为一个指向该对象的指针,因此console.log(test)是打印tes...原创 2019-08-14 22:38:45 · 126 阅读 · 0 评论 -
js 闭包解析
闭包概念闭包:当内部函数被保存到外部时,将会生成闭包。闭包会导致原有的作用域链不释放,造成内存泄漏(作用域链一直不释放,占用内存,可用内存就小了,指内存泄漏)。例子说明利用上一节的作用域链可以非常好理解闭包,下面来看一个例子:function a() { function b() { var bbb = 234; console.log(aaa); //打印123...原创 2019-08-19 22:38:23 · 104 阅读 · 0 评论 -
js 作用域链
作用域与作用域链:作用域:[[scope]]为函数的一个属性,仅供javascript浏览器存取,即作用域,存储了运行期上下文集合;运行期上下文: 当函数执行时,会创建一个执行器上下文的内部对象。一个执行期上下文定义了一个函数的执行时的环境,函数每次执行产生的执行期上下文都是独一无二的,因此多次调用同一个函数会产生多个执行期上下文,函数执行完毕时,执行期上下文被销毁。这个运行期上下文可以理...原创 2019-08-18 22:47:17 · 107 阅读 · 0 评论 -
js 继承
截至到目前来看,js继承有以下四种方式:原型链: 共享原型:不能随便改动自己的原型。 圣杯模式原型链模式Grand.prototype.name = 'liao';function Grand() {}Father.prototype = new Grand();Father.prototype.charming = true;function Father() {}So...原创 2019-08-31 12:04:44 · 97 阅读 · 0 评论 -
js 一个例子弄清楚this的所有指代情况
this的四个原则:函数预编译过程,this指向window,函数1内的函数2预编译过程,this指向函数1; 全局作用域时,this指向window call/apply/bind可以改变this指向 obj.func(),func()内的this指向obj,谁调用指向谁实例var obj = { name: 'doudou', say: function() { te...原创 2019-08-27 10:25:10 · 166 阅读 · 0 评论 -
js 工具方法 数组去重 类型判断
数组去重<!-- 数组去重 -->// 方法1 利用对象属性名不重复的特性function arrayUnique(arr) { var l = arr.length; var obj = {}; var retArr = []; for(var i = 0; i < l; i++) { if(!obj[arr[i]]) { obj[arr[i]] =...原创 2019-09-03 15:43:03 · 170 阅读 · 0 评论 -
js 基础
字符串任何类型的变量与字符串相加,均为字符串连接 字符串比较的是ascii码值&& 和 ||var a = 0 && 2, //0 第一个数为假,则返回第一个数 b = 1 && 2, //1 第一个数为真,则返回第二个数 c = 0 || 2, //2 第一个数为假,则返回第二个数 d = 1 || 0; //1 第一个数为真,...原创 2019-09-02 22:34:09 · 100 阅读 · 0 评论 -
js 入门
浏览器组成shell部分:即浏览器TAB页、书签等等外表的部分; 内核部分:渲染引擎 js引起 其他模块js执行队列js单线程执行 轮转时间片:将各个任务分割成多个时间片,排队执行。比如执行task1 1ms,然后执行task1 1ms,再执行task1 1ms,因此视觉效果上可以看到一个页面两个元素在同时运动。js三大部分ECMAScript DOM BOMjs...原创 2019-09-02 21:29:09 · 100 阅读 · 0 评论 -
js 拷贝
概念对于基础值来说,拷贝就是值的拷贝,但对于引用值来说,可分为赋值:拷贝引用值的地址 浅拷贝:拷贝一层值 深拷贝:拷贝所有层。基本原理赋值var obj = { a: 1, b: [1,2]}var copy = obj;obj.a = 2;obj.b[0] = 2;console.log(copy); // {a: 2, b: [2,2]}直接拷贝的是...原创 2019-09-01 22:55:57 · 150 阅读 · 0 评论 -
js try catch 与 es5严格模式
try catch基本用法try { //一旦发生错误,中止代码段,跳转到catch内的代码段执行}catch(e) { //捕捉错误,错误信息在e对象中,e.name错误名,e.message错误信息}e的6种错误序号 e.name 对应信息 1 EvalError eval()的使用与定义不一致 2 RangeError...原创 2019-09-01 19:58:27 · 248 阅读 · 0 评论 -
js 类数组
基本原则类数组为对象,但有一些数组的方法,用起来像数组,因为其本质为对象,也有对象的用法 属性要为索引(数字)属性,必须有length属性,最好加上push方法举例子var obj = { 0: 'a', 1: 'a', 2: 'a', 3: 'b', length: 4, push: Array.prototype.push}obj.push('b');obj.l...原创 2019-08-31 12:00:58 · 1274 阅读 · 1 评论 -
js 数组
数组push方法原理Array.prototype.push = function() { var len = arguments.length; for(var i = 0; i < len; i++){ this[this.length] = arguments[i]; } return this.length;}注意:以上大致为原理,但并不是说js里面pus...原创 2019-08-31 11:05:09 · 97 阅读 · 0 评论 -
js 链式调用的实现原理
var doudou = { makeup: function () { console.log('I am beautiful!'); return this; }, eat: function () { console.log('I am strongger!'); return this; }, exercise: function () { console....原创 2019-08-27 13:35:43 · 388 阅读 · 0 评论 -
js实现无缝无限循环轮播图片
如果有问题或者更好的方法,欢迎留言效果图如下:具体代码见下面:<!DOCTYPE><html><head><title>06</title><meta charset="utf-8"><script>window.onload = function () { var ul = ...原创 2019-06-18 19:45:22 · 5587 阅读 · 0 评论