ECMAScript6

ECMAScript6 之 decoretors

类的修饰许多面向对象的语言都有修饰器( Decorator )函数,用来修改类的行为。@testable class MyTestableClass { // ... } function testable(target) { target.isTestable = true } MyTestableClass.isTestable // true testable 函数即为修饰器,为 MyTestableClass 类添加了名为 isTestable 的静态属性。一个修饰器可以理解为包装之后跟着的类的函数。@decorator class A {} // 等同于 class A {} A = decorator(A)

  • aco Yang
    aco Yang
2 min read
ECMAScript6

ECMAScript 之 Generator 的异步使用技巧

异步在 js 界,异步是获取数据的主旋律,大概有以下几种callback 回调Promiseevent 事件简单的回顾一下以上 3 种模式:回调简单的来说就是将需要执行的函数传入异步调用内,在异步调用结束后,执行函数,写出的代码会是这样:function doSomeAsync(callback) { let data = {/* 数据 */} setTimeout(() => { callback(data) }) } doSomeAsync((data) => { // do some thing }) 但试想一下,如果说回调之中还有回调,那么将会形成一个类似金字塔的结构(回调地狱)

  • aco Yang
    aco Yang
6 min read
ECMAScript6

ECMAScript6 之 Generator

简介Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。简单来说,一个 Generator 函数,就像是搭建一段楼梯,它规定了楼梯的步数以及怎么走,它生成的函数的执行就像是走楼梯一般,每走一步都会有具体的执行内容以及返回值,并且不能后台只能往前走( yield ),或是走到头了( return )。一个 Generator 函数的标志就是

  • aco Yang
    aco Yang
6 min read
ECMAScript6

ECMAScript6 之 Iterator & for…of

Iterator 概念遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。具体到语言层面来说,实现了以下几个东西规定:对象下部署一个统一的方法统一的方法返回了统一的结构上面两点中的统一方法的方法名就叫: Symbol.iterator返回的结构统一为:{ next: function }next 方法有统一的返回值结构:{ value: any, done: boolean }ES6 中,Array/Map/Set/String 等对象都部署了以上内容对于部署了上述特性的对象,有一个统一的名字:可遍历对象。

  • aco Yang
    aco Yang
4 min read
ECMAScript6

ECMAScript6 之 Reflect

简述Reflect 意味着反射,从字面意思上就可以理解为是语言层面上的内容,在 ES6 中其出现的目的主要有以下几个将 Object 下属于语言内部的方法,放到 Reflect 上,并且未来新方法只在 Reflect 上部署。使得方法的返回更加合理,解决之前在 Object 下的一些方法的返回值不合理照成的逻辑混乱。让命令式的行为变成函数行为,如: name in obj ==> Reflect.has(obj, name)与 Proxy 下的方法一一对应,这样就能让 Proxy

  • aco Yang
    aco Yang
1 min read
ECMAScript6

ECMAScript6 之 Proxy

简介Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。一个简单的例子let obj = new Proxy({}, { get(target, key, receiver) { console.log(`getting ${key}!`) return Reflect.get(target, key, receiver)

  • aco Yang
    aco Yang
3 min read
ECMAScript6

ECMAScript6 之尾调用优化

定义尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。简单的理解就是在函数体内,最后一行 return 了一个函数调用。注:仅仅只能是函数调用,任何其他的形式都不能认为是尾调用。以下都不属于尾调用// 情况一 function f(x){ let y = g(x) return y } // 情况二 function f(x){ return g(x) + 1

  • aco Yang
    aco Yang
5 min read
ECMAScript6

ECMAScript 6 之箭头函数

简介对于箭头函数的出现,我是这样理解的:function 在 javascript 中是一种类似与流程的一种存在,一个 function 代表一种处理数据的逻辑。在 ES6 中, function 的这一特性被进一步的认可和强调,因此就产生了箭头函数。箭头函数let f = v => v 上面的等同于以下函数var f = function(v) { return v }; 当然函数参数存在没有或者多个情况var f = () => 5 // 等同于 var f

  • aco Yang
    aco Yang
5 min read
ECMAScript6

ECMAScript 6 之函数

默认值想必在写函数时,都会有一个困惑:要是在这个函数调用的时候,参数没有传入时,该怎么办?设置默认值。对,所以大部分的函数都会有以下的代码。function f(a, b) { a = a || {/*...*/} /* ... */ } 以上代码相信绝大多数的 javascript 开发者都写过,乍一看是没啥大问题的,但是如果传入的值是 false 呢?那么 a 就会被替换成默认值。为了避免这个问题就应该将代码改一改:if( typeof a === 'undefined' ){ a = {/* ... */} } 这就大大增加了代码量,而且一个痛点莫名其妙的增加了:增加了代码的不可读性。

  • aco Yang
    aco Yang
8 min read
ECMAScript6

ECMAScript 6 之数组

Array.from在 javascript 中有这样一类的存在:类数组,它不是数组,却能像数组那么操作,如下便是一个类数组结构。let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 } 类数组结构,能像数组哪样取值、 for 循环,但是却不能适用数组 forEach/splice 等数组特定的方法,在 ES5 中必须使用一些特殊的方法来将一个类数组结构转化成数组,而在 ES6 中, Array

  • aco Yang
    aco Yang
5 min read
ECMAScript6

ECMAScript 6之解构变量

上一节看到 ES6 中新增加的块级作用域,解决了一些不必要的闭包,让 js 代码的编写能更加的保险与便利,这里我不是很想说更加的安全,因为代码是人写的,好坏与否、安全与否都不是代码的问题,当然闭包在 js 中的应用不仅仅是使用在锁住块级作用域。块级作用域的出现也不能取代所有的闭包。这一节来接着看 ES6 中对于赋值的新玩法。简单说说有这样一个场景:你向你的服务器提交了一次请求,获取一些基本的参数来初始化页面。假设 config 就为后端传送回来的数据,而你需要去获取其中的配置项。当然先写 ES5 的。var config = { config1: 520, config2:

  • aco Yang
    aco Yang
11 min read
javaScript

ECMAScript 6起步

ECMAScript 6 已经开始逐渐代替 ECMAScript 5 了,满载着好奇去看了看,毕竟要跟上时代潮流嘛。本以为以自己目前的 javascript 功底,还是可以驾驭,但是刚看了两章就不得不写点东西来加深记忆了和理解文章内容了。http://es6.ruanyifeng.com/由于 ECMAScript 6 有很多内容的更新,所以这一系列会持续很久,同时对这一系列做下说明:主要是对该教程所说内容的摘记同时加上一些自己的理解。ECMAScript 6 的出现,并不是说完全取代了 ECMAScript 5 的内容,所以这个系列需要有良好的 ECMAScript

  • aco Yang
    aco Yang
1 min read