Es6常用语法总结

箭头函数

箭头函数与包围它的代码共享同一个this,可以很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。

const f = v => v

上面的代码等同于

const f = function(v) {
     
  return v
}

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

const sum = (num1, num2) => {
      return num1 + num2 }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

const getTempItem = id => ({
      id: id, name: "Temp" })

使用注意点

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
• 不可用当做构造函数，也就是说，不可用使用new命令，否则会抛出错误。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

扩展运算符

1. 解构赋值

let {
     x,y,...z} = {
     x:1,y:2,a:3,b:4};
  x //1
  y //2
  z //{a:3,b:4}
  
let a = {
      ...'hello', ...'wa'}
a = {
      0: w, 1: a, 2: l, 3: l, 4: o }

let b = {
      ...'javascript', ...'javd', ...[1, 2, 3] }
b = {
      0: 1, 1: 2, 2: 3, 4: d, 4: s, 5: c, 6: r, 7: i, 8: p: 9: t }

2.扩展运算符

let z = {
     a:1,b:2};
let n = {
     ...z};
n // {a:1, b:2}

这等同于Object.assign的使用

let aClone = {
     ...a};
//等同于
let aClone = Object.assign({
     },a)

如果扩展运算符的参数是null或undefined,这两个值会被忽略，不会报错。

let obj = {
     ...null,...undefined}; //不报错

模板字符串

• 不使用模板字符串

const name = 'Your name is ' + first + ' ' + last + '.'

• 使用模板字符串

const name = `Your name is ${
       first} ${
       last}.`

模块化(Module)

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。
模块功能主要由两个命令构成：export和import。

• export命令用于规定模块的对外接口
• import命令用于导入其他模块提供的功能。

导出（export）

1. 导出变量

export const name = 'Rainbow'

2. 导出函数

export function myFunction(arg) {
     
	return arg
}

导入（import）
定义好模块的输出以后就可以在另外一个模块通过import引用。

import {
     myModule} from 'myModule';// main.js
import {
     name,age} from 'test';// test.js

promise

promise是异步编程的一种解决方案

• 不使用es6

setTimeout(function()
{
     
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
     
        console.log('Hi'); // 2秒后输出"Hi"
    }, 1000);
}, 1000);

• 使用es6

var waitSecond = new Promise(function(resolve, reject)
{
     
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
     
      console.log("Hello"); // 1秒后输出"Hello"
      return waitSecond;
    })
    .then(function()
    {
     
        console.log("Hi"); // 2秒后输出"Hi"
    });

let和const命令

let 和var的区别

var a = [];
for (var i = 0; i < 10; i++) {
     
  a[i] = function () {
     
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的function在运行时，会通过闭包读到这同一个变量i，导致最后输出的是最后一轮的i的值，也就是10。

而如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6。

var a = [];
for (let i = 0; i < 10; i++) {
     
  a[i] = function () {
     
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。

不存在变量提升
var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

使用let与const定义的变量为块级作用域

{
     
  let a = 10;
}

console.log(a); //-1 or Error“ReferenceError: a is not defined”