ES6 中的 super 关键字

前言 关于 ES6 中的 super 关键字估计大家跟我一样还见得比较少,不过没关键,在文我们就来初探下 super 关键字。 super 关键字 在讲 super 关键字之前,我们先来看一段超简单的代码: class parent{ constructor(){} } class children extends parent{ constructor(){} } 其实在上面什么都没有做的类中的 constructor 构造方法我们也可以不写,因为类中如果没有显式地定义构造函数的话...

2018
02-01

ES6 中的构造函数(constructor)详解

前言 ES6 中的构造函数详解,在 ES5 中也已经有类似的实现了,只是在 ES6 这里换了一种方式来实现而已。 构造函数之旅 ES6 之前 在 ES6 以前我们会像下面这样定义构造函数并生成实例的: function Person(p){ this.name = p.name; this.age = p.age; } person.prototype.say = function(){ console.log(this.name,this.age); } // 并通过 new 来创建一个实例 var xiaoming =...

2018
01-30

JavaScript 中的定时器执行机制大解密

前言 JavaScript 中的定时器你一定用了不少,比如 setTimeout、setInterval 等。但我们对他的了解又有多少呢?我承认我以前一直用它只是因为他能为我延迟几秒执行某些操作,它确确实实为我解决了不少问题,还有一些比较“奇葩”(由于技术水平有限,未能找出原来)的问题也是通过定时器来解决的。但我慢慢地发现,我对定时器的了解也只是表面上的,而它的运行机制我却不闻不问,也就是我只看到了它成功的一...

2018
01-28

前端开发中的各种宽高获取整理

获取可视区的宽高 document.documentElement.clientWidth document.documentElement.clientHeight 获致滚动条滚动距离 // 主流浏览器中,用下面的代码获取值 document.documentElement.scrollTop document.documentElement.scrollLeft // 搜狗浏览器、360 浏览器、IE 浏览器中,用下面的代码获取值 document.body.scrollTop document.body.scrollLeft // 兼容写法 document.documentElemen...

2017
12-28

Echarts+百度地图实战大解密

数据展示有很多种方式,在前端里常用的就是通过 Echarts 实现数据的多种展示方式 ,因为 Echarts 它是完全免费的,还有它的强大,好用还真的让人无话可说,虽然用得不多,但感觉跟其它收费的都是那么好用,贴心。 首先我把官方的一个例子贴出来,原汁原味的代码:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/ 下面就是这个示例的效果图: 这个图都是官方的示例图,一点都没变,如果说有...

2017
12-25

对象(Object)的遍历方法整理

前言 对象的遍历与我们形影不离,不管是数组还是一个形如{ key:value} 的对象,很多时候我们都得遍历一个对象。为此有必要把遍历对象的方法整理成章,以备必时之需。 数组遍历 for 循环 for 循环可以说是最原始的遍历方法,常常被用来遍历数组。 let arr = [1,2,3,4,5,6,7]; for(var i=0;i<arr.length;i++){ console.log(i,arr[i]); } forEach() forEach() 方法是用来遍历数组的,它可以...

2017
12-20

数组(Array)的属性和方法

平时数组使用得比较多,但常常会有些方法没记住它的用法,比如:某些方法眼熟但具体的用法却不太清楚。这样的情况在我身体已经发生了很多次,所以我有必要把数组的一些属性和方法整理出来,即使自己忘记了也可以有更加直接的查阅入口。说走就走的旅程,数组可以大致分成两块属性和方法。 Array 属性 Array 的属性其实也不多,那那么两三个,具体如下: Array.length 返回数组成员个数。 Array.prototy...

2017
12-17

《ES6 标准入门》学习笔记(第二十五章:读懂 ECMAScript 规格)

《ES6 标准入门》的第二十五章主要内容也不多,但信息量可以却不少。 上面的脑图只是把书中的向个大标题摘抄下来而已也没有什么很有用的信息,通过本章我们只需要知道一点就可以了,如果要想对 JavaScript 的某些特性不了解,那么就可以到官方查看规格文件。这也是你学习 JavaScript 最基本最全面的资料。http://www.ecma-international.org/。我们不妨来感受一下,就拿上面的相等运算符为例: 首先规格对...

