技術文章 » 什麼是es5和es6

什麼是es5和es6

2022-11-21 18:04:16

es5全稱「ECMAScript 5」，是ECMAScript標準的第5版，它通過對現有JavaScript方法新增語句和原生ECMAScript物件做合併實現標準化；ES5還引入了一個語法的嚴格變種，被稱為」嚴格模式」。es6全稱ECMAScript6，是於2015年6月正式釋出的JS語言的標準；它的目標是使得JS語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

php入門到就業線上直播課：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es全稱「ECMAScript」

ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會，European Computer Manufacturers Association）通過ECMA-262標準化的指令碼程式設計語言。這種語言在全球資訊網上應用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是JavaScript的一個標準,但實際上後兩者是ECMA-262標準的實現和擴充套件。

ECMAScript是一種可以在宿主環境中執行計算並能操作可計算物件的基於物件的程式設計語言。ECMAScript最先被設計成一種Web指令碼語言，用來支援Web頁面的動態表現以及為基於Web的客戶機—伺服器架構提供伺服器端的計算能力。但作為一種指令碼語言， ECMAScript具備同其他指令碼語言一樣的性質，即「用來操縱、客製化一個已存在系統所提供的功能，以及對其進行自動化」。

es5是什麼

es5全稱「ECMAScript 5」，也被稱為ECMAScript2009，是ECMAScript標準的第5版，與HTML5規範程序本質類似，ES5通過對現有JavaScript方法新增語句和原生ECMAScript物件做合併實現標準化。ES5還引入了一個語法的嚴格變種，被稱為」嚴格模式(strict mode)」。

es5的新功能：

這些是 2009 年釋出的新功能：

  • The "use strict" Directive

  • String.trim()

  • Array.isArray()

  • Array.forEach()

  • Array.map()

  • Array.filter()

  • Array.reduce()

  • Array.reduceRight()

  • Array.every()

  • Array.some()

  • Array.indexOf()

  • Array.lastIndexOf()

  • JSON.parse()

  • JSON.stringify()

  • Date.now()

  • Property Getters and Setters

  • New Object Property Methods

ES5的嚴格模式 'use strict'

     給作者提供了選擇一個限制性更強語言變種的方式
        1. 消除不安全之處，保證安全執行
        2. 提升編譯效率
        3. 未來發展趨勢
      規則:
        1)變數先定義在使用
        2)不允許變數重名
          var a=1;
          function a(){}
        3)不允許使用eval
        4)不允許delete
        4)不允許with語句
          var sMessage = "hello";
          with(sMessage) {alert(toUpperCase());}
登入後複製

es5是什麼

es6全稱ECMAScript6（ECMAScript的第6個版本），是於2015年6月正式釋出的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

ES6是JavaScript語言的主要增強，允許我們編寫程式。ES6適用於複雜的應用程式。儘管ES5和ES6在本質上有一些相似之處，但它們之間也有許多不同之處。

es5和es6的區別

ES5和ES6之間的比較列表如下：

比較項ES5ES6
定義ES5是ECMAScript（由ECMA International定義的商標指令碼語言規範）的第五版。ES6是ECMAScript（ECMA International定義的商標指令碼語言規範）的第六版。
釋出它於2009年推出。它於2015年推出。
資料型別ES5支援原始資料型別，包括字串，數位，布林值，空值和未定義（undefined）。在ES6中，對JavaScript資料型別進行了一些補充。 它引入了一種新的原始資料型別symbol以支援唯一值。
定義變數在ES5中，只能使用var關鍵字定義變數。在ES6中，有兩種定義let和const變數的新方法。
效能由於ES5早於ES6，因此某些功能不存在，因此其效能比ES6低。由於具有新功能和速記儲存實現，因此ES6具有比ES5更高的效能。
支援許多社群都支援它。它也有很多社群支援，但是比ES5小。
物件操縱ES5比ES6耗時。由於具有解構和速度運運算元，因此可以在ES6中更平穩地處理物件操縱。
箭頭函數在ES5中，function和return關鍵字均用於定義函數。箭頭功能是ES6中引入的新功能，通過它不需要function關鍵字來定義函數。
迴圈在ES5中，使用了for迴圈來遍歷元素。ES6引入了for?of迴圈的概念，以對可迭代物件的值執行迭代。

程式碼轉換

