ES新特性

1、变量声明

let a= "hello";

const PI = Math.PI;

2、解构

数组解构： let [a,b,c="dd"] = ["aa","bb","cc"];

对象解构： let {a,b,c} = object;

3、模板字符串和字符串方法

const msg = `hello world ${contry}`;
复制代码

新增字符串方法：

.includes()  //查找字符串，返回true/false, 支持正则
.startsWith() //以XXX开头
.endsWith() //以XXX结尾
.repeat(number) //重复字符串
.padStart(length, str) //往前填充
.padEnd(length, str) //往后填充
复制代码

4、强化参数

* 函数参数默认值： function(a, b="hi"){} 
* 拓展运算符：[]/{} ---> ...[]/...{}  //拓展出内部的元素
* 箭头函数：() => {}
复制代码

5、数组新特性

* for...of //遍历数组, for in是遍历键名，for of是遍历键值
* [].keys() //获取数组下标
* [].entries() //获取数组项
* Array.from() //类数组转为数组
* Array.of() //把一组值转为数组
* .find() //查找第一个符合条件的元素
* .findIndex() //查找第一个符合条件的元素位置
* .fill() //数组元素填充
* .includes() //查找是否存在指定元素，返回boolean
复制代码

6、对象新特性

* name: name <==> name //对象属性简化
* show: function(){} <==> show(){} 
* Object.is() //检测两个对象是否相等
* Object.assign() //合并对象，复制对象
* Object.keys() //获取对象的所有属性名
* Object.values() //获取对象的所有属性值
* Object.entries() //将数组和对象更容易转为Map数据类型
例：const arr = [1, 2, 3]; 
    console.log(Object.entries(arr));  // [['0', 1], ['1', '2'], ['2', '3']]
    const obj = { foo: 'bar', baz: 'abc' }; 
    console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]
    const map = new Map(Object.entries(obj)); //Map {'foo' => 'bar', 'baz' => 'abc'}
复制代码

7、Promise

const funSync = function(){
    return new Promise((resolve, reject) => {
        resolve(); //成功时执行
        reject(); //失败时执行
    });
}
复制代码

8、模块化

特点：

(1)、加载后模块内容更新，加载内容也更新

(2)、动态引入，返回值为Promise对象
复制代码

9、class类的简化

//类的封装
class Person {
    constructor(){}, //构造函数，定义类的属性
    fun1(){},   //类的原型对象方法，等价于Person.prototype.fun1 = function(){}
    [变量](){}, //函数名参数化
    set name(){}, //用来修改类的属性值
    get name(){}, //用来获取类的属性值
    static fun2(){} //静态方法，不需要创建子对象可以用类型名直接调用，等价于Person.fun2 = function(){}
}
//类的继承 
class Children extends Parent { //等价于Object.setPrototypeof(Children, Parent) <=> Children.__proto__ = Parent
    constructor(params){
        super(params); //执行父类型构造函数并继承父级属性
    }
    super.fun1() //执行父级方法
}
复制代码

9、async--await

特点：

(1)、awiat后面是一个Promise对象

(2)、async函数返回一个Promise对象

(3)、await语句后面为reject时，async执行中断，可通过try--catch处理错误。
复制代码

10、symbol (新增数据类型)

//创建实例
let sym = Symbol("a");
//用typeof检测数据类型
typeof sym  // 'symbol'
//比较
let s2 = Symbol('another symbol')
let s3 = Symbol('another symbol')
s2 === s3 // false **!每个Symbol实例都是唯一的。因此，当你比较两个Symbol实例的时候，将总会返回false

//使用Symbol来作为对象属性名(key)
const PROP_NAME = Symbol()
const PROP_AGE = Symbol()
let obj = {
  [PROP_NAME]: "一斤代码"
}
obj[PROP_AGE] = 18
obj[PROP_NAME] // '一斤代码'
obj[PROP_AGE] // 1

