es6 後的新概念

es: ESMAScript , 是ECMA制訂的標準化指令。

es6 重要特性

1. 模組化

將程式碼模組化，表示讓這些東西可以被各個檔案所使用。 1. 假設index.js要使用模組，在html檔引入index.js時，加上type='module'。

// index.html
<script type="module" src="./index.js"></script>

建立一個module資料夾，放模組化的檔案module.js。有兩種方法可以匯出：export ,export default。

--export : 公開使用名稱，所以加上{},在import時也要加上{}

// module.js
let name = 'jane'
export {name}

// 也可以寫成
export let name = 'jane'

// index.js
import {name} from 'module/module.js'

-- export default: 一個值，所以不必加上{}。

// module.js
let name = 'jane'
export default name

// index.js
import name from 'module/module.js'
// 如果加上{}也可以寫成
import {default as name} from 'module/module.js'

2. 箭頭函數

箭頭函數裡面this指的是宣告此函數的區域，在setTimeout裡面如果使用=>,表示往外一層宣告函式的地方，如下表示，宣告func2的地方是object，因此回傳object。

let object = {
  func1: function () {
    setTimeout(function () {
    // this表示這個函式宣告的地方，setTimeout是在window下宣告的
      console.log(this)
    }, 1000)
  },
  func2: function () {
    setTimeout(() => {
    // this往外一層 產生func2的地方
      console.log(this)
    }, 1000)
  }
}

object.func1()
object.func2()

3. 函式引數預設值

使用

function foo(height=100){
// 不給直的時候會有預設值
}

取代

function foo(height){
// 當height 是falsy 的時候 0 或空字串 還是會回傳50
let h = height || 50
}

4. 模板字串

let name = 'jane'
console.log(`hello, I am ${name}`)

5. 解構賦值

可以方便從陣列或物件提取值給定義的變數

-- 陣列

let foo = ['one','two','three']
let [first,,third] = foo
console.log(third)

也可以達到交換（解構交換），要記得加分號。

let a =1
// Cannot create property 'undefined' on number '3'
// need to add ; 因為後面會自動沒有換行 let b = 2[a,b] = [b,a]
let b = 2;
[a,b] = [b,a]
console.log(a,b)

-- 物件

記得裡面的名稱要和屬性一樣否則會出現undefined

const student = {
  name2: 'Ming',
  age: '18',
  city: 'Shanghai'
};

const { name3, age, city } = student;
console.log(name3); // undefined
console.log(age); // "18"
console.log(city); // "Shanghai"

6. 延展操作符

可以延展陣列或物件 -- 用來複製

let arr = [1,2,3]
let arr2 = [...arr]
arr2[0] = 5
// arr2 = [5,2,3]

7. 物件key簡寫

若key的名稱和變數名稱相同，簡寫如下：

const name = 'jane',age = 22
const worker = {name,age}
// 省了：name

8. let, const

作用域限制在block，而var被限制function。

9. Promise

一種非同步設計的解決方式，包含三種狀態： pending,resolve,reject。

const promise = new Promise(function(res,rej){
    // true 表示非同步成功
    if(true){
        res()
    }else{
        rej()
    }
})

promise 建構函式接收一個函式做引數，該函式兩個引數第一個會將狀態從pending->resolve，第二個將狀態從pending->reject。生成後可以用then()回撥結果。

promise.then(function(value){
// success
},function(error){
// failed
})

實際用法：

const logAsync = (msg,time)=>{
    return new Promise((res,rej)=>{
        if(msg && time){
            setTimeout(()=>{
                console.log(msg)
                res()
            },time)
        }else{
            rej()
        }
    })
}
// 因為回傳的事Promise結果，所以可以使用then 回撥
logAsync('show after 1s',1000)
.then(()=>{return logAsync('show after 1.5s',1500)})
.then(()=>{return logAsync('show after 2s',2000)})

es7 重要特性

1. includes

回傳boolean 值是否包含在陣列。

let arr = ['a','b','c']
arr.includes('c') // true

2. 指數操作符 **

2**10

es8 特性

1. padStart padEnd

來在字串前/後補足一定的字串數量,所帶的參數為（字串的目標長度,用來補足的字串）,如果沒有第二個參數的話則是用 " " 代替。

let str = 'test' // len  =4

str.padStart(5,'10000')// 用'10000' 來補足 'test'--> '10000test',但其長度超過5
// ,所以只取補足字串左邊起算起---> '10000'

str.padEnd(6,'10000') // 加在字串後面並補足到六位： 'test10'

'0.0'.padEnd(20) // "0.0                 "

2. async / await

async是Promise的語法糖(後方可以用then連接)，function標記成async，裡面就可以寫await 同步語法(一定要寫在async的function內才可以)，表示有結果後再執行下一步。

// async await 搭配 axios 實作

async function getFakeData() {
  await axios.get('https://my-json-server.typicode.com/typicode/demo/posts').then(res => {
    console.log(res)
  })
  // 接收到之後才會執行下一行
  console.log('after axios')
}
getFakeData().then(() => {
  console.log('after async')
})
// res-> after axios -> after async
// 如果把 await 刪除，就沒有同步的效果出現順序：
// after axios -> after async -> res

3. Object.value(obj),Object.key(obj),Object.entries(obj)

這些會回傳value陣列, key陣列, 以[key,value] 為元素的陣列。

es9 重要特性

1. rest 引數/spread 屬性

const myObject = {
  a1: 1,
  b: 2,
  c: 3
};

const { a1, ...x } = myObject;
console.log(a1, x) // 1, {b:2,c:3}

JANE'S BLOG