ES6快速上手 —— 基礎篇

Zwe1發表於2018-04-02

前言

2015年正式通過ECMAScript6標準。前端技術日新月異，現如今ES6已納入許多企業的開發標準之中。ES6相較ES5有了巨大的變換，新增內容令人目不暇接，看到這冗長的列表目錄，是否你也會覺得腦殼疼？
我將在本篇文章中整理出ES6中一些十分利好的技能點，讓大家能夠更快上手ES6。
本系列文章，目的在於讓還不熟悉ES6的同學快速上手，找到一個學習ES6的切入點，想要了解更全面的知識點，需要大家自行摸索。
話不多說，我們開門見山，直接進入正題。

let const

ES6新增了兩種變數宣告方式。

let: 宣告一個塊內有效的變數。
const: 宣告一個常量，只可賦值一次，且需在宣告時初始化值。

let a = 1;
const b = 2;
b = 3; //  Uncaught TypeError: Assignment to constant variable.
複製程式碼

還記得，在for迴圈語句中用var宣告變數常發生得意想不到的問題嘛？

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();  //10
複製程式碼

這個問題通過let就可以得到很好的解決。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();  //6
複製程式碼

const則可以用於宣告一些常用的不變值，如 const PI = 3.141。

變數解構賦值

ES6允許按照一定模式，從陣列和物件中提取值，這被稱為解構。你需要按照目標物件的結構來構造一套對映結構，其中的變數會取對應的值。用通俗的話說，一個蘿蔔一個坑，成熟時間到了，你挖開對應的坑就可以取到相應的蘿蔔。

以前為變數賦值，需要一個個指定值。

let a = 1;
let b = 2;
複製程式碼

使用解構賦值：

let [a, b, c] = [1,2,3];
a === 1; //true
b === 2; //true
c === 3; //true
複製程式碼

坑和蘿蔔的位置和結構必須一一對應，你才能拿到想要的蘿蔔。

物件的解構賦值：

var obj = {foo: 'aaa', bar: 'ccc'};
const { foo, bar } = obj;
console.log(foo, bar);// aaa  ccc
複製程式碼

模板字串

以前組合輸出變數和字串時需要用雙引號一段段拼接，需要換行尤其頭疼，還需要插入換行符，這樣既不美觀也很難寫，現在我們可以使用模板字串，它更加快捷，並且能夠保持你的輸出格式。

var name = 'Ein';
console.log(
  `
  hello,
  ${name},
  my dear love!
  `
);
//

  hello,
  Ein,
  my dear!
  
複製程式碼

使用“ ` ”符號包裹你的字串，變數“ ${ } ”來包裹你的變數，大膽使用空格和換行符，所寫即所見，模板字串會完全保留你的輸入格式。

箭頭函式

箭頭函式可以讓你的程式碼更優雅，你無需再一遍又一遍的拼寫“function”。

var f = funciton (v) {
  return v;
};
複製程式碼

同下：

var f = (v) => {return v};
複製程式碼

只有一個引數時，可以省略小括號。函式體只有一條語句時，可以省略大括號，若這條語句是一個值，將作為函式的返回值。

var f = v => v;
複製程式碼

注意： 箭頭函式會繫結this到函式定義時所在的物件，這有時是一個優勢點，代替bind和call方法。有時也會造成意想不到的問題。

函式引數預設值

ES6之前，如果要為函式引數新增預設值，你需要這樣寫。

function log(y) {
  y = y || 'ein';
  console.log('hello ' + y);
};

log('world');  //hello world
log(); //hello ein
log(''); //hello ein
複製程式碼

這種寫法的缺點在於，如果引數y轉化為布林值後值為false，則該賦值不起作用。

使用ES6，新增預設引數

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
};

const p = new Point(); //{x: 0, y: 0}
複製程式碼

雙冒號運算子（繫結this）

ES6之前繫結this,我們需要使用bind,call,apply等方法，ES6中我們可以使用箭頭函式，但是箭頭函式在某些場合也不適用。我們可以使用雙冒號來繫結this。

bar.bind(foo);
//等同於
foo::bar

bar.apply(foo, arguments);
//等同於
foo::bar(...arguments);
複製程式碼

class

ES6的最重要改進，大概是在寫法上更加貼近於面嚮物件語言了。class關鍵字的引入，讓Javasript更加優美。 如果在使用高版本React，你一定對class不會陌生。

ES6之前生成例項物件的常用方法是使用建構函式。

function Prophet (x, y) {
  this.x = x;
  this.y = y;
};
Prophet.prototype.intro = function () {
  console.log(`I'm a prophet, I have ${this.x} and ${this.y}!`);
};

