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
- 每次执行时返回对象 {value:xx,done:true/false}
- 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();
网友评论