ECMAScript 6教程 (一)

  本文版權歸做者和博客園共有,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出 原文鏈接,博客地址爲 http://www.cnblogs.com/jasonnode/ 。該系列課程是匯智網 整理編寫的,課程地址爲 http://www.dwz.cn/3e6Ymljavascript

 

什麼是ES6?


  ECMAScript 6(如下簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。java

  ECMAScript和JavaScript究竟是什麼關係?不少初學者會感到困惑,簡單來講,ECMAScript是JavaScript語言的國際標準,JavaScript是ECMAScript的實現。node

  1996年11月,JavaScript的創造者Netscape公司,決定將JavaScript提交給國際標準化組織ECMA,但願這種語言可以成爲國際標準。次年,ECMA發佈262號標準文件(ECMA-262)的初版,規定了瀏覽器腳本語言的標準,並將這種語言稱爲ECMAScript。這個版本就是ECMAScript 1.0版。git

  ES6的目標,是使得JavaScript語言能夠用來編寫大型的複雜的應用程序,成爲企業級開發語言。es6

  做爲新一代標準ES6將爲咱們帶來不少使人欣喜的功能特性,本課程將着重帶領你們領略ES6的風采,所以在學習本課程前須要具有JavaScript的基礎知識,若是你並不瞭解JavaScript是什麼,能夠先學習一下JavaScript的入門課程。github

支持


  雖然說ES6已經做爲新一代標準發佈了,可是各大瀏覽器對新功能實現支持的還須要一段時間,那麼咱們怎麼知道本身使用的瀏覽器是否支持ES6的相應功能呢?bootstrap

  不用緊張,對ES6的支持能夠查看kangax.github.io/es5-compat-table/es6/,在這裏能夠清晰的瞭解到不一樣版本的瀏覽器對ES6功能的支持狀況。隨着時間的推移,支持度已經愈來愈高了,ES6的大部分特性都實現了。瀏覽器

  若是你想如今就在瀏覽器使用ES6的特性,還能夠經過引用兼容包的方式提早嚐嚐鮮。https://github.com/paulmillr/es6-shim函數

環境支持


直接插入網頁學習

Traceur容許將ES6代碼直接插入網頁。首先,必須在網頁頭部加載Traceur庫文件。

<!-- 加載Traceur編譯器 -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
<!-- 將Traceur編譯器用於網頁 -->
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></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;
l    et 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();

let應用


for循環的計數器,就很合適使用let命令。

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        document.write(i);
    };
}
document.write(a[6]());

const命令


const 聲明的是常量,一旦聲明,值將是不可變的。

const PI = 3.1415;
PI // 3.1415
 
PI = 3;
PI // 3.1415
 
const PI = 3.1;
PI // 3.1415

const 也具備塊級做用域

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

const 不能變量提高(必須先聲明後使用)

if (true) {
    document.write(MAX); // ReferenceError
    const MAX = 5;
}

const 不可重複聲明

var message = "Hello!";
let age = 25;
 
// 如下兩行都會報錯
const message = "Goodbye!";
const age = 30;

const 指令指向變量所在的地址,因此對該變量進行屬性設置是可行的(未改變變量地址),若是想徹底不可變化(包括屬性),那麼可使用凍結。

const C1 = {};
C1.a = 1;
document.write(C1.a); // 1
C1 = {}; // 報錯 從新賦值,地址改變
 
//凍結對象,此時前面用不用const都是一個效果
const C2 = Object.freeze({});
C2.a = 1; //Error,對象不可擴展
document.write(C2.a);

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


  傳統上,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 = 'hubwiz';
let last = '匯智網';
document.write(`Hello ${first} ${last}!`);
// Hello hubwiz 匯智網!

模板字符串能夠包含多行:

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

標籤模板


標籤模板

var a = 5;
var b = 10;
 
tag`Hello ${ a + b } world ${ a * b }`;

上面代碼中,模板字符串前面有一個標識名tag,它是一個函數。整個表達式的返回值,就是tag函數處理模板字符串後的返回值。

tag函數全部參數的實際值以下。

  • 第一個參數:['Hello ', ' world ']
  • 第二個參數: 15
  • 第三個參數:50

也就是說,tag函數實際上如下面的形式調用。

tag(['Hello ', ' world '], 15, 50)

下面是tag函數的一種寫法,以及運行結果。

var a = 5;
var b = 10;
 
function tag(s, v1, v2) {
document.write(s[0]);
document.write(s[1]);
document.write(v1);
document.write(v2);
 
return "OK";
}
 
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// 15
// 50
// "OK"

String.raw()


模板字符串能夠是原始的:

ES6還爲原生的String對象,提供了一個raw方法。

若使用String.raw 做爲模板字符串的前綴,則模板字符串能夠是原始(raw)的。反斜線也再也不是特殊字符,\n 也不會被解釋成換行符:

let raw = String.raw`Not a newline: \n`;
document.write(raw === 'Not a newline: \\n'); // true
相關文章
相關標籤/搜索