ES6新语法快速入门学习教程

什么是ES6？

 

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。

ECMAScript和JavaScript到底是什么关系？很多初学者会感到困惑，简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。

 

支持ES6的浏览器：

 

　虽说ES6已经作为新一代标准发布了，但是各大浏览器对新功能实现支持的还需要一段时间，那么我们怎么知道自己使用的浏览器是否支持ES6的相应功能呢？

　　不用紧张，对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/，在这里可以清晰的了解到不同版本的浏览器对ES6功能的支持情况。随着时间的推移，支持度已经越来越高了，ES6的大部分特性都实现了。

　　如果你想现在就在浏览器使用ES6的特性，还可以通过引用兼容包的方式提前尝尝鲜。 https://github.com/paulmillr/es6-shim

环境支持：babel

 

直接插入网页

Traceur允许将ES6代码直接插入网页。首先，必须在网页头部加载Traceur库文件。

 

<!-- 加载Traceur编译器 --> <script src="http://google.github.io/traceur-compiler/bin/traceur.js"         type="text/javascript"></script> <!-- 将Traceur编译器用于网页 --> <scripttype="text/javascript"> new traceur.WebPageTranscoder(document.location.href).run(); </script> <!-- 打开实验选项，否则有些特性可能编译不成功 --> <script>                                                    traceur.options.experimental = true; </script>   <script type="module">   class Calc {     constructor(){       console.log('Calc constructor');     }     add(a, b){       return a + b;     }   }     var c = new Calc();   console.log(c.add(4,5)); </script>

注意，script标签的type属性的值是module(或者traceur)，而不是text/javascript。这是Traceur编译器识别ES6代码的标识，编译器会自动将所有type=module的代码编译为ES5，然后再交给浏览器执行。

 

 

 

let

 

let是ES6中新增关键字。

它的作用类似于var，用来声明变量，但是所声明的变量，只在let命令所在的代码块内有效。

if(true){     var a = 1;     let b = 2; } document.write(a); document.write(b);  // 报错：ReferenceError: b is not defined

体会下let和var的作用域范围:

 

function f1() {   var a = 8;   let n = 5;   if (true) {       let n = 10;       var a = 20   }   document.write(n); // 5   document.write(a); // 20 } f1();

const命令

 

const 声明的是常量，一旦声明，值将是不可变的。

 

const PI = 3.1415; console.log(PI); PI = 3; console.log(PI);

const 也具有块级作用域

 

if (true) {   const max = 5; } document.write(max);  // ReferenceError 常量MAX在此处不可得

 

const 不可重复声明

var message = "Hello!"; let age = 25;   // 以下两行都会报错 const message = "Goodbye!"; const age = 30;

 

是否包含字符串三种新方法

传统上，JavaScript只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

 

var str = "Hello world!"; str.startsWith("Hello") // true str.endsWith("!") // true str.includes("o") // true

这三个方法都支持第二个参数，表示开始搜索的位置。

 

var str = "Hello world!"; str.startsWith("world", 6) // true str.endsWith("Hello", 5) // true str.includes("Hello", 6) // false

上面代码表示，使用第二个参数n时，endsWith 的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

 

 

repeat()原字符串重复

 

repeat()返回一个新字符串，表示将原字符串重复n次。

 

var str = "x"; str.repeat(3) // "xxx"   var str1 = "hello"; str1.repeat(2) // "hellohello"

 

 

模板字符串

模板字符串提供了3个有意思的特性。

模板字符中，支持字符串插值：

let first = '我叫xxx'; let last = '我是搬砖工'; document.write(`Hello ${first} ${last}!`);   //注意引号

 

模板字符串可以包含多行：

 

let multiLine = `     This is     a string     with multiple     lines`;     document.write(multiLine);

 

 

 

 

Array.from()

 

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-likeobject）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

下面是一个类似数组的对象，Array.from将它转为真正的数组。

let array = Array.from({ 0: "a", 1: "b", 2: "c", length: 3 }); document.write(array);    // [ "a", "b" , "c" ]

 

 

let arrayLike = {                                 '0': 'a',                                 '1': 'b',                                 '2': 'c',                                 length: 3                             };   // ES5的写法    这句话相当于Array.prototype.slice.call(arrayLike)   //目的是将arrayLike对象的数组提出来转化为数组，arrayLike本身并不是数组而是对象   var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']                               console.log(arr1);                               // ES6的写法                             let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']                               console.log(arr2);

 

Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理。