Es6笔记

        本周主要是对之前知识进行复习，比如js高级和Es6之类的,整理了一下笔记，下面是Es6的一些知识点。

let

        声明变量不可重复声明

        块级作用域

         不存在变量提升

        不影响作用域链

const声明常量

        一定要赋初始值

        一般使用大写

        常量的值不可修改

        块级作用域

        对数组和对象的修改不算作对常量的修改

结构赋值

        es6允许按照一定的模式从数组和对象中提取值，对变量进行赋值

        数组的结构赋值：

const xingshi=['赵','钱','孙','李'];
let ['第一','第二','第三','第四']=xingshi;

        这样第一就代表的是赵，第二代表的是钱，以此类推。

        对象的解构赋值：

const zhu={
    name:zhuziqing,
    age:'不祥',
    work:function(){
        console.log('我有好多文章');    
    }
};

let {name,age,work}=zhu;
//这样就可以直接调用函数
work();

模板字符串``

        与单引号和双引号相比内容可以直接出现换行符

        变量拼接：

let work='《背影》';
let out=`我的作品的名字叫${work}`;

箭头函数：

//之前的
let fn=function(a,b){
    return a+b
}
fn(1,2);

//箭头函数
let fn=(a,b)=>{
    return a+b
}
fn(1,2);

//当参数只有一个时
let add=n=>{
    return n+n;
}

//当代码体只有一句时,可省略花括号，此时return也必须省略
let add=n=>n+n;

        注意：

        箭头函数中，this是静态的，this始终指向函数声明时所在作用域下的this的值不能作为构造函数去实例化对象，如果你这样写：

let Person=(name,age)=>{
    this.name=name;
    this.age=age;
}
let me=new Person('姓名',18);

        这样就会报错

        不能使用arguments（接受实参）

es6允许给函数参数赋值初始值：

        1、形参初始值，具有默认值的参数，一般位置靠后

function add(a,b,3){
    return a+b+c;
}
let res=add(1,2);

        2、与结构赋值结合

function fn(name,age,home){
    console.log(name);
    console.log(age);
    console.log(home);
}
fn({
    name:'左左',
    age:18,
    home:'河南'
})

//赋初始值
function fn('姓名',0,home){
    console.log(name);
    console.log(age);
    console.log(home);
}
fn({
    name:'左左',
    age:18,
    home:'河南'
})

rest参数:

        用于获取函数的实参(rest参数放在参数最后面)

function data(a,b,...args){
    console.log(a)
    console.log(b)
    console.log(args);
}
data(1,2,3,4,5);

        这样就把1赋值给了a，2赋值给了b，[3,4,5]赋值给了args

...扩展运算符(将数组转换为以逗号分隔的参数序列)：

//声明一个数组
const month=['一月','二月','三月'];
function getDate(){
    console.log(arguments);
}
getDate(...month);
getDate(month);
//可自行比较上面两行输出的区别

Symbol:

        是一种新的数据类型

        js数据类型：undefined、string、symbol、object、null、number、boolean

        创建Symbol

let s=Symbol();
let s2=Symbol('123');
let s3=Symbol('123');
console.log(s2===s3)//false
let s4=Symbol.for('123')
let s5=Symbol.for('123')
console.log(s4===s5)//true

        注意：

                Symbol类型的数据不能与其他数据运算和对比

let game={
    
}

let methods={
    up:Symbol(),
    down:Symbol()
}
game[method.up]=function(){
    console.log('上升')
}
game[method.down]=function(){
    console.log('下降')
}
//这样可以添加方法并且不影响对象中原有的方法

//或者
let game2={
    name:'123',
    [Symbol('say')]:function(){
        copnsole.log('i can say');    
    },
     [Symbol('work')]:function(){
        copnsole.log('i can work');    
    }
}

迭代器：

        为不同的数据结构提供统一的访问机制

        for...in遍历的是键名，for...of遍历的是键值

生成器：

        生成器函数是es6提供的异步编程的方案

function * gen(){
    console.log('我是生成器');
}
let iterator=gen();
console.log(iterator);
//返回的是迭代器对象

iterayor.next();
//这样就可以打印'我是生成器'了

        生成器函数中可以有yield

function *gen(){
    console.log(111);
    yield '2';
    console.log(222);
    yield '3';
    console.log(333);
    yield '4';
    console.log(444);
}
let iterator=gen();
iterayor.next();//111
iterayor.next();//111 222
iterayor.next();//111 222 333
iterayor.next();//111 222 333 444

//如果这样写
for(let v of gen()){
    console.log(v)
}
//返回的是yield后面的内容

        生成器函数的参数传递：

function *gen(arg){
    console.log(arg);//AAA
    let one=yield '2';
    console.log(one);//BBB
    let two=yield '3';
    console.log(two);//CCC
    let three=yield '4';
    console.log(three);//DDD
}
let iterator=gen('AAA');
console.log(iterator.next());
console.log(iterator.next('BBB'));//next里面的内容作为第一个yield返回结果
console.log(iterator.next('CCC'));//next里面的内容作为第二个yield返回结果
console.log(iterator.next('DDD'));//next里面的内容作为第三个yield返回结果

Promise（主要应用于异步请求，解决回调地狱问题）

        promise对象有三种状态即：pending,resolved,rejected

        状态一旦确定不再改变

        then方法返回结果是Promise对象，对象状态由回调函数执行结果决定

                1、如果返回的不是Promise类型的，那么状态是成功

                2、如果是Promise类型的，则返回状态取决于返回的Promise对象的状态

                3、抛出错误时状态是失败的

Es6集合介绍与API

        Set

