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)=>{
});