ES6系列之let、const、箭头函数使用的坑

  1. 变量提升
  2. 块级作用域的重要性
  3. 箭头函数this的指向
  4. rest参数和arguments

1.ECMAScript与Js的关系

ES6系列之let、const、箭头函数使用的坑_第1张图片

 2.Babel转码器

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在老版本的浏览器执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。

ES6系列之let、const、箭头函数使用的坑_第2张图片

 上面的原始代码用了箭头函数,Babel将其转为普通函数,就能在不支持箭头函数的JavaScript环境执行了。

3.let和const命令

let定义

ES6新增了let命令,用来声明变量,它的用法类似于var

2.1  var存在变量提升

let、const不存在

ES6系列之let、const、箭头函数使用的坑_第3张图片

 2.2同一个作用域内不能重复定义同一个名称

ES6系列之let、const、箭头函数使用的坑_第4张图片

ES6系列之let、const、箭头函数使用的坑_第5张图片 ES6系列之let、const、箭头函数使用的坑_第6张图片

ES6系列之let、const、箭头函数使用的坑_第7张图片

 ES6系列之let、const、箭头函数使用的坑_第8张图片

4.箭头函数

ES6系列之let、const、箭头函数使用的坑_第9张图片

ES6系列之let、const、箭头函数使用的坑_第10张图片 

 ES6系列之let、const、箭头函数使用的坑_第11张图片

ES6系列之let、const、箭头函数使用的坑_第12张图片 

ES6系列之let、const、箭头函数使用的坑_第13张图片 

ES6系列之let、const、箭头函数使用的坑_第14张图片 

 箭头函数的坑:

箭头函数不能当做构造函数,不可以使用new命令

构造函数是生成对象的模板

ES6系列之let、const、箭头函数使用的坑_第15张图片

ES6系列之let、const、箭头函数使用的坑_第16张图片

 ES6系列之let、const、箭头函数使用的坑_第17张图片

箭头函数中没有arguments对象,该对象在函数体内不存在,替代rest 

 ES6系列之let、const、箭头函数使用的坑_第18张图片

 5.解构

什么是解构

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

解构是ES6的新特性,比ES5代码简介,清晰,减少代码量

ES5中的为变量赋值,只能直接指定值。

ES6系列之let、const、箭头函数使用的坑_第19张图片

 ES6系列之let、const、箭头函数使用的坑_第20张图片

ES6系列之let、const、箭头函数使用的坑_第21张图片

 ES6系列之let、const、箭头函数使用的坑_第22张图片

6、set 

ES6系列之let、const、箭头函数使用的坑_第23张图片

 ES6系列之let、const、箭头函数使用的坑_第24张图片

 

7.map

ES6系列之let、const、箭头函数使用的坑_第25张图片

 ES6系列之let、const、箭头函数使用的坑_第26张图片

 ES6系列之let、const、箭头函数使用的坑_第27张图片

 

 

你可能感兴趣的:(查漏补缺,es6,前端,javascript)