likes
comments
collection

js 谈谈前端工作中需要掌握的es6内容

作者站长头像
站长
· 阅读数 12

前言

谈谈我作为一个前端开发,在工作学习中最常用的es6内容,都是前端必须掌握的非常基础的es6内容,做个归纳记录。

块级作用域

es6之前声明变量时只有var了,我们都知道它存在变量提升这种麻烦的问题。

于是es6多出了两个块级作用域:constlet

const定义常量,常量不可重新赋值,一般只用于读取不用于修改时使用:

  const a = 1
  a = 2//错误,不可重新赋值

但是要清楚只是栈内存不可变,堆内存可以进行修改,也就是const声明的数组和和对象还是可以随意添加内容或删除内容的:

  const arr = []
  arr = [1]//错误,不可重复赋值
  arr.push(1)//正确
  const obj = {}
  obj = { name: 'name' }//错误,不可重复赋值
  obj.name = 'name'//正确

let声明可变量:

  let a = 1;
  a = 2

只在块级中有作用:

  {
    let a = 1
    const b = 2
    console.log(a, b)//1 2
  }

  console.log(a)//错误,提示你没有声明
  console.log(b)//错误,提示你没有声明

声明时应优先使用常量const,其余的也就是非常量都使用let即可

箭头函数

这是个普通函数,参数是state,返回值是res:

function(state){
  return res 
}

写成es6的箭头函数就是以下形式:

(state) => { return res }

然后如果后面的内容打算直接返回的话可以直接去掉花括号{},或者使用括号():

(state) => res
//或
(state) => ( res )

如果这里的返回值res也是个箭头函数那你就可以写成:

(state) => () => { return... }
//或
(state) => ( () => { return... } )

单一入参的话,前面的括号()也可省略,多参数必须保留:

state => { return res }
(state1, state2) => { return res }

声明函数名一般用变量接收:

const funName = () => {};
funName();

箭头函数多用于函数入参需要声明匿名函数时

如map函数:

arr.map((item) => {})

如setTimeOut:

setTimeOut(() => {}, 1000);

函数默认参数、剩余参数

默认参数就是函数在没有得到入参时可以使用默认参数

  const fun = (param = 1) => {
    console.log(param)//1
  }
  fun()

剩余参数可以将未声明参数的部分全部合在一起成一个数组

  const fun = (param, ...other) => {
    console.log(param, other)//1 [2,3,4]
  }
  fun(1, 2, 3, 4)

解构赋值

从数组或者对象中将栈内存取出进行使用。

一般都是只进行使用不进行修改,所以解构一般都用const声明。

在对象中解构时声明的名称与key一一对应:

  const obj = {
    name: 'name',
    age: 18
  }
  const { name, age } = obj
  console.log(name, age)//name 18

在数组中按照位置对应,声明名称可以随意:

  const arr = ['name', 18]
  const { a, b } = arr
  console.log(a, b)//name 18

在对象解构时重命名变量:

  const obj = {
    name: 'name',
    age: 18
  }
  const { name: newName, age } = obj
  console.log(newName, age)//name 18

嵌套解构

  const obj = {
    name: 'name',
    age: 18,
    info: {
      address: '北京'
    }
  }
  const { name, age, info: { address } } = obj
  console.log(name, age, address)//name 18 北京

对象属性简写

当变量作为对象的value值时,如果变量与key的名字一样可以简写:

  const name = '名字'
  const obj = {
    name: name
  }
  const obj2 = {
    name //简写
  }
  console.log(obj, obj2)//{name: '名字'} {name: '名字'}

对象展开运算符

类似函数剩余参数:

  const obj = {
    name: 'name',
    age: 18,
    address: '北京'
  }
  const { ...all } = obj
  const { name, ...other } = obj
  console.log(all, other)//{name: 'name', age: 18, address: '北京'} {age: 18, address: '北京'}

在react组件传值时可以使用到,比如需要把一整个对象的属性都传入:

  const obj = {
    name: 'name',
    age: 18,
    address: '北京'
  }
  const { ...all } = obj
 
  <Component ...all><Component>

模板字符串

字符串中需要添加变量时用于代替+号连接的方案。

  const id = 123
  const mes = 'id是' + id//旧方案
  const mes2 = `id是${id}`//模板字符串
  console.log(mes, mes2)//id是123 id是123

Symbol

ES6 数据类型新增了 Symbol

这个数据类型表示一个独一无二的值,虽然值都是one但是它们就是不同的:

  const test = Symbol('one')
  const test2 = Symbol('one')
  console.log(test, test2) //Symbol(one) Symbol(one)
  console.log(test === test2) //false

一般用于防止对象属性重复,全局下即便你不知道会有什么属性,只要是Symbol类型就不会重复,很神奇的发现对象可以存在长的一样的键值,却不是真的一样:

  const test = Symbol('one')
  const test2 = Symbol('one')
  const obj = {
    [test]: 1,
    [test2]: 1,
  }
  console.log(obj)//{Symbol(one): 1, Symbol(one): 1}

Promise和async/await

这个还是很重要的,我专门写了一篇使用方法:js Promise与async/await用法详解

尾言

如果觉得这篇文章对你有帮助的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~