ES6 教程

es6常用的语法参考   ：    https://blog.csdn.net/itzhongzi/article/details/73330681

es6 浏览器支持情况   http://kangax.github.io/compat-table/es6/

1.变量声明let和const

我们都是知道在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 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.更方便的数据访问--解构   (解构赋值是以对象或数组的形式去赋值，只是形似对象或数组，等号左边并不是一个数据【对象是一种数据格式】，区别于对象)

解构赋值参考：https://www.cnblogs.com/Shyno/p/12156854.html

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

5.1、重命名(先取再重命名)

let {name:myName,age} ={name:'小明',age:18}
//这里name:myName的意思是:取到name属性值,冒号后面的变量名 没有花括号,意思是把我取到的值交给冒号后面的变量名,即'myName'.相当于把name变量重命名为myName
console.log(name,myName,age)
//undefined,小明,18

5.2、默认值(先取再默认)

/*  数组  */
let [a=0, b=0,c=10] = [1, 2];
console.log(a,b,c) //1,2,10
 
//这里a,b,c在左边都先给了个默认值,但是这里是超量解构,a和b都成功取到值,但是c没取到,所以最终是默认值10,如果没有默认值就是undefined

/*  对象*/
let {name:sex='男'} ={name:'小明',age:18}
console.log(sex)  //小明

5.3、函数参数自动解构

function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2

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

原生js中使用模块：https://www.cnblogs.com/sherryStudy/p/es6_module.html

8. Promise （承诺）    参考：https://segmentfault.com/a/1190000007685095  或

　　　　　　　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise  （推荐）        注：大部分浏览器都已经支持 Promise 对象了。使用babel编译后的代码还是 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的知识点总结： https://www.imooc.com/article/20580?block_id=tuijian_wz   或   https://www.cnblogs.com/whybxy/p/7645578.html  或  https://www.cnblogs.com/guolintao/p/7821387.html

　　a、promise对象是一个构造函数，用来生成promise实例。 promise对象代表一个异步操作，有三种状态。需要通过  resolve 和 reject 手动设置状态。（一般根据 异步操作 结果执行 调用对应的函数）

　　　  resolve 和 reject 分别是两个函数方法，由Javascript引擎提供，不用自己部署。resolve函数的作用是将Promise对象的状态从“未完成”变为“成功”状态，（结果使then函数执行前一个回调函数，即对应resolve状态的函数）；

　　　  reject函数的作用则刚好相反，是将Promise对象的状态从“未完成”状态改变为“失败”状态 (reject 对应执行后一个then回调函数) 。注意reject函数的参数最好是一个错误对象 即 reject(new Error('error')) ,不然eslint会报错，但不影响运行。

　　　  Promise实例化时，这两个方法在测试参数函数中可以直接使用。在then方法中使用 resolve 方法必须是 Promise.resolve('某某数据')，不然会报resolve未定义的错误。

var promise = new Promise( function( resolve, reject) {
     //some code 
    if(//异步操作成功){ 
        resolve(value); 
    }else{ 
        reject(error); 
    }
});

　　b、promise对象的then函数有两个参数（都是回调函数），对应 resolve 和 reject 的状态。

　　c、then() 返回一个新的promise，这个then函数中没有值传入到他的下一个then函数中，如果在每个then的回调函数中  return Promise.resolve(data)，则每个then函数都有数据传递到他的下一个then中。

        function asy () {
            var promise = new Promise(function (resolve, reject) {
                var b
                setTimeout(() => {
                    b = 12 + 15
                    if (b > 100) {
                        resolve(b)
                    } else {
                        reject(new Error('errd'))
                    }
                    }, 1000)
            })
            return promise
        }
        asy().then(
            (res) => {
                console.log('结果:' + res)
            },
            (res) => {
                console.log(res)
            }
        )

View Code

　　d、（个人感悟），根据promise对象这种特性，自己可以写一个异步方法。比如执行一个函数，他的回调函数不会执行。当点击某个事件触发执行 这个promise对象的 resolve 或 reject函数，就会执行对应的函数。这种用法在组件中使用比较方便。

　　e、把 promise 对象的 resolve 和 reject 两个方法  赋值  到外面作用域，则在外面也可以控制 promise 对象 状态的改变，执行相应的程序。

 1 var asy_resolve,asy_reject;  // 全局作用域设置两个变量，分别 指向 Promise 对象的 resolve 和 reject 函数。
 2 
 3 function asy () {
 4     var promise = new Promise(function (resolve, reject) {
 5         asy_resolve = resolve;   // 将 asy_resolve 指向 resolve 方法
 6         asy_reject = reject;     // 将 asy_reject 指向 reject 方法
 7     })
 8     return promise
 9 }
10 
11 asy().then((res) => {
12         console.log('结果:' + res)
13     }).catch((res) => {
14         console.log(res)
15     }
16 )
17 
18 setTimeout(function(){
19     asy_resolve('成功');   // 在创建 promise 对象外，执行 promise 对象状态改变的函数。
20     // asy_reject('失败');
21 },5000)

View Code

　 f、then函数执行后还是promise 对象，then函数执行完毕，接下来执行那个回调函数，取决于then函数的执行情况。

　　　　默认执行，成功的那个回调函数。下面的情况执行错误的那个回调函数

　　　　　1、then函数里面执行   return Promise.reject(error) 

(error) => {

return Promise.reject( error )

 }

　　　　  2、then函数里面执行  throw Error

() => {
    throw Error
}

 　g、注意： then函数里面，return 返回的值就是 传递到回调函数中的参数值      https://blog.csdn.net/a695993410/article/details/80954552

1 var example = new Promise((fulfill, reject)=>{
2     let i = 1;
3     reject(i);
4 })
5 example
6 .catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
7 .then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
8 .catch(()=>{console.log('我是第二个catch的回调函数')})
9 .then(() => {console.log('我是第二个then的回调函数')})

View Code