到目前為止，還沒有完全支援ES6功能的瀏覽器。 但是，我們可以使用轉譯將ES6程式碼轉換為ES5程式碼。

有兩個主要的編譯器Babel和Traceur，用於在構建過程中將ES6程式碼轉換為ES5程式碼。

擴充套件運運算元（…）

它在ES6中引入，使合併陣列和物件變得容易。

ES6常用特性：

一、let和const命令

1、let：

（1）基本用法

ES6 新增了let命令，用來宣告變數。類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效。{

   let a = 10;
   var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
登入後複製

（2）let在for迴圈中使用

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[2](); // 10
a[6](); // 10
登入後複製

這個例子中，i 由 var 宣告，在全域性範圍有效，a 的所有組員裡面的 i 都是指向同一個 i，導致所有組員執行輸出的都是最後一輪的 i 的值。

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    }
}
a[2](); // 2
a[6](); // 6
登入後複製

這個例子中， i 由 let 宣告，當前的 i 只在本輪迴圈有效，所有每次迴圈的 i 其實都是一個新的變數。
Tips： 每輪迴圈的 i 都是重新宣告的，JavaScript 引擎內部會記住上一輪迴圈的值，初始化本輪的 i 時，就在上一輪迴圈的基礎上進行計算。

（3）for迴圈的特別之處

在 for 迴圈中，設定迴圈變數的那部分是一個父作用域，而回圈內部是一個單獨的子作用域。

for (let i = 0; i < 3; i++) {
    let i = 'abc';  // 和上一行for迴圈計數器的i不在同一作用域，所以可以宣告成功。類比下面要講的function(arg){let arg;}會報錯，就是作用域問題
    console.log(i);
}
// abc
// abc
// abc
登入後複製

（4）不能重複宣告

let 不允許在相同作用域內，重複宣告同一個變數。

function func() {
  var a = 10;
  let a = 1;
}
func(); //Identifier 'a' has already been declared

function func() {
  let a = 10;
  let a = 1;
}
func(); //Identifier 'a' has already been declared
 
function func(arg) {
  let arg; 
}
func(); //Identifier 'arg' has already been declared
 
function func(arg) {
  {
    let arg; 
  }
}
func(); //不報錯
登入後複製

（5）不存在變數提升

var 命令會發生「變數提升」現象，即變數可以在宣告之前使用，值為 undefined。 let 命令改變了語法行為，它所宣告的變數一定要在宣告後使用，否則會報錯。

console.log(foo); //undefined
var foo = 2;
console.log(bar); // ReferenceError: bar is not defined
let bar =  2;
登入後複製

（6）暫時性死區

ES6規定，如果區塊中存在 let 和 const 命令，這個區塊對這些命令宣告的變數，從一開始就形成了封閉作用域。凡是在宣告之前使用這些變數，就會報錯。這在語法上稱為 「暫時性死區」。

var tmp = 123;
if(true){
    tmp = 'abc'; // ReferenceError: tmp is not defined
    let tmp;
}
登入後複製

Tips：「暫時性死區」的本質就是：只要一進入當前作用域，所要使用的變數就已經存在了，但不可獲取（否則報錯），只有等到宣告的那一行程式碼出現，才可以獲取和使用。

2、const：

const命令的用法和let相似，最大不同點就是：const宣告一個唯讀的常數。一旦宣告，常數的值就不能改變。

Tips：這個不可改變的是指標，所以對於const宣告的物件和陣列還是可以改變的。如果真的想將物件凍結，應該使用Object.freeze方法。

3、let和const部分補充：

ES5 只有兩種宣告變數的方法：var命令和function命令。

ES6 除了新增let和const命令，另外兩種宣告變數的方法：import命令和class命令。所以，ES6 一共有 6 種宣告變數的方法。

頂層物件：在瀏覽器環境指的是window物件，在 Node 指的是global物件。ES5 之中，頂層物件的屬性與全域性變數是等價的。

ES6為了保持相容性，規定：a. var 命令和 function 命令宣告的全域性變數，依舊是頂層物件的屬性。b. let，const，class 命令宣告的全域性變數，不屬於頂層物件的屬性。

var a = 1;
window.a; // 1
let b = 2;
window.b; // undefined
登入後複製

二、變數的解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。

1、陣列的解構賦值

（1）基本用法

// 之前，為變數賦值，可以直接指定值
let a = 1;
let b = 2;
let c = 3;