2017
12-16

《ES6 标准入门》学习笔记(第二十四章:编程风格)

《ES6 标准入门》的第二十四章主要讲的是编程风格。这一章跟实践就很接近了,如果你此时可以写代码的话,那么这就可以说是一个实践了。 你还可以参考这个网站:http://jscs.info/ ,来学习更多的风格规范。 上面的脑图其实可以看作是对前面章节的一个简单的总结,让你看完这章后有豁然开朗的感觉。

2017
12-16

《ES6 标准入门》学习笔记(第二十二章:Module 的语法)

《ES6 标准入门》的第二十二章主要讲了 Module 的语法和基本套路。这章内容对于日后学习 angular 2+ 很有帮助。把这篇文章号透了,在 angular 的模块导入导出就如鱼得水了。 严格模式的一些限制: 变量必须声明后再使用 函数的参数不能有同名属性,否则报错 不能使用 with 语句 不能对只读属性赋值,否则报错 不能使用前缀 0 表示八进制,否则报错 不能删除不可删除的属性,否则报错 不能删除变量 delete...

2017
12-15

《ES6 标准入门》学习笔记(第二十章:Class 的继承)

《ES6 标准入门》的第二十章主要是讲 Class 的继承,在 ES6 中的继承跟其它语言的继承一样,通过 extends 关键字实现子类 继承父类。而在 ES6 之前,我们一般都是通过 call 来改变 this 的指向实现“另类”的继承。在 ES6 里我们就可以光明正大的跟原汁原味的继承谈恋爱了。 继承中讲到的 prototype 可能会比较绕一点,但它不难,只要你愿意把泡妞的心思贡献出那么千万份之一就足以把这个问题弄得一清二楚了...

2017
12-15

《ES6 标准入门》学习笔记(第十四章:Promise 对象)

《ES6 标准入门》的第十四章讲 Promise 对象,Promise 对象就是用来处理异步操作的。比如:ajax 请求。在实践的项目开发中我们也总是会用到异步请求,在不久的将来,我们就可以放心地使用这个对象了。 Promise 对象没有什么神秘的地方,能过上面的脑图,你可以很方便的知道 Promise 对象的基本用法以及 Promise 对象的一些方法是如何使用的。更详细的可以网上查看相关资料,或者查阅本书,毕竟这里只是在...

2017
12-11

《ES6 标准入门》学习笔记(第十三章:Reflect)

《ES6 标准入门》的第十三章介绍了Reflect。跟第十二章的一样简单,不信你看看。 Reflect.applay(target,thisArg,args) 等同于 Function.prototype.apply.call(func,thisArg,args),用于绑定 this 对象后执行给定函数。 Reflect.contructor(target,args) 等同于 new target(…args),提供了一种不使用new 来调用构造函数的方法。 Reflect.get(target,name,receiver) 查找并返回 target 对象的 name ...

2017
12-10

《ES6 标准入门》学习笔记(第十二章:Proxy)

《ES6 标准入门》的第十二章主要是讲 Proxy。Proxy 用于拦截一些操作的默认行为,并且可以对拦截的默认行为进行修改。没有别的,本章 Proxy 的介绍内容不多,主要是对 Proxy 支持的一些拦截操作的讲解。 get(target,propKey,receiver) 拦截对象属性的读取。 set(target,propKey,value,receiver) 拦截对象属性的设置。 has(target,propKey) 拦截 propKey in proxy 的操作,返回一个布尔值。 deletePropert...

2017
12-10

《ES6 标准入门》学习笔记(第十一章:Set 和 Map 数据结构)

《ES6 标准入门》学习笔记的第十一章主要是讲 Set 和 Map 数据结构,从脑图上看起来貌似内容很多,但是当你仔细分析下时,就会发现其实里面知识点也不是很多,主要都是一些属性和方法介绍。并且 Set 和 Map 也很很多相似之处,所以记起来还是非常地容易的。

2017
12-08

