ES6新特性有哪些

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的新标准，历时6年，在 2015 年 6 月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

为什么用 ES6 ？

1. 新一代 javascript 标准，提供了很多新的API，解决了es5的很多痛点。

2. 前端开发新趋势

一、let 和 const

ES6 新增了let命令，它的用法类似于var用来声明变量。

1. let 命令所在的代码块内有效

2. let 在同一代码块内不允许重复声明

3. const 声明一个只读的常量，一旦声明，值不能改变

// 代码一
{
    let a = 1
    var b = 10
}
console.log(a) // 未定义
console.log(b) // 10

// 代码二
function test() {
    let a = 2
    let a =20 // 同一代码块内不允许重复声明
}
test()

// 代码三
{
    const a = 3
    const a = 30 // a是一个常量，声明了值不能改变
}

相同点

1. 只在声明所在的块级作用域内有效

2. 只能在声明的位置后面使用

3. 不可重复声明

不同点

1. let声明变量的值和类型都可以改变；

2. const声明的常量不可以改变，一旦声明，就必须立即初始化，不能以后再赋值

二、模板字符串

什么是模板字符串：es6新语法，使用``(反引号) 进行代码换行，拼接，插值等操作。

传统字符串拼接痛点：

1. 不能正常换行

2. 不能插入变量

3. 不能友好处理单双引号和标签嵌套

模板字符串两大特点

1. 支持变量注入

2. 支持换行，嵌套

// 模板字符串
let user = '王新焱'
let age = 30
let address = 'shenzhen'

var info = `我是${user}，我今年${age}岁了，我在${address}`
// 我是王新焱，我今年30岁了，我在shenzhen

三、箭头函数

ES6箭头函数三个特点

1. 不需要function关键字创建函数，代码精简

2. 省略return 关键字

3. 改变this指向，永远指向全局作用域

// es6 this指向全局作用域
var name = '王新焱'
var obj = {
    name: '杨柳',
    foo: () => {
        console.log(this.name)
    }
}

obj.foo()

promise  —  异步编程的解决方案

Promise是一个构造函数，将异步操作以同步操作的流程表达出来，避免层次嵌套的回调函数。

Promise有三种状态： pending 等待状态   resolved 成功状态   rejected  失败状态

  

promise意义在于then链式调用，避免了函数层层嵌套，将“嵌套关系”转变为“链式步骤关系”

四、表达式解构

解构是ES6新特性，按照一定模式，从数组和对象中提取数据，对变量进行赋值的过程。

作用：可以快速取得数组或对象当中的元素或属性，而无需使用 arr[x] 或 obj[key] 等传统方式进行赋值。

// 嵌套对象解构
var obj = {
    name: '张三丰',
    sex: '男',
    age: 30,
    son: {
        sonname: '张无忌',
        sonsex: '男',
        sonage: 20
    }
}

// es6解构
var { name, sex, age, son: { sonname, sonsex, sonage }} = obj

// 张三丰的徒弟是张无忌，今年20岁了
console.log(`${name}的徒弟是${sonname}，今年 ${sonage}岁啦`) 

五、fetch

Fetch 是浏览器提供的原生 AJAX 接口。与XMLHttpRequest类似，都是用来发送网络请求。区别在于Fetch API使用Promise 结构，比XMLHttpRequest更加简单易用。

// 原生Ajax请求 获取XHR对象
var xmlhttp = new XMLHttpRequest()

// open方法
xmlhttp.open("GET", "/data/test1.txt", false)

// 发送请求
xmlhttp.send()

// 渲染结果
document.getElementById("myDiv").innerHTML = xmlhttp.responseText


// fetch 请求
fetch("/data/test2.txt")

// 获取文本信息
.then(res => res.text())
.then(txt => {
    document.getElementById("myDiv").innerHTML = txt
})

fetch、ajax、axios 对比

六、es7 async / await

promise和async/await都是异步解决方案，promise是es6的新语法，而async/await是es7新出的特性。

// async 异步调用
async function getData(){
    return '这是一个异步方法'
}

getData().then((data)=> {
    console.log(data)
})

console.log('虽然我在后面，但是我先执行')


// 添加async关键字
let sleep = function(time) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve()
        }, time)
    })
}

// 先输出start 2s后输出end
let sleeps = async function() {
    console.log('start')
    await sleep(2000)
    console.log('end')
}

sleeps()

async/await使得异步代码看起来像同步代码直观