ES6 - ECMA2015 - 学习总结

新的概念与方法

概略图：

ECMA2015

兼容性：
主流浏览器，nodejs，IE10+

基本使用

变量

相较于一直在使用的var变量生命，新增let、const弥补其不足，主要表现为

1. var可以重复声明变量，let与const不允许重复声明
2. var块级作用域仅存在与函数内部，而let与const自带块级作用域
3. var不能声明常量

字符串

1. 新增方法 startsWith、endsWidth，判断一个字符串是否以什么开头或结尾，返回布尔值

console.log('https://www.sohu.com'.startsWith('https')); //true

2. 模板字符串，无需传统换行符\，可以使用变量

var _tit = '天气预报'
var _mes = '晴，微风，温度，湿度...'  
var _str = `<ul>
                <li>${_tit}</li>
                <li>${_mes}</li>
            </ul>`; 
console.log(_str);  //完整的拼接  

箭头函数

1. 简化了书写代码的方式
   1-1. 遇到一个参数，可省略()，遇到一行内部执行代码，且为return，则可以省略{}与return
2. 可以修改this指向，因为箭头函数内没有this，也无法成为构造函数

函数参数扩展

1. 参数剩余模式，函数传参时候，如果实参数量大于形参数量，可以使用剩余模式，将多余参数放到一个数组内

function fn1(a,b,...c){
    console.log(a,b,c);
};
fn1(1,2,3,4,5,6,7); //1 2  Array(5) [ 3, 4, 5, 6, 7 ]

1-1. 组合

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var res = [...arr1,...arr2];  //1,2,3,4,5,6

2. 默认值

function fn1(a,b=2){
    console.log(a,b)
};
fn1(1);          //1 2
fn1(10,20);   //10 20

解构赋值

在定义值的时候，可以通过解构赋值方式，一次定义完毕

var [a,b] = [10,20,30];
console.log(a,b); //10 20
var [a,b] = [100];
console.log(a,b); //100 undefined

对象扩展方法

1. Object.assign() 对象浅拷贝，同属性后面覆盖前面，不同属性则合并
   ···
   let target = { a: 1, b: 2 };
   let source = { b: 4, c: 5 };
   let returnedTarget = Object.assign(target, source);
   console.log(returnedTarget); //{a: 1, b: 4, c: 5}
   ···
2. Object.is() 对比两个值是否相等
3. Object.getPrototypeOf() 获取对象原型

数组方法扩展

1. map 需要return返回值，进入一个数组，返回一个数组
   例：一个乘2操作

var arr = [1,2,3];
var resArr = arr.map((v)=>v*2)
console.log(resArr);

2. reduce 汇总一个数组，进入一个数组，返回一个值
   例：一个加和操作

var arr = [1,2,3];
var res = arr.reduce((v1,v2)=>v1+v2);
console.log(res);  //6

3. filter 需要return 返回一个判断条件语句，进入一个数组，返回一个数组

var json = [{'name':'国产包','price':100},{'name':'进口包1','price':20000},{'name':'进口包2','price':50000}];
var resArr = json.filter((item)=>item.price>30000);
console.log(resArr );  //[{name: "进口包2", price: 50000}]

4. forEach 相当于for的一个简写，循环遍历每一项

var arr = ['苹果','柿子','梨'];
var res = arr.forEach((item,index)=>{ console.log(index+'--'+item) });
console.log(res);  
//0--苹果
//1--柿子
//2--梨

5. fill 修改数组内的值
   修改数据，参数三个，分别为 修改的值、开始索引、结束索引（不包含）

let arr = [1,2,3];
arr.fill(4,1,2);
console.log(arr);  //[1,4,3]

快速mock数据

let res = Array(3).fill({'name':'张三','age':18})

6. findIndex 返回第一个匹配位置的索引，类似filter，参数为函数，返回一个条件

let arr = [1,2,34,51,6,76];
let _index = arr.findIndex((item)=>item>14)
console.log(_index)；//2

7. find 返回第一个匹配的值，同上findIndex

let arr = [1,2,34,51,6,76];
let _value = arr.find((item)=>item>14)
console.log(_value); //34

8. Array.from 将类数组(iterator)转化为新数组

let arr = new Set([1,2,3]);
let arr2 = Array.from(arr);
console.log(Object.prototype.toString.call(arr2)); //[object Array]

9. Array.of 任意个参数，将按顺序成为返回数组中的元素， 返回新的 Array实例

Array.of(7);   // [7] 
Array(7);      // [ , , , , , , ]

JSON

json对象扩展的方式，代替了eval，更加安全有效
完成对象与字符串之间的相互转换 【注】：json转化为对象时候，必须是标准json格式，使用""

1. JSON.stringify({"name":"张三","age":18}); //{"name":"张三","age":18}
2. JSON.parse('{"name":"张三","age":18}'); //Object { name: "张三", age: 18 }

Symbol 一个唯一值
继String、Number、Boolean、Object、null、undefined 的后新增的数据类型
特征：

1. 设置与获取

let obj = {}
let a2 = Symbol('a2');
obj.name = '张三';
obj['age'] = 18;
obj[a2] = 11;

for(let attr in obj){
    console.log(obj[attr]); //张三、18
}
console.log(obj[a2]);  //11
let symRes = Object.getOwnPropertySymbols(obj);
console.log(symRes[0]);  //Symbol(a2)

2. Symbol 与 Symbol.for (局部与全局设置)

let a = Symbol('a1');
let b = Symbol('a1');
let a1 = Symbol.for('a1');
let b1 = Symbol.for('a1');