《ES6 标准入门》学习笔记(第十章:Symbol)

《ES6 标准入门》的第十章主要是讲 JavaScript 中的一个全新的数据类型 Symbol。 看这一章的时候觉得内容很不好理解,因为这是一个全新的东西,从来没有接触过。为此这一章我也看了好几篇,也才领悟了其中的一小部分,更多的内容也只是走马观花罢了。不过也不要紧,相信在不久的将来 Symbol 肯定会在脑中就会突然的开了花。

2017
12-05

《ES6 标准入门》学习笔记(第九章:对象的扩展)

《ES6 标准入门》的第九章主要是讲对象的一些方法扩展。比如对象的复制(浅拷贝)、遍历等。 【属性的可枚举】:ES5 3 个方法和 ES6 新增的 1 个方法会忽略 enumerable 为 false 的属性 for…in 循环:只遍历对象自身的和继承的可枚举属性 Object.keys():返回对象自身的所有可枚举属性的键名 JSON.stringfy():只串行化对象自身的可枚举属性 Object.assign():只复制对象自身的可枚举属性  

2017
12-04

《ES6 标准入门》学习笔记(第八章:数组的扩展)

《ES6 标准入门》的第八章主要是讲数组的一些方法扩展,换个角度其实就是让数组在处理数据的时候更加的灵活。 这章比较简单,没有很多的东西,基本都是新增的一些方法。 【扩展运算符】 :让 apply 无地自容,只好慢慢地淡出我们的视线。因为 … 让数组的参数转换变得很简洁好用: 看过来 // 以前函数传参 var args = [1,2,3]; function f(x,y,z){ // ... } f.apply(null,args); // 现在...

2017
11-30

《ES6 标准入门》学习笔记(第七章:函数的扩展)

《ES6 标准入门》的这一章虽然说是函数的扩展,但更多的是函数的优化,让函数变得更精简,更美妙。 【函数的默认值与解构赋值的结合使用】可以说是 ES6 的一个非常棒的功能,让你在给函数设置参数时易如反掌。但是这里我们还得注意下面两种写法的不同: 看过来 function m1({x=0,y=0} = {}){ console.log(x,y); } function m2({x,y} = {x:0,y:0}){ console.log(x,y); } // 都不传 m1(...

2017
11-26

《ES6 标准入门》学习笔记(第六章:数值的扩展)

这一章主要介绍数值的一些方法和属性。对于这一章我个人觉得知道大概有些方法及属性就足够了,当遇到有这样的需求时,脑中能够有这样一幅脑图就行,不需要有多清晰,只要有就好。 ES6 为Math 对象新增了不少方法,我们也不必把所有的都记下来,把常用的记下来就可以。比如二进制和八进制的表示法、parseInt() 方法和 parseFloat() 方法已经迁移到 Number 对象上。 对于上面说到的 integer 类型,几乎所有...

2017
11-23

《ES6 标准入门》学习笔记(第五章:正则的扩展)

《ES6 标准入门》第五章,主要内容是介绍了ES6 对正则的一些增加语法。内容有点多,但把它拼成一个脑图后就清晰可见了。 注意 图中有用到 \n 的,\ 和 n 之间多了一个空格,本来是不能有的,但不加个空格就会把它解析了,所以还是无奈之举。 图中有些文字比较长,本来想图中只是写个大概,然后再用文字补上一些,但想想,还是能在图上写的,就尽量写在图上,因为这样来得更直观,更好记。可能会有些知识...

2017
11-23

《ES6 标准入门》学习笔记(第四章:字符串的扩展)

《ES6 标准入门》的第四章主要是介绍 ES6 加强对 Unicode 的支持,以及扩展了字符串对象。 Unicode 的表示字符的增加,以前对于超过\u0000~\uFFFF这个范围的,必须用2个双字节的形式表达,现在有了{}我们就可以像下面这样写: 以前 console.log("\uD842\uDFB7"); // console.log("\u20BB7"); // ₻7 但是现在我们就可以通过{}来显示所对应的码点(大于\uFFFF): 现在 console.log("\u{20BB7}"); //...

2017
11-21