es6 經常使用語法

let & const

建議，多用const，變量用let，不用var

// let 沒有變量提高
  // console.log(a)
  // let a = 1;

  // b 聲明常量，基本類型不可修改
  // const b = 1;
  // b = 2;

  // 能夠修改複雜類型
  const c = [1]
  c[0] = 10;
  console.log(c) // ?

deconstruct 解構賦值

const list = [11,22,33];

  let [a,b] = list;
  let [a1, ...b1] = list;
  console.log(a, b )
  console.log(a1, b1)


  const obj = {
    name: "david",
    age: 21,
    sex: 'male'
  }

  //const {name, age} = obj;
  //   console.log(name, age)

  // 剩餘參數
  // const {
  //   name, ...attrs
  // } = obj;
  // console.log(name)
  // console.log(attrs)

  // 默認值
  const{name = 'admin'} = obj;

  console.log(name)

  // 擴展
  // 怎麼求一個數組最大值
  const list1 = [11,2,444,5]
  // 原生
  console.log(Math.max.apply(window,list1))
  // es6
  console.log(
    Math.max(...list1)
  )

  // 擴展 react中的展開符

  // 1. 給組件增長參數
  // const attrs = {
  //   name: '111',
  //   age: 555
  // }
  // <Component ...attrs />

module 模塊

// 整個模塊導出

// eg state.js
export default {

}
class State {
  list: []
}
export default new State()


// 引入方法
import $$State from "./state"
import {list}  from "./state"

// 一個一個導出

// eg. math.js
export function add() {

}

export function minus() {

}

import {add, minus} from "./math"

String

let string = "apple,banana,orange";
  string.includes("banana");     // true
  string.startsWith("apple");    // true
  string.endsWith("apple");      // false
  const str = 'david'
  const str1 = `${str} is a boy!`
  console.log(str1)

Object

const name = 'david' ,age = 11;

// 變量建立對象
const person = {name, age}

// 對象裏的方法
const obj = {
  say(){
    console.log("hello")
  }
}

// ES6容許用表達式做爲屬性名，可是必定要將表達式放在方括號內
const fnName = 'list1'
const obj2 ={
  [`${fnName}_get`](){
    console.log("hello world")
  }
}

obj2.list1_get()

// 合併對象

const obj1 = {
  a: 1
}
const obj11 = {
  ab: 1
}

const obj111 = {...obj1, ...obj11}
console.log(obj111)


const obj = {
    name: 'david',
    age: 11
}

console.log(
    Object.keys(obj)
)

console.log(
    Object.values(obj)
)

console.log(Object.entries(obj))
    

// 重要 Object.assign

const aa = Object.assign({}, obj1)

aa.a = 111;
console.log(aa)
console.log(obj1)

Array

// Array.from() 類數組變成數組 
  const obj = {}
  obj[0] = 0;
  obj[1] = 1;
  obj.length = 2;
  console.log(obj)
  const arr = Array.from(obj)
  console.log(arr)



  // 合併數組
  const arr1 = [111]
  const arr2 = [333]
  const arr3 = [...arr1, arr2]

  // 包含元素 
  console.log(
    arr3.includes(111)
  )

function

• 箭頭函數this，指向上層
• 箭頭函數沒有arguments

const did = () => {
    console.log("dis something")
  }
  did()
  const doing = name => {
    console.log("I am doing " + name)
  }
  doing("cooking")

  const introduce = (name, age = 18) => {
    console.log(
      `I am ${name} and I am ${age}`
    )
  }
  introduce("Tom")


  const talks = (market, ...others) => {
    console.log(market)
    console.log(others)
  }
  talks("家樂福", '河馬生鮮', 'KFC')


  // 箭頭函數this指向問題 
  name = "window"
  const obj = {
    name:'obj',
    say: () => {
      console.log(this)
      console.log(this.name)
      console.log("\n")
    },
    tell(){
      console.log(this)
      console.log(this.name)
      console.log("\n")
    }
  }

  obj.tell()
  obj.say()

class

class Animal{
   constructor(){
     this.name = "animal"
   }
   
   // 靜態方法
   static tell(){
     console.log("Animal tell")
   }
    // 實例方法 
   gogo(){
     console.log("gogogo")
   }
  }

  class Dog extends Animal {
    constructor(){
      super()
      this.name = "Dog"
    }
  }

  const hsq1 = new Animal()
  const hsq2 = new Dog()

  console.log(hsq1.name)
  console.log(hsq2.name)
  hsq1.gogo()
  Animal.tell()
  Dog.tell()

proxy

可用來實現數據雙向綁定

let target = {
    name: 'Tom',
    age: 24
  }

  let handler = {
    get: function(target, key) {
      console.log('getting '+key);
      return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
      console.log('setting '+key);
      target[key] = value;
    }
  }
  let proxy = new Proxy(target, handler)

  console.log(proxy.name)

// 實現數據雙向綁定的兩種實現 


<input type="text" id="a">
<script>

  const model = {

  }


  // view - model
  $("#a").on("keyup" ,function () {
    model.name = $(this).val()
    console.log(model)
  })


  // let value = ''
  // // model - view
  // Object.defineProperty(model, 'name', {
  //   set: function (v) {
  //     value = v;
  //   },
  //   get: function () {
  //     return value
  //   }
  // })

  
  let handler = {
    get: function(target, key) {
      console.log('getting '+key);
      return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
      target[key] = value;
      $("#a").val(value)
    }
  }


  let proxy = new Proxy(model, handler)


  setTimeout(function () {
      proxy.name = 'hhhhhhhh'
  }, 3000)
  

</script>