ECMAScript 6 小记 （1）
众所周知，ECMAScript （以后简称ES）是JS语言的一种规范，并且长久以来，我们使用的是 ES5，大概2015年 - 2016年，ES6问世了，本文写于 2019年，作者用 ES6 大概也有一两年左右，特整理加介绍自身在项目里关于ES6的一些方法，如有问题，请各位大佬指出，谢谢。
目录
- let const 的用法
- 解构赋值
- 箭头函数
- promise 使用
- generoter
- 数组常用方法
- ==
let const 用法
长久的 ES5 及以前，我们定义变量只能使用 var 。并且 var 的定义无所不能，从整型、浮点型，到列表对象，都是可以任意为止，当然了这个可能也是作者带给我们的自由，随意，我们这里不做深究，举个 var 的例子，如下；
var arr = []
for (var a = 0 ; a < 10; a++) {
arr[a] = function () {
console.log(a) // 10
}
}
arr[0]()
熟悉代码的小伙伴都知道，此时的 console 会打印出 10 遍 最末尾的值，而通常我们的解决方式是闭包，如下；
var arr = []
for (var a = 0 ; a < 10; a++) {
arr[a] = (function (a) {
return function () {
console.log(a) // 0
}
})(a)
}
arr[0]()
这种场景常见于页面上的 ul > li标签的遍历，打印 li 的 index 时会出现。
But，
在使用了 let 之后，结果变得向我们所期望的那样了，如下；
var arr = []
for (let a = 0 ; a < 10; a++) {
arr[a] = function () {
console.log(a) // 0
}
}
arr[0]()
我们只需要将 var 换成 let ，便能实现上述只有闭包才能解决的Bug，厉不厉害。
有朋友可能会问了，what is ？我摘取了一下官方的定义，
let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。
**let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与 var 关键字不同的是，var **声明的变量只能是全局或者整个函数块的。
于是在 let 的作用域的帮助下，我们打印出了 0 。
const 的用法
const 的用法比较简单，是为了定义一个常量，我们从字面意思也能明白，它也是块级作用域。
我们不能轻易的去修改 const 定义的值，否则会出错，他的应用场景主要集中在，定义一些常量，例如一些模块的引入，不会去改变的东西。定义常量时我会选择用全大写，并用下划线连接单词。
const echarts = require("echarts");
const ONE_DAY = 24
但是 const 也不是万能的，如果我们定义了一个引用类型的常量，改变其某一个属性，是不会发生任何问题，如下
const number = {
a: 1
};
try {
number.a = 99;
} catch(err) {
console.log(err);
}
console.log(number); // {a: 99}
所以当我们使用 const 时最好是定义一些自己心里有数的量，其语义化要更强于 其真正含义。
解构赋值
解构赋值其实主要体现在，方法传参，获取属性，变量定义上，用起来很舒服。
function handler({id, data}) {
window.alert(id);
window.alert(data);
}
handler ({
id: 1234567,
data: {name: 'jack'}
})
/*=============================*/
var a,b;
[a, b] = [10, 20];
// 在列表中使用比较简单，也很好理解，直接可以通过一一对应的关系拿到相应的数值，
var p,b;
{b,p} = {b: 20, p: 21}
// 在对象中的使用，类似于我上述的 handler方法的调用，只是去获取需要的参数，而不是需要更多，这样写的代码更加简洁，直观。
var d,f;
{d, f, ...ob} = {d: 3, f: 4, ob1: {name: 'Jack'}, ob2: {name: 'Lily'}}
// d = 3
// f = 4
// ob = {ob1: {name: 'Jack'}, ob2: {name: 'Lily'}}
// 在模块引入中我们也可以看到
import {handlera, handlerb} from './utils.js' // 类似于这样
扩展运算符/ rest 运算符
我们之前要获取函数的参数，基本是要通过，arguments 这个关键字，但它还不一定好使，因为它仅是一个类数组（也称列表），并不是一个真正的数组，代码如下；
function handler (a,b,c,d,e) {
console.log(arguments.length)
}
handler(1,2,3,4,5)
// ====================>
function handler_new(...list) {
console.log(list.length)
}
handler_new(1,2,3,4,5)
// ====================>
function handler_new(a, ...list) {
console.log(list.length)
}
handler_new(1,2,3,4,5)
通过 rest 运算符我们很容易的拿到列表类型的参数。并且根据 rest 的后扩展能力，获取指定的参数及 其他。
ES6 对象属性的管理很松散，我们可以对属性进行变量化，例如，
var tem = 'id';
var obj = {
[tem]: 321
}
// obj => {id: 321}
在我们上面的写法中经常会出现这样的写法，例如如，
var id = 123
var name = 'Mary'
var people = {id, name} // 这种写法是基于 {'id': id, 'name': name}
// people => {id: 123, name: 'Mary'}
还有这样，针对于方法
var people = {
name: 'Jack',
sayName () { // => sayName: function () {
console.log(this.name) // Jack
}
}
以上是简便的写法，我看到在阮一峰的ES6一书中是归类到 对象的扩展一节的。这样归类是对的。
在rest运算符有个很重要的点是，rest 只能放在使用的最后面，而不能放在前面或者是中间的位置，否则会报错。
箭头函数
箭头函数的写法 是 () => {}，包括一个小括号和 一个箭头 加上一个 花括号。代码如下
const handler = (a) => {
return a*a
}
// =>
const handler = a => a*a // 单个参数时可以省略小括号，单行语句时可以省略花阔号
箭头函数解决了一个关键问题，就是 this 指向的问题，在代码中，我常常会因为 this 指向而苦恼。我不能够轻易的分清楚 当前执行环境下 的 this 指向，例如，
var name = 'Mary';
var people = {
name: 'Jack',
sayName () {
console.log(this.name) // Jack
}
}
people.sayName()
当使用了箭头函数呢
var name = 'Mary';
var people = {
name: 'Jack',
sayName: () => {
console.log(this.name) // Mary
}
}
people.sayName()
箭头函数使得 this的指向 到了 当前调用该方法的外层，在举例一个更形象的例子
var man = {
name: 'Jack',
sayName: function () {
return this.name
},
sayNameAsync: function () {
let name = 'eric'
let self = this
setTimeout(function () {
self.sayName() // Jack
}, 0)
}
}
man.sayNameAsync()
有经验的朋友都知道，要将 self 去替换 this，因为 setTimeout中匿名函数的指向是有问题的，所以，要用self 去改换一下。但是如果用箭头函数的话，就不需要了，因为箭头在匿名函数中使用不会改变 this。
var man = {
name: 'Jack',
sayName: function () {
console.log(this.name)
},
sayNameAsync: function () {
let name = 'eric'
// let self = this
setTimeout( () => {
this.sayName()
}, 0)
}
}
man.sayNameAsync()
这是箭头函数最基本的用法，最少可以省略一行代码。
未完...
网友评论