let的解构赋值_ES6--let,解构赋值,promise && ES7--async

ES-->IE10、Google、火狐

ES6

let

声明的关键字

不能重复声明

块级作用域

window.onload = function() {

let abt = document.getElementsByTagName('input');

for (var i = 0; i < abt.length; i++) {

abt[i].onclick = function() {

alert(i);

}

}

}

// 因为var作用域是函数，所以三个按钮点击弹出都是3

window.onload = function() {

let abt = document.getElementsByTagName('input');

for (var i = 0; i < abt.length; i++) {

(function(i) {

abt[i].onclick = function() {

alert(i);

}

})(i)

}

}

window.onload = function() {

let abt = document.getElementsByTagName('input');

for (let i = 0; i < abt.length; i++) {

abt[i].onclick = function() {

alert(i);

}

}

}

// let作用域是块，可以避免这个问题

箭头函数 ()=>{}

一个参数()可以省略：val =>{}

只有return，{}可以省略

函数的参数

参数扩展/展开

接收参数，...args必须放在最后;可以用于参数个数不确定

function show(a,b,...args){

alert(a) //12

alert(b) //15

alert(args) //8,9,10

}

show(12,15,8,9,10)

展开数组

...arr 等同于直接把arr放在这里，也就是所谓的链接

let arr1 = [1,2,3];

let arr2 = [4,5,6];

let arr = [...arr1,...arr2]; //[1,2,3,4,5,6]

默认参数

没传值的情况下，用自己设置的默认参数

function show(a,b=10,c=15){

console.log(a,b,c)

}

show(5) //5,10,15

shpw(1,2,3) //1,2,3

解构赋值

左右两边结构一模一样

右边必须是个合格对象

let [json,arr,num,str]=[{a:1,b:2},[3,4,5],8,'abc'];

consle.log(json,arr,num,str)

数组

映射 map

obj.map(function(item){

console.log(item)

})

汇总 reduce

tem 是指一个中间值，初始为0，item为两个数的和，index为从1开始执行的次数

let arr = [12,69,180,8763];

let result=function(tem,item,index){

return tem+item

}

过滤 filter

保留一部分，抛弃一部分

let arr=[1，2，3，4，5]

let result=arr.filter(item=>item%3==0)

迭代 forEach

let arr=[12,5,8,9];

arr.forEach(item=>alert(item))

字符串

startsWith

endsWith

字符串模板：反单引号

let a='一个';

let b='好人';

let str = `我是${a}${b}`; //我是一个好人

面向对象

class 构造函数

继承

JSON

JSON.stringify obj转json

JSON.parse json转obj

promise

操作之间没关系，同时进行多个操作

消除异步操作，同步一样的方式，写异步

all会将所有请求异步完成，接受参数是arr，返回的也是arr

function ajax(url){

return new promise(function(resolve,reject){

$.axax({

url:url,

dataType:'json',

success:function(data){

resolve()

},

error:function(err){

reject(err)

}

})

})

}

promise.all([

ajax(url1),

ajax(url2)

]).then(

arr => {

let data = arr[0];

let result = arr[1];

},

err => alert('失败')

)

catch 解决一个接口返回作为另一个接口参数的问题

// 创建一个Promise实例，获取数据。并把数据传递给处理函数resolve和reject。

// 需要注意的是Promise在声明的时候就执行了。

var getUserInfo=new Promise(function(resolve,reject){

$.ajax({

type:"get",

url:"index.aspx",

success:function(data){

if(data.Status=="1"){

resolve(data.ResultJson)//在异步操作成功时调用

}else{

reject(data.ErrMsg);//在异步操作失败时调用

}

}

});

})

//另一个ajax Promise对象，

var getDataList=new Promise(function(resolve,reject){

$.ajax({

type:"get",

url:"index.aspx",

success:function(data){

if(data.Status=="1"){

resolve(data.ResultJson)//在异步操作成功时调用

}else{

reject(data.ErrMsg);//在异步操作失败时调用

}

}

});

})

//Promise的方法then,catch方法

getUserInfo.then(function(ResultJson){

//通过拿到的数据渲染页面

}).catch(function(ErrMsg){

//获取数据失败时的处理逻辑

})

//Promise的all方法，等数组中的所有promise对象都完成执行

Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){

//这里写等这两个ajax都成功返回数据才执行的业务逻辑

})

generator

yield配合用

控制代码执行程度，走走停停

ES7

数组

includes 查看arr是否包含值，返回true/false

[a,b,c,d].includes('b'12) // true

[a,b,c,d].includes('b',2) // false

[1,NaN,2,3].includes(NaN) // true

[1,NaN,2,3].indexOf(NaN) // -1

keys/values/entries

for ... of 循环的是值--key

2.for ... in 循环的是下标--index

3.enries 所有键值对拿出来 {a:1}

幂运算

** = 快捷运算

Math.pow(3,3) = 27

async

用法

let readData = async () => {

let data1 = await $.ajax({url,param});

let data2 = await $.ajax({url,param});

let data3 = await $.ajax({url,param});

console.log(data1,data2,data3)

}

readData()

await等的是一个promise

await要和promise搭配使用