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创建数组之联合数组的使用方法示例
Dec 26 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
VUE项目axios请求头更改Content-Type操作
Jul 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实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python logging日志模块原理及操作解析
2019/10/12 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python实现定时发送邮件
2020/12/23 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
DTD的含义以及作用
2014/01/26 面试题
餐饮周年庆活动方案
2014/08/14 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
杜甫草堂导游词
2015/02/03 职场文书
大班上学期个人总结
2015/02/13 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs