![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
赫奇。
孤舟蓑笠翁,独钓寒江雪
展开
-
JavaScript之你不知道的reduce
reducelet names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];var sum = names.reduce(function(prev, cur, index, arr) { if(cur in prev){ prev[cur]++ }else { prev[cur] = 1 }...原创 2019-12-18 21:02:33 · 107 阅读 · 0 评论 -
原生JS实现Promise
为了能完成一周至少一更的计划,还没有写讲解,先放上源码。为了便于理解,我把代码调整成相对精炼。最近忙着学习算法和Python,我会在空暇时间抓紧写讲解。希望我能够帮到你,感谢。源码function MyPromise(executor) { var self = this self.status = 'pending' self.onResolvedCallback =...原创 2019-10-23 16:32:35 · 207 阅读 · 0 评论 -
一分钟理解JavaScript宏任务和微任务
JavaScript是单线程的。所以有了同步异步的概念,想必不用说了,异步如常见的setTimeout、Promise。这两个东西却有本质上的区别。setTimeout是宏任务,Promise是微任务。同为宏任务的有setInterval等,同为微任务的有Node的process.nextTick等。见下图。相比于宏任务,微任务的开销会小一点。JS代码执行的顺序是,按着主线程执行代码,当遇到一...原创 2019-10-17 13:42:47 · 1273 阅读 · 2 评论 -
为什么说DOM操作是昂贵的
总体上来说,操作DOM对象时,会触发浏览器的布局(layout) 和 绘制(paint) 行为,这两个罪魁祸首会导致DOM卡慢,占用内存较高等,从而影响用户体验。浏览器渲染引擎工作流程创建DOM树 HTML分析器,分析HTML元素,构建一颗DOM树创建StyleRules CSS分析器,分析CSS文件,构建Rules树创建Render树 将DOM树和Rules树关联起来,构建一颗...原创 2019-10-12 13:34:15 · 1375 阅读 · 2 评论 -
五子棋游戏(JavaScript+JQuery+Canvas)
一个简单的五子棋小游戏,自带音效。效果如下HTML<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalab...原创 2019-10-11 15:55:40 · 538 阅读 · 0 评论 -
jQuery源码学习
最近学习一点jQuery源码,并且写了一个很简单的myquery。没有考虑ie兼容。涉及到知识点如下Dom类数组extend拓展静态方法noConflicteach原型方法仿css仿innerHTML。。。(function (window, undefied) { let myjquery = function (selector, cont...原创 2019-10-09 18:04:55 · 100 阅读 · 0 评论 -
Javascript实现深拷贝
JS实现深拷贝,有一个大招。利用JSON的解析和序列化。JSON.parse(JSON.stringify())这个我常用,可谓是一招鲜,吃遍天单独实现数组的深拷贝,下面列出几种方法map() 直接遍历[…] 扩展运算符slice()Array.from()单独实现对象的深拷贝,下面列出几种方法Object.assign(){…}Object.create...原创 2019-10-08 12:59:28 · 161 阅读 · 0 评论 -
Javascript部署iterator接口
JS给对象部署iterator接口并封装成函数Iterator是一种接口,为各种不同的数据结构提供统一的访问机制。什么意思呢,你想用for …of遍历你的数据结构, 就得部署Iterator接口。原生提供这个接口的数据结构有。数组、类数组对象(如argument)、Map和Set结构。let arr = [1,2,3]let x = arr[Symbol.iterator]()x.ne...原创 2019-10-06 11:09:34 · 601 阅读 · 0 评论 -
Javascript访问对象点运算符.和方括号[]的区别
js在访问对象属性和方法时会用到两种方式obj.aobj[a]两种方法本质作用一样,但是在用法上 [] 比.有更多的功能。方括号可以放不能作为标识符使用的包含数值或者段横(-)的字符串obj.1 //errorobj.- //errorobj[1] //okobj['1'] //ok 和上作用相同obj['-'] //ok方括号里可以放变量...原创 2019-10-06 09:59:44 · 394 阅读 · 0 评论 -
ES6学习总结(六)
ES6学习总结(六)本节准备讲Module的加载实现。Module加载了Module实现了本期内容就到此为止了,再见!原创 2019-09-14 21:35:58 · 182 阅读 · 0 评论 -
ES6学习总结(五)
class和class继承为什么要引入class?要知道,JavaScript是没有类的概念的,我们在面向对象编程的时候,通常会是编写一个构造函数。把属性写在函数里,方法放在原型上。function constructor(a,b){ this.a = a; this.b = b;}constructor.prototype.add = function (){ retur...原创 2019-09-14 15:19:41 · 138 阅读 · 0 评论 -
ES6学习总结(四)
ES6学习总结(四)本章准备介绍下Promise对象,Generator函数和async函数。1.Promise对象在之前,我们进行异步的操作时,通常会使用回调函数。比如要读取三个文件,如果只能是在读取上一个,才能打开下一个文件的情况下,依次读取他们,并将他们头尾拼合在一起。 fs.readFile(fileA, function (err, data) { let re...原创 2019-09-13 23:09:26 · 155 阅读 · 0 评论 -
ES6学习总结(三)
ES6学习总结(三)本节主要是以下内容,其中重点是 proxy和Reflect 这一点Symbol对象Set和MapIterator 和 for…ofproxy和Reflect1.Symbol对象在很多时候,我们在定义对象的属性时很容易遇到重名的情况,或者使用第三方的插件时,容易遇到重名的情况。ES6引入了第七种数据类型Symbol,作为一个具有 独一无二 的值...原创 2019-09-13 12:46:54 · 279 阅读 · 0 评论 -
ES6学习总结(二)
ES6学习总结(二)继上一节,本节继续巴巴 =v=1.数值的拓展这一张主要是Number和Math新增方法,上图!2.函数的拓展函数的默认值 这个第一节讲过,可以和解构赋值组合使用 function add( x = 3, y = 5) { return x + y}add() //8 function add( [x = 3, y = 5] = []) ...原创 2019-09-12 20:32:17 · 172 阅读 · 0 评论 -
ES6学习总结(一)
ES6学习总结(一)前言最近读了阮一峰老师的 《ES6标准入门》,这本书涵盖的干货很大,短时间内吸收的有些力不从心。在这里把我个人认为比较 常用的方法 或者需要注意的点简单总结下。 另外我将主要章节的知识树作成了 思维导图 分享,部分内容可能在表达上不严谨,仅供初学者参考使用。1.let 和 constlet不会像var一样,存在变量提升 ,所以必须先声明才能使用。{ x ++; le...原创 2019-09-12 19:51:43 · 355 阅读 · 0 评论 -
简单理解JS原型
简单理解JS原型先附上一张图及代码function Person(){ this.name = 'tom'; this.age = 22; this.sayName = function (){ log(this.name) }}let person1 = new Person()let person2 = new Person()...原创 2019-08-27 13:10:41 · 137 阅读 · 0 评论 -
Jquery+Css实现行星运动源码分享
css+jquery实现行星运动源码分享在菜鸟教程上挖到的小例子,自己玩着改了改,分享一波源码。html部分<div class="solarsys"> <!--太阳--> <div class='sun'></div> <!--水星轨道--> <div class='mercuryOrbit'>&l...原创 2019-07-20 14:47:40 · 567 阅读 · 0 评论 -
JS解决因循环绑定click事件失效
很多js新手都会在绑定事件遇到绑定失效的问题。大致思路就是,比如用一个循环让对应的button按钮绑定对应的事件。比如这样 <button id="1">1 </button> <button id="2">2 </button> <button id="3">3 </button></body>...原创 2019-07-20 13:19:39 · 2118 阅读 · 5 评论