关于ES6以及ES6常用的方法

1、变量声明let和const

let表示变量、const表示常量。let和const都是块级作用域。

怎么理解这个块级作用域？
    •在一个函数内部
    •在一个代码块内部
      换言之， {}大括号内的代码块即为let 和 const的作用域。

2、模板字符串

将表达式嵌入字符串中进行拼接。用${}来界定。

    //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

在ES5时我们通过反斜杠('')来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

    // es5
    var msg = "Hi \
    man!
    "
    // es6
    const template = `

        hello world
    
`

对于字符串，ES6有很多方法可以使用。

// 1.includes：判断是否包含然后直接返回布尔值
    let str = 'hahay'
    console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
    let s = 'he'
    console.log(s.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理

3、函数

函数默认参数

ES5定义默认参数

function action(num) {
        num = num || 200
        //当传入num时，num为传入的值
        //当没传入参数时，num即有了默认值200
        return num
    }
  //然而num传入0时，还是200，与想要的效果不符

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function action(num = 200) {
        console.log(num)
 }
action() //200
action(300) //300

箭头函数

箭头函数最直观的三个特点。

(1)不需要function关键字来创建函数
(2) 省略return关键字
(3)继承当前上下文的 this 关键字

//例如：
    [1,2,3].map( x => x + 1 )
//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；

例如:

 var people = name => 'hello' + name
    //参数name就没有括号
//作为参考
  var people = (name, age) => {
        const fullName = 'h' + name
        return fullName
    } 
    //如果缺少()或者{}就会报错

4、拓展的对象功能

(1)对象初始化简写:键值对重名：

ES5：

function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

ES6:

function people(name, age) {
        return {
            name,
            age
        };
    }

(2)对象添加方法

ES5:

var people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

ES6:

const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    }

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

objA = {name:"zs"}
objB = {age:11}
const obj = Object.assign({}, objA, objB)
console.log(obj) //｛name:"zs",age:11｝

5、更方便的数据访问--解构

ES5我们提取对象中的信息形式如下：

const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

ES6提取对象信息：

    //对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)      // lux---20
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first)                                //'red'
    console.log(second)                            //'blue'

6、Spread Operator 展开运算符

组装对象或者数组

    //数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful)                  //   [red, yellow, green, pink]
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets)                  //  { "fist": "a", "second": "b", "third": "c"
}

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest)              //  2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest)    //   {"address": "peking", "age": 19, "gender": "female"
}

对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7、import 和 export

import导入模块、export导出模块
①一个文件里，有且只能有一个export default。但可以有多个export。
②当用export default people导出时，就用 import people 导入（不带大括号）
③当用export name 时，就用import { name }导入（记得带上大括号）
④当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
⑤当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

8、Promise

Promise用同步的方式去写异步代码
ES6规定，Promise对象是一个构造函数，用来生成Promise实例
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，又JavaScript引擎提供，不是自己部署。