ES6基本语法复习

块级做用域概念 let 和 const的加入

let

ES6的规范慢慢的成为主流，再加上打包工具可以将咱们的ES6代码无缝的压缩成为可读的ES5代码。渐渐的深受大部分开发者喜好（不排除一些人对ES5情有独钟）。

在ES6以前的版本，实际上是没有块级做用于概念的，不管是在{}里面仍是外面均可以被访问到。

举个栗子： 下面代码中，我在if中才定义的test变量在它的父做用域依旧能被调取到，这很明显不是咱们但愿获得的。所以ES6的块级做用域给与了咱们更大的严谨性。

function foo() {
    if (true) {
        // 我在 if 的局部中定义一个变量 : test
        var test = '若是if 为 true 就输出我'
        console.log(test)
        // --end if
    }
    console.log(test) 
}
foo ()  // 运行函数
// print : 
// 若是if 为 true 就输出我
// 若是if 为 true 就输出我
复制代码

当咱们用 let 的时候，能够发现，程序报错了，提示咱们找不到该变量。这个时候咱们就知道了，let定义的变量只能在当前 {} 中生效。我感受这是一个很是好的现象。

// ReferenceError: test is not defined
复制代码

const

const 做用是定义一个只读的变量。它定义的变量值是没法更改的。避免一些不须要修改的参数被你是同事给“意外”更换掉。 举个栗子： 能够看的到 a = 2赋值的话是会直接报错的。这样就能给开发人员提示，不要动我，我被安排了。因此我我的比较喜欢const，甚至在写程序的时候会默认const，只有须要去变更的时候，我才会去将const换成let。

let b = 0
b = 1
const a = 1
a = 2 // TypeError: Assignment to constant variable.
复制代码

const 面试的坑

面试： const定义的值能被修改吗？ 你若是说不能的时候，可能这个面试官在坑你，其实const 定义对象内部的值是可以修改的。 举个栗子： 能够看获得，没有弹出常量错误，值被修改了。

const a = {
    name : 111
}
a.name = 2222  
console.log(a.name) // => 2222 
复制代码

模板字符串

模板字符串能够方便咱们去拼接一些字符串，这也是我经常使用的一个地方了，也没有去深刻的了解，在之前都是用+号去这个干的。模板字符串不是 '' 是反单引 ``。 举个例子：

const name = 'Annai'
console.log('name : ' + name)
console.log(`name : ${ name }`)
// URL get参数拼接
const _LOGIN = `http://www.baidu.com/mobile/login?name=${param.name}&passward=${param.passward}`
console.log(_LOGIN)
复制代码

箭头函数

箭头函数是ES6的一大两点，很是简便的就能去写一个函数和一些计算属性。和传统函数的区别在于：

1. 没有this
2. 没有Prototype
3. 没有argments
4. 没有constructor
5. 其余的能够自行百度

没有this

箭头函数是没有this指向的，那么箭头函数的this是哪里来的呢？其实箭头函数的this指向是绑定的最近一层非箭头函数的this指向。 举个栗子： 能够看到下面两个例子的this指向，由于箭头函数没有this，因此它会去找上一层非箭头函数绑定的this，因此找到全局去了。

let Person = {
    name: 'wang',
    run: () =>{
        console.log(this) // {} || window
        console.log(this.name) //undefined
    },
    run1: function (){
        console.log(this) // Person
        console.log(this.name) //wang
    }
}
Person.run()
Person.run1()
复制代码

没有原型(Prototype)

当咱们去输出箭头函数的prototype原型的时候。沃特，怎么没有定义。 举个栗子

const foo = value => {}
console.log(foo.prototype)
复制代码

没有argments

能够看到当你试图去输出argments的话，箭头函数直接抛一个不能调用错误给你。 举个栗子

const a = function (){}
const b = () => {}

console.log(a.arguments) // null
console.log(b.arguments)
//TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
复制代码

没有consttructor，没法使用new

不仅是没有原型，甚至连构造函数都没有了，因此箭头函数也就没法使用new去进行获取。由于new 操做后会去找函数中的constructor，由于没有自带构造函数，因此会提示错误 举个栗子：

const Foo = value => {}
const foo = new Foo() // TypeError: Foo is not a constructor
复制代码

Set 和 Map

Set(集合) 和 Map(字典)是ES6中新增长的数据结构，不过对于学过数据结构的小伙伴来说，这一点都不显得陌生。

Set

咱们能够把Set当作集合，既然是集合，那么它确定不能有重复值。所以，Set去重法就来了 简单实现Set去重数组： 下面就实现了一个很是简单的数组去重。

