前言

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

块级作用域

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

于是es6多出了两个块级作用域：const与let。

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用法详解。

尾言

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