Javascript 6里的4个新语法

 JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段
  如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6

   1.使用 let 和 const 声明变量

  在传统的 ES5 代码中,变量的声明有两个主要问题
   (1)缺少块儿作用域的支持
  (2)不能声明常量
  ES6中,这两个问题被解决了,增加了两个新的关键字: let 和 const
  块儿作用域使用 let
Javascript 6里的4个新语法_第1张图片 
  ES5 中 if 块儿内声明的变量 b 可以在块儿外访问
Javascript 6里的4个新语法_第2张图片 
  ES6 中 if 块儿内使用 let 声明的变量 b 不能在块儿外访问
  下面这段代码是常见的一个比较迷惑人的情况
Javascript 6里的4个新语法_第3张图片 
  运行结果是:5, 5, 5, 5, 5
  使用 let 声明循环中的变量 i
Javascript 6里的4个新语法_第4张图片 
  运行结果是:5, 5, 5, 5, 5
  使用 let 声明循环中的变量 i
5.png 
  ES5 中不能定义常量,值可以被改,只能靠我们自己来保证
6.png 
  ES6 中使用 const 声明的常量是不可以被改的

   2 .模板字符串

  下面这种字符串与变量的拼接方式是比较常见的
7.png 
  ES6 提供了简洁的用法
8.png 

   3.新的 Set 和 Map 对象

  ES5 中我们经常使用数组来存储动态数据,例如
9.png 
  其中包含了重复数据,如果不想有重复数据,需要使用代码判断
Javascript 6里的4个新语法_第5张图片 
  ES6 提供了 Set 对象,处理这个情况就方便多了
Javascript 6里的4个新语法_第6张图片 
  Set 还可以方便的遍历集合,和处理集合中的数据
  ES5 中通常使用 object 来存储键值对数据,例如
12.png 
  ES6 有了 Map,就可以这样使用
13.png 
  遍历也很简单
Javascript 6里的4个新语法_第7张图片 

   4.函数参数

  ES6 中函数的参数有两个新特性
   默认值
15.png 
  这里有可能会出现运行时错误,需要验证参数
Javascript 6里的4个新语法_第8张图片 
  这类的验证代码非常普遍,ES6 中可以给参数设置默认值,就简单了很多
17.png 

   对象解构
  我们常会把一个包含键值对的对象做为参数传给某个函数,然后在函数内获取对象的各个属性
Javascript 6里的4个新语法_第9张图片 
  ES6 可以让我们直接在参数中解构对象参数
Javascript 6里的4个新语法_第10张图片 

你可能感兴趣的:(jsp)