ES6的箭头函数,参数的默认值,模板字符串,点点点运算符,解构赋值,对象的简写形式

140 阅读2分钟
  1. ES6 的箭头函数
    • 一种新的函数表达式,对于函数表达式的简写方式(匿名函数)
    • 匿名函数
      • var fn = function (){}
      • var obj = {fn:function(){}}
      • setTimeout(function (){},0)
      • setintervar()function(){},0
      • [].forEach(function(){})
      • div.onclick = function(){}
      • div.addEventListener('click',function(){})
      • ...
    • 语法: () =>{}
      • ():形参的位置
      • =>:箭头函数的标志
      • {}:代码段
  2. 箭头函数的特性
    • 箭头函数如果只有一个形参,那么可以省略小括号不写(a) => a
    • 箭头函数代码段只有一句话,可以省略大括号不写,并且会自动return这一句话的结果
    • 箭头函数里面没有arguents
    • 箭头函数里面没有this关键字,官方解释是箭头函数里面的this是上下文,外部作用域的this就是箭头函数的this,个人解释就是在箭头函数的上一行的this就是箭头函数的this
    • 箭头函数里面的this改变不了this指向
  3. 函数的默认值
    • 给函数的形参设置一个默认值,如果传递了实参,就是用实参传递,如果没有传递实参,那么就使用默认值,直接在形参后面使用=号进行赋值默认值
    • 只要设置了函数默认值,不管有多少个形参,都得写小括号
  4. 模板字符串
    • ES6定义了一种声明字符串的方式,使用反引号(``)
    • 特点:可以换行书写,可以直接进行变量的拼接
    • 模板字符串可以调用函数,字符串里面的内容是函数的参数,${} 把字符串切开,组合成一个数组当作第一个参数
  5. 点点点运算符(...)
    • 展开运算符
      • 当在函数的实参位置或者数组或者对象里面使用的时候是展开
    • 合并运算符
      • 当在函数的形参位置的时候是合并
      • 箭头函数没有arguments 可以用合并
  6. 解构赋值
    • 定义:快速从对象或者数组里面获取一些数据
    • 解构数组 语法:let[变量1,变量2,。。。] = [数据1,数据2,。。。]
    • 解构对象 语法:let{key1,key2,。。。} = {键值对1,键值对2,。。。}
  7. 对象的简写
    • 在ES6标准下,有一个对象的简写方式,当key和value一模一样的时候,可以只写一个
    • 当某一个key的值是一个函数的时候,并且不是箭头函数,可以直接省略function关键字和冒号不写