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);