學 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)
)