// ES6中允許這樣
let [a, b, c] = [1, 2, 3];  // 可以從陣列中提取值，按照對應位置，對變數賦值。
登入後複製

本質上，這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。下面是一些使用巢狀陣列進行解構的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
 
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
 
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
 
let [x, y, ...z] = ['a'];
x // "a"
y // undefined  - 如果解構不成功，變數的值就等於 undefined。
z // []
登入後複製

如果解構不成功，變數的值就等於undefined。

上面一種情況是解構不成功的；另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列。這種情況下，解構依然可以成功。

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
登入後複製

上面兩個例子，都屬於不完全解構，但是可以成功。

如果等號的右邊不是陣列，那麼將會報錯。

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
登入後複製

（2）預設值

解構賦值允許指定預設值。例如：

let [foo = true] = [];
foo;// true
 
let [x, y = 'b'] = ['a'];
x;//'a'
y;//'b'
登入後複製

Tips：ES6 內部使用嚴格相等運運算元(===)去判斷一個位置是否有值。所以，只有當一個陣列成員嚴格等於 undefined ，預設值才會生效。例如：

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null - 預設值就不會生效，因為null不嚴格等於undefined
登入後複製

預設值可以參照解構賦值的其他變數，但該變數必須已經宣告。

let [x = 1, y = x] = [1, 2];
x;//1
y;//2
 
let [x = y, y = 1] = [];// ReferenceError: y is not defined -- let的暫時性死區
let [x = y, y = 1] = [1, 2];
登入後複製
2、物件的解構賦值

（1）基本用法

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
登入後複製

物件的解構與陣列的解構，一個重要的不同點在於： 陣列元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數名與屬性同名，才能取到正確的值。

如果沒有與變數名對應的屬性名，導致取不到值，最後等於undefined。

如果變數名和屬性名不一樣，必須寫才下面這樣：

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
登入後複製

這實際上說明，物件的解構賦值是下面形式的簡寫：

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
登入後複製

也就是說，物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
登入後複製

上面程式碼中，foo是匹配的模式，baz才是變數。真正被賦值的是變數baz，而不是模式foo。

（2）預設值

物件的解構也可以指定預設值。預設值生效的條件是物件的屬性值嚴格等於 undefined。

let {x, y = 5} = {x: 1};
x;// 1
y;// 5

let { message: msg = 'Something went wrong' } = {};
msg;//"Something went wrong"
登入後複製

Tips：如果要將一個已經宣告的變數用於解構賦值，需要注意：

let x;
{x} = {x:1};
//上面的程式碼會報錯，因為JavaScript引擎會將 {x} 理解為一個程式碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免JavaScript將其解釋為程式碼塊，才能解決這個問題。
 
//正確的寫法，將需要解構的部分用括號（）包起來
let x;
({x} = {x:1});
登入後複製
3、字串的解構賦值

字串也可以解構賦值。這是因為此時，字串被轉換成了一個類似陣列的物件。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
登入後複製

類似陣列的物件都有一個 length 屬性，因此還可以對這個屬性解構賦值。

let {length: len} = 'hello';
len;// 5
登入後複製
4、數值和布林值的解構賦值

解構賦值時，如果等號右邊是數值和布林值，則會先轉化為物件：

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
登入後複製

上面程式碼中，數值和布林值的包裝物件都有 toString 屬性，因此變數 s 都可以取到值。

解構賦值的規則是：只要等號右邊的值不是物件或陣列，就先將其轉化為物件。 由於 undefined 和 null 無法轉化為物件，所以對他們進行解構賦值都會報錯。

5、函數引數的解構賦值
function add([x, y]){
   return x + y;
}
 
add([1, 2]); // 3
 
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
登入後複製

上面程式碼中，函數 add 的引數看似是一個陣列，但在傳入引數時，陣列引數就解構為變數 x 和 y。對於函數內部程式碼來說，引數就是 x 和 y。

函數引數的解構也可以使用預設引數：

function move({x=0, y=0}={}) {
  return [x, y];
}
move({x:3,y:8});// [3, 8]
move({x:3});// [3, 0]
move({});// [0, 0]
move();// [0, 0]
登入後複製

上例中，函數 move 的引數是一個物件，通過對這個物件進行解構，得到變數 x 和 y 的值。如果解構失敗，x 和 y 等於預設值。

再看下面這種寫法：

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
 
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
登入後複製