//声明一个Set
let s=new Set();
let s2=new Set(['喜羊羊','美羊羊','懒羊羊','沸羊羊']);//set里面可以放一个可迭代数据，如数组
//元素的个数
console.log(s2.size);
//添加元素
s2.add('灰太狼');
//删除元素
s2.delete('灰太狼');
//检测是否存在某个元素
console.log(s2.has('喜羊羊'));//true
//清空
s2.clear();
//可以使用for...of遍历
for(let v if s2){
    console.log(v);
}

        Map(键值对集合,key的类型不限):

//声明Map
let m=new Map();
//添加元素
m.set('name','喜羊羊');
m.set('smart',function(){
    console.log('我很聪明');
})
let key={
    name:'place'
}
m.set(key,['北京','上海','浙江','江苏','河南']);
//长度
console.log(s.size);
//删除
m.delete('name');
//获取
console.log(m.get('smart'));
console.log(m.get(key));
//清空
m.clear();
//遍历
for(let v of m){
    console.log(v);
}

        class

class Phone{
    //constructor是固定名称，不可改变
    constructor(brand,price){
            this.brand=brand;
            this.price=price;
    }
    call(){
        console.log('I can');    
    }
}
let mi=new Phone('米',2000);
console.log(mi);

        注意：静态属性(属于类而不属于实例对象)：

class Phone{
    static name='手机';
    static buy(){
        console.log('I can');    
    }
}
let ph=new Phone();
console.log(Phone.name)//手机
console.log(ph.name)//undefined

        继承

class Phone{
    constructor(brand,price){
            this.brand=brand;
            this.price=price;
    }
    call(){
        console.log('我可以打电话');    
    }
}
class smartPhone extends Phone{
    constructor(brand,price,color){
            super(brand,price);
            this.color=color;
    }
    game(){
        console.log('I can play game');    
    }
    //重写
    call(){
        console.log('我可以打电话');    
    }
}
const mi=new SmartPhone('mi',2000,'蓝色');
mi.game();
mi.call();//调用的是子类的call方法，无法调用父类的call方法
console.log(mi);

        get和set：

class Phone{
    get Price(){
        console.log('价格被读取了');
        return 'read';    
    }
    //必须接收一个参数
    set price(change){
        console.log('价格被修改了');    
    }
}
//实例化对象
let s=new Phone();
console.log(s.price)//输出结果为返回的内容
s.price='free';

Es6数值的扩展

        Number.EPSILON是js表示的最小精度

console.log(0.1+0.2===0.3)//false
function equal(a,b){
    if(Math.abs(a-b)<Number.EPSILON){
        return true;    
    }else{
        return false;    
    }
}
console.log(equal(0.1+0.2,0.3));//true

        二进制 0b开头

        八进制0o开头

        十六进制0x开头

        Number.isFinite检测一个数值是否是有限数

        Number.isNaN检测一个数值是否为NaN

        Number.parseInt Number.parseFloat字符串转换为整数

        Number.isInteger判断一个数是否为整数

        Math.trunc将数字的小数部分抹掉

        Math.sign判断一个数到底值正数、负数还是0

对象方法的扩展

        1、Object.is判读两个值是否完全相等（这里需要注意NaN）

console.log(Object.is(120,120))//true
console.log(Object.is(121,120))//false
//和===很像，但也不太一样，例如：
console.log(Object.is(NaN,NaN))//true
console.log(NaN===NaN)//false

        2、Objsct.assign对象的合并

const obj1={
    name:'名字',
    age:18,
    home:'河南',
    sex:'女'
}
const obj2={
    name:'yi',
    age:20,
    home:'山东'
}
console.log(Object.assign(obj1,obj2))
//obj2会把与obj1重复的部分覆盖掉

        3、Object.setPrototypeOf设置原型对象

                Object.getPrototypeOf获取原型对象

const palce={
    name:'河南'
}
const home={
    we:['新乡'，'郑州','许昌']
}
Object.setPrototypeOf(place,home);
console.log(school);
console.log(Object.getPrototypeOf(place))

Es6模块化语法：

        模块功能主要有两个命令构成：export、import

        export命令用于规定模块的对外接口

        import命令用于输入其他模块提供的功能

Es7新特性:

        includes(判断元素是否存在)（indexOf也可以判断，存在返回1,不存在返回-1)

const arr=['喜羊羊','美羊羊','懒羊羊','沸羊羊']；
console.log(arr.includes('喜羊羊'))//true
console.log(arr.includes('暖羊羊'))//false

**

console.log(2**10);//等同于Math.pow(2,10);

Es8新特性

        async函数

                返回的是一个Promise对象

async function fn(){
    return "我是返回内容";
    //如果这里不是一个Promise类型的对象，则返回的是一个成功状态的Promise对象
    //如果抛出错误，则返回的是一个失败状态的Promise对象
    //如果返回的结果是一个Promise类型的对象，返回的Promise的状态取决于改Promise对象的状态
}
let res=fn();
console.log(res)

        await表达式

                await必须写在async函数中(处理异步操作)

                await右侧的表达式一般为promise对象

                await返回的是promise成功的值

                await的promise失败了，就会抛出异常，需要通过try...catch捕获处理

const p=new Promise((resolve,reject)=>{
    reject('失败了');
})
async function main(){
  try{
      let result=await p;
      console.log(result);  
  }  catch(e){
        console.log(e);
  }
}

Es9扩展运算符和rest参数(Es6是针对数组的，这里是对于对象的)

const one={
    n1:'喜羊羊'
}
const two={
    n2:'美羊羊'
}

const three={
    n3:'懒羊羊'
}
const m={...one,...two,...three};
console.log(m);

        这是大致的一些知识点，比如Promise之类的知识点需要我们更细致些去研究学习，这些知识平常只有多用才能更了解它的功能，现在觉得有些知识并没有什么用处，之后写项目时，就会知道它的重要性，尤其是关于异步处理。