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(){};//给Fn设置一个属性可以让当前Fn只能new执行不能当做普通函数使用

es6创建类

//class创建的类只能通过new执行不能当做普通函数执行Class Fn(){//等价于构造函数体，里面可以写私有属性
constructor(){this.x=100;
}
//直接写方法就是加在原型上了,等价于Fn.prototype.getx
getx(){}
//设置成私有的函数，把它当做普通对象设置的键值对
static query(){}
//私有属性
y=200
}
//es5挂载在原型上的属性
Fn.prototype.y=200;
Fn.a=1;

模板字符串

反引号
``
拼接是`${V}${A}`
//一行能搞定是事叫做js表达式

ES6语法（最详细文章）相关推荐

mysql grant all详解_MySQL grant 语法的详细解析
以下的文章是MySQL grant语法的详细解析,如果你对MySQL grant 语法的相关的实际操作有兴趣的话,你就可以对以下的文章点击观看了.我们大家都知道MySQL数据库赋予用户权限命令的简单格 ...
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案参考文章: (1)nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 (2)https://www.cnblogs.com/jk ...
mysql grant 语法格式_MySQL grant 语法的详细解析
我们今天主要向大家介绍的是MySQL grant 语法的详细解析,同时本文还介绍了其实际应用代码的介绍,希望在你今后的学习中会有所帮助. 以下的文章是MySQL grant 语法的详细解析,如果你对M ...
ES6语法的学习与实践
ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...
vue-cli项目布署问题解决：空白页、静态资源文件404错误、refrenceError:promise未定义（部分浏览器不支持ES6语法）
(前言:文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式) 首先简单理解webpack打包: 个人理解:项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码 ...
React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四
转载地址 React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三.四项目初始化 git clone https://github.com/durban89/we ...
解决idea的html代码中使用es6语法报错的问题
解决idea的html代码中使用es6语法报错的问题参考文章: (1)解决idea的html代码中使用es6语法报错的问题 (2)https://www.cnblogs.com/mayiaction ...
.vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...
浏览器环境兼容运行ES6语法
亲测可用,若有疑问请私信 ES6语言的普及 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.ES2015 是该语言的一个显著更新,也是自 2009年 ES5 标准确定 ...
VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件,详情见 VUE 爬坑之旅– 如何对公共JS,CSS进行统一管理,全局调用 .这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 ...

ES6语法（最详细文章）

ES6

ES6基础语法

Class创建类

ES6语法（最详细文章）相关推荐

最新文章

热门文章