ES6常用新特性

一、ES6中函数的默认参数：

以前我们是这样定义默认参数：

var fun = function(a,b){
    var a = a || "aaa";
    var b = b || "bbb";
    ...
}

这样做一直都没什么问题，直到参数的值为0，因为0在JavaScript中算是false值，

它会直接变成后面硬编码的值而不是0本身。

在ES6中很好得解决了这个问题：

var func = function(a="aaa",b="bbb"){
    ...
}

 

二、ES6中的模版表达式 （用反引号`...`和${变量名}）

模版表达式在其他语言中一般是为了在模版字符串中输出变量

在ES5中， 我们非得把字符串破开变成这样：

var name = "My name is " + name;

在ES6中我们我可以这样：

var name = `My name is ${name}`

 

三、多行字符串：（用反引号`...`）

在ES6以前我们必须通过"+"号将每一行字符串连接起来：

var str ="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    +"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"

在ES中我们可以这样：

var str = `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb`

 

四、let、const与var对比

在ES6以前，var关键字声明变量，无论声明在何处，都会被视为声明在函数的最顶部(若不在函数内则被视为声明在全局作用域的最顶部)。这便是是我们所说的变量提升。

function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

• 在一个函数内部
• 在一个代码块内部

其实 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const，const声明的变量为常量，一旦赋值后，值就定死了，再次赋值回报错

 const name = 'lux'
    name = 'joe' //再次赋值此时会报错

 

五、箭头函数与普通函数对比：

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

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

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字
• 没有arguments参数数组。使用...rest

箭头最神奇的地方在于他会让你写正确的代码。比如，this在上下文和函数中的值应当是相同的，它不会变化，通常变化的原因都是因为你创建了闭包。 使用箭头函数可以让我们不再用that = this或者self = this或者_this = this或 者.bind(this)这样的代码，比如，这些代码在ES5中就特别丑。

ES5中：

var _this = this
$(#button).click(function(event){
    _this.sentData()
})

ES6中：

$(#button).click((event)=>{
    this.sentData();
})

注意，在ES6中你可以合理的把箭头函数和旧式 function 函数混用。ES6兼容旧式 function

当箭头函数所在语句只有一行时，它就会变成一个表达式，它会直接返回这个语句的值。但是如果你有多行语句，你就要明确的使用return。

省略return的情况：

var people = (name) => console.log('hello' + name);

 

六、拓展的对象功能：

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

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

键值对重名，ES6可以简写如下：

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

ES6 同样改进了获取对象某个属性的值的语法。ES5获取对象某个属性的值：

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

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

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

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

const obj = Object.assign({}, objA, objB)

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

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程

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}`)

//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'

八、Spread Operator 展开运算符

ES6中另外一个好玩的特性就是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) //{"gender": "female", "age": 19, "address": "peking"}

对于 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 }

九、import 和 export

import导入模块、export导出模块

//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'



// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：

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

 十、Promise

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求：

.then()  //请求成功时执行的回调函数

.catch() //出错时执行的回到调函数

fetch('/api/todos')
      .then(res => res.json())
      .then(data => ({ data }))
      .catch(err => ({ err }));

十一、Generators

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

有一个比较形象的例子：咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。

 

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}


// 生成器能像正规函数那样被调用，但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

那生成器和迭代器又有什么用处呢？

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如Promise比如Async/await）。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了，咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

function run(taskDef) { //taskDef即一个生成器函数
     // 创建迭代器，让它在别处可用
    let task = taskDef();

    // 启动任务
    let result = task.next();

    // 递归使用函数来保持对 next() 的调用
    function step() {

        // 如果还有更多要做的
        if (!result.done) {
            result = task.next();
            step();
        }
    }

    // 开始处理过程
    step();
}

生成器与迭代器最有趣、最令人激动的方面，或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数，而是可以建立貌似同步的代码，但实际上却使用 yield 来等待异步操作结束。

 

总结

ES6的特性远不止于此，但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex...等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!