es6快速入门

时间 2019-11-20

原文原文链接

上次分享了es6开发环境的搭建，本次接着分享es6经常使用的特性。前端

1.变量声明let和constes6

咱们都是知道在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都会被建立声明。json

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

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

说白了 {}大括号内的代码块即为let 和 const的做用域。数组

看如下代码：promise

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

let的做用域是在它所在当前代码块，但不会被提高到当前函数的最顶部。数据结构

再来讲说const。闭包

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

说一道面试题

var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

这样的面试题是你们常见，不少同窗一看就知道输出 10 十次
可是若是咱们想依次输出0到9呢？两种解决方法。直接上代码。

// ES5告诉咱们能够利用闭包解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {
            return function() {
                console.log(value)
            }
        }(i)))
    }
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {
            console.log(i)
        })
    }

达到相同的效果，es6简洁的解决方案是否是更让你心动！！！

2.模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

 //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 = `<div>
        <span>hello world</span>
    </div>`

对于字符串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的时候就是false，此时num = 200 与咱们的实际要的效果明显不同

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

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

箭头函数

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

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

不须要function关键字来建立函数
省略return关键字
继承当前上下文的 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.拓展的对象功能

对象初始化简写

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)

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

数组和对象是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'

6.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) //{"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导出模块

//所有导入
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

8. Promise

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

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

发起异步请求

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

今天看到一篇关于面试题的颇有意思。

setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

Excuse me？这个前端面试在搞事！

固然以上promise的知识点，这个只是冰山一角。须要更多地去学习应用。

9.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来完成面试题常客数组去重问题。我和个人小伙伴们都惊呆了!

1. ES6快速入门 ES6 快速入门
2. ES6快速入门
3. es6快速入门
4. ES6 快速入门
5. es6 快速入门系列
6. ES6快速入门使用
7. es6 快速入门系列 —— 解构
8. es6 快速入门系列 —— 函数
9. ES6学习笔记（1）——快速入门
10. es6 快速入门系列 —— 类（class）
更多相关文章...
• SQL 快速参考 - SQL 教程
• Eclipse 快速修复 - Eclipse 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用