ES6的新特性

摘要

ECMAScript和JavaScript到底是什么关系?简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。

ECMAScript 6(简称ES6)是JavaScript语言的下一代标准。因为ES6是在2015年发布的,所以又称ES2015(全称为ECMAScript 2015)。

ECMAScriptJavaScript到底是什么关系?简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。

ECMAScript 6(简称ES6)是JavaScript语言的下一代标准。因为ES6是在2015年发布的,所以又称ES2015(全称为ECMAScript 2015)。

虽说ES6已经作为新一代标准发布了,但是各大浏览器对新特性的支持还有很长一段路要走,但是这并不影响我们积极的推广和使用它。

如何更安全、更高效的使用ES6呢?我们可以借助一个叫babel的工具。之所以叫工具,因为babel可以很方便的帮我们将ES6的语法转化成ES5的语法来获得浏览器的完美支持。

为什么现在越来越多的人开始使用ES6呢?

因为,ES6为我们提供了很多好用的东西,可以极大的简化我们代码的书写同时提高我们的工作效率。

下面一起看看那些被广大程序员津津乐道的新特性:

块级作用域

在ES5中只有全局作用域和函数作用域,没有块级作用域,而ES6新增了块级作用域。

通过let就可以轻松实现块级作用域,代码如下:

  1. function fnES5() {
  2.     var str = 'hello ES5';
  3.     if (true) {
  4.         var str = 'hello ES6';
  5.     }
  6.     console.log(str);
  7. }
  8. fnES5(); // 'hello ES6'
  9. function fnES6() {
  10.     let str = 'hello ES5';
  11.     if (true) {
  12.         let str = 'hello ES6';
  13.     }
  14.     console.log(str);
  15. }
  16. fnES6(); // 'hello ES5'

注意:

1、使用let声明的变量,所声明的变量只在命令所在的代码块内有效。

2、使用let声明的变量,在预解析时不会被提升。

3、let不允许在同一个作用域下声明已经存在的变量。

只读的常量

通过const声明常量。一旦声明,常量的值就不能被改变。

  1. const PI = 3.1415926;
  2. PI = 0.618;
  3. console.log(PI); // 运行报错

注:根据编程中约定俗成的习惯,声明常量我们一般采用全大写;利用常量的特性,我们一般将用到的外部资源声明为常量,这样可以极大的降低我们的出错率。

注意:

1、使用const声明的时候必须赋值。

2、使用const声明的变量,所声明的变量只在命令所在的代码块内有效。

3、使用const声明的变量,在预解析时不会被提升。

4、const不允许在同一个作用域下声明已经存在的变量。

5、声明的常量存储简单的数据类型时候不可以改变其值,如果存储的是对象,那么引用不可以被改变,至于对象里面的数据如何变化,是没有关系的。

字符串模版

JS中,拼接字符串是一件相当繁琐的工作,特别是有一堆带有换行的字符串。遇到这样的情况,通常我们采用+的方式。在ES6中,我们借助字符串模版``可以很方便的完成。

  1. var name1 = 'shaw';
  2. var age1 = 18;
  3. var str1 = 'My name is ' + name1 + ', i am ' + age1 + ' years old this year.';
  4. console.log(str1);
  5. let name2 = 'shaw';
  6. let age2 = 18;
  7. let str2 = `My name is ${ name2 }, i am ${ age2 } years old this year.`;
  8. console.log(str2);

解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。本质上就是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值。

  1. var a = 'E';
  2. var b = 'S';
  3. var c = '5';
  4. console.log(a, b, c);
  5. // 字体串解构赋值
  6. const [a, b, c] = 'ES6';
  7. console.log(a, b, c);
  1. var a = 'E';
  2. var b = 'S';
  3. var c = '5';
  4. console.log(a, b, c);
  5. // 数组解构赋值
  6. let [a, b, c] = ['E', 'S', '6'];
  7. console.log(a, b, c);

特别说明:null和undefined不能进行解构赋值

箭头函数

1、箭头函数体内没有自己的this对象,所以在使用的时候其内部的this就是定义时所在环境的对象,而不是使用时所在环境的对象。因此,不能给箭头函数使用call、apply、bind去改变其内部的this指向。

2、箭头函数体内没有arguments对象,如果要用,可以用Rest参数代替。

3、箭头函数不可以当作构造函数,因此不可以使用new命令,否则会抛出一个错误。

4、箭头函数不能用作Generator函数。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: