ES6基础学习总结（1）

声明变量方式

• let
• const

在ES5用var来声明变量，但是var声明需要对作用域有一个严格的控制，否则会出现下面的这个例子：

var a = [];
for (var i = 0; i < 5 ; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[4]() // 5

为什么会有这个问题呢，首先“闭包”二字，何为闭包，通俗来说：闭包就是能够读取其他函数内部变量的函数。闭包概念
说完闭包来说一下上面那个例子，首先a[i]和a[i] ()是有区别的
a[i]不会执行函数，i不能被替换，代表的意思是：

a[i] = function () {console.log(i)} // 没有执行函数，只是定义了方法，知道log里面有i就得了，不用显示i是多少。

a[i] ()会执行函数, 代表的意思是：

a[i] = function () {console.log(i)}执行函数，不光知道是log里面有i，还要知道它是多少
a[1]() // 是1就是1

所以来解释解释为什么闭包会导致这个问题呢？
正常来说就是因为i是全局定义的变量只有这么一个i，在循环里，函数可以不执行但是i还是要循环相加的，所以最后在执行时，指向的都是这个i不管怎么输出都是一样的。
问题：
1.变量只有1一个，每次改变的都是一个
2.没有立即执行，损失了这次机会
解决方法
都知道问题所在了所以就应该知道解决方法：
方法1：let 命名变量

var a = [];
for (let i = 0; i < 5 ; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[4]() // 5

let命名变量只在代码块的范围中有效，所以每一次循环中的i都是不一样的。这么写就可以正常显示。
方法2：自执行函数

var a = [];
for (let i = 0; i < 5 ; i++) {
  a[i] = (function () {
    console.log(i)
  })(i)
}
a[4]() // 4

默认值

是个变量就可以给自己个默认值，这是ES6对变量的新的关爱
常用在function和解构赋值中

// function用法
function fn(x = 1, y = 2){
  return [x, y]
}
fn() // [1, 2]
fn(3,4) // [3,4]

解构赋值

首先要明白一个概念什么叫解构赋值，个人理解意思从字面上来说就是分解结构去赋值，其实在应用中也是这样的一个概念。

// es5中
var a = 1;
var b = 2;
var c = 3;
// es6中
let [a, b, c] = [1, 2, 3]

这种方式最明显的阐述了结构赋值的意义，当然这些只是其中的一部分。
想使用这个方法一定要记住最关键的一点
“=”左右两边的结构要相同，虽然不同也可能会成功...还是规范点好。
在ES6这本书中就讲到了：数组，对象，字符串，数值，布尔、函数都可以结构赋值，每一种的结构赋值都各不相同。

---

数组：按下标确定内容

let [a, b, c] = [1, 2, 3]
a //1
b //2
c //3

特殊方法：(原理)
数组是特殊的对象

let arr = [1, 2 ,3]
let {0:fir, 1:sec, 2:last} = arr;
fir // 1
sec // 2
last //3

对象：变量名和属性名相同

let {a, b} = {a:'123', b:'321'}
a // '123'
b // '321'

此处在书里对对象的解构赋值提到了一点，如果对象的方式如下

let { a: b, c: d } = { a: 'aa', c: 'cc' }
// 真实含义
let{ a: 'aa', c: 'cc' }
// 解释一下就是如书上所说，其实解构赋值的步骤是:
// a:b , c:d
// b:'aa' , c:'cc'
//a:'aa', c:'cc'

书中也提到过一个特殊又常见的情况：此处引用一下书中的例子

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

可能突然一看感觉跟上面的例子很相像，但是这里又引出了一个新的观念，叫做模式。什么叫模式？个人理解就是对象的标志开头，不作为变量存储值，只作为一个标志告诉使用者，这里有这么个对象，里面的内容需要自己去获取。
当然既然作为标志也应该有“预览”功能告诉使用者这里面都有什么，书里也提供了专用方法

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

关于默认值在对象的解构赋值中的用法可以参考下方引用的书中例子：
默认值引用的条件是 ===是undefined

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

字符串：

const [a, b, c, d] = 'tian';
a // "t"
b // "i"
c // "a"
d // "n"
// legth属性
let { length : len } = 'tian';
len // 4

布尔值/数值:
将布尔值/数值先转换成对象，然后使用toString()方法
注：null和undefined没有办法解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数解构赋值：
终于又到了一个大货，方法很简单，只要记住一句话“11对应”
通过几个例子来解释一下

// 1.方法1
function fn(a, b){
  return a + b;
}
a // 3
b // 4
fn(3, 4) // 7
// 2.方法2
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [3, 7]
// [1, 2] 1+2=3
// [3, 4] 3+4=7
// [3, 7]
// 3.默认值
//{}和不填内容都会使默认值生效

重要知识点
圆括号的使用规范——不能使用的3种情况
变量声明语句

let [(a)] = [1]// 错误

函数参数

function fn ( [(a)] ){ return a } // 错误

赋值语句

({a:b}) = {a: 'aa'} // 错误，a是一个“模式”

圆括号的使用规范——可以使用的情况
赋值语句

[ (a) ]  = [1] // 这个可以的原因是因为它[(a)]不是一定变量，这只是在赋值。
[(parseInt.prop)] = [1]// 原因如上

括号中没有模式

({ p: (d) } = {});

总结了那么多其实最主要还是想说它的用途，首先，每个东西的出现总会有它特定的含义，赋值结果的出现，方便啦我们以下几点：
1.交换变量值

let x = 1;
let y = 2;
[x, y] = [y, x];

2. 获取函数返回值

数组
function fn() {
  return [1,2]
}
对象
function fn() {
  return {
    a:'123',
    b:'321'
}
}

3. 函数传参

function fn([x, y, z]){}
fn([1, 2, 3])

4.获得json数据
let json = {
a:1,
b:'ok',
c:[111, 222]
}
let [a, b, c: num] = fn
5.输入模块的指定方法
常用加载单独模块方法

const { SourceMapConsumer, SourceNode } = require("source-map");

6. 遍历结构

对于遍历结构
const map = new Map();
for ([index, val] of map) // 获取索引和内容
for (let [index] of map) // 获取索引
for (let [, val] of map) // 获取内容

没想到写了这么长，虽然很多都是书上有的，但是对于不爱翻书喜欢翻材料的童鞋来说还是很适合看的。有问题请下方评论留言~