1. 程式人生 > >10 個常用的 es6 特性

10 個常用的 es6 特性

.so 箭頭 fine 默認函數 需要 bind 箭頭函數 fun sort

1. const and let

除了函數作用域之外,增加了塊級作用域和常量。const 定義的綁定不可以修改,let定義的綁定在{ }不能訪問。之前的 var 如果不在函數作用域內,相當於定義了一個全局變量,並且有變量提升(將變量的聲明提升至所在函數的最前面)。

2. 數組函數

新增了一些數組處理函數,可以更加方便的對數組進行操作。

let a = Array.foreach( functionA ) functionA 會對函數的每一元素進行操作,a = undefined。

let b = Array.map( functionA ), 與foreach 的不同的是map 會返回一個新的數組。

let c = Array.filter( functionA ), 與map不同的是,filter 返回的數組Array 的一個子集。

let d = Array.find( functuonB ) , 找到符合條件的值立馬返回。

let e = Array.every( checkFunc) , check 每一個 element , all ok 則 返回 true, else return false.

let g = Array.some( checkFunc), if any element passes the check, retrun ture, else return false.

let h = Array.reduce(function, initArgument), 提供操作和初始值函數,最終返回一個值。

3. 箭頭函數

()=> {} -- 參數函數體。當參數只有一個,函數體只有一行時可以寫成 a => a*a的形式,省略()和{},其中a*a為函數的返回值。

與之前函數不同,箭頭函數不會綁定this,arguments,super等局部變量,所有涉及到它們的引用都會沿著向上查找的方式在外層查找。

所以箭頭函數不能用 apply,call,bind來綁定函數內部的this。

按詞法作用域,Lexical Scoping just means that it uses this

from the code that contains the Arrow Function.。即從包含箭頭函數的上下文作用域裏去查找this。

而用 function 定義的函數,則this實際上是在函數被調用時發生綁定,它指向什麽完全取決於函數在哪裏被調用。

4.類

es6 中的類實際上原型繼承的語法糖,constructor就是構造函數,創建一個對象,而在類中添加函數,就是在對象的原型鏈上添加方法。

5. 增強的對象字面量

<1> 可以引用上下文作用域中的變量

<2> 直接定義方法

<3> 定義動態屬性

const color = red
const point = {
  x: 5,
  y: 10,
  color,
  toString() {
    return X= + this.x + , Y= + this.y + , color= + this.color
  },
  [ prop_ + 42 ]: 42
}

6.模板字符串

直接在字符串中使用變量,避免使用 + 來連接變量。

function hello(firstName, lastName) {
  return `Good morning ${firstName} ${lastName}! 
How are you?`
}

7.默認函數參數

默認指定函數參數的默認值,當傳入參數的時候會覆蓋默認值。

function sort(arr = [], direction = ascending) {
  console.log(I\‘m going to sort the array, arr, direction)
}

8.解構和剩余操作符

// 解構
var array = [red, blue, green]
var copyOfArray = [...array]

//rest opoerator
function printColors(first, second, third, ...others) {
  console.log(Top three colors are  + first + ,  + second +  and  + third + . Others are:  + others)
}

9. 從數組中提取需要的值,傳入變量,也包括對象。

 let [first, , third] = [1,2,3];
let obj = {a:100,b:200};
let {a}= obj;

10. promise

promise.then().catch();

總結

1.構造函數可能會被類修飾符替代。

2. 函數作為子程序,可能會被箭頭函數替代。

3. 函數作為對象方法,可能會被對象方法定義。

10 個常用的 es6 特性