上面的程式碼是為函數 move 的引數指定預設值，而不是為變數 x 和 y 指定預設值。

6、解構的用途

（1）交換變數的值

let x = 1;
let y = 2;
[x, y] = [y, x];
x;// 2
y;// 1
登入後複製

（2）從函數返回多個值
函數只能返回一個值，如果要返回多個值，只能將它們放在陣列或物件裡面返回。有了解構賦值，取出這些值就非常方便。

//返回一個陣列
function example() {
    return [1, 2, 3];
}
let [a, b, c] = example();
a;//1
b;//2
c;//3
 
//返回一個物件
function example(){
    return {
        foo: 1,
        bar: 2
    }
}
let {foo, bar} = example();
foo;//1
bar;//2
登入後複製

（3）函數引數的定義
解構賦值可以方便的將一組引數與變數名對應起來。

//引數是一組有序值
function f([x, y, z]) {}
f([1, 2, 3]);
 
//引數是一組無序值
function f({x, y, z}) {}
f({x: 1, y: 2, z: 3});
登入後複製

（4）提取JSON資料

let data = {
    id: 1,
    status: 'ok',
    data: [867, 5612]
};
let {id, status, data:number} = data;
console.log(id, status, number);// 1 "ok"  [867, 5612]
登入後複製

（5）遍歷Map解構

const map = new Map();
map.set('first','hello');
map.set('second','world');
for (let [key, value] of map) {
    console.log(key + ' is ' + value );
}
//first is hello
//second is world

// 獲取鍵名
for (let [key] of map) {}
 
// 獲取鍵值
for (let [,value] of map) {}
登入後複製

三、函數的預設引數

1、基本用法

ES6 之前，不能直接為函數的引數指定預設值，只能採用變通的方法。

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
登入後複製

上面程式碼檢查函數log的引數y有沒有賦值，如果沒有，則指定預設值為World。這種寫法的缺點在於，如果引數y賦值了，但是對應的布林值為false，則該賦值不起作用。就像上面程式碼的最後一行，引數y等於空字元，結果被改為預設值。

為了避免這個問題，通常需要先判斷一下引數y是否被賦值，如果沒有，再等於預設值。

if (typeof y === 'undefined') {
  y = 'World';
}
登入後複製

ES6 允許為函數的引數設定預設值，即直接寫在引數定義的後面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello -- 上面說過，ES6 內部使用嚴格相等運運算元(===)，判斷一個位置是否有值。所以，只有當一個陣列成員嚴格等於 undefined ，預設值才會生效。
登入後複製
2、與解構賦值預設值結合使用
function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined
登入後複製

上面程式碼只使用了物件的解構賦值預設值，沒有使用函數引數的預設值。只有當函數foo的引數是一個物件時，變數x和y才會通過解構賦值生成。

如果函數foo呼叫時沒提供引數，變數x和y就不會生成，從而報錯。

通過提供函數引數的預設值，就可以避免這種情況。

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5
登入後複製

下面是另一個解構賦值預設值的例子：

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 報錯
登入後複製

上面程式碼中，如果函數fetch的第二個引數是一個物件，就可以為它的三個屬性設定預設值。

這種寫法不能省略第二個引數，如果結合函數引數的預設值，就可以省略第二個引數。這時，就出現了雙重預設值。

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"
登入後複製

上面程式碼中，函數fetch沒有第二個引數時，函數引數的預設值就會生效，然後才是解構賦值的預設值生效，變數method才會取到預設值GET。

因此，與解構賦值預設值結合使用時，切記，函數要定義預設引數，防止函數不傳參時報錯。

四、模板字串

模板字串是增強版的字串，用反引號 (`) 標識。它可以當普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。

1、基本用法
let greeting = `\`Yo\` World!`;  // `Yo` World -- 使用反斜槓跳脫反引號

// 多行字串
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);
登入後複製

Tips：
a. 如果在模板字串中需要使用反引號，則前面需要使用反斜槓跳脫。
b. 如果使用模板字串表示多行字串，所有的空格和縮排都會被保留在輸出之中。

2、在模板字串使用變數

(1) 在模板字串中嵌入變數，需要將變數名寫在 ${} 之中。
(2) 大括號內部可以放入任意的JavaScript表示式，可以進行運算，以及參照物件屬性。
(3) 模板字串之中還能呼叫函數。
(4) 如果大括號中的值不是字串，將按照一般的規則轉為字串。如： 如果大括號中是一個物件，將預設呼叫物件的 toString 方法。
(5) 如果模板字串中的變數沒有宣告將會報錯。
(6) 如果大括號內部是一個字串，將原樣輸出。