//使用Symbol来替代常量
const TYPE_AUDIO = Symbol();

//使用Symbol定义类的私有属性/方法
const PASSWORD = Symbol()
class Login {
  constructor(username, password) {
    this.username = username
    this[PASSWORD] = password
  }
}

//注册和获取全局Symbol
let gs1 = Symbol.for('global_symbol_1')  //注册一个全局Symbol
let gs2 = Symbol.for('global_symbol_1')  //获取全局Symbol
gs1 === gs2  // true
复制代码

! 注意：

• Symbol类型的key是不能通过Object.keys()或者for...in来枚举的，它未被包含在对象自身的属性名集合(property names)之中。
• 当使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外。

11、set (新增数据类型)

>> 不能有重复值，key值和value值相同，支持链式操作

//创建实例
let set = new Set([]);
typeof //返回object

//类型方法
.add() //添加
.delete() //删除
.has() //检查是否存在某个值， 返回boolean
.size  //返回元素个数
.clear() //清空元素
.keys()  //获取键名
.values() //获取键值
.entries() //获取键值对
.forEach()  //遍历

//数据类型之间的转换
Array.from(set) //set对象转为数组
[...set]
复制代码

使用场景： 数组求并集、交集、差集

12、map (新增数据类型)

//创建实例,key可为任意类型的值
let map = new Map([ [key,value], [key,value] ]);

//类型方法
.set(key, value) //添加键值对
.get(key) //获取键对应的值
.delete(key)  //删除键值对
.has(key) //判断指定的键是否存在
.clear() //删除map中的所有键值对
.size //获取大小
.keys() //获取所有键
.values() //获取所有的值
.entries() //获取所有的键值对
.forEach() //遍历map的所有键值对。
    map.forEach(function(value, key, map) {});
    
//数据类型之间的转换
[...map] //map转为数组，二位数组
function mapToObj(strMap) { //map转为对象
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
function objToMap(obj) { //对象转为map
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
复制代码

13、generator(工厂函数)

function* fun(){ //定义
    yield "hello"; 
    yield "world";
    yield* foo();   //generator函数
}
const fun1 = fun(); //实例化
fun1.next() //执行第一个yield函数，并返回对象{value:"hello", done: false},最后一个yield的done值为true

[...fun1]    //遍历所有yield的值
for...of...  //可以自动遍历执行yield

//应用： 异步编程
function run(fn){  //流程控制
    const gen = fn();
    function next() {
        const result = gen.next();
        if (result.done) return;//结束
        result.value(next);//next作为入参，即本工序成功后，执行下一工序
    }
    next();
};
//流程列表
function* task(){
     yield prepare;  //异步函数
     yield fired;
}
run(task);
复制代码

11、ES9(2018)新特性

*  正则命名捕获：(?<name>\d{4})
   反向引用: \K<name>
*  匹配模式：g(全局) i(忽略大小写) m(多行模式) s(把.作为字符使用)
*  Proxy: 拓展对象功能
   new  Proxy(被代理的对象, {操作函数})
   操作函数：set()  //设置对象值时触发
             get()  //获取对象值时触发
             has()  //检测是否有某个属性时触发
             apply() //调用函数时触发
             deleteProprty() //删除属性时触发
*  Reflect: 
复制代码

12、compose()

!注意

• 该函数的参数都为函数，该函数的返回结果也为函数；
• 该函数执行顺序为从右向左，执行完的结果作为参数传递给前一个函数。
• 创建compose()函数

//方法一
function compose(){
	var args = [].slice.call(arguments);
	return function(initArg){
		var result = initArg;
		for(var i = args.length -1; i >=0; i--){
			result = args[i](result);
		}
		return result;
	}
}
//方法二
function compose(){
	var args = [].slice.call(arguments);
	return function(initArg){
		return args.reduceRight(function(init, current){
			return current(init);
		},initArg)
	}
}
复制代码

转载于:https://juejin.im/post/5ce13aee5188253e010302cd