Javascript 6里的4个新语法


Posted in Javascript onAugust 25, 2016

JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段

如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6

1.使用 let 和 const 声明变量
在传统的 ES5 代码中,变量的声明有两个主要问题

(1)缺少块儿作用域的支持

(2)不能声明常量

ES6中,这两个问题被解决了,增加了两个新的关键字:let 和 const

块儿作用域使用 let

var a = 1;
if (true) {
  var b = 2;
}
console.log(a); // 1
console.log(b); // 2

ES5 中 if 块儿内声明的变量 b 可以在块儿外访问

// in ES6
let a = 1;
if (true) {
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

ES6 中 if 块儿内使用 let 声明的变量 b 不能在块儿外访问

下面这段代码是常见的一个比较迷惑人的情况

var a = [];
for (var i=0; i< 5; i++) {
  a.push(function() {
    console.log(i);
  });
}
a.forEach(function(value) {
  value();
});

运行结果是:5, 5, 5, 5, 5

使用 let 声明循环中的变量 i

var b = []; 
for ( let i=0; i< 5; i++) {
  b.push(function() {
    console.log(i);
  });
}
b.forEach(function(value) {
  value();
});

运行结果是:0, 1, 2, 3, 4

定义常量使用 const

// in ES5

var MY_CONSTANT = true;

MY_CONSTANT = false;

ES5 中不能定义常量,值可以被改,只能靠我们自己来保证

// in ES6
const MY_CONSTANT = true;
MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable

ES6 中使用 const 声明的常量是不可以被改的

2.模板字符串
下面这种字符串与变量的拼接方式是比较常见的

var url = ‘http://www.' + domain + ‘.com/' + path + ‘?' + queryParams;
ES6 提供了简洁的用法

let url = `http://www.${domain}.com/${path}?${queryParams}`;

3.新的 Set 和 Map 对象
ES5 中我们经常使用数组来存储动态数据,例如

var collection = [];
collection.push(1, 2, 1);
console.log(collection); // [ 1, 2, 1]

其中包含了重复数据,如果不想有重复数据,需要使用代码判断

function addToCollection(collection, value) {

  if (collection.indexOf(value) < 0) {

    collection.push(value)

  }

}

ES6 提供了 Set 对象,处理这个情况就方便多了

let collection = new Set();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection); // Set {1, 2}

Set 还可以方便的遍历集合,和处理集合中的数据

ES5 中通常使用 object 来存储键值对数据,例如

var collection = {};
collection.a = ‘abc';
collection.b = ‘xyz';

ES6 有了 Map,就可以这样使用

let collection = new Map();
collection.set(‘a', ‘abc');
collection.set(‘b', ‘xyz');

遍历也很简单

collection.forEach(function(value, key) {
  console.log(key + ":" + value);
});
console.log(collection.size);

4.函数参数
ES6 中函数的参数有两个新特性

默认值

function doSomething(someObject) {
  console.log(someObject);
}

这里有可能会出现运行时错误,需要验证参数

function doSomething(someObject) {
  if (someObject === undefined) {
    someObject = {};
  }
  console.log(someObject);

}

这类的验证代码非常普遍,ES6 中可以给参数设置默认值,就简单了很多

function doSomething(someObject = {}) {

  console.log(someObject);

}

对象解构

我们常会把一个包含键值对的对象做为参数传给某个函数,然后在函数内获取对象的各个属性

function doSomething(someObject) {
  var one = someObject.propOne;
  console.log(one);
  var two = someObject.propTwo;
  console.log(two);
  var three = someObject.propThree;
  console.log(three);

}

ES6 可以让我们直接在参数中解构对象参数

function doSomething({ propOne, propTwo, propThree }) {
  console.log(propOne);
  console.log(propTwo);
  console.log(propThree);

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
Javascript实现代码折叠功能
Aug 25 #Javascript
深入浅出ES6之let和const命令
Aug 25 #Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 #Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 #Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 #Javascript
You might like
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
vue实现文件上传功能
2018/08/13 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
使用Python实现牛顿法求极值
2020/02/10 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
护士的岗位职责
2013/12/04 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
销售口号霸气押韵
2015/12/24 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python