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 相关文章推荐
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
浅谈js的异步执行
Oct 18 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
浅谈javascript如何获取文件后缀名
Aug 07 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面向对象编程快速入门
2006/10/09 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
餐饮收银员岗位职责
2014/02/07 职场文书
如何写好自荐信
2014/04/07 职场文书
2014年审计工作总结
2014/11/17 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
创业计划书之宠物店
2019/09/19 职场文书
八年级作文之友谊
2019/12/02 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技