这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 Javascript 6 里的 4 个新语法,感兴趣的小伙伴们可以参考一下
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);
- }
来源: http://www.phperz.com/article/17/0515/332324.html