iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

一個 JS 學習者的日常系列 第 9

一個 JS 學習者的日常 day8

當我在整理所用到的 ES6 語法。

思考:
什麼是 ES6 ?討論到 JS 時,就會時常會聽到 ES6 ,它的全名是 ECMAScript 6。便是我們所學的 JS 的語言核心。從第五版 ES5 到第六版 ES6 日漸普遍,而 ES7 也蓄勢待發。

  1. 解構赋值

說明:我們可以將一個陣列以...的形式,一次展開,或者一次打包起來

var arr = [1, 2, 3, 4, 5]

console.log(...arr)
//1 2 3 4 5

function showArr(num1, num2, ...num3) {
  console.log(num1)
  console.log(num2)
  console.log(num3)
}

showArr(...arr)
//結果:1
//VM200:5 2
//VM200:6 (3) [3, 4, 5]
  1. 模板字面量 和 多行字符串

說明:可以在``(注意此為鍵盤左上方``符號非''單引號)之間包含字串,並以 ${} 包含變數,甚至換行也可以。

function sayMyName(firstName, lastName) {
 console.log(`Hello My Name
 is ${lastName} ${firstName}`)
}

sayMyName("Jim", "Hu")
//結果Hello My Name
// is Hu Jim
  1. 箭頭函數

說明:寫法(引數)=>{函式內容}

var arr = [1, 2, 3, 4, 5]

arr.reduce((total, items) => {
  total += items
  return total
})
//結果: 15
  1. Let宣告

說明:JS 本來是以 function 去分辨解析變數名稱所使用的範圍,意思是在一個物件內具有一個,或往更上層找,或是全域等等,也就是大家常說的 scope,有別於其他語言可能以大括號 {} 作為範圍的選擇,所以當使用 var 在物件裡宣告的時候,一樣會變宣告成往上找到最上層 function 的範圍。而如果使用 let,便會改以 {} 去判斷 scope

var test = "test"

if(test == "test") {
  var num5 = 10
  let num6 = 20
}
console.log(num5)
console.log(num6)

結果:

  1. 預設參數

說明:一般來說如果引數與對應的參數不符合時,就會出錯。

但如果加了預設值:

function add (num1 = 1, num2 = 1) {
  return num1 + num2
}

add(10)
//結果:11

其他還未使用到的:
Module 的 import export 功能、OOP 的 class 寫法

補充:
當我們所使用的使法,瀏覽器可能過舊或不支援,本身無法被解析的時候,我們便需要使用 polyfill ,便是那麼一段程式碼,好讓新的語法也能解析。而事實上自己也可以針對語法的格式去寫出要的功能,但你必須對理言背後的行為邏輯有正確的理解。


上一篇
一個 JS 學習者的日常 day7
下一篇
一個 JS 學習者的日常 day9
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言