ES6语法(最详细文章)

简介: ES6语法(最详细文章)


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表达式
相关文章
|
JavaScript 前端开发 UED
(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况
(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况
790 0
PullToRefresh的简单使用
PullToRefresh的简单使用
372 1
|
前端开发 JavaScript UED
|
数据采集 前端开发 JavaScript
数据采集Selenium中的弹窗处理
使用Selenium自动化处理网页弹窗,包括浏览器警告(alert、confirm、prompt)和HTML自定义弹窗。示例代码展示了如何接受警
899 0
数据采集Selenium中的弹窗处理
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
2天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
1天前
|
云安全 人工智能 安全
阿里云2026云上安全健康体检正式开启
新年启程,来为云上环境做一次“深度体检”
1470 6
|
3天前
|
安全 数据可视化 网络安全
安全无小事|阿里云先知众测,为企业筑牢防线
专为企业打造的漏洞信息收集平台
1305 2
|
3天前
|
缓存 算法 关系型数据库
深入浅出分布式 ID 生成方案:从原理到业界主流实现
本文深入探讨分布式ID的生成原理与主流解决方案,解析百度UidGenerator、滴滴TinyID及美团Leaf的核心设计,涵盖Snowflake算法、号段模式与双Buffer优化,助你掌握高并发下全局唯一ID的实现精髓。
319 160
|
3天前
|
人工智能 自然语言处理 API
n8n:流程自动化、智能化利器
流程自动化助你在重复的业务流程中节省时间,可通过自然语言直接创建工作流啦。
365 4
n8n:流程自动化、智能化利器

热门文章

最新文章