//普通字串
`In JavaScript '\n' is a line-feed.`;
 `Hello ${'World'}`; // "Hello World"

//字串中嵌入變數
let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`); //  Hello Bob, how are you today?

//字串中嵌入 JavaScript 表示式
`${x} + ${y} = ${x + y}`;// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`;// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`;// "3"

// 字串中嵌入函數
function fn(){
    return "hello world"
}
`foo ${fn()} bar`;// "foo hello world bar"

// 字串中嵌入物件
`${obj}`;// "[object Object]"

// 字串中嵌入未宣告的變數
 `Hello, ${place}`;// ReferenceError: place is not defined
登入後複製

五、箭頭函數

ES6 允許使用 「箭頭」 (=>)定義函數。

1、基本用法
var f = v => v;
//等同於
var f = function (v) {
    return v;
}
登入後複製

=> 前面的部分是函數的引數，=> 後面的部分是函數的程式碼塊。

（1）如果箭頭函數不需要引數或需要多個引數，就使用一個圓括號代表引數部分。

var f = () => 5;
//等同於
var f = function (v) {
    return 5
};

var sum = (num1, num2) =>  num1 + num2;
//等同於
var sum = function(num1, num2){
    return num1 + num2;
}
登入後複製

（2）如果箭頭函數的程式碼塊部分多於一條語句，就要使用大括號將它們括起來，並且使用 return 語句返回。

var sum = (num1,num2) => { return num1 + num2; }
登入後複製

（3）由於大括號會被解釋為程式碼塊，所以如果箭頭函數直接返回一個物件，就必須在物件外面加上括號，否則會報錯。

// 報錯
let getTempItem = id => { id: id, name: "Temp" };

// 不報錯
let getTempItem = id => ({ id: id, name: "Temp" });
getTempItem(1);//{id: 1, name: "Temp"}

let getTempItem = id => {
    return { id: id, name: "Temp" };
}
getTempItem(1);// {id: 1, name: "Temp"}
登入後複製

（4）箭頭函數內部，可以巢狀箭頭函數

function insert (value) {
    return {into: function (array){
            return {after: function (afterValue) {
                        array.splice(array.indexOf(ahterValue)+1, 0, value);
                        return array;
                    }
               }
        }    
    }
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]

//使用箭頭函數改寫
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
            array.splice(array.indexOf(afterValue)+1, 0, value);
            return array;
        }
    })
});
登入後複製
2、箭頭函數與變數解構結合使用
const full = ({ first, last }) => first + ' ' + last;
full({first: 1, last: 2});// "1 2"
// 等同於
function full(person) {
  return person.first + ' ' + person.last;
}
full({first: 1, last: 2});// "1 2"
登入後複製
3、rest 引數與箭頭函數結合
const numbers = (...nums) => nums;
numbers(1,2,3,4);//  [1, 2, 3, 4]

const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1,2,3,4);// [1,[2,3,4]]
登入後複製
4、箭頭函數的優點

（1）簡化程式碼

const isEven = n => n%2 == 0;
isEven(3);// false
isEven(4);// true
登入後複製

（2）簡化回撥函數

[1, 2, 3].map( x => x*x ); //[1, 4, 9]
[3,2,5].sort((a, b) => a - b); // [2, 3, 5]
登入後複製
5、箭頭函數的注意點——this

ES5中 this 的指向是可變的，但是箭頭函數中 this 指向固定化。

var  handler = {
    id: '123',
    init: function () {
        document.addEventListener('click', 
            event => this.doSomethisng(event.type), false);
    },
    doSomethisng: function (type) {
        console.log('Handling ' + type + ' for ' + this.id);
    }
};
handler.init();  //Handling click for 123  -- this指向handle  -- this是屬於函數的一個物件，誰呼叫指向誰（es5中）
登入後複製

this 指向的固定化，並不是因為箭頭函數內部有繫結 this 的機制，實際原因是箭頭函數內部根本沒有自己的this，導致內部的this 就是外層程式碼塊的 this 。

箭頭函數的this是比較難理解的，但只要能想象到他是如何從ES5轉化來的，就可以完全理解它的作用物件。 箭頭函數轉成 ES5 的程式碼如下：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}
登入後複製

