ES6
文章平均质量分 71
JavaScript ES6系列文章讲解
kittyjie
这个作者很懒,什么都没留下…
展开
-
ES6学习系列目录
ES6学习系列目录原创 2015-12-14 08:46:16 · 2059 阅读 · 0 评论 -
ES6学习——ES6背景介绍
关于ES6的介绍网上有很多,就没必要多说了,下面列出两个参考。中文的可以参考这里:https://zh.wikipedia.org/wiki/ECMAScript,英文的可以参考这里:https://en.wikipedia.org/wiki/ECMAScript从ECMA-262 Edition 3 到 Edition 6 经历了6(2009~2015)年的时间,原创 2015-12-15 07:39:53 · 1653 阅读 · 0 评论 -
ES6学习——环境搭建
ES6规范2015年发布,现在浏览器对它的支持正在不断的加强,具体查看浏览器对ES6支持的程度,请参考https://kangax.github.io/compat-table/es6/,如果想查看浏览器对所有JS,CSS,HTML5新特性的支持,请参考http://caniuse.com/想要学习ES6,有几种方法:1. 在浏览器上尝试,这需要浏览器对ES6的支持,目前看支持程度原创 2015-12-16 08:31:46 · 9205 阅读 · 0 评论 -
ES6学习——新的语法:Symbol private类属性
ES6本身并没有提供class属性的私有(private)还是公有(public)的特性,以前要实现类属性的私有化,一般可以通过下面这种方法进行模拟:function Person(name) { var _name = name this.setName = function(name) { _name = name; } this.getName = functio原创 2017-05-02 10:00:48 · 3905 阅读 · 0 评论 -
ES6学习——集合(Collections):WeakMap 应用示例
这里看一下如何利用weakset实现class属性的私有化:var Person = (function() { var private = new WeakMap(); function Person(name) { var privateProperties = { name: name }; pri原创 2017-05-02 10:10:49 · 1194 阅读 · 0 评论 -
ES6学习——新的语法:块级作用域概述
在ES6之前,JS中只有两种作用域:全局和函数级别作用域。就是说你声明的变量要么可以全局访问,要么在函数内访问。当然了,函数内肯定能访问全局的变量//全局级别var globalVar = 1;window.globalVar2 = 2//函数级别(function(){ var f1 = 1;})(); function func(){ var原创 2015-12-17 09:15:25 · 1565 阅读 · 0 评论 -
ES6学习——新的语法:let
let的主要用途就是声明块级作用域的变量,看一下规范是怎么说的,请仔细看红字部分,后边TDZ章节会详细讲这点:13.3 let and const declarations define variables that are scoped to the running execution context’s LexicalEnvironment. The variables are creat原创 2015-12-18 08:56:26 · 3703 阅读 · 0 评论 -
ES6学习——新的语法:const
ES6终于加入了声明常量的语法,这种语法在其他语言中几乎都有,看一下用法: const c1 = 1; const c2 = {}; const c3 = [];Object.getOwnPropertyDescriptor(window,"c1")//Object {value: 1, writable: false, enumerable: true, configurable原创 2015-12-21 08:15:32 · 4499 阅读 · 0 评论 -
ES6学习——新的语法:Temporal Dead Zone(TDZ)
应该说TDZ在JS中是一个比较新的概念,在规范里我也没有搜到对这个概念的具体定义,主要涉及let/const,函数参数默认值,subclass等的使用中。(一)下面先看let/const中的TDZ问题,规范中这样写到:13.3 let and const declarations define variables that are scoped to the running exe原创 2015-12-22 09:24:37 · 1890 阅读 · 0 评论 -
ES6学习——新的语法:函数参数Spread
Spread操作符(...)是比较新的特性,但是在ES6的规范中,没有找到单独的章节对这个操作符进行说明,这个操作符主要用在两种情况下:函数传参和数组生成,这节主要讲解第一种情况。规范的12.3.6.1中对函数参数列表的解释如下:ArgumentList : ... AssignmentExpression1. Let list be an empty List.2. Le原创 2015-12-23 08:21:58 · 5460 阅读 · 0 评论 -
ES6学习——新的语法:数组元素Spread
前一篇文章讲了Spread操作符在函数参数中的用法,这篇简单讲一下Spread操作符在数组元素中的应用。直接看代码吧:[1, ...[2,3], 4]//[1, 2, 3, 4]let x = ['a', 'b'];let y = ['c'];let z = ['d', 'e'];let arr = [...x, ...y, ...z]; // ['a', 'b', 'c', 'd原创 2015-12-24 08:18:43 · 1638 阅读 · 0 评论 -
ES6学习——新的语法:Rest
Rest操作符和Spread操作都是用三个点(...)表示,但作用整好相反。Rest操作符一般用在函数参数的声明中,而Spread用在函数的调用中。下面看个例子: 'use strict'; function func(...args){ console.log(args);//[1,2,3,4] } func(1,2,3,4);我们知道在strict mode下,对原创 2015-12-25 08:48:01 · 5296 阅读 · 0 评论 -
ES6学习——新的语法:函数参数默认值
这个特性在其他语言中已经早有实现,ES6中加入了这个新特性,但是就目前来看还没有主流的浏览器支持这个特性,在没有这个特性之前,我们也经常会对函数参数设置默认值,例如下面这个例子:function foo(x,y) { x = x || 11; y = y || 31; console.log( x + y );}ES6中可以把上面的代码简化:function原创 2015-12-28 09:30:55 · 12930 阅读 · 0 评论 -
ES6学习——新的语法:对象解构(Object Destructuring)
解构在ES6中应该是一种新的语法,在其他语言中我没怎么见到这种语法,也可以说是赋值操作的另一种形式,因为解构的整个定义都在规范的赋值操作符章节下面,有兴趣的可以看规范的12.14.5。目前浏览器对这个新语法的支持还不是很好,但是Firefox 43已经支持了大部分解构特性,这里我们仍然继续使用Kinoma Studio来测试代码。这篇文章主要讲对象的解构赋值操作,先看个简单的例子有点印象:原创 2015-12-30 16:55:46 · 22858 阅读 · 2 评论 -
ES6学习——新的语法:数组解构(Array Destructuring)
上一篇文章讲了Object的解构,这篇讲一下Array的解构,概念大同小异,只是写法会有一些不同,先看个简单的例子:let [x, y] = ['a', 'b','c']; // x = 'a'; y = 'b'跟对象解构一样,先探讨一下赋值表达式的右侧应具备什么条件才能进行解构赋值,规范的12.14.5.2有这样的描述:ArrayAssignmentPattern : [ ]原创 2015-12-31 10:03:31 · 18880 阅读 · 0 评论 -
ES6学习——新的语法:函数参数解构
解构赋值也可以发生在函数传参的时候,ES6中函数参数的灵活性大大提高了。函数参数的解构既可以用数组形式,也可以用对象形式,先看两个简单的例子:function foo( [ x, y ] ) { trace( x + " " +y );}foo( [ 1, 2 ] ); // 1 2foo( [ 1 ] ); // 1 undefinedfoo( [] );functio原创 2016-01-01 15:56:32 · 12771 阅读 · 0 评论 -
ES6学习——新的语法:对象字面量扩展(Object Literal Extensions)
对象字面量大家应该都熟悉,就是两个大括号({}),ES6中对对象字面量增加了几个实用的新语法,大大增加了它的易用性。1)精简属性:var x = 2, y = 3,o = {x,y};console.log(o)//Object { x: 2, y: 3 }2)精简方法:let obj = { conciseMethod(x, y) { console.l原创 2016-01-02 09:22:45 · 3296 阅读 · 0 评论 -
ES6学习——新的语法:数值字面量扩展(Number Literal Extensions)
在ES6中加入了8进制和2进制的数值表示形式,ES6之前已经有16进制的表示方法了,所以现在JS数值类型可以表示经常看到的2进制,8进制和16进制了。2进制:0b11//38进制:0o77//63我们用typeof操作符检查上面表示形式的类型,都是number:typeof 0b11 // "number"typeof 0o77 //"number"还可以像其它数值类原创 2016-01-02 15:45:49 · 1301 阅读 · 0 评论 -
ES6学习——新的语法:Arrow Functions
Arrow Functions并不是什么新鲜玩意了,在Java 8和Apple Swift语言中也都有这种写法,只不过有的语言用单箭头(->),JS中用双箭头(=>),大同小异,单箭头更像C或者C++中的指针语法。ES6中描述Arrow Functions的章节在14.2,有兴趣的可以自己去看。下面先看个简单的例子,然后在介绍其他特征:let arr = [1, 2, 3];le原创 2016-01-04 09:23:48 · 2849 阅读 · 0 评论 -
ES6学习——新的语法:Symbol概述
Symbol应该是JS中全新的概念,相当于给JS添加了一种新的类型,我们知道JS有6种类型,以typeof出来的结果为准:string,number,boolean,object,function,undefined。现在多了一种symbol类型,这些类型还可以分成值类型和引用类型,symbol更倾向是值类型。规范中对于Symbol的介绍在6.1.5章节,简单看一下:The Symbol原创 2016-01-05 08:45:15 · 1238 阅读 · 0 评论 -
ES6学习——新的语法:Symbol API介绍
关于Symbol API的描述在规范的19.4节中,有兴趣的自己去看。Symbol的API并不多如果不算well known的symbols,一个一个过一下:1)Symbol函数When Symbol is called with optional argument description, the following steps are taken:1. If NewTarget i原创 2016-01-05 14:33:44 · 1573 阅读 · 0 评论 -
ES6学习——新的语法:Symbols——Symbol.iterator
ES6中内置了一些Symbol,其中最重要的一个恐怕就是Symbol.iterator了,相当于迭代器的接口,只有对象里有这个symbol的属性,才可以认为此对象是可迭代的。我们先看一下规范中对这个symbol的描述:A method that returns the default Iterator for an object. Called by the semantics of th原创 2016-01-06 08:51:19 · 10945 阅读 · 1 评论 -
ES6学习——新的语法:Symbols——Symbol.toPrimitive,Symbol.hasInstance,Symbol.toStringTag,Symbol.species
这节讲的这四个没有Symbol.iterator常见,但可能也会用到,由于浏览器对这些well-known symbols不是都支持,所以我们需要用Kinoma来测试这些特性。先看比较简单的Symbol.toStringTag: function Obj(){ } Obj.prototype[Symbol.toStringTag] = "-Obj-"; let原创 2016-01-06 15:03:52 · 4163 阅读 · 0 评论 -
ES6学习——新的语法:其它Well-Known Symbols
这篇文章过一下剩下的well-known symbols,就不在详细写例子了。Symbol.isConcatSpreadable:数组的concat方法会把参数中的数组给扁平化,这个symbol就是控制是否允许这样做。let arr1 = ['c', 'd'];['a', 'b'].concat(arr1, 'e');// ['a', 'b', 'c', 'd', '原创 2016-01-06 16:49:20 · 2217 阅读 · 0 评论 -
ES6学习——新的语法:for..of 循环
for...of循环是ES6中新加的一种遍历迭代器的语法。看规范中的一种形式描述,在13.7.5章节,我删了一些不重要的部分:IterationStatement : for ( var ForBinding of AssignmentExpression ) Statement1. Let keyResult be the result of performing ForIn/OfHea原创 2016-01-07 07:50:00 · 5778 阅读 · 0 评论 -
ES6学习——新的语法:Template Literals
原来在用JS处理字符串的时候,经常有替换字符串模板中变量的需求,因为JS原生是不支持的,所以可以用正则表达式处理,github上也有好多开源的JS模板引擎处理这件事。ES6中直接把这个功能加进来了,方便了大家。这章的规范在11.8.6以及12.2.9,有兴趣的自己去看看。JS中用“${}”种形式表示template中的变量,用·${}·表示模板,看个例子:var name = "K原创 2016-01-07 13:46:51 · 909 阅读 · 0 评论 -
ES6学习——新的语法:Tagged Templates
这个概念我也不知道怎么解释,还是直接看规范给出的描述吧,在12.3.7章节:A tagged template is a function call where the arguments of the call are derived from a TemplateLiteral (12.2.9). The actual arguments include a template object原创 2016-01-08 08:41:57 · 1197 阅读 · 0 评论 -
ES6学习——类语法:基本概念介绍
许多人一直说javascripr语法中没有类语法,不利于大型面向对象的项目开发。ES6中终于在千呼万唤中加入了类语法,但实质上还是对原型继承的一种封装,写起来会比较直观,我们知道OO的三大特性:封装,继承,多态。这篇文章主要围绕这三点对ES6的类语法进行介绍。规范中关于class的语法内容在14.5,有兴趣的自己去看。看段代码: 'use strict'; class原创 2016-01-10 11:06:22 · 2496 阅读 · 0 评论 -
ES6学习——类语法:继承中的原型链
上篇文章中我们讲了些类的基本概念,其中提到ES6中的类语法是对原型继承的一种封装。JS的原型继承一共有两条原型链,显示和隐式,那么在类继承的语法中,这两条原型链又是怎么样的呢?继续使用上篇文章中的例子:class Point{...}class ColorPoint extends Point{...}var p = new Point(...),cp = new ColorPoi原创 2016-01-11 08:00:40 · 3079 阅读 · 0 评论 -
ES6学习——类语法:继承中的实例构造过程
ES6的类中有个constructor函数是用来当构造函数的,如果你不写这个函数,ES6规范中会按照一定的条件给你自动添加上,在规范的14.5.14章节中有这样的描述:ClassTail : ClassHeritageopt { ClassBodyopt }10. If constructor is empty, then, a. If ClassHeritageopt is原创 2016-01-12 07:03:49 · 2572 阅读 · 0 评论 -
ES6学习——类语法:继承内置的类(如Array,Error等)
ES6的规范中在介绍内置类时,明确说明了哪些内置类可以subclass,没有说的自然不行。我们看几个内置类的描述:The Error constructor is designed to be subclassable. It may be used as the value of an extends clause of a class definition. Subclass原创 2016-01-12 08:05:35 · 1950 阅读 · 0 评论 -
ES6学习——类语法:super和new.target
这里为什么把super拿出来单独讲一下呢?可能有人要说,super谁不会用,先看个例子,你就知道super不是那么简单:class ParentA { constructor() { this.id = "a"; } foo() { console.log( "ParentA:", this.id ); }}class ParentB { constructor() { this.原创 2016-01-13 07:28:24 · 2753 阅读 · 0 评论 -
ES6学习——类语法:Symbol.species在实例创建中的应用
在Symbol的章节我们大概介绍了一下species,这篇文章详细看一下规范中是如何调用的,以及我们在自定义类的时候可以怎么使用这个symbol。我们拿Array.prototype.map举例:规范22.1.3.15 Array.prototype.map ( callbackfn [ , thisArg ] ):1. Let O be ToObject(this value).原创 2016-01-13 09:11:13 · 2522 阅读 · 0 评论 -
ES6学习——类语法:其它
这篇文章会零零散散过一些使用类语法中的问题。1)类不能当做函数调用class Point{}Point();//Uncaught TypeError: Class constructors cannot be invoked without 'new'2)类没有hoisting过程new Foo(); // ReferenceErrorclass Foo {}3)类表达式原创 2016-01-13 14:13:36 · 779 阅读 · 0 评论 -
ES6学习——集合(Collections):Map API
ES6终于加入了高级的数据结构集合,包括Map,WeakMap,Set,WeakSet等,并且都是iterable的,可以用spread操作符和for...of语法遍历。这些数据结构在其他语言中早就有了,使用起来也非常方便,这篇文章从Map讲起。规范的23.1章节定义了Map以及相关的API,有兴趣的自己去看。有人会说JS中的Object实质上不就是个Map吗?没错,但Object有个问题就是原创 2016-01-14 08:44:08 · 849 阅读 · 0 评论 -
ES6学习——集合(Collections):Map 应用示例
先看一下如何遍历Map的entries,keys,values:let map = new Map([ [false, 'no'], [true, 'yes'],]);for (let key of map.keys()) { trace(key);}for (let value of map.values()) { trace(value);原创 2016-01-14 10:27:24 · 640 阅读 · 0 评论 -
ES6学习——集合(Collections):WeakMap
WeakMap的概念在Java中一样存在,和Map的主要区别在于垃圾收集的处理不同。这个数据结构在规范的23.3章节中进行了描述。WeakMap只有key是可GC的,并不是value,这里的概念可能和Java里的不同。这里主要说一下和Map区别:1)WeakMap的key必须是object,如果不是就会抛出异常var wm = new WeakMap()wm.set(1原创 2016-01-14 16:01:18 · 1125 阅读 · 0 评论 -
ES6学习——集合(Collections):Set API
Set就是常见的集合,集合能够保证元素的唯一性,关于唯一性的确定,Set和Map都是用的SameValueZero内部函数,关于这点请参考Map章节。ES6规范的23.2章节描述了Set,有兴趣的自己去看。下面看API介绍:1)Set构造函数,可以不传任何参数,如果要传参数,参数必须是iterable的let set = new Set(['red', 'green', 'bl原创 2016-01-15 07:26:11 · 561 阅读 · 0 评论 -
ES6学习——集合(Collections):Set 应用示例
这篇文章看一些Set的使用例子。1)遍历Set的几种方法let set = new Set(['red', 'green', 'blue']);for (let x of set) { console.log(x);}[...set];[...set.values()];[...set.keys()];[...set.entries()];2)利用原创 2016-01-15 08:25:06 · 512 阅读 · 0 评论 -
ES6学习——集合(Collections):WeakSet
我们已经讲过WeakMap的概念了,同理对应的Set还有个WeakSet,在规范的23.4章节。WeakSet只能添加对象类型,并且有一些方法和Set有差异,简单说明一下差异性:1)WeakSet只能放入object类型var ws = new WeakSet()ws.add(0)//Uncaught TypeError: Invalid value used in weak set(…原创 2016-01-16 10:25:40 · 581 阅读 · 0 评论