ES6的理解

silvertheo 发布于2019-08-23 14:55 / 978人阅读

摘要：自年推出已过了三年现已成熟使用。最近在看深入理解这本书结合日常的使用系统梳理一下想到哪写到哪后续一直添加一块级作用域的出现以及变量定义的改变块级作用域大括号包裹的部分形成的局部作用域。二模块的导出与导入引入模块是为了解决作用域问题。

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

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

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

块级作用域:大括号包裹的部分形成的局部作用域。

ES6之前,JavaScript只有两种作用域--全局作用域和局部作用域(函数作用域),大括号并非作用域的界定符,而且具有变量提升的机制.

ES6推出后,界定了块状作用域,let和const定义也消除了变量提升.

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

let代替var用于定义变量,重复定义时会报错.
const用于定义常量,且必须初始化,一旦设定后不可更改,否则会报错.

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

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

二.模块的导出与导入

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()对象的混入，相当于引入了其他对象的方法和属性。

三、解构

解构是ES6新增的、关于对象和数组的、高效、直观的访问途径。

1、对象的解构

objectA = { att1: 12, att2: 34, att3: { att31: 567, att32: 890} }

初始化对象：let { att1,att2 } = objectA;//att1=12,att2=34
重命名：let = {att1: num1, att2: num2} = objectA;//num1=12,num2=34

解构赋值：({ att1,att2 } = objectA);//**必须加小括号，赋值表达式的左侧不能为代码块**
函数参数中赋值：function(){ alert(value)}; function({att1,att2} = objectA);//打印objectA的值

嵌套解构：let { att3: { att31 } } = objectA;//att31=567

2、数组解构

arryA = [1,2,3,[4,5],{ab: 6,cd: 7}];

数组解构需列出目标解构值之前的所有元素

[a,b] = arryA; //a=1,b=2
[,c] = arryA; //c=2
[...arryB] = arryA; //arryB = arryA = [1,2,3,[4,5],{ab: 6,cd: 7}];
[,,,[d]] = arryA; //d=4;
[,,,,{ab}] = arryA //ab=6;

数组解构的小应用：①交换两个变量的值 [a,b] = [b,a]; ②赋值数组[...arryB] = arryA;

解构表达式的右侧不能为null或undefined

云服务器 GPU云服务器云计算的理解 cdn的理解对大数据的理解 ajax的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101349.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0
【资源集合】 ES6 元编程（Proxy & Reflect & Symbol）

摘要：理解元编程和是属于元编程范畴的，能介入的对象底层操作进行的过程中，并加以影响。元编程中的元的概念可以理解为程序本身。中，便是两个可以用来进行元编程的特性。在之后，标准引入了，从而提供比较完善的元编程能力。导读几年前 ES6 刚出来的时候接触过元编程（Metaprogramming）的概念，不过当时还没有深究。今天在应用和学习中不断接触到这概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 评论0 收藏0
Understanding ES6 -- 深入理解ES6书籍

摘要：块级绑定拓展对象功能解构改进的数组代理和反射附录小的改变附录 understanding es6 -- Nicholas C. Zakas 块级绑定 function 拓展对象功能解构 symbol Sets and Maps Iterators and Generators class 改进的数组 promise 代理和反射 -- Proxy&Reflection mo...

PAMPANG 2019-08-23 15:14 评论0 收藏0