ES6 总结

左手的ㄟ右手 2022-03-06 08:58 266阅读 0赞

## 1. 简介 ##

2015年推出，也叫ES2015，增加很多新特性

## 2. 块的作用域 ##

全局作用域，函数作用域，块作用域

if(true){
      let fruit='apple';//作用域仅在当前块中
    }

## 3. 恒量 ##

不能变化的量，用const声明

const fruit='apple';

## 4. 解构数组 ##

解构：分解一个对象的结构

var array=['a1','a2','a3'];
    var[b1,b2,b3]=array;
    console.log(b1,b2,b3);
    //a1 a2 a3

## 5. 解构对象 ##

let obj={a:"AA",b:"BB",c:"CC"};
    let {a:d,b:e,c:f}=obj;
    console.log(d,e,f);

## 6. 模板字符串 ##

let strA='A',strB='B';
    let str=`26位字母的开始是 ${strA} 和 ${strB}`;
    console.log(str);

## 7. 带标签的模板字符串 ##

## 8. 判断字符串中是否包含其他字符串 ##

let strA='A',strB='B';
    let str=`26位字母的开始是 ${strA} 和 ${strB}`;
    console.log(str.startsWith('今天'));
    console.log(str.endsWith('今天'));
    console.log(str.includes('A'));

## 9. 默认参数 ##

function AA( a="W",b='Q'){
      console.log(a+b);
    }
    AA();
    AA('123','456');

## 10. 展开操作符 ... ##

let aa=['A','B','C'];
    console.log(...aa);
    console.log(aa);

## 11. 剩余操作符 ... ##

function VV(a,...b){
       console.log(a,...b);
    }
    VV('aa','bb','cc','dd');

## 12. 解构参数 ##

function QQ( a,{b,c}={}){
        console.log(a,b,c);
    }
    QQ('S',{b:'W',c:'E'});

## 13. 函数的名字 ##

let aa=function(){
    
    };
    let bb=function EE(){
    
    };
    console.log(aa.name);
    console.log(bb.name);

## 14. 箭头函数 ##

let 函数名=(函数参数) =>{
      函数内容
    }
    let aa= bb => bb;
    console.log(aa('aaaa'))
    let cc=(dd,ee,ff)=>{
      console.log(dd+ee+ff);
    }
    console.log(cc('王','大','力'));

## 15. 对象表达式 ##

let a='A',b='B';
    let c={
      a:a,b:b,c:function(){}
    };
    let d={
      a,b,c(){}
    };
    console.log(c);
    console.log(d);

## 16.对象属性名 ##

let a={};
    let b='AA';
    a[b]='CC'; //a的属性'AA'的值为'CC'
    console.log(a);

## 17. 对比2个值是否相等 ##

Object.is(a,b);
    
    let a={};
    let b={};
    console.log(a==b);
    console.log(Object.is(a,b));

## 18.把对象的值赋值给另一个对象 ##

Object.assign();
    
    let a={};
    Object.assign(a,{a:'1',b:1});
    console.log(a);

## 19.设置对象的prototype ##

Object.setPrototypeOf()
    Object.getPrototypeOf()
    Object.create()
    
    
    let a={
      getTime(){
        return 'A';
      }
    };
    let b={
      getTitle(){
        return 'B';
      }
    };
    
    let c=Object.create(a); //创建对象
    console.log(c);
    console.log(Object.getPrototypeOf(c)===a);
    Object.setPrototypeOf(c,b);
    console.log(Object.getPrototypeOf(c)===b);

## 20. **proto**属性 ##

**proto可以理解为Java继承的父对象**

对象的原型，是 getPrototypeOf,setPrototypeOf,create  
三个方法对应的属性

let a={
      getTime(){
        return 'A';
      }
    };
    let c={
      __proto__:a,
    }
    console.log(c.getTime());

## 21. spuer ##

通过super可以调用**proto**属性对象中的方法。

let a={
      getTime(){
        return 'A';
      }
    };
    let c={
      __proto__:a,
      getTime(){
        return super.getTime()+'---'
      }
    }
    console.log(c.getTime());

## 22. 迭代器 Iterators ##

1.  每次执行时返回对象 \{value:xx,done:true/false\}
2.  next() 方法返回1的对象

## 23. 生成器 Generators ##

function* chef(strings){
      for(let i=0,len=strings.length;i<len;i++){
        //执行完语句yield之后，函数便不再执行其他任何语句，
        //直到再次调用迭代器的next()方法才会继续执行yield语句。
        yield strings[i]
      }
    }
    let a=chef(['a','b','c']);
    console.log(a.next());
    console.log(a.next());
    console.log(a.next());
    console.log(a.next());

## 24. Class ##

定义类

class Chef{
       constructor(a){
         this.a=a;
       }
       cook(){
         console.log(this.a);
       }
    }
    
    let c=new Chef('AAA');
    c.cook();

## 25 set 与 get ##

class Aa{
      constructor(){
        this.texts=[];
      }
    
      set text(t){
        this.texts.push(t);
      }
    
      get text(){
        return this.texts;
      }
    }
    
    let a=new Aa();
    a.text='A';
    a.text='B';
    console.log(a.text);

## 26. 静态方法 ##

class A{
      static B(c){
        console.log(c);
      }
    }
    A.B('HAHA');

## 27. 继承 ##

class P{
      constructor(a,b){
        this.a=a;
        this.b=b;
      }
      string(){
        return `${this.a} , ${this.b}`;
      }
    }
    
    class C extends P{
      constructor(a,b,c){
        super(a,b);
        this.c=c;
      }
    }
    
    console.log(new C('a',1,false));
    console.log(new C('a',1,false).string());

## 28. set集合 ##

不能有重复的内容

let s=new Set('AB');
    s.add('C');      //添加
    console.log(s.size); //长度
    console.log(s.has('A')); //含有
    s.delete('A');  //删除
    console.log(s);
    s.forEach(a =>{   //遍历
      console.log(a);
    });
    s.clear();     //清空
    console.log(s);

## 29. Map集合 ##

## 30. Module 模块 ##

## 31. 默认导出与导入 ##

export default function a(b,c){
    
    }
    
    //或者
    export{ a as default}
    --
    
    import b from './xx.js';
    b();