ES6

ES6 语法

*** 箭头函数,是对原函数的简写

 1.如果只有一个参数,()可以省。
 2.如果只有一个return,{}可以省。
 let arr=[12,5,8,99,33,14,26];
 arr.sort(function(n1,n2){
	 return n1-n2;
 })
 arr.sort((n1,n2)=>{
	 return n1-n2;
 });
()=>{
}
window.onload=function(){
	alert('abc');
};
window.onload=()=>{
	 alert('abc');
};
let show = functon(a,b){	
	 alert(a+b);
}
let show=(a,b)=>{
	 alert(a+b);
};

函数参数

 1.收集剩余参数
 function show(a,b,...args){
	 alert(a);
 }
 show(12,15,8,9,10)
 2.展开数组 就跟把数组内容直接写在这儿。
 let arr1=[1,2,3];
 let arr1=[6,7,8];
 ...arr
 let arr=[...arr1,...arr2];
 alert(arr);
 function show(...args){
	 fn(...args);
 }
 function fn(a,b){
	 alert(a+b);
 }
 show(12,5);
 3.默认参数
 $('#div1').animate({width:'200px'},1000);

解构赋值

1.左右两边结构必须一样
2.声明和赋值不能分开
let arr=[1,2,3];
let [a,b,c]=[1,2,3];
let {a,b,c}={a:12,c:5,b:12};
let[{a,b},[n1,n2,n3],num,str]=[{a:12,b:5},[12,5,8],8,'cxzcv'];
let[json,[n1,n2,n3],num,str]=[{a:12,b:5},[12,5,8],8,'cxzcv'];

数组

map             映射
reduce          汇总
filter          过滤器
forEach         循环
let arr=[12,6,8]
let rexult=arr.map(function(item){
	return item*2;
})
let result=arr.map(item=>item*2);
let score=[19,67,99,28,90];
let result=score.map(item=>item>=60?'及格':'不及格');

let arr=[12,69,180,8679];
arr.reduce(function(a,b,index){
	if(index!=this.length-1){
		return tmp+item;
	}else{
		return (tmp+item)/arr.length;
	}
})
filter 过滤器
let arr=[12,6,7,99,30,76];
let result=arr.filter(item=>{
	if(item/3==0){
		return true;
	 }else{
		return false;
	 }
})
let arr=[
	{title:'男士衬衫',price:75},
	{title:'女士包',price:75},
	{title:'女士鞋',price:27531}
]
let result=arr.filter(json=>json.price>=10000);
forEach
let arr=[12,6,7,99,30,76];
arr.forEach((item,index)=>{
	 alert(item);
})

字符串

1.多了两个新方法
 startsWith(); endsWith();
2.字符串模板
 let a=12;
 let str=`ab${a}c`;
 let str2=`<div>
    <h1>${title}</h1>
	<p>${content}</p>
	</div>`;

Es6 面向对象

 function User(name,pass){
	 this.name=name;
	 this.pass=pass;
 }
 User.prototype.showName=function(){
	 alert(this.name);
 }
 var ul=new User('blue','123467');
 class User{
	 constructor(name,pass){
		  this.name=name;
		 this.pass=pass;
	 }
	 showName(){
		 alert(this.name);
	 }
	  showPass(){
	 	 alert(this.pass);
	 }
 }
 继承:
 function VipUser(name,pass,level){
	 
 }
 class VipUser extends User{
	 constructor(name,pass,level){
		 super(name,pass);
		 this.level=level;
	 }
	 showLevel(){
		 alert(this.name);
	 }
 }
   var vl=new VipUser('blue','123467');
   vl.showName();

JSON

 1.json
 let json={a:12,b:5};
 let str=JSON.stringfy(json);
 let str="{"a":12,"b":5,"c":'abc'}";
 let json=JSON.parse(str);
 json的标准写法:
  1.只能用双引号
  2.所有名字都必须用引号包起来
  {"a":12,"b":6}
  2.json 简写
  let a=12;
  let b=6;
  let json={a,b}  //名字和值一样时只写一个

Promise--承诺,消除异步操作
*用同步方式,书写异步代码。

let p =new Promise(functon(resolve,reject){
	//异步代码
	//resolve 成功了
	//reject  失败了
	$.ajax({
		url:'data/arr.txt',
		dataType:'json',
		success(arr){
			resolve(arr);
		},
		error(err){
			reject(err);
		}
	})
});
function createPromise(url){
	return new Promise(functon(resolve,reject){
	$.ajax({
		url:url,
		dataType:'json',
		success(arr){
			resolve(arr);
		},
		error(err){
			reject(err);
		}
	})
});
}
let p2 =new Promise(functon(resolve,reject){
	//异步代码
	//resolve 成功了
	//reject  失败了
	$.ajax({
		url:'data/json.txt',
		dataType:'json',
		success(arr){
			resolve(arr);
		},
		error(err){
			reject(err);
		}
	})
});
Promise.all([
	<!-- p1,p2 -->
	createPromise('data/arr.txt'),
	createPromise('data/json.txt'),
]).then(function(arr){
	let [res1,res2]=arr;
	alert('成功了'+arr);
},function(err){
	alert('失败了'+err);
});
p.then(function(arr){
	alert('成功了'+arr);
},function(err){
	alert('失败了'+err);
});
<script>
 let p= $.ajax({url:'data/arr.txt',dataType:'json'});
 Promise.all([
	 $.ajax({url:'data/arr.txt',dataType:'json'}),
	 $.ajax({url:'data/json.txt',dataType:'json'}),
 ]).then(function(result){
	 let [arr,json]=result;
	  alert('成功了');
 },function(){
	 alert('失败了');
 });
 //有了Promise之后的异步
 Promise.all([$.ajax(),$.ajax()]).then(results=>{
	 //对了
 },err=>{
	 //错了
 });
<script>
------------
Promise.race([
	$.ajax({url:'www.baidu.com'}),
	$.ajax({url:'www.baidu.com'}),
	$.ajax({url:'www.baidu.com'}),
	$.ajax({url:'www.baidu.com'}),
]);

generator 生成器函数

普通函数——一路到底

generator_中间能停

function *show(){
	alert('a');
	yield;
	alert('b');
}
let genObj=show();
genObj.next();
2.generator yield 传参,返回
function *show(num1,num2){
	alert('a');
	let a=yield;
	alert('b');
}
let gen=show(99,88);
gen.next(12);
gen.next(5);

function *show(num1,num2){
	alert('a');
	let a=yield;
	alert('b');
}
let gen=show();
let res1=gen.next(12);
let res2=gen.next(5);
posted @ 2020-04-02 13:41  weichenji0  阅读(77)  评论(0编辑  收藏  举报