ES6语法（最详细文章）

ES6

• • ES6基础语法
• • Class创建类

ES6基础语法

---

let/const

let

//块级作用域

//当前作用域中，不能在let声明前使用变量

//同一个作用域，let不允许重复声明

//let解决了typeof的一个暂时性死区问题。var声明后进行typeof进行检测会出现undefined，但是let会直接报错

//全局作用域中，使用let声明的变量并没有给window加上对应的属性，但是var会添加

//除对象以外的大括号都可以看作块级私有作用域

const

//不可被修改初始值

箭头函数和this

//箭头函数

()=>{}

//箭头函数创建都是函数表达式方式（变量=函数），这种方式不存在变量提升，函数只能在创建完成后被执行

const fn=（）=>{

}

//箭头函数里面没有arguments

//箭头函数没有this，它里面的this都是自己所处上下文的this,this无法改变

//es6是支持给形参设置默认值的

const fn=(n=1)=>{}

//如果fn不传值那么n就等于1

const fn=(n=1,…args)=>{}

//把除第一项外全部传到args里面

//this

第一条：给元素事件行为绑定方法，当事件方法触发执行，方法中的this是事件当前元素本身的this

第二条：方法执行开，查看方法前面有没有点，如obj.fn,如果没有方法中的this就是window，非严格模式下普通函数的this指向windows，严格模式下指向undefined

第三条：在构造函数模式当中，构造函数执行构造函数体当中的this.XXX等于XXX，当前this指向当前的构造函数创建的实例。

第四条：改变this，可以通过call和apply以及bind和::语法糖代替bind

第五条：以上四条在箭头函数中不生效

剩余运算符 …

…放在不同的地方有不同的意思

…是个空数组

结构赋值

把右边相同的结构赋值给左边相同的结构叫解构赋值

经常对数组和对象进行操作

解构:左边右边都是相同的解构

赋值：右边的值赋值给左边

//解构赋值并不会影响到原来的元素

let ary=[10,12,23,12,34];

//取第一第二，第三是个数组

let [n,m,…x]=ary;

//不要第二

let [n,…x]=ary;

//如果没有取初始值

let [n,m,x=0]=ary;

//拿去多维数组里面的值

let arr=[1,2,[2,4.[5]]];

let [n,[,[m]]]=arr;

对象的解构赋值

let obj={

a:1,b:2,c=4

}

//结构赋值中左边为值右边为变量名，把值赋值给某个变量

let{

a:zimu,

b:hah,

c:tt

}=obj;

//对象解构会自己创建变量,如果变量跟属性名一致可以简写为一个

let gat={name:‘jaja’,age:‘2’};

let {name,age}=gat;

//还可以给他赋值默认值，如果没有该属性则取初始值,如果有则覆盖初始值

let {height=‘143’}=gat;

//多维对象获取

let ov={

a:zimu,

b:hah,

c:[1,23,43]

}

let {

a,

b,

c:[n,m]

}=ov;

res.data.forEach(({a,b})=>{

console.log(a,b)

})

Class创建类

ES3/ES5创建类

//创建类

function Fn(){

this.x=100

}

//往他的原型上添加属性和方法

Fn.prototype.getX=function(){

console.log(this.x)

}

//创建实例 加不加（）都行加（）优先级会高一些运算符优先级里标注

//实例只能使用this.私有属性和挂载到原型上的公有属性

let f1=new Fn();

//调用原型方法

f1.getX();

//也可以把他当作普通函数执行，但是实例跟创建这些概念都会消失

//es3 es5方法没有那么严谨

Fn();

//这种设置键值对的方法只能通过Fn.进行调用，创建的实例调用不了

Fn().query=function(){};