var p  = new Prophet('soul', 'special power');

p.intro();
//I'm a prophet, I have soul and special power!
複製程式碼

ES6的class可以看作只是一個語法糖，作為物件的模板，使用class關鍵字，可以定義類。上面的例子可以這樣寫：

class Prophet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  intro () {
    console.log(`I'm a prophet, I have ${this.x} and ${this.y}!`);
  }
};

let p = new Prophet();
複製程式碼

通過類構建物件例項的方法和使用建構函式相同，通過new操作符生成一個類的例項物件,不適用new會報錯。

p.constructor === Prophet.prototype.constructor //true

Prophet.prototype
//{constructor: ƒ, intro: ƒ}
複製程式碼

類的所有方法都定義在類的prototype屬性上面。

super關鍵字

The super keyword is used to access and call functions on an object's parent. (摘自MDN)
作用：super關鍵字用於訪問和呼叫物件父類上的函式。

  • super關鍵字可以當函式呼叫，也可以當作物件使用。

super作為函式呼叫，代表父類的建構函式。

class A {};
class B extends A {
  constructor() {
    super();
  }
}`
複製程式碼

Module

為了更好的構建大型的，複雜的專案，Javascript需要支援模組體系，ES6引入了模組語法。

  • 通過export和import命令來匯出和匯入模組。

export

一個模組就是一個獨立的檔案，該檔案內部的變數，外部無法獲取。export命令可以對外部開放訪問許可權。

export let name = 'zwei';
export let age = 1000;
export let sex = 'male';
複製程式碼
let name = 'zwei';
let age = 1000;
let sex = 'male';

export { name, age, sex };
複製程式碼

上面兩種方法都可以輸出變數，少量變數可以採用第一種方式；若存在許多變數需要輸出，第二種寫法會更加清晰直觀，便於閱讀。
export 命令同樣可以輸出函式或類（clss）。

重新命名

根據需要可以使用as關鍵字對輸出的變數進行重新命名。

export {
  p1 as name,
  p2 as age,
  p3 as sex
};
複製程式碼

export dafalut

export default class Tree extends React.Component {}
複製程式碼

export default命令用於指定模組的預設輸出。

import

模組中的變數輸出後，我們便具備了訪問許可權。但要使用這些模組中的變數，還需要使用import命令引入模組。 我們此前所輸出的三個變數在名為'utils.js'的檔案中。

import { name, age, sex } from 'utils.js';

function say () {
  console.log(`my name is ${name}, I'm ${age} years old, I'm a ${sex}`);
};
複製程式碼

整體載入

import * as variables from 'utils.js';

function say () {
  console.log(`my name is ${variables.name}, I'm ${variables.age} years old, I'm a ${variables.sex}`);
};
複製程式碼

根據你要使用的情況，引入變數，名稱需要與輸出的變數名稱相同，接著便可以使用了。

後續

本篇文章對ES6中常用的一些功能點進行了簡單介紹，旨在引導大家快速瞭解ES6語法，並未對各個知識點進行詳細講解，需要深入學習可以查詢其它資料。

後續還將介紹ES6中一些簡單方便的API以及強大的js非同步解決方案，敬請期待！

相關文章