ES2015

bianmaren 发布于 2018-11-17 14:41:41    访问

标签 : 前端开发 ES2015

image.png

一、ECMAScript的发展历程

image.png

二、ES2015能为实际开发带来什么

ECMAScript的发展速度在不断加快,影响范围越来越大,除了Web前端开发以外,借助着Node.js的力量在服务器、桌面端甚至硬件设备等领域中也发光发热着。

ES2015概述:

ES2015标注提供了许多新的语法和编程特性以提高ECMAScript的开发效率并优化ECMAScript的开发体验。
ES2015的别名:Harmony(和谐)

语法糖:

ECMAScript带来了可用性非常高的语法糖,这些语法糖的开发初衷是方便开发者使用,使用语法糖能够增加程序的可读性,从而减少程序代码出错的几率。
如ES2015中非常重要的箭头函数,大大地增强了ECMAScript在复杂业务逻辑中的处理能力。

使用ES2015前:

el.on('click',function(evt) {    var self = this;
    fecch('/api').then(function (res) {        return res.json();
    }).then(function (result) {        self.something(result);        //...
    })
})

使用ES2015后:

el.on('click',evt=>{
    fetch('/api').then(res=>res.json()).then(result=>this.something(result))
})

模块化和组件化:

在程序代码可以通过模块化进行解耦后,组件化开发便能借此进一步推进项目程序的工程化进度。组件化开发是模块化开发的高级体现,组件化更能表现出模块化开发的意义和重要性。
组件化开发所重视的是组件之间的非耦合关系和组件的可重用性,组件之间也可以存在依赖性,可以利用模块化来实现组件化开发。同一类内容块可以抽象化为一个组件,并在生产中重复使用。

const和let:

const为ECMAScript带来了定义常量的能力,let为ECMAScript修复了从前var因为代码习惯不佳而导致的代码作用域混乱等问题,同时实现了块状作用域。
const可以实现变量名与内存地址的强绑定,让变量不会因为除了定义语句和删除语句以外的代码而丢失内存地址的绑定,从而保证了变量与内存之间的安全性。

总结:语法糖、模块化、组件化等工程优势,可以在实际开发中提升开发效率和代码质量。

三、ES2015新语法

新语法:

  • let、const和块级作用域

  • 箭头函数(Arrow Function)

  • 模板字符串(Template String)

  • 对象字面量扩展语法(Enhanced Object Literals)

  • 表达式结构(Destructuring)

  • 函数参数表达、传参

  • 新的数据结构

  • 类语法(Classes)

  • 生成器(Generator)

  • Promise

  • 代码模块化

  • Symbol

  • Proxy

let、const和作用域

let和const是继var之后新的变量定义方法,与let相比,const更容易被理解。const就是constant的缩写,用于定义变量,即不可变量。const定义常量的原理是阻隔变量名所对应的内存地址被改变。
变量与内存之间的关系由三个部分组成:变量名、内存绑定和内存(内存地址)。


image.png

ECMAScript在对变量的引用进行读取时,会从该变量对应的内存地址所指向的内存空间中读取内容。当用户改变变量的值时,引擎会重新从内存中分配一个新的内存空间以存储新的值,并将新的内存地址与变量进行绑定。const的原理便是在变量名与内存地址之间建立不可变得绑定,当后面的程序尝试申请新的内存空间时,引擎便会抛出错误。

在ES2015中,let可以说是var的进化版本,var大部分情况下可以被let替代,let和var的异同点如下表:

image.png

变量的生命周期:

在ECMAScript中,一个变量(或常量)的生命周期(Life Cycle)模式是固定的,由两种因素决定,分别是作用域和对其的引用。

从工程化的角度,应该在ES2015中遵从以下三条原则:

(1)一般情况下,使用const来定义值的存储容器(常量);
(2)只有在值容器明确地被确定将会被改变时才使用let来定义(变量);
(3)不再使用var。

循环语句:

ECMAScript引入了一种新的循环语句for...of,主要的用途是代替for...in循环语句;为Array对象引入了Array.forEach方法以代替for循环,Array.forEach方法的特点是自带闭包,以解决因为缺乏块级作用域导致需要使用取巧的方法来解决var的作用域问题。
因为块级作用域的存在,使得for循环中的每一个当前值可以仅保留在所对应的循环体中,配合for-of循环语句更是免去了回调函数的使用。

const arr=[1,2,3];for(const item of arr){     console.log(item);
}

配合ES2015中的解构(Destructuring)特性,在处理JSON数据时,更加得心应手。

const Zootopia=[
    {name:'Nick',gender:1,species:'Fox'},
    {name:'Judy',gender:0,species:'Bunny'}
];for(const {name,species} of Zootopia){    console.log(`hi,I am ${name},and I am a ${species}`);
}

forEach方法需要传入一个回调函数来接收循环的每一个循环元素并作为循环体以执行。同时,这个回调函数在标准定义中会被传入三个参数,分别为:当前值,当前值的下标和循环数组自身。在ES2015标准中,数组类型再次被赋予了一个名为entries的方法,它可以返回对应的数组中每一个元素与其下标配对的一个新数组。

这个新特性可以与解构和for-of循环配合使用。

const Zootopia=[
    {name:'Nick',gender:1,species:'Fox'},
    {name:'Judy',gender:0,species:'Bunny'}
];for(const [index,{name,species}] of Zootopia.entries){    console.log(`${index}.Hi,I am ${name},and I am a ${species}`);
}//0.Hi,I am Nick,and I am a Fox//1.Hi,I am Judy,and I am a Bunny