學 JavaScript 的那些筆記 3 -- ES6


簡單說明 ES6

ES6 為 ECMAScript 的第 6 版,2015 年完成,是 ES5 改過一些東西後的版本
ECMAScript 是寫 JavaScript 的標準、規範

用 const、let、var 宣告變數的差異

const:Constant,常數。被宣告的值不會變
let:let 的生存範圍(作用域)僅限於一個大括弧 {} 裡面,在宣告的 {} 外面就不存在,盡量用 let,範圍越小越好,比較不會影響到其他的
var:var 的生存範圍(作用域)為同一層級裡面,不只限定於一個括弧裡

其他相關知識

  • Template literals:把很多字串接起來,可以單行也可以多行
    function sayHi(name) {
      console.log(`hello, ${name} now is ${new Date()}`)
    }
    
  • Destructuring 解構:宣告變數,再把變數設初始值,結構一樣才可以
    var arr = [1, 2, 3, 4] // 初始值
    var [first, second, third, fourth] = arr //進行解構
    
  • Spread Operator 展開運算值:把東西展開,複製裡面的值,記憶體位置不同
    var arr = [1, 2, 3]
    var arr2 = [...arr, 4, 5, 6] //展開 arr 的 output
    console.log(arr2) // output: [1, 2, 3, 4, 5, 6] 
    var obj = {
    a:1,
    b:2
    }
    var obj2 = {
    ...obj
    }
    console.log(obj === obj2) //output:false 因為記憶體位置不同
    
  • Rest Parameters 反向展開...rest 把剩下的展開,只能放最後
    var arr = [1, 2, 3]
    var [first, ...rest] = arr
    console.log(rest) // output:[2, 3]
    
  • Default parameters 預設值:若沒傳參數進去,就用預設值
    function print (str = 'hello',times = 2) {
    return str.repeat(times)
    }
    console.log(print())// output:hellohello (用預設的)
    
  • Array function 箭頭函式:把 function 省略掉,變成箭頭(=>),當只有一個參數時,小括號可去掉,執行動作的大括號跟 return 去掉,整提易讀性高
    function test (n) {
      return n
    }
    //箭頭函式寫成:
    const test = (n) => {
      return n
    }
    //其他範例:
    var arr = [1, 2, 3, 4]
    console.log(
    arr
    .filter(function (value) {
      return value > 1
    }).map(function (value) {
      return value * 2
    })
    )
    //箭頭函式:
    var arr = [1, 2, 3, 4]
    console.log(
    arr
    .filter(value => value > 1)
    .map(value => value * 2)
    )
    
  • Babel:可以用來轉換語法的版本,以便配合瀏覽器不支援新版的問題
    安裝及使用:
  1. npm install --save-dev @babel/core @babel/node:安裝
  2. npm install --save babel/preset-env:判斷要把多新的語法轉換成多舊
  3. touch .babelrc:新增一個檔案
  4. 將下面貼在 .babelrc 的檔案裡,告知要用 babel
    {
     "presets": ["@babel/preset-env"]
    }
    
#Web #javascript #ES6






你可能感興趣的文章

Nand2tetris第二週心得

Nand2tetris第二週心得

來學 React 吧之八_部署 React App

來學 React 吧之八_部署 React App

[ JavaScript  12 ]  ES6 新增特性

[ JavaScript 12 ] ES6 新增特性






留言討論