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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
js中的string.format函数代码
Aug 11 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
js实现全选反选不选功能代码详解
Apr 24 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通过COM类调用组件的实现代码
2012/01/11 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Vue组件库发布到npm详解
2018/02/17 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
Python实现的rsa加密算法详解
2018/01/24 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
怎样创建、运行java程序
2014/08/01 面试题
法律专业自我鉴定
2013/10/03 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python