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常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
javascript每日必学之运算符
Feb 16 Javascript
实例浅析js的this
Dec 11 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
服务器web工具 php环境下
2010/12/29 PHP
php类常量用法实例分析
2015/07/09 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
鉴定评语大全
2014/05/05 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python