Tips：

(1) 函數體內的 this 物件，就是定義時所在的物件，而不是使用時所在的物件。
(2) 不可以當建構函式，即不可以使用 new 命令，因為它沒有 this，否則會丟擲一個錯誤。
(3) 箭頭函數沒有自己的 this，所以不能使用 call()、apply()、bind() 這些方法去改變 this 指向。
(4) 不可以使用arguments 物件，該物件在函數體內不存在。如果要用，可以使用rest引數代替。

六、陣列的擴充套件（擴充套件運運算元）

1、擴充套件運運算元

（1）基本用法

　　擴充套件運運算元（spread）是三個點（...）。它好比 rest 引數的逆運算，將一個陣列轉為用逗號分隔的引數序列。

console.log(...[1, 2, 3])  // 1 2 3
console.log(1, ...[2, 3, 4], 5)  // 1 2 3 4 5
[...document.querySelectorAll('div')]  // [<div>, <div>, <div>]
登入後複製

　　該運運算元主要用於函數呼叫。擴充套件運運算元與正常的函數引數可以結合使用，非常靈活。function push(array, ...items) {

  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
登入後複製

如果擴充套件運運算元後面是一個空陣列，則不產生任何效果。 [...[], 1] // [1]

注意，擴充套件運運算元如果放在括號中，JavaScript 引擎就會認為這是函數呼叫，否則就會報錯。(...[1,2])

// Uncaught SyntaxError: Unexpected number

console.log((...[1,2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1,2])  // 不會報錯
登入後複製
2、替代函數的apply方法

由於擴充套件運運算元可以展開陣列，所以不再需要apply方法，將陣列轉為函數的引數了。

// ES5 的寫法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的寫法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);
登入後複製

3、擴充套件運運算元參照

（1）複製陣列

陣列是複合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標（淺拷貝），而不是克隆一個全新的陣列。

如何實現深拷貝呢？下面看看ES5和ES6的實現：

// ES5
const a1 = [1, 2];
const a2 = a1.concat();

// ES6
const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;

a2[0] = 2;
a1 // [1, 2]
登入後複製

（2）合併陣列

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合併陣列
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合併陣列
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
登入後複製

不過，這兩種方法都是淺拷貝，使用的時候需要注意。如果修改了原陣列的成員，會同步反映到新陣列。

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true
登入後複製

（3）與解構賦值結合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []
登入後複製

注意：如果將擴充套件運運算元用於陣列賦值，只能放在引數的最後一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5]; // 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 報錯
登入後複製

（4）字串

擴充套件運運算元可以將字串和函數引數arguments轉成真正的陣列

[...'hello']  // [ "h", "e", "l", "l", "o" ]

function (){
   let arr = [...arguments];
}
登入後複製

七、物件的擴充套件

1、屬性的簡潔表示法

ES6 允許直接寫入變數和函數，作為物件的屬性和方法。這樣的書寫更加簡潔。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同於
const baz = {foo: foo};
登入後複製

上面程式碼錶明，ES6 允許在物件之中，直接寫變數。這時，屬性名為變數名, 屬性值為變數的值

屬性簡寫：

function f(x, y) {
  return {x, y};
}

// 等同於
function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}
登入後複製

方法簡寫：

const o = {
  method() {
    return "Hello!";
  }
};

// 等同於
const o = {
  method: function() {
    return "Hello!";
  }
};
登入後複製

CommonJS 模組輸出一組變數，就非常合適使用簡潔寫法。

let ms = {};

function getItem (key) {
  return key in ms ? ms[key] : null;
}

function setItem (key, value) {
  ms[key] = value;
}

function clear () {
  ms = {};
}

module.exports = { getItem, setItem, clear };
// 等同於
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};
登入後複製

2、屬性名錶示式

JavaScript 定義物件的屬性，有兩種方法。 

// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;
登入後複製

上面程式碼的方法一是直接用識別符號作為屬性名，方法二是用表示式作為屬性名，這時要將表示式放在方括號之內。

但是，如果使用字面量方式定義物件（使用大括號），在 ES5 中只能使用方法一（識別符號）定義屬性。

var obj = {
  foo: true,
  abc: 123
};
登入後複製

ES6 允許字面量定義物件時，用方法二（表示式）作為物件的屬性名，即把表示式放在方括號內。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
登入後複製

