ES6的理解

ES6自2015年推出已过了三年,成熟使用也两年了。比如,const和let定义、箭头函数、模块的导入和导出等,已经出现在我们日常的使用中,可以说并不陌生,但就系统的学习一直没开始。

最近在看《深入理解ES6》这本书,结合日常的使用,系统梳理一下(想到哪写到哪,后续一直添加).

1.块级作用域的出现以及变量定义的改变

块级作用域:大括号包裹的部分形成的局部作用域.ES6之前,JavaScript只有两种作用域--全局作用域和局部作用域(函数作用域),大括号并非作用域的界定符,而且具有变量提升的机制.ES6推出后,界定了块状作用域,let和const定义也消除了变量提升.

ES6之前,变量在程序退出后或者函数执行完销毁变量;ES6后,程序执行到块级作用域外即销毁变量.

let代替var用于定义变量,重复定义时会报错.

const用于定义常量,且必须初始化,一旦设定后不可更改,否则会报错.

书中推荐的最佳实践:默认使用const定义,只在需要改变的变量中使用let定义。

日常使用的感觉是定义变量变得简洁、高效,不需要担心变量重名和冗余了。

2.模块的导出与导入

ES6引入模块是为了解决作用域问题.

之前的脚本形式,定义的作用域都是全局作用域;现在的模块形式,定义的是当前模块的的作用域,将模块作用域和全局作用域区分出来,让日益复杂的前端工程变得容易维护.

export作为导出符,可以导出变量、函数、类等。

导出的方式包括导出声名(export var a=5;)、导出引用(var a=5; export a;)、导出重命名(export a as aaa)、还可以默认导出(export default)

import作为导入符,可以单个导入(import { a } from '/example.js'),多个导入(import { a,b } from '/example.js')、导入整个模块(不常用)、导入时重命名、默认值导入(import a 

from ‘example.js’)

默认导入是ES6创建者推崇的导入方法,具有语法纯净、简洁的特点。

3.对象的扩展

JavaScript中的每一个值都是某种特定的对象,提升对象的功能和效率,对日益复杂的程序应用至关重要。

创建对象最流行和高效的方法是对象字面量,可以完成对象的建立、变更、删除:

var a = {//创建

    a1: 11,

    a2: 22

}

a.a2 = 222;//变更

a.a3 = 33;

delete a.a3;//删除对象属性

其中ES6做出支持了可计算属性名

var a = {

    a1: 11,

    [newName]: 22//[]表示可计算部分,相当于属性访问的方括号访问法

}

ES6还对对象的使用做出了简化,例如vue中的使用:

①  components:{

        compA,//原写法compA: compA(无需重命名时)

        compB

    }

②  computed: {

        dataFlag(){//ES6简化写法

            return this.dataF;

        },

        dataFlag1: function(){

            return this.dataF;

        }

    }

ES6还新增了Object.is()和Object.assign()方法:

Object.is()是全等判定,相对==和===功能更强大

==会进行类型强制转换,===对+0和-0以及NAN无作用

console.log(+0===-0)//true

console.log(Object.is(+0,-0))//false

console.log(NAN===NAN)//false

console.log(Object.is(NAN,NAN))//true

Object.assign()对象的混入,相当于引入了其他对象的方法和属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值