console.log(a==b); //false;
console.log(a1==b1); //true

3. Symbols key获取方式‘getOwnPropertyNames’，‘getOwnPropertySymbols’

var fooSym = Symbol('foo');
var myObj = {};
myObj['foo'] = 'bar';
myObj[fooSym] = 'baz';
Object.keys(myObj); // -> [ 'foo' ]
Object.getOwnPropertyNames(myObj); // -> [ 'foo' ]
Object.getOwnPropertySymbols(myObj); // -> [ Symbol(foo) ]
assert(Object.getOwnPropertySymbols(myObj)[0] === fooSym);

Set 类数组，内部成员将不可重复

实际使用：

[...new Set(str)].join("")  //去重字符串
[...new Set(arr)] 或 Array.from(new Set(arr)) //去重数组
new Set([...a, ...b])  //并集
new Set([...a].filter(v => b.has(v)))  //交集
new Set([...a].filter(v => !b.has(v)))  //差集

script 标签的异步操作 async defer

<!-- 普通的引入 -->
<script src="a.js" ></script>
<!-- defer -->
<script src="a.js" defer></script>
<!-- async -->
<script src="a.js" async></script>

说明：

1. defer
   DOMContentLoaded事件执行前，加载完毕;
   若干个defer，会按照顺序依次加载完毕;
   应用场景：可以放在有依赖先后的环境内;

2. async
   不保证 DOMContentLoaded事件执行前，加载完毕;
   多个async没有先后顺序，根据自身的文件加载速度自行完成;
   应用场景：存在强聚合，无依赖的环境，如 百度监测;

promise

为了解决业务中异步处理函数中，函数嵌套异步处理函数的情况，callback hell 回调地狱
使用时候需要new Promise() 实例，参数为函数，函数中又存在两个参数，分别是resolve,reject，一个用于处理成功，一个用于处理错误信息

1. 使用promise封装一个异步请求
   如：

function getData(){
  return new Promise(function(resolve,reject){
      $.ajax({
        url:'xxxx',
        datatype:'json',
        success(res){
            resolve(res);
        },
        error(err){
             reject(err);
        }
      });
  });
};

getData().then(function(res){ console.log(res) },function(err){ console.log(err); })

2. promise的方法：
   Promise.all 几个promise都完成的情况
   Promise.race 返回第一个触发resloved的promise

3. 其他实验性方法：
   Promise.any

generator

1. 同样是处理异步函数的，但是相对于一般函数，声明generator 需要增加*来区别一般函数
2. generator拥有暂停函数执行的能力，通过定义函数中的yeild方法来实现
3. generator调用后，返回一个iterator（迭代器）
4. 这个iterator通过then方法，来让函数继续前进
5. 通过generator可以将一个非iterator赋予iterator的能力
6. 不像async await 无法使用箭头函数方式书写

状态根据在generator声明内，return前的yield都为未执行完毕，在return时候为执行完毕

function *myGn(){
    yield 'a';
    yield 'b';
    return 'c';
}

let myIt = myGn();
console.log(myIt.next());  //{value: "a", done: false}
console.log(myIt.next());  //{value: "b", done: false}
console.log(myIt.next());  //{value: "c", done: true}

传参：
第一个参数无意义，其传参需要形参与实参

function *myGn(){
    var res1 = yield;
    console.log(res1)
    var res2 = yield;
    console.log(res2)
    return 'c';
}

let myIt = myGn();

myIt.next(100);
myIt.next(200);  //200
myIt.next(300);  //300
console.log(myIt.next());  //{value: undefined, done: true}

赋予一个对象，成为iterator的能力

var obj = {};
obj[Symbol.iterator] = function *(){
  yield 1;
  yield 2;
}
for(var v of obj){
console.log(v);  //1 2
}

Module 继CommonJS (server nodejs)、AMD(web require.js)、CMD(web sea.js)之后的(web)模块化语言

常用使用方法
导出 person.js ：

export default Person
export { age, name, sex }

导入person.js ：

import Person from './js/proson'
import { age, name, sex } from './js/proson'

面向对象

构造函数与类区分开了，继承不需要传统的方式
涉及到的关键词 class constructor extends super

旧的书写方式

//传统构造函数
function Human(name,age){
    this.name = name;
    this.age = age;
}
Human.prototype.say = function(){
    console.log(this.name+"'s age is "+this.age)
}

//继承
function Worker(name,age,job){
    Human.call(this,name,age);
    this.job = job;
}   
Worker.prototype = new Human();
Worker.prototype.constructor = Worker;

Worker.prototype.showJob = function(){
    console.log(this.name + "'s job is "+this.job);
}

let H1 = new Human('tom',18);
H1.say();   //my name is tom

let W1 = new Worker('jerry',16,'captain');
W1.say();   //my name is jerry
W1.showJob();   //my job is captain

新的构造函数书写方式：

class Human {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  say(){
    console.log('大家好，我是'+this.name+'，我今年'+this.age+'岁'); 
  }
}
class Worker extends Human {
    constructor(name,age,skills) {
        super(name,age);
        this.skills = skills;
    }
    doSomething(){
        console.log(this.name+'的技能是'+this.skills);
    }
}           
    
//创建一个小朋友   
var _H1 = new Human('小明',10);
_H1.say();  //大家好，我是小明，我今年10岁
//创建一个工程师
var _W1 = new Worker('张师傅',50,'建筑学');
_W1.say();  //大家好，我是张师傅，我今年50岁 
_W1.doSomething();  //张师傅的技能是建筑学