es6
var---可重复定义，不能限制修改，没有块级作用域
let---不能重复定义，变量+块级作用域
const---不能重复定义，常量+块级作用域（引用类型可以增加属性）
解构赋值
左右两边必须一样，右边必须是个东西（let {a,b}={1,2}这样就不行）
定义和赋值必须一起完成（let a;a=1这样会报错）
箭头函数
有且只有1个参数时，（）可以省，有且只有一个函数返回值，{}可以省（let show=a=>a*3）
默认参数（a=xx,b=xxx,c=x）
参数展开
function show(a,b,...c){console.log(a,b,c);}
show(1,2,3,4,5,6)//1,2,[3,4,5,6]剩余参数必须在末尾
'...'的作用：
接收剩余参数，展开一个数组：
let arr=[1,2,3];let arr2=[4,5,...arr,6];//[4,5,1,2,3,6]es6支持
chrome,safari,firefox,ie10+
数组
map
let arr = [1, 2, 3, 54, 634, 235, 324];
let arr3 = arr.map(item=> item >= 60 )
console.log(arr3)//[false, false, false, false, true, true, true]filter
let arr4 = arr.filter(item => item >= 60)//[634, 235, 324]reduce
sum = arr.reduce((prev, cur, index) => {return prev + cur}) console.log(sum)//1253forEach
let sum = 0; arr.forEach(item => sum += item) console.log(sum)//1253from
Array.from();从一个类似数组或可迭代对象中创建一个新的数组实例
JSON
名字和值一样，只写一个
例如：let a=1,b=2; let json={a:a,b:b}可写成 let json={a,b}
function可以简写---function show(){}--->show(){}
字符串
植入变量，保留换行
let json = {
name: 'aa',
age: 18
}
console.log(`name:${json.name}
age:${json.age}`)//name:aa
// age:18继承
super把属性带到子类去 ，extends把方法带到子类，里面可以定义内部类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
class a {//内部类
constructor() {
console.log('ejjyjte');
}
}
new a();//ejjyjte
}
showName() {
console.log(this.age)
}
}
let p = new Person('aaa', 13);
p.showName();//aaa
class Child extends Person {
constructor(name, age, job) {
super(name, age)
this.job = job;
}
showJob() {
console.log(this.job)
}
}
var child = new Child('aa', 13, 'ee');
child.showName();//aa
child.showJob();//eebind:给函数定死一个this,bind无法改变箭头函数的作用域
var foo={x:3};
var fun=function (){return console.log(this.x)};
fun()//undefined
var fun2=fun.bind(foo);
fun2()//3
var foo={x:3};
var fun=()=>{return console.log(this.x)};
fun()//undefined
var fun2=fun.bind(foo);
fun2()//undefined参考链接：用bind方法保持this上下文
箭头函数的this根据环境而定，它在哪它的this就是谁,bind无法改变箭头函数的作用域
arr=[1,2,3]
arr.a = function() {
console.log(this)
}
arr.a();//[1,2,3,a:f]
arr=[1,2,3]
arr.a = ()=>{
console.log(this)
}
arr.a();//window
Promise
用同步的写法实现异步
let pro = new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json) {
resolve(json);
},
error(err) {
reject(err);
}
})
})
pro.then(json => {
console.log('成功')
}, err => {
console.log('失败')
});
Promise.all用法
let p1 = new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json) {
resolve(json);
},
error(err) {
reject(err);
}
})
});
let p2 = new Promise(...); //这里不写了
let p3 = new Promise(...);
Promise.all([p, p2, p3]).then(arr => {
let [j1, j2, j3] = arr;
console.log(j1, j2, j3)
}, (err) => {
console.log('失败')
}); $.ajax本身就是promise对象，可以这么用：
$.ajax({
url: '1.txt',
dataType: 'json'
}).then(json => {
console.log('成功')
}, res => {
console.log('失败')
});所以多个ajax请求可以写成
Promise.all([
$.ajax({
url: '1.txt',
dataType: 'json'
}),
$.ajax({
url: '2.txt',
dataType: 'json'
}),
$.ajax({
url: '3.txt',
dataType: 'json'
})
]).then(arr => {
let [j1, j2, j3] = arr;
console.log(j1, j2, j3)
}, (err) => {
console.log('失败')
})promise不好处理带逻辑的异步操作
Promise.all()//全部成功
Promise.race()//有一个成功就成功
generator
generator不能写箭头函数
function* myshow() {
console.log(1);
yield;
console.log(2);
}
let gen = myshow();
gen.next(); //1
gen.next(); //2yield可以传值，可以返回
//传值
function* myshow() {
console.log(1);
let a = yield;
console.log(2, a);
}
let gen = myshow();
gen.next(); //1
gen.next(16); //2,16
//返回值
function* myshow() {
console.log(1);
yield 55;
console.log(2);
return 77;
}
let gen = myshow();
let r1 = gen.next();
console.log(r1); //{value: 55, done: false}
let r2 = gen.next();
console.log(r2) //{value: 77, done: true}
async和await
async function(){
...
let 变量=await 异步操作--promise/generator/另一个async函数
...
}
function sleep(sec) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, sec * 1000);
})
};
async function show3() {
// console.log(1);
alert(1)
await sleep(1);
// console.log(2)
alert(2)
await sleep(2);
// console.log(3)
alert(3)
}
show3(); //先弹出1，等1秒弹出2，再等2秒弹出3async/await完成ajax带逻辑的操作：
(async function() {
let data1 = await $.ajax({
url: '1.txt',
dataType: 'json'
});
if (data1.a + data1.b > 10) {
let data2 = await $.ajax({
url: '2.txt',
dataType: 'json'
});
console.log(data2[0])
} else {
let data3 = await $.ajax({
url: '3.txt',
dataType: 'json'
});
console.log(data3.name);
}
})()async/await错误处理：
async function show4() {
try {
let data1 = await $.ajax({
url: '1.txt',
dataType: 'json'
});
let data2 = await $.ajax({
url: '2.txt',
dataType: 'json'
});
let data3 = await $.ajax({
url: '3.txt',
dataType: 'json'
});
console.log(data1, data2, data3)
} catch (e) {
console.log('有问题')
}
}