ES6新特性总结

前言

网上有很多关于ES6的文章教程，但是总觉得比较教科书话，繁琐难懂，因此特意在此对ES6常用的新特性，做了一些简化概述，以帮助新人理解。

一、箭头函数

let fn = () => {
  console.log('箭头函数');
}
// 回调函数中的运用
let arr = [1, 2];
let increaseArr = arr.map((item, index) => {
  return item + 1;
});

1、参数只有一个，那么()可以不要；如果函数主体只有return，那么{}可以不要；下面是个例子：

let arr = [1, 2];
let increaseArr = arr.map(item => item + 1);

2、如果箭头函数是对象中的属性值，那么this作用域会跳出对象

window.color = 'blue';
let obj = {
  color: 'red',
  sayColor: () => {
    console.log(this.color);
  }
 };
obj.sayColor(); // blue

二、函数参数

1、参数扩展

let showArg = (a, b, ...args) => {
  console.log(...args);
}
showArg(1, 2, 3, 4, 5); // 3 4 5

2、默认参数

let sum = (a=2, b=5) => {
  return a + b;
}
sum(); // 7
sum(5); // 10
sum(5, 10); // 15

三、解构赋值

1、左右两边的数据结构必须一致

let [a, b, c] = [1, 2, 3];
let {a, b, c} = {a: 1, b: 2, c:3};
let [{a, b}, c] = [ {a: 1, b: 2}, 3];
// 以上任何一种赋值方式：console.log(a, b, c); // 1 2 3

2、右边必须是一种有效的JavaScript数据类型

// 这样会报错，因为右边{1, 2}，不是JavaScript中6种数据类型中的任何一种
let {a, b} = {1, 2};

3、申明和赋值不能分开

// 这样会报错
let [a, b];
[a, b] = [1, 2];

四、字符串模板

过去ES5字符串拼接写法

let data = {
  title: '标题',
  content: '内容文字'
};
let divHtml = '<div>'
    +'<span class="title">' + data.title + '</span>'
    +'<span class="content">' + data.content + '</span>'
  +'</div>';

ES6新字符串模板，新增特性：支持换行、${变量}

let data = {
  title: '标题',
  content: '内容文字'
};
let divHtml = `<div>
        <span class="title">${data.title}</span>
        <span class="content">${data.content}</span>
    </div>`;

五、对象简写

键和值，如果值是个变量，并且变量名和键同名，可以这样写：

let name = 'Dave',
    age = 26;
let person = {
  name,
  age
}

如果值是函数，可以这么简写

let name = 'Dave',
    age = 26;
let person = {
  name,
  age,
  sayName() {
    console.log(this.name)
  }
}

六、面向对象

1、类（构造函数）
回往ES5过去的写法

function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  }
}

ES6模仿JAVA的写法

class User{
  // 这是类的写法，不是ES6函数简写
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayName() {
    console.log(this.name);
  }
}

2、继承
回往ES5过去的写法

function VipUser(vipCode) {
  this.vipCode = vipCode;
  this.showVipCode = function() {
    console.log(this.vipCode);
  }
}
VipUser.prototype = new User(name, age);
VipUser.prototype.constructor = VipUser;

ES6模仿JAVA的写法

class VipUser extends User{
  constructor(name, age, vipCode) {
    // super方法是ES6类写法内部自带的，相当于User.call(this, name, age);
    super(name, age);
    this.vipCode = vipCode;
  }

  showVipCode() {
    console.log(this.vipCode);
  }
}

七、Promise

let p = () => {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/login?username=xxx&pass=xxx',
      success(data) {
        resolve(data);
      },
      error(data) {
        reject(data);
      }
    });
  });
}
p().then(data => {
  console.log(`success返回的data:${data}`);
}).catch(data => {
  console.log(`error返回的data:${data}`);
});

上面看起来，就是两个普通的回调函数，简直就是多此一举。是的！但是有一些些区别；Promise承诺，会记住数据，任何时候去调用，都可以拿到想要的数据：

