关灯
请选择 进入手机版 | 继续访问电脑版
百企互联-云虚拟主机云服务器
广告
广告
广告
广告
广告
广告
广告
广告
广告
广告
0

JavaScript ES6功能概述(也称为ECMAScript 6和ES2015 +)

摘要: JavaScript在去年新增了12个特性可以使用。这个新版本语言被称作ECMAScript6,也可以被称为ES6或ES2015+。自从1995年JavaScript诞生以来,它一直在缓慢发展。 每隔几年就会有新的版本。 ECMAScript诞生于1997年,旨 ...

JavaScript在去年新增了12个特性可以使用。

这个新版本语言被称作ECMAScript6,也可以被称为ES6或ES2015+。

自从1995年JavaScript诞生以来,它一直在缓慢发展。 每隔几年就会有新的版本。 ECMAScript诞生于1997年,旨在指导JavaScript的发展。 它已经发布了ES3,ES5,ES6等版本。

如你所见,ES3、ES5和ES6之间存在10年或6年的差距。 不像每年进行少量的更改那样 ,ES6一次就进行了大规模更改。

现如今很多浏览器环境都支持ES6。

来源:https://kangax.github.io/compat-table/es6/

Chrome,MS Edge,Firefox,Safari,Node和许多其他环境已经内置支持JavaScript ES6的大部分功能。 因此,在本教程中你学习的所有知识都可以马上开始应用。

让我们开始学习ECMAScript 6吧!

你可以在浏览器控制台上测试下边所有的代码段!

不要只相信我说的话,而是要去测试每个ES5和ES6示例,让我们深入了解吧💪

变量的块级作用域link

因为ES6,我们从var到开始使用let / const声明变量。

var有什么问题吗?

var 的问题是变量泄漏到其他代码块中,例如for循环或if语句。

ES5
var x = 'outer';
function test(inner) {  
  if (inner) {    
    var x = 'inner';// scope whole function    
        return x;
  }  
      return x;// gets redefined because line 4 declaration is hoisted
    }
    test(false);// undefined 😱
    test(true);// inner

test(false) 按理说会返回 outer, 但是不是的, 它返回了undefined

为什么呢?

因为即使 if块没有执行, 第4行的表达式 var x 提升了

变量 提升

  • var 是函数作用域。即使在声明之前,它在整个函数中也可用。

  • 声明被提升,您可在它被声明之前使用一个变量。

  • 初始化不会提升, 如果您使用var,则始终在顶部声明变量。

  • 应用了提升规则后,我们更好得了解发生了什么:


ES5 var x = 'outer'; function test(inner) {
var x;// HOISTED DECLARATION
if (inner) {
x = 'inner';// INITIALIZATION NOT HOISTED
return x; }
return x; }


ECMAScript 2015 找到了解决办法:

ES6
let x = 'outer';
function test(inner) {  
  if (inner) {    
      let x = 'inner';
    return x;
  }  
      return x;// gets result from line 1 as expected
}
test(false);// outer
test(true);// inner

var更改为let使代码按预期工作。 如果未调用if块,变量x将不会在代码块外被提升。

Let 提升 和 “暂时性死区”

  • 在ES6中, let会把变量提升到块的顶部(而不是像ES5这样的函数顶部)。

  • 不过,在变量声明之前在代码块中引用会导致ReferenceError错误。

  • let是块级作用域。不能在它被声明之前引用。

  • “暂时性死区” 是从代码块开始到变量声明为止的区域。

IIFE(立即执行函数表达式)

在解释IIFE之前先看一个例子:

ES5
{  
  var private = 1;
}
console.log(private);// 1

可以看到, private 变量泄漏。你需要使用 IIFE (立即执行函数表达式)来包裹它:

ES5
(function(){  
  var private2 = 1;})();
console.log(private2);// Uncaught ReferenceError

观察 jQuery/lodash 或其他开源项目,你将会发现他们使用了IIFE来避免污染全局环境,只在全局定义_$ 和 jQuery等。

ES6写法简化了很多, 我们可以只用代码块和let,不再需要使用IIFE:

ES6
{  
  let private3 = 1;
}
console.log(private3);// Uncaught ReferenceError

Const常量

如果你想要一个变量保持不变,可以使用const常量。

总之:使用let 、 const而不是var

  • 对所有引用使用const;避免使用 var

  • 如果需要重新指定引用,使用let 代替 const

模板字符串link

当我们有了模板字符串,就不用再做一些嵌套操作:

ES5
var first = 'Adrian';
var last = 'Mejia';
console.log('Your name is ' + first + ' ' + last + '.');

现在可以使用反引号和字符串插值${}

const first = 'Adrian';
const last = 'Mejia';
console.log(Your name is ${first} ${last}.);

多行字符串link

我们再也不用像这样添加+\n将字符串连接起来了:

var template = '<li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >\n' +
'  <div class="view">\n' +
'    <input class="toggle" type="checkbox" [checked]="todo.isDone">\n' +
'    <label></label>\n' +
'    <button class="destroy"></button>\n' +
'  </div>\n' +
'  <input class="edit" value="">\n' +
'</li>';
console.log(template);


在ES6中,我们可以同样使用反引号来解决这个问题:

const template = `<li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
  <div class="view">
    <input class="toggle" type="checkbox" [checked]="todo.isDone">
    <label></label>
    <button class="destroy"></button>
  </div>
  <input class="edit" value="">
</li>`;
console.log(template);

这两段代码将具有完全相同的结果。

解构赋值link

ES6的解构非常实用和简洁。如下例所示:

从数组中获取元素

ES5
var array = [1, 2, 3, 4];
var first = array[0];
var third = array[2];
console.log(first, third);// 1 3

等同于:

ES6
const array = [1, 2, 3, 4];
const [first, ,third] = array;
console.log(first, third);// 1 3

交换值

ES5
var a = 1;
var b = 2;
var tmp = a;
a = b;
b = tmp;
console.log(a, b);// 2 1

等同于

ES6
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);// 2 1

解构多个返回值

ES5
function margin() {  
  var left=1, right=2, top=3, bottom=4;
  return { 
      left: left, right: right, top: top, bottom: bottom };
}
var data = margin();
var left = data.left;
var bottom = data.bottom;
console.log(left, bottom);// 1 4

在第3行, 你也可以返回一个这样的数组 (用时省去了一些代码):


免责申明:
本站所有未声明来源,均来源于百企互联网络收集及网络用户上传,本资源只限于个人学习/研究/欣赏
本站主要使用火币作为主要交易币种,1元=10火币
所有著作权归属原创作者所有,未经同意,请勿转载,否则后果自负!
所有下载者表示默认接受并同意签订【百企论坛】免责声明协议!
请下载24小时内删除,切勿用于商业用途。如有侵权,请申请维权删帖或者联系我们删除。

鲜花

握手

雷人

路过

鸡蛋
本文作者
2020-5-23 23:35
  • 0
    粉丝
  • 137
    阅读
  • 0
    回复
资讯幻灯片
热门评论
热门专题
排行榜

关注我们:微信公众号

官方微信

技术宅小Y

全国服务热线:

028-6672-6966

公司地址:成都市成华区致强路266号

运营中心:成都市高新区剑南大道北段399号天府新谷

邮编:610001

Email:1562309802@qq.com

Copyright   ©2020-2022  百企论坛Powered by©百企互联技术支持:技术宅小Y    ( 蜀ICP备14023368号-2 )