ES5/6语法

 7.ES5数组扩展 

            //遍历
			arr.forEach(function(item,index){
				console.info(index+"...."+item);
			});
			//加工,返回值
			var arr1=arr.map(function(item,index){
				return item+10;
			});
			console.info(arr1);
			// 过滤，返回过滤值
			var arr2=arr.filter(function(item,index){
				return item>3;
			});
			console.info("过滤:",arr2);

 

8. ES6对象简写方式，同名属性可以不写、可以省略函数function

            let username8="xiaoming";
            
            let obj8={
           // 旧的写法
//                username8: username8
//                getName:function(){   
//                    this.username8;
//                }
                username8,   //同名属性可以不写
                getName(){   // 可以省略函数function
                    return this.username8;
                }
            }
            console.info("例子8..:",obj8.getName());

9. 箭头函数

		//  变量名 = 参数 => 函数体
			// 箭头函数，三种形式 
			    let fun9_0 = ()=> console.info("箭头函数,没有形参");    //只有一条语句的时候{}可以省略
			    let fun9_1 = a9_1 => console.info("箭头函数，只有一个参数:"+ a9_1);
			    let fun9 = (a9,b9) => { return a9+b9 };
			    fun9_0();
			    fun9_1(100);
			    console.info(fun9(10,10) );
			    
			 // 证明箭头函数的 this 是什么  
			var arrow=document.getElementById("arrowFun");
//			arrow.onclick=function(){
//				console.info("原生函数:",this);  //Input
//			}
          // 箭头函数简写
			arrow.onclick=()=>{
				console.info("箭头函数:",this);  // Window
			}
			var arrow9=document.getElementById("arrowFun");
			let obj9={
				username9:"外层",
				sayName1(){
					arrow9.onclick=function(){
						console.info("arrow9...sayName",this);  //input
					}
				},
				sayName2:()=>{
					arrow9.onclick=()=>{
						console.info("arrow9...sayName2",this);   //window
					}
				}
			};
			obj9.sayName1();
		//	obj9.sayName2();
		/**
		 *  归纳： 箭头函数的this
		 *  1. 箭头函数有自己的this,和调用函数的对象无关
		 *  2. 如果该函数没有上层函数，那么就是window
		 *     如果上层函数还是箭头函数，那么就是window
		 *     如果该函数有上层函数,不是箭头函数，上层函数this即使内部函数this
		 */

     10.javascript 可变参数 ...

	// 用于取代之前的arguments,  arguments.callee() 调用自己，比如递归中使用
		function foo10(a,...value){
			console.info("foo10...",a);  // 1
			value.forEach(function(item,index){
				console.info(index+"...."+item);  //30,40 
			})
		};
		foo10(1,30,40);

     11.  函数形参默认值

function foo11(x=100,y=10){
			 console.info("13形参默认值:",x,y);
		}
		foo11();

12.  promise对象，用于解决异步回调

// 14.  promise对象，回调
		// 案例1:  关键字    Promise、 resolve(成功)、reject(失败)
	 let promise = new Promise((resolve,reject) =>{
	 	setTimeout(()=>{
	 	// resolve("成功");
	 	reject("失败");
	 	},2000);
	 });
	 promise.then((suc)=>{
        console.info("promise对象","成功...:"+suc);		
	  },(error)=>{
		console.info("promise对象","失败...:"+error);	
	  });		
		 
		 //   案例2：实现多个请求链式发送
		 function getNews(url){
		 	let promise=new Promise((resolve,reject) =>{
		 		
		    let xmlHttp= new XMLHttpRequest();
		 	xmlHttp.onreadystatechange=()=>{
		 		// 监听状态，状态值有0,1,2,3,4   4表示有返回结果了
		 		if(xmlHttp.readyState==4){
		 			// 表示请求陈宫
		 			if(xmlHttp.status==200){
		 				 resolve(xmlHttp.responseText)
		 			}else{
		 				 reject("请求失败");
		 			}
		 		}else{
		 			// 会根据不同的状态调用多次
		 		}  
		 	}
		 	xmlHttp.open('GET',url);
		    xmlHttp.send(); // 发送请求
		 	})
		 	return promise;
		 };
		 
		 // 调用函数  
		 getNews("http://127.0.0.1:8080/ProjectOne/MyServlet")
		        .then((suc)=>{
		        	console.info("网路请求成功:",suc);
		        	var data= JSON.parse(suc);
		        	console.info(data);
		        	data.forEach((item,index)=>{
		        		// console.info("item...",item.username);
		        		// 发送第二个请求
		        	});
		        	return getNews("http://localhost:8080/ProjectOne/InfoServlet");
		        },(error)=>{
		        	console.info("网路请求失败:",error);
		        })
		        .then((suc)=>{
		        	console.info("第二次请求结果是:",suc);
		        },(error)=>{
		        	
		        });
		        

