记录下ES6踩过的坑

let && const

• 在ES6中，let和const是为了取代var，主要体现在块级作用域上，我们
  可以简单的理解为大括号内的就属于块级作用域

  if(true){
      let a=1;
      const b=1;
  }
  console.log(a) //a is undefined
  console.log(b) //b is undefined
  复制代码

• let声明的变量是可以改变的，而const是无法重新赋值

  const obj={a:1};
  obj.a=2; //合法的  obj={a:2}
  obj={a:2}; // 会在编译时报错
  
  复制代码

import && export

• 在js的模块化经历过AMD，CMD，common.js等一系列实现方式后，ES6提供了内置的模块化解决方案，和common.js的类似，采用export导出模块，import导入模块，使前端的模块化变得更加清晰简洁
• 那和common.js有什么不同呢？
  • ES6的导入导出属于静态化，必须在顶部，且不能使用条件语句，自动会采用严格模式
  • ES6能在编译时优化和treeshaking，因为ES6模块化是静态的，所以在打包的时候一些引入但是没用到的包在后面的打包编译时移除
  • 在外部引入的是对象的引用，而不是缓存，而common.js里的获得是值的拷贝，它拿到的是缓存值
  • 可以对common.js模块重新赋值，但是对ES6模块赋值会报错
  • 都可以对对象内部的值进行改变
• 模块的重命名

  • 我们可以在导入和导出的时候对模块进行重命名

    //导入
    import {thismyfun as fun} from './url'
    //导出
    export {fun as thismyfun}
    复制代码

箭头函数

• this的指向,箭头函数里的this指向定义时所在的对象

  var obj={
      name:"zhangsan",
      sayName:setTimeout(function(){
          console.log(this.name)  //this指向全局
      },500)
  }
  obj(sayName)/ /undefined
  
  我们用箭头函数来写
  var obj={
      name:"zhangsan",
      sayName:setTimeout(()=>{
          console.log(this.name)  //this指向obj
      },500)
  }
  obj(sayName)/ /zhangsan
  
  复制代码

  • 箭头函数不能作为构造函数，不能使用new

  • 箭头函数没有argument对象

    const fun=(a,b)=>{
        console.log(arguments[0])
    }
    fun(0,1)   //arguments is not defined
    复制代码

• 函数默认值，ES5之前和ES6实现方法

  #ES6写法
  const handleClick=(obj={})=>{
      console.log(obj.name)
  }
  #ES5写法
  const handleClick=function(obj){
      obj=obj||{};
      console.log(obj.name)
  }
  复制代码

---

把日常开发踩过的坑在这里与大家分享一下，希望对大家有多帮助，有不妥的欢迎探讨，这是我的github。好啦，就先到这里吧（逃）。

转载于:https://juejin.im/post/5a5f3ce16fb9a01cb80fc482