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


相关文章
ES6系列笔记-参数
ES6系列笔记-参数
42 1
|
网络架构
ES6学习(六)—函数的扩展
ES6学习(六)—函数的扩展
|
JavaScript 前端开发 Java
|
前端开发 JavaScript 编译器
|
Web App开发 JavaScript 前端开发
|
存储 JavaScript 前端开发
|
网络架构
es6 语法简单使用1
es6 语法简单使用
74 0
|
前端开发
es6 语法简单使用2
es6 语法简单使用
64 0
|
JSON 前端开发 JavaScript
前端实战【ES6】你会ES6,但是你真的会用吗?
前端实战【ES6】你会ES6,但是你真的会用吗?
143 0
前端实战【ES6】你会ES6,但是你真的会用吗?
|
JavaScript 前端开发 网络架构
每天3分钟,重学ES6-ES12(四)函数的补充 展开语法
每天3分钟,重学ES6-ES12(四)函数的补充 展开语法
84 0