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,jquery闭包概念分析
Jun 19 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
解析isset与is_null的区别
2013/08/09 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
详解php用static方法的原因
2018/09/12 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jquery 常用操作方法
2010/01/28 Javascript
js类型检查实现代码
2010/10/29 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Django框架多表查询实例分析
2018/07/04 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python实现文法左递归的消除方法
2020/05/22 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
文明上网主题班会
2015/08/14 职场文书
Python实现单例模式的5种方法
2021/06/15 Python