13.    ES7来自 async   await

   13.1.   ES7来自 async   await 基本使用

	//    ES7来自 async   await
		   async function reqServer(){
		   	return new Promise((resolve,reject)=>{
		   		setTimeout(function(){
		   		//	 resolve("成功");
		   		reject("失败");
		   		},2000);
		   	})
		   }
		   async function invokeMethod(){
		   	  console.info("开始执行:"+new Date().toTimeString());
		   	  let result=await reqServer();  //异步调用，await等待，返回值是 resolve|reject的参数
 		   	  console.info(result);  //成功 2s以后才调用 后面代码,失败，不会调用后面代码
		   	  console.info("执行完毕:"+new Date().toTimeString());
		   }
		    invokeMethod();

   13.2.   ES7来自 async   await 网络请求

   /**
		    *  模拟网络请求
		    * http://localhost:8080/ProjectOne/InfoServlet
		    * http://127.0.0.1:8080/ProjectOne/MyServlet
		    *    Asyn函数  ES7
                                              返回Promise对象
                                              如果一个await失败,那么后面的不会执行了
		    */
		   async function getNews(url){
		   	return new Promise((resolve,reject)=>{
		   		 $.ajax({
		   		 	method:'get',
		   		 	url,
		   		 	success:(data)=>{
		   		 		resolve(data);
		   		 	},
		   		 	error:(data)=>{
		   		 	//	reject(data);
		   		 	    resolve(false);
		   		 	}
		   		 })
		   	});
		   }
		   // 第一个网络网络请求成功以后才调用第二个函数网络请求
		   /**
		    * 如果第一个网路请求失败，那么 reject(data); 会出现报错信息，不往下走了， 但是作为程序员不知道 程序报错了
		    * 解决：    resolve(false); 
		    * 那么，那么网络请求失败，也返回 false , 写逻辑继续处理  
		    */
		   async function sendXml(){
		   	let result1 = await getNews("http://localhost:8080/ProjectOne/InfoServlet");
		   	console.info("reuslt1"+result1);   //返回false,表示失败
		   	if(!result1){
		   		alert("网络请求失败");
		   		return;
		   	}
		   	let result2= await getNews("http://127.0.0.1:8080/ProjectOne/MyServlet");
		   	console.info("result2"+result2);
		   }
		   sendXml();

14. ES6 class类 使用 ，继承，构造函数

   // ES6 class 
		   class Person{
		   	//表示类的构造方法
		       constructor(name,age){
		       	this.name= name;
		       	this.age=age;
		       }
		      // 类的一般方法
		      showName(){
		      	console.info("名字是:"+this.name);
		      }
		   }  
		   let person= new Person("xiaoming",33);
		   console.info(person);
		   person.showName("xiaoze");
		   
		   class Man extends Person{
		   	 constructor(name,age,salary){
		   	 	super(name,age); //实例化父类构造函数是子类的责任
		   	 	this.salary=salary;
		   	 }
		   }
		  let man= new Man("xiaoze",40,4000);
		  console.info(man);