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.οnclick=function(){
//				console.info("原生函数:",this);  //Input
//			}
          // 箭头函数简写
			arrow.οnclick=()=>{
				console.info("箭头函数:",this);  // Window
			}
			var arrow9=document.getElementById("arrowFun");
			let obj9={
				username9:"外层",
				sayName1(){
					arrow9.οnclick=function(){
						console.info("arrow9...sayName",this);  //input
					}
				},
				sayName2:()=>{
					arrow9.οnclick=()=>{
						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)=>{
		        	
		        });
		        

猜你喜欢

转载自blog.csdn.net/dreams_deng/article/details/105558248