let res = p();
// 下面任何时候调用，都可以拿到返回的数据。
res.then(data => {
  console.log(`success返回的data:${data}`);
}).catch(data => {
  console.log(`error返回的data:${data}`);
});

下面两种倒是有用的方法：

let p1 = new Promise(resolve => {
  $.get('/xxx1', (data1) => {
     resolve(data1);
  });
});
let p2 = new Promise(resolve => {
  $.get('/xxx2', (data2) => {
     resolve(data2);
  });
});
// 批量请求；获取到所有请求数据，组成数组返回
Promise.all([p1, p2]).then(arr => {
  // arr: [data1, data2]
  console.log(arr);
});
// 竞赛请求；获取到请求最快的数据
Promise.race([p1, p2]).then(data => {
  console.log(data);
});

八、set数据结构

// 实例化set，参数是个可选参数，类型为数组 | set实例化对象
let set = new Set(); 
let set = new Set([1, 2]);
// 添加成员
set.add(3).add('abc').add({name: 'Dave'});
// 删除成员
set.delete('abc');
// 查找是否存在某个成员
set.has('abc');
// 清空
set.clear();
// 长度
set.size
// 遍历
set.keys();
set.value();
set.entries();
for (let i of set.keys()){}
for (let i of set.value()){}
for (let [key, value] of set.entries()){}
for (let i of set){}
set.forEach((item, index) => {})

下面是一种数组去重常用技巧

let arr = [1,3,5,4,5,2,3];
let newArr = [...new Set(arr)];

set如何使用数组方法（Set原型对象本身没有的方法），例如map、filter

let set = new Set([1, 2]);
set = new Set([...set].map(item => item * 2));
set = new Set([..set].filter(item => item < 2));

九、map数据结构

map类似对象，但对象属性只能是字符串，而map可以是其他6中数据类型

let map = new Map();
map.set('key', 'value');
map.get('key');
map.delete('key');
map.has('key');
map.clear();
// 遍历
map.keys();
map.value();
map.entries();
for (let i of map.keys()){}
for (let i of map.value()){}
for (let [key, value] of map.entries()){}
for (let i of map){}
map.forEach((item, index) => {})

十、模块化import用法

被引入的modules.js；下面介绍三种导出方法：

// 可以直接申明赋值导出
export let a = 3;
// 可以先申明赋值，然后再导出；分开来写
let b = 4;
let person = {name: 'Dave'}
export {
  b,
  person
}
// 还可以匿名导出，但一个模块只能有一个默认（匿名）导出
export default {
  b,
  person
}

需要引入的imports.js

// 默认（匿名）的导入需要给它取一个变量名，名字任意但一定要放在最前面
import mod, {b, person} from 'modules.js';
// 给在modules.js指定变量名导出的变量，取别名
import mod, {b as a, person as dave} from 'modules.js';
// 统一导入到一个变量（对象）
import * as modules from 'modules.js';
import mod, * as modules from 'modules.js';
// 导入后再导出；不会导出已导入模块中的默认导出
export * from 'modules.js';
// 导出已导入模块中的默认导出
import mod from 'modules.js';
export default mod;

十一、generator中的异步函数async

// generator函数写法
function *ye() {
  console.log(1);
  yield;
  console.log(2);
  yield;
  console.log(3);
  return;
}
// 调用
let yeObj = ye();
ye.next();
ye.next();

这样看起来，没什么用。重点说下：异步函数async

// async需要await配合，await需要Promise配合；三者结合起来使用
async function getDatas() {
  await new Promise(resolve => {
    $.get('/xxx1', function (data1) {
      // 这里的resolve是必须的，不执行resolve，await将不起作用
      resolve(data1);
    });
  }).then(data1 => {});
  await new Promise(resolve => {
    $.get('/xxx2', function (data2) {
      // 这里的resolve是必须的，不执行resolve，await将不起作用
      resolve(data2);
    });
  }).then(data2 => {});
}
getDatas();