ES6:
①let
特点：1 只能作用域当前作用域中；
2 使用let或者const声明的变量，不能再被重新声明；
3 let不存在变量提升
比如：
console.log(dad);
var dad = 1;
不会报错，因为上面的代码会被变量提升为：
var dad;
console.log(dad);
dad = 1;
②const
特点：1 声明时必须赋值
2 特性与let类似
3 不可变。但常量为引用类型时，不能保证不变
③扩展运算符
const arr1 = [1,2];
const arr2 = [3];
console.log([...arr1,...arr2]); // [1,3,4];
④解构赋值
解释：是一个语法，使得可以将值从数组或属性从对象提取到不同的变量中
1 数组的解构赋值
const arr = [1,2,3,4];
let [a,b,c,d] = arr;
复杂点的
const arr = [1,[2,3]];
let [,[,x]] = arr;
与扩展运算符相结合的:
const arr1 = [1,2,3];
const [a,...b] = arr1;
console,log(b); // [2,3]
交换变量:
let a = 2,b=3;
[a,b] = [b,a];
2 字符串解构赋值
const arr = 'i am a teacher';
const [a,b,c,...oth] = arr;
3 对象的解构赋值
const obj = {
saber:'xx',
archar:'yy',
}
const {saber,archar} = obj;
常用用法：接收函数的返回值解构赋值与函数形参接收实参的解构赋值
⑤模板字符串
let demo = "c";
let html = `
<li>${demo}</li>
`;
⑥箭头函数
const add1 = (a, b) => a + b;
const add2 = arr => void arr.push('b');
等比于：
const add1 = function(a,b){
return a + b;
}
const add2 = function(arr){
arr.push('b');
}
两者区别：
箭头函数没有argument对象;
箭头函数的this指向当前环境所处的this;
例子：
const add1 = function({name}){
this.name = name;
setTimeout(() => {
this.age = 123;
console.log(this); // [object Object]: {age: 123, name: "tom"}
})
}
new add1({name:'tom'});
⑦对象的简洁表示法
let name = 'tom';
const user = {
name,
say(){
console.log('i am '+this.name);
}
}
⑧对象的属性名表达式
let name = 'huam';
const user = {
[name] : 'xx'
}
⑨Promise
解释：Promise对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值
要点：promise改善了传统回调造成的代码难维护，控制反转等问题，它是异步的
传统回调：
function f(cb){
setTimeout(function(){
cb && cb();
},1000)
}
f(function(){
console.log(1)
f(function(){
console.log(2)
f(function(){
console.log(3)
f(function(){
console.log(4)
f(function(){
console.log(5)
f(function(){
console.log(6)
});
});
});
});
});
})
promise回调：
function f(){
return new Promise((resolve,reject) => {
setTimeout(function(){
console.log(0);
// 一旦决议不可逆，且不再执行下面的
// 决议：succ
resolve();
// 决议：err
reject();
},1000);
});
}
// 回调链
f()
.then(data=>{
console.log(1);
return f();
},err => {
console.log('err1');
return f();
})
.then(data=>{
console.log(2);
},err => {
console.log('err');
})
Promise.rece() 竞速
function getData1(){
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('第一条数据加载成功');
reject('err');
},1000)
})
}
function getData2(){
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('第二条数据加载成功');
resolve(1);
})
})
}
function getData3(){
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('第三条数据加载成功');
resolve();
},1000)
})
}
let p = Promise.race([getData1(),getData2(),getData3()]);
p.then(data => {
console.log(data);
},err => {
console.log(e);
})
/*
第二条数据加载成功
demo.html:35 1
demo.html:8 第一条数据加载成功
demo.html:27 第三条数据加载成功
*/
Promise.all() 把多个promise实例包装成一个新的promise实例
function getData1(){
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('第一条数据加载成功');
resolve('');
},1000)
})
}
function getData2(){
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('第二条数据加载成功');
resolve(1);
},1000)
})
}
function getData3(){
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('第三条数据加载成功');
resolve();
},1000)
})
}
let p = Promise.all([getData1(),getData2(),getData3()]);
p.then(data => {
// 请求成功的返回值组成的数组
console.log(data);
},err => {
// 万一失败，进入这里
console.log(err);
})
// p1,p2完全是等价的
let p1 = new Promise(resolve => {
resolve('succ');
})
let p2 = Promise.resolve('succ');
p1.then(res => {
console.log(res);
})
p2.then(res => {
console.log(res);
})
// 同步任务 变成 异步任务
// -- 异步任务一定是在同步任务之后执行的
function createAsyncTask(syncTask){
return Promise.resolve(syncTask).then(syncTask => syncTask());
}
createAsyncTask(()=>{
console.log('异步来了')
return 1;
}).then(res => {
console.log(res);
})
①0
//类与对象，ES6的类是ES5类的语法糖
class Car{
// 静态属性
static area = '美国';
// 构造函数
constructor(wheel,color){
// new.target -- 指向new关键字后面的类
if(new.target !== Car){
throw Error('必须使用new关键字调用Car！');
}
// this -- 当前对象
this.wheel = wheel;
this.color = color;
this.speed = 0;
console.log('c')
}
// 加速
speedUp() {
this.speed += 1;
}
// 静态属性
static getArea(){
// this -- 当前类
alert(this.area);
}
// setter 设置器
set color(v){
console.log('设置color值:'+v);
this.v = v;
}
// getter 获取器
get color(){
console.log('获取color值');
// 获取color值
return '颜色'+this.v;
}
}
const car = new Car(3,'#ff0');
Car.getArea();
car.color;
