Javascript ES6版本的4个基础用法

JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段

如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6

01

使用 let 和 const 声明变量

在传统的 ES5 代码中,变量的声明有两个主要问题

(1)缺少块儿作用域的支持

(2)不能声明常量

ES6中,这两个问题被解决了,增加了两个新的关键字:letconst

块儿作用域使用 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 声明的常量是不可以被改的

02

模板字符串

下面这种字符串与变量的拼接方式是比较常见的

var url = ‘http://www.’ + domain + ‘.com/’ + path + ‘?’ + queryParams;

ES6 提供了简洁的用法

let url = `http://www.${domain}.com/${path}?${queryParams}`;

03

新的 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);

04

函数参数

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);
}

参考资料

https://www.codementor.io/javascript/tutorial/4-easy-ways-to-start-using-es2015

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-08-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

Python基础学习笔记之(二)(华工大神)

         Python中每一个.py脚本定义一个模块,所以我们可以在一个.py脚本中定义一个实现某个功能的函数或者脚本,这样其他的.py脚本就可以调用...

12540
来自专栏金朝麟的专栏

Module.exports和exports的区别

学习Seajs时,看到了exports.doSomething和module.exports,想对这两者的区别一探究竟。官方解释因为SeaJs和Nodejs都是...

19700
来自专栏Golang语言社区

Go语言错误与异常处理机制

1 Error接口 Go语言中的error类型实际上是抽象了Error()方法的error接口

12730
来自专栏程序员的SOD蜜

C#中?与??的区别

起初我也不知道C#中有??操作符,今天张鹏在查看我的MVC示例程序的时候问了这个问题,检查代码后发现,下面的代码是VS2010在生成MVC应用程序自己添加的: ...

24270
来自专栏狮乐园

高级 Angular 组件模式 (5)

在之前的例子中,已经出现多次使用template reference variable(模板引用变量)的场景,现在让我们来深入研究如何通过使用模板引用变量来关联...

9420
来自专栏xiaoxi666的专栏

c++ 继承类强制转换时的虚函数表工作原理

本文通过简单例子说明子类之间发生强制转换时虚函数如何调用,旨在对c++继承中的虚函数表的作用机制有更深入的理解。

21730
来自专栏小狼的世界

JavaScript 去除空格函数

return strToTrim.replace(/^\s+|\s+$/g,"")

12930
来自专栏开源优测

Selenium3源码之异常模块篇

Selenium3源码之异常模块篇 简介 本文分析Selenium3源码中关于异常处理的通用代码,要分析的代码位置如下(路径为:***python3/lib/s...

40160
来自专栏黄Java的地盘

小而美的Promise库——promiz源码浅析

在上一篇博客[译]前端基础知识储备——Promise/A+规范中,我们介绍了Promise/A+规范的具体条目。在本文中,我们来选择了promiz,让大家来看下...

13020
来自专栏技术沉淀

Python: set实例透析

11720

扫码关注云+社区

领取腾讯云代金券