ES6的基础用法

简介: 对js es6的用法进行简单介绍

 本文会着重讲解es6,帮助大家熟悉es6和掌握es6的写法

1,let

       没有变量提升,使用变量在变量定义之前,这点和var有很大区别

       不允许重复声明

       只在块级作用域里有效

       暂时性死区

console.log(a)  //报错,因为在未定义前调用leta=1console.log(a) //1

image.gif

 2,const

       声明常量 ,表示这个变量在声明后就无法修改

consta=1a=2//报错,常量声明后无法修改

image.gif

3,解构赋值

     将右边的数组依次解构出来赋值给前面的数组里的变量

let [a,b,c]=[1,2,3] 
const.log(a) //1const.log(b) //2const.log(c) //3

image.gif

4,扩展字符串

       可以在字符串里直接写入变量,${},不用在像以前一样通过加号来拼接了

leta="张三"console.log(`我是${a}`) // 我是张三

image.gif

5,解构

     

       数组解构:通过  ...数组  将数组的每一项都解构出来,变成原本的数据类型1

leta= [1,2,3,4]
console.log(...a) //1234

image.gif

       对象解构:通过 {...对象} ,将对象里的每一项都解构出来,但是要注意下,对象解构出来还是对象,所以我们必须得在最外出用{}包裹

       

constobj= {name:"张三",age:18}
console.log({...obj}) //{name:"张三",age:18}修改name的值constobj1= {...obj,name:"李四"}
console.log(obj1)//{name:"张三",age:18}原理就是,先解构,在对象里在加入一个属性名称相同的值,后覆盖前,达成修改的效果

image.gif

6.对象扩展

        对象的属性名如果和属性值变量名称是一致的话可以简写

vara=1varobj= {a:a}
可以简写为varobj= {a}  
console.log(obj) //{a:1}

image.gif

       如果对象的属性值是函数,可以省略function

varobj= {fh:function(){}}
可以简写为varobj=  {fn(){}}

image.gif

       在函数上做解构赋值

varobj= {name:"张三",age:18}
functionfn (naem,age){
console.log(name,age)
}
调用函数fn(obj) //"张三",18    。。直接传入一个对象,函数帮我解构了,相当于传入了 fn(obj.name,obj.age),要注意的是,形参必须和我们对象的属性一样才可以

image.gif

7.set

       类似于数组,但不是数组,set有个属性,就是里面的数据不能重复所以可以用来给数组去重

vara= [ 1,2,3,4,4]
varb=newSet(a)
在进行解构重新赋值给一个数组,这样就达到了去重的效果varc= [...b]
console.log(c)// [1,2,3,4]

image.gif

     可以通过add方法添加属性

var a = new Set([1,2,3])
a.add(3).add(5)
console.log(a) //[1,2,3,4,5] //添加的时候,如果添加了重复的值,会自动去重

image.gif

8.map

       map方法,将属性里的每一项单独拿出来,执行回调函数

       

var arr = [1,2,3,4]
arr.map((item)=>{  //item就相当于数组里的每一项的值,所以会依次打印 1,2,3,4
console.log(item)
})

image.gif

9.promise 异步处理

       处理异步代码

letp=newpromise(function(resolve,reject){ //传入参数resolve和reject,这2个是固定写法resolve(data) //调用resolve函数,传入我们要异步处理的数据,异步代码执行成功调用reject(data) //调用reject函数,传入data,异步代码执行失败调用    })
p.then(function(data){  //调用.then方法,方法里接收一个函数,函数接收的参数就是我们在上面resolve传递的值console.log(data)
  },(data)=>{
console.log(data)  //当执行错误时就执行这个函数}//.then方法里接收2个函数,第一个函数是执行成功后执行,第二个函数是执行失败后执行,这样就能对异步进行处理了,当异步执行完后,才会执行.then方法里的代码。

image.gif

10.async和await

       也是用来处理异步

asyncfunctionsc(){  //在函数前加上async,将这个函数变为异步函数await异步代码//这里写异步代码,注意异步代码前面要加await,才能生效console.log(123) //当前面的异步代码执行完成后,才会执行console.log(),这样就实现了对异步的处理    }

image.gif


相关文章
|
消息中间件 安全 API
Apache RocketMQ ACL 2.0 全新升级
RocketMQ 作为一款流行的分布式消息中间件,被广泛应用于各种大型分布式系统和微服务中,承担着异步通信、系统解耦、削峰填谷和消息通知等重要的角色。随着技术的演进和业务规模的扩大,安全相关的挑战日益突出,消息系统的访问控制也变得尤为重要。然而,RocketMQ 现有的 ACL 1.0 版本已经无法满足未来的发展。因此,我们推出了 RocketMQ ACL 2.0 升级版,进一步提升 RocketMQ 数据的安全性。本文将介绍 RocketMQ ACL 2.0 的新特性、工作原理,以及相关的配置和实践。
14030 95
|
监控 Java Sentinel
使用Sentinel进行服务调用的熔断和限流管理(SpringCloud2023实战)
Sentinel是面向分布式、多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。
647 3
|
SQL 分布式计算 运维
如何优化超长定时任务:慢节点优化实践
本文介绍了一个复杂的ODPS任务优化过程。通过对任务耗时卡点的分析,发现主要问题是数据倾斜和join任务资源不足。通过提高join任务资源分配、对空值加随机值打散、视图物化落表、节点拆分、前置裁剪和使用Distributed Mapjoin等方法,成功将宽表产出时间从下午一点提前到早上八点半,节省了4小时以上。优化过程中还拆分了宽表节点,降低了回刷成本。文章强调了在设计开发初期应避免代码耦合度过高,以提高代码运行效率和可维护性。
284 0
|
监控 Java 运维
开发与运维收集问题之jstat命令查看JVM垃圾回收情况如何解决
开发与运维收集问题之jstat命令查看JVM垃圾回收情况如何解决
239 1
|
SQL 数据可视化 关系型数据库
MySQL命令行与可视化工具
MySQL命令行与可视化工具
|
编解码 网络协议 芯片
以太网口硬件知识分享
该文介绍了网络通信的基本原理,涉及PHY、MAC和RJ45接口的角色。PHY芯片负责物理层的信号处理,MAC则处理帧同步和MAC地址。网络通信中,MAC通常集成在CPU内,PHY通过MDIO总线与MAC交互,配置PHY芯片实现不同模式和功能。文中还提到了常见的网络信号模式(如MII、RMII)及其差异,并指出网络变压器的作用。此外,文章详细解析了KSZ8081RNB PHY芯片的电路原理,包括底板和扩展板的网口设计,以及网口电路和PCB设计的注意事项。最后,提供了网口问题的排查思路。
567 0
|
Java
SpringBoot操作excel文件【工具类】
SpringBoot操作excel文件【工具类】
286 1
|
Web App开发
技术篇:谷歌浏览器自动更新的踩坑指南(下)
技术篇:谷歌浏览器自动更新的踩坑指南(下)
407 0
技术篇:谷歌浏览器自动更新的踩坑指南(下)
|
JavaScript 数据可视化
datav和echarts一起使用时,在datav的组件里获取不到dom元素,导致无法渲染echarts
记录一个小问题,datav和echarts一起使用时,在datav的组件里获取不到dom元素
477 1
|
Java 编译器 Python
【python】考前复习,python基础语法知识点整理(上)
变量就是用来保存数据的,如果一个数据我们要经常用到,创建一个变量把这个数据保存起来,在后面使用的时候就会很方便.
下一篇
oss云网关配置