Continuously updated collection of front-end -ES6

1. About variables and constants

let

let 用来声明变量,类似于变量,但是所声明的变量,只在let命令所在的代码块内有效
需要注意的地方:
1.不存在变量提升,未声明直接报错
2.暂时性死区
3.for循环具有两个作用域,外面的变量和里面的变量互不干扰

const

用来声明一个只读的常量,一旦尚明,常量的值就不可以改变了,而且声明的时候必须赋值
需要注意的地方:

引用类型储存的是一个地址,所以用const声明的引用数据类型,只要不改变指针地址,就可以
如果为常量赋其他的值,就会报错。

2. summary popular es6 grammar

1、Let:声明的变量,只作用于使用了let命令的代码块
2、const :声明一个常量,声明过后,就不可修改其值(会报错)
3、解构性赋值
3、箭头函数:用法的两个明显的优点: * 函数的写法更加简洁 * 
箭头函数内部没有自己的this对象,而是全部继承外面的,
所以内部的this就是外层代码块的this。
4、字符串模板:ES6中允许使用反引号 ` 来创建字符串,
此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}
5、Proxy:Proxy可以监听对象身上发生了什么事情,
并在这些事情发生后执行一些相应的操作
6、循环:for of 实现数组的遍历(以及keys(),value(),entries()等方法)

3. Talk about the understanding of es6 of (say something es6, you know es6)

1.语法糖(箭头函数,类的定义,继承)
2.以及一些新的扩展(数组,字符串,对象,方法等),
3.对作用域的重新定义,
4.以及异步编程的解决方案(promise,async,await)、
5.解构赋值的出现

Common features of 4.ES6

变量定义(let和const,可变与不可变,const定义对象的特殊情况)
解构赋值
模板字符串
数组新API(例:Array.from(),entries(),values(),keys())
箭头函数(rest参数,扩展运算符,::绑定this)
Set和Map数据结构(set实例成员值唯一存储key值,map实例存储键值对(key-value))
Promise对象(前端异步解决方案进化史,generator函数,async函数)
Class语法糖(super关键字)

The understanding of the Promise ES6

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件
(通常是一个异步操作)的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
 特点: 
1、自己身上有all、reject、resolve这几个方法
​2、原型上有then、catch等方法 
3、一旦建立,就无法取消,这是它的缺点



Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件监听——更合理和更强大。
Promise 有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
但是无法获取到pending状态,在promise中接受两个内置参数分别是resolve(成功)和reject(失败),
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
then方法可以传递两个回调函数第一个是成功,第二个是失败,
失败回调也可以使用promise的catch方法回调,
promise还有一个强大的功能那就是all方法可以组合多个promise实例,包装成一个新的 Promise 实例。

6. introduce async and await

 async 会将其后的函数(函数表达式或 Lambda)的返回值封装成一个 Promise 对象,
 而 await 会等待这个 Promise 完成,并将其 resolve 的结果返回出来

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案。
目前async / await 在 IE edge中已经可以直接使用了,
但是chrome和Node.js还没有支持。

幸运的是,babel已经支持async的transform了,所以我们使用的时候引入babel就行。
在开始之前我们需要引入以下的package,
preset-stage-3里就有我们需要的async/await的编译文件。

How 7.ES6 turn ES5

使用Babel 转码器,Babel 的配置文件是.babelrc,
存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。

8.ES6 in which new data types

Set 和 Map 都是 ES6 中新增的数据结构,是对当前 JS 数组和对象这两种重要数据结构
的扩展。由于是新增的数据结构

Set 类似于数组,但数组可以允许元素重复,Set 不允许元素重复 
Map 类似于对象,但普通对象的 key 必须是字符串或者数字,
而 Map 的 key 可以是任何数据类型 

Context context scope difference function and the arrow 9. The general scope of the function

箭头函数其实只是一个密名函数的语法糖,

区别在于普通函数作用域中的this有特定的指向,一般指向window,

而箭头函数中的this只有一个指向那就是指当前函数所在的对象,

其实现原理其实就是类似于之前编程的时候在函数外围定义that一样,

用了箭头函数就不用定义that了直接使用this

10.ES6 class distinction and general constructor

in fact, it has been the class JS keywords (reserved words), but has not officially used until ES6.

Form constructor to initialize the object before the class is to replace ES6, from the object-oriented syntax is more in line with the wording

class 是一种新的语法形式,是class Name {...}这种形式,
和函数的写法完全不一样    
两者对比,构造函数函数体的内容要放在 class 中的constructor函数中,
constructor即构造器,初始化实例时默认执行 
class 中函数的写法是add() {...}这种形式,并没有function关键字 

And the use of class inheritance to achieve more simple
extends keyword can be achieved directly inherited in the class, rather than
inherited achieved before a variety of different implementations, there is only one in es6
note the following points:

使用extends即可实现继承,更加符合经典面向对象语言的写法,如 Java

子类的constructor一定要执行super(),以调用父类的constructor

11.es6 in Module

ES6 the modular syntax is more concise, use export throws, using import from reception,

If only the output of a unique object, you can use export default

// 创建 util1.js 文件,内容如

export default {

a: 100

}
// 创建 index.js 文件,内容如

import obj from './util1.js’

If you want to output a number of objects, the default can not be used, and the import time to add {...}, as follows

// 创建 util2.js 文件,内容如

export function fn1() {

alert('fn1')

}

export function fn2() {

alert('fn2')

}
// 创建 index.js 文件,内容如

import { fn1, fn2 } from './util2.js’
Published 68 original articles · won praise 0 · Views 1281

Guess you like

Origin blog.csdn.net/zmmsdk/article/details/104202028