Javascript 的ES5、ES6更新重要新特性整理


前言

ES5發布於2009,ES6於2015,從2015開始使用年份命名,ES6即是ECMAScript 2015,目前大部分瀏覽器都已經支持ES6了,除了IE。

    

ES5

1、 嚴格模式(use strict)

這種模式,使得JavaScript在更嚴格的語法條件下運行:

(1)變量必須使用var聲明;

(2)禁止自定義的函數中的this指向window

(3)創建 eval 作用域即為塊級作用域

(4)對象不能有重名的屬性

use strict可以在腳本或者函數開頭聲明,分別具有全局和函數作用域。

2、 增加JSON對象

JSON.stringify(obj/arr);

JSON.parse(json);

3、 擴展了數組Array的方法

Array.isArray()            方法檢查對象是否為數組
Array.forEach(funName)     每個數組元素調用一次函數
Array.map(funName)         遍歷數組返回一個新數組,返回加工后的值
Array.filter(funName)      遍歷過濾出一個新的子數組,返回條件為true的值
Array.reduce(funName)      按funName方法處理數組,最后返回一個值,funName有兩個參數,第一個是最后返回的歸並值,第二個是元素
Array.reduceRight(funName) 同上,只是從最后一個數據開始計算
Array.every(funName)       遍歷數組,檢查是否每一個值都符合條件,返回bool    
Array.some(funName)        遍歷數組,檢查是存在至少一個值符合條件,返回bool
Array.indexOf(value)       檢索數組中的某個元素值並返回其位置,多個則返回第一個
Array.lastIndexOf(value)   同上,只是從最后開始檢索

4、 對象增加屬性 Getter 和 Setter

允許使用類似於獲取或設置屬性的語法來定義對象方法

// 創建對象:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
//獲取對象
person. fullName

 

5、 函數擴展Function.prototype.bind(obj)

可將函數內的this綁定為obj,並將函數返回;

 

ES6

1、 變量聲明關鍵字let、const

let 是在代碼塊內有效,var 是在全局范圍內有效;

let 只能聲明一次,var 可以聲明多次;

let 不存在變量提升,var 會變量提升:

const 用來聲明常量

2、 許函數參數設置默認值

function testAdd(x, y = 10) {
  // 當y不給值或者為undefined時值取10
  return x + y;
}

3、 箭頭函數(Arrow Function)

類似於匿名函數,但沒有自己的 this,不適合定義對象方法;

如果只是單個語句,則可省略掉return和花括號(但保留一般更好一些)

    例:z = (x, y) => { return x * y };

4、 class 關鍵字定義類

class 的本質是 function,它可以看作一個語法糖,讓對象原型的寫法更加清晰、更像面向對象編程的語法;

(1) 聲明

class Example {
    constructor(a) {
        this.a = a;
    }
}

(2) 實例化

let exam1 = Example(1);

(3) 修飾器decorator

類比java的注解,是一個函數,用來修改類的行為,在代碼編譯時產生作用

(4) 其他

類可以繼承,使用extends;

constructor 方法是類的默認方法,創建類的實例化對象時被調用;

類定義不會被提升,必須在訪問前對類進行定義;

類中方法不需要 function 關鍵字,類似於java;

Class 內部只有靜態方法,沒有靜態屬性;

ES6 引入了模塊化,分export與import,模塊自動開啟了嚴格模式;

Promise 對象用於異步編程; 

5、 解構賦值

是一種針對數組或者對象進行模式匹配,然后對其中的變量進行賦值

示例:

數組

數組
let [a, b, c] = [1, 2, 3];  //a,b,c變量值同時賦予了;
let [a, , b] = [1, 2, 3];
let [a = 1, b] = [];  //不完全解構,a = 1, b = undefined
let [a, ...b] = [1, 2, 3];  //剩余運算符,a=1, b=[2,3]
(字符串是數組)
對象
let {a, b} = {a : 1, b : 2};  //a=1,b=2
let {a : b} = {a : 1};  //b=1
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};//rest = {c: 30, d: 40}

 

其他:

擴展了Array方法、對象

代理Proxy對象

function f(...values)可為函數設置不確定個數參數 ,values為最后所有參數的集合

增加for...of循環,用於替代 for..in 和 forEach()


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM