美文网首页
小程序系列--ES6

小程序系列--ES6

作者: wan7451 | 来源:发表于2018-04-24 19:07 被阅读68次

ES6 总结

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. 带标签的模板字符串

let strA='A',strB='B';
let str=EEE`26位字母的开始是 ${strA} 和 ${strB}`;
function EEE(strings,...values){
  //处理字符串,并返回最终字符串
}
console.log(str);

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的对象
function chef(strings){
  let i=0;
  return {
     next(){
       let done=(i>=strings.length);
       let value=!done ? strings[i++]:undefined;
        return {done,value};
     }
  };
}

let a=chef(['a','b','c','d']);
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

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集合

let a=new Map();
let aa={}, bb=function(){},cc='AAAA';
a.set('k1',aa);
a.set('k2',bb);
a.set('k3',cc); //添加

console.log(a);
console.log(a.size); //长度
console.log(a.get('k1'));
a.delete('k1');  //删除
console.log(a.has('k1')); //含有
console.log(a);
a.forEach((v,k)=>{  //遍历
  console.log(k);
  console.log(v);
});
a.clear();     //清空
console.log(a);

30. Module 模块

let a='A';
let b='B';
//导出
export {a,b,d as c}

function d(a,b){
  console.log(a+b);
}
--

//导入
import {a,b,c as d} from './xx.js'

import * as chef  from './xx.js'
as 为对象,包含js文件中的所有内容

31. 默认到处与导入

export default function a(b,c){

}

//或者
export{ a as default}
--

import b from './xx.js';
b();

相关文章

网友评论

      本文标题:小程序系列--ES6

      本文链接:https://www.haomeiwen.com/subject/fqxslftx.html