ES6小结

ES6

说明

ECMAJavaScript标准

变量声明

var
let
    01let与var基本一致，用作变量声明
    02let在一对括号{}中形成局部作用域
    03let声明的变量不会变量提升
    04let不能重复声明变量(同一作用域)

const
    01 与let一致（局部，不提升，不能重复声明）
    02声明必须赋值
    03赋值不能修改（值类型）
    04建议大写

数组的结构

01数组解构:把数组解析为单个变量
02通过逗号跳过
03...接受剩余值
04可以给默认值
05快速交换变量

对象

对象新增方法
    Object.assagin()   合并复制
    Object.keys()    键的集合
    Object.values()   值的集合
    Object.create()   创建新对象
    ｜ 创建一个新的对象并以原对象作为prototype原型
    ｜ var parent = {name : "mumu " ,say (){alert(this. name)}}
    ｜ ​var obj = object.create(parent);
    ｜ obj的protoytpe原型上拥有parent所有方法和属性
    ｜ 

对象简写

    1.如果对象的键和变量名一致可以简写
    ｜ var name = "rmumu";
    ｜ ​var age = 18;
    ｜ var obj = {name , age , leg: 2};
    ｜ //相当于 obj= {name : name , age : age , leg:2}
    ｜ 
    2.对象函数可以省略function
    ｜ var obj = {name : "mumu" ,say : fucntion(){...3}
    ｜ ​//可以简写为
    ｜ var obj = [name : "mumu" , say(){...]}
    ｜ 

对象的属性可以动态拼接
｜ var n = "nick" ;var m = "name" ,
｜ var obj = {name : "mumu" , [ n+m] : "小"+this.name ]
｜ ​// obj= {name : ""mumu " , "nickname":""小mumu""}

模块

｜ module
导出
到处默认
｜ function format(date){}
｜ export default format
｜ ​
｜ export default function format(date){}
导出
｜ export function reverse(){}
导出变量
｜ export const PRICE=500；
先声明再导出
｜ var name = “mumu”;
｜ function say (){
｜ console.log(“价格是”+PRICE)
｜ ​}
｜ export {name，say}

导入
    <script type="module">
    导入默认
    ｜ import format from './相对路径'
    ｜ ​// format可以和导出的时候不一致
    导入
    ｜ import (reverse) from './相对路径'
    ｜ //reverse要和源文件方法一致
    导入所有
    ｜ iimport * as utils from '相对路径';
    ｜ utils.say();
    ｜ utils.reverse("我喜欢你")
    ｜ ​utils.default(new Date())
    ｜ 
    导入别名
    ｜ impot {reverse as r} rom './相对路径'
    默认和普通方法是一个文件
    ｜ import format ,{reverse as r,PRICE,name,say} from './相对路径

类

｜ class
typeof class
｜ 结果是Function
｜ 类的本质是函数
class Block{}
构造函数
｜ constructor(){}
｜ ​实例化的时候 new关键字调用的就是构造函数
extends 继承父类的方法
static 类的静态属性和方法
类的this指向的是它的实例（也就是new出来的对象）

ES6新增的数据类型

set集合
｜ 不重复的数组
    add 添加
    delete  删除
    clear  清空
    size  大小
    has  检测
    [...new Set(arr)]

map图
｜ 键名可以是任何类型的对象
    set(key,value) 设置
    get（key）获取
    delete  删除
    size  大小
    clear  清空

weakSet
｜ 值都是引用类型的Set
weakMap
｜ 值都是引用类型
symbol唯一符合
｜ （对象的键）

迭代类型

可以for  of  遍历的对象都是可迭代对象
｜ String  字符串
｜ Array 数组
｜ Set   集合
｜ ​Map  图
for(let of myset)
for(let k of myArr.keys())
for(let v of myArr.values())
for(let [k,v] of myArr.entries())

Promise

｜ 承诺

有三个状态，状态变化就不可逆
    pendding
    resolved
    rejected

实例p
    .then(res=>{})
    ｜ 回调函数获取resolved返回的结果返回一个新的promise实例
    .catch(err=>{})
    ｜ 获取rejected的原因

解决
    1.异步操作
    2.回调地狱（层级过深）

all全部
    所有promsie都resolve，all才执行resolve

race 赛跑
｜ （返回最先resolve）
    拿到最后的resolve结果

同步和异步

同步是按顺序从上至下阻塞式执行代码
｜ (上一行代码不执行完毕，下行是不会执行）
异步是先执行主线程的代码，再执行其他线程（非阻塞式)
实现异步的方式
    回调函数
    事件响应
    订阅发布模式
    Promise
    sync和await

async与await

async装饰的函数，返回的是一个promise对象返回的结果是resolve的结果
await用来等待异步的resolve结果只能出现在async装饰的函数中

generator生成器

就是在函数前面添加个*

function *range(min,max){
   for(var i = min,i<max;i++){
   yield i;
  }
}

生成器执行的结果是一个迭代器
var iter = range(1,10)
迭代器通过next方法返回一个对象，对象的value是yield生成的结果，在生成器里面 遇到yield就停止等待下一次next调用

{value:1,done:false}
...
{value:undefined,done:true}

可以通过for 来遍历迭代器
｜ for(v of range(1,100)){
｜    console.log(v)
｜ }
｜ 
String,Array,Set,Map的迭代器    arr[Symbol.iterator]()

Object.defineProperty

Object.defineProperty(obj,props,{
    set(v){//设置},
    get(){//获取},
    configurable:true是否能删除
    enumerable:true是否可以枚举
    value默认值
    writable:true是否可写
    }）
    可以定义对象的某个属性
})

proxy

｜ 代理对象
target 目标对象
handle 处理器

var proxy = new Proxy(target,handel)

函数

函数默认参
函数的拓展参
函数的不定参
箭头函数
    1.箭头函数也就是函数简写
    2.=>左边是参数，右边是返回值也是执行语句包
    3.箭头函数如果参数不是1个需要用()包裹
    4.如果执行语句多行{}包裹
    5.如果返回值数对象用({})包裹
    6.对象this指向函数的上一层作用域
    7.不能作为构造函数

字符串

遍历  for  of
查找
    includes  是否包含
    startsWith   以xxx开头
    endsWith   以xxx结尾

补齐
    padStart (len,symbol)
    ｜ len：要个数
    ｜ symbol ：补的元素
    padEnd(len,symbol)

去空白
    trim两端
    trimLeft左侧
    trimRight右侧

数组

sort 排序
ES6新增
｜ find查找符合条件元素
｜ findIndex查找符合条件元素的下标
forEach  遍历
    forEach(function(item,index,self))
    ｜ item当前遍历的元素
    ｜ ​index当前的下标
    ｜ ​self被遍历的数组

filter  过滤
map  映射
reduce  累计
    reduce(function(a,b))   a 上一次返回的结果     b 当前遍历的元素

some  有一个
every  每一个