const arr = [1,2,3,3,2,2,1,1]
console.log(arr) // [ 1, 2, 3, 3, 2, 2, 1, 1 ]
const new_arr = [...new Set(arr)]
console.log(new_arr) // [ 1, 2, 3 ]
复制代码

Set的属性

Set中只有一个size属性，和数组的length属性功能一致，用于返回集合的长度 举个栗子： 经过条用size属性，就能知道集合有多长了。

const set = new Set([1,2,3,4,5,6])
console.log(set.size) // => 6
复制代码

Set的方法

Set方法都是对Set自己进行一些判断和操做

1.add(value) 向集合添加一个值 2.delete(value) 删除集合中的一个值 3.has(value) 判断该值是否存在 4.clear 清除集合

Map

Map就至关因而字典，新华字典中都有拼音文字来表示对应关系。Map中也是经过键对值来进行分布的。它和Set均可以存储不重复的数据，只是不一样的地方在于，Set是经过值值来存储的，Map是经过键值来存储的。键值相对应。 举个栗子： Map的生成。

const map = new Map()
map.set('name','wangly')
console.log(map) // Map { 'name' => 'wangly' }
复制代码

Map的属性

Map和Set同样，只有一一个size属性。

const map = new Map()
map.set('name','wangly')
console.log(map.size) // 1
复制代码

Map的方法

1.set(key, val): 向字典中添加新元素 2.get(key):经过键值查找特定的数值并返回 3.has(key):若是键存在字典中返回true,不然false 4.delete(key): 经过键值从字典中移除对应的数据 5.clear():将这个字典中的全部元素删除

Promise

Promise 是如今使用很是普遍的一个异步任务处理对象，也是目前JavaScript流行的异步处理方式之一。

Promise使用方式

Promise咱们能够经过实例化一个Promise对象，而且接收一个函数来做为参数，这个函数有两个参数 resovle（成功） 和 reject（失败）。Promise只有三种状态

• pending ： 对象初始化，开始工做
• fulfilled ： 当调用resovle，则从pending变为fulfilled成功。
• rejected： 当调用reject(失败)，会由pending 变为 rejected

const promise = new Promise((resolve,reject) => {
    console.log('promise执行中........')
    resolve() // 成功了|| reject()
})
复制代码

.then()回调

then方法是当resolve(成功)/reject(失败)状态的回调函数，then()中有两个参数，类型都是参数，第一个是onFulfilled(),第二个是onRejected() 举个栗子：

const promise = new Promise((resolve,reject) => {
    console.log('promise执行中........')
    reject()// 成功了 || reject()
})
promise.then(
resolve => {
    // fulfilled 成功操做
    console.log('pending => fulfilled')
},
reject => {
    // rejected 失败操做
    console.log('pending => rejected') // 我被输出了
})
复制代码

当成功时，我就执行成功的回调，当失败时，我就执行失败的回调。很是的有层次感受和代码的优雅感受。。then也是一个链式的操做，他返回的就是一个promise对象，下面就是一个链式调用

.then().then().then()......
复制代码

.catch()异常捕获

用来捕获前面.then()的异常信息捕获，onRejected不能捕获当前onFulfilled中的异常，因此能够写成这个。

promise.then(onFulfilled)
       .catch(onRrejected); 
复制代码

Class

在ES6之JavaScript本没有类，可是这怎么可贵倒咱们的JSER呢，因此就有了类的概念，到ES6也如愿的产生了class语法糖 ES5中的类

function Person (name){
    this.name = name
}
Person.prototype.myName = function (){
    console.log(this.name)
}
var person = new Person('wang')
person.myName()
复制代码

ES6中的类

class Person{
    constructor (name){
        this.name = name
    }
    myName(){
        console.log(this.name)
    }
}
const person = new Person('wang')
person.myName()
复制代码

解构赋值

对象的解构赋值

对象的解构赋值，若是指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为 undefined，若是可以找到，那么就会将对象中的值赋予给局部变量。

const person = {
    name: 'wang',
    age: 11,
    score: 100
}

const { name , age , score } = person
console.log(`name: ${name},age:${age},score:${score}`) //name: wang,age:11,score:100
复制代码

数组的解构赋值

数组的解构赋值就很是简单了，你给一个它就去数组中找一个，当你定义的变量超出数组下标就会赋值为undefined。很是的灵活

const a = [1,2,3]
const [b,c,d,e] = a
console.log(`${b}-${c}-${d}-${e}`) // 1-2-3-undefined
复制代码

未完待续 先总结一番