表示式還可以用於定義方法名。比如我們熟悉的Vuex定義Mutation就是推薦這種方式：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常數作為函數名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})
登入後複製
var test = {            
  'attr0' : 'attr1',            
  'attr1' : 'attr2',            
  'attr2' : 'attr3',            
  'attr3' : 'I'm here',          
}                  
// 輸出: I'm here  , 方括號可以接受任何JS語句，最後都被轉化為字串。利用這個字串在key-value集合中定址。
console.log(test[test[test[test['attr0']]]]);
登入後複製

八、Array 的擴充套件方法

擴充套件運運算元（展開語法）：擴充套件運運算元可以將陣列或者物件轉為用逗號分隔的引數序列

let ary = [1, 2, 3];
...ary // 1, 2, 3console.log(...ary); // 1 2 3,相當於下面的程式碼console.log(1,2,3);
登入後複製

擴充套件運運算元可以應用於合併陣列

// 方法一 let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];// 方法二 ary1.push(...ary2);
登入後複製

建構函式方法：Array.from()

將偽陣列或可遍歷物件轉換為真正的陣列

//定義一個集合let arrayLike = {'0': 'a','1': 'b','2': 'c',
length: 3}; 
//轉成陣列let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
登入後複製

方法還可以接受第二個引數，作用類似於陣列的map方法，用來對每個元素進行處理，將處理後的值放入返回的陣列

let arrayLike = { 
"0": 1,"1": 2,"length": 2}
let newAry = Array.from(arrayLike, item => item *2)//[2,4]注意：如果是物件，那麼屬性需要寫對應的索引
登入後複製

實體方法：find()

用於找出第一個符合條件的陣列成員，如果沒有找到返回undefined

let ary = [{
id: 1,
name: '張三'}, { 
id: 2,
name: '李四'}]; 
let target = ary.find((item, index) => item.id == 2);//找陣列裡面符合條件的值，當陣列中元素id等於2的查詢出來，注意，只會匹配第一個
登入後複製

實體方法：findIndex()

用於找出第一個符合條件的陣列成員的位置，如果沒有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2
登入後複製

實體方法：includes()

判斷某個陣列是否包含給定的值，返回布林值。

[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false
登入後複製

arr.splice(index,len,[item])

表示從陣列中刪除或者新增元素，返回新陣列儲存所有刪除的元素
index表示要操作的索引位置，len表示要刪除的個數，如果len的值為0表示不刪除，item表示要新增的元素，可以是多個

let ary = [10, 20, 50]; // 把20給刪除
 // ary.splice(1, 1);
 // console.log(ary);
 // 把20刪除，替換成30
 // ary.splice(1, 1, 30);
 // console.log(ary);
 // 在20前面加上15
 // ary.splice(1, 0, 15);
 // console.log(ary);
 // 在50前面加上30,40ary.splice(2, 0, 30, 40);
console.log(ary);
登入後複製

arr.filter()

返回陣列，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空陣列

// 返回陣列，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空陣列
 // let result = ary.filter(item => item > 150);
 // console.log(result)
登入後複製

String 的擴充套件方法

實體方法：repeat()

repeat方法表示將原字串重複n次，返回一個新字串

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello"
登入後複製

Set 資料結構

ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。

Set本身是一個建構函式，用來生成 Set 資料結構

const s = new Set();
登入後複製

Set函數可以接受一個陣列作為引數，用來初始化。

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}
登入後複製

實體方法

add(value)：新增某個值，返回 Set 結構本身

delete(value)：刪除某個值，返回一個布林值，表示刪除是否成功

has(value)：返回一個布林值，表示該值是否為 Set 的成員

clear()：清除所有成員，沒有返回值

const s = new Set();
s.add(1).add(2).add(3); // 向 set 結構中新增值 s.delete(2) // 刪除 set 結構中的2值 s.has(1) // 表示 set 結構中是否有1這個值 返回布林值 s.clear() // 清除 set 結構中的所有值//注意：刪除的是元素的值，不是代表的索引
登入後複製

遍歷

Set 結構的範例與陣列一樣，也擁有forEach方法，用於對每個成員執行某種操作，沒有返回值。

s.forEach(value => console.log(value))
登入後複製

【推薦學習：】

以上就是什麼是es5和es6的詳細內容，更多請關注TW511.COM其它相關文章！