【JavaScript】用物件Mapping的方法

If的寫法

• 我們希望當變數是a時就回傳1，變數是b就回傳2，變數是c就會回傳3，一般寫法就是用if，但是這樣會很冗

​

// IF style
var word 
if(word == 'a'){
  word = 1
}
else if (word == 'b'){
  word = 2
}
else if (word == 'c'){
  word = 3
}

Object的寫法

• 用Object先把對應寫出來，然後再用參數拜訪

const dicitionary = {
  a:1,
  b:2,
  c:3
}

var word = 'a' // a
dicitionary[word] // 1

​

【Vuex】Store的寫法：mutation、action、payload

▌Store寫法

• state：資料的狀態
• mutations：改變state的值，

  increment(state){
  this.state.count++ 
  }
  

• actions：去commit mutation

  increment:({commit})=>commit("increment")
  

▌vue寫法

• this.$store.dispatch(“action的名稱”)

  increment(){
  this.$store.dispatch("increment")
  }
  

• this.$store.commit(“mutation的名稱”)

  increment(){
  this.$store.commit("increment")
  }
  

▌範例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
  num:0
}

const mutations={
  increment(state){
    state.num ++
  },
  descrement(state){
    state.num --
  }
}

const actions ={
  increment:({commit})=> commit("increment"),
  descrement:({commit})=> commit("descrement")
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

載荷寫法 Payload

▌vue

-vue：descrement ( ){ this.$store.dispatch(“descrement”,this.pay) }

  descrement(){
    this.$store.dispatch("descrement",this.pay)
  }
  increment(){
    this.$store.dispatch("increment",this.pay)
  }

▌store

• action： increment:({commit},payload)=> commit(“increment”,payload),
• mutation：increment(state,payload){ state.num +=payload}

const state={
  num:0
}

const mutations={
  increment(state,payload){
    state.num +=payload
  },
  descrement(state,payload){
    state.num -=payload
  }
}

const actions ={
  increment:({commit},payload)=> commit("increment",payload),
  descrement:({commit},payload)=> commit("descrement",payload)
}

​

【專案建構】用Vue Cli快速建立專案：包括Typescript、SCSS、Router....

最近一直在研究如何在vue專案中使用Typescript，結果設定的好累，都不知道自己在幹嘛。後來發現其實只要用最新版本的@vue/cli 3.x ，一下就可以解決了…..

https://cli.vuejs.org/zh/guide/

▌@vue/cli 是什麼

跟2.0不一樣，它可以事前就選擇套件Typescript、SCSS、Router，可以不用在事後安裝

▌安裝

啟用

yarn global add vue-cli //先安裝vue cli
vue create 專案名稱
vue ui //可以用ui 選擇各種要用的內容

常見套件

axios
bootstrap
jquery
vue-loading-overlay

​

【網頁切版】置中 transform： translate(-50%, -50%);

.gray{
  position: relative;
  border: 1px solid black;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  background-color: rgb(247, 243, 243);
}

.red {
  position: absolute;
  width:100px;
  height: 100px;
  border: 1px solid red;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.blue {
  position: absolute;
  width:100px;
  height: 100px;
  border: 1px solid blue;
  top:50%;
  left: 50%;
}

• 會以左上角那點為50%的定位點，因此用 transform: translate(-50%, -50%) 是為了讓div往左、上偏移50%。
• position: absolute 會去抓外層的relative父元素做定位

​

【Ch3型別、值與變數】型別Type、類別Class、Wrapper、Hosting

▌型別(Type）

可以分成

• 基本型別：數字、字串、布林、null（特殊型別）、undefined（特殊型別）
• 物件型別：物件（函式＆陣列）

任何不是數字、字串、布林、null（特殊型別）、undefined（特殊型別）的都是物件。

▌類別（class）

類別是物件的子類別（subtype），以下都是一種class

• Array
• Function
• Date
• RegExp

JS是物件導向的語言，意思是說許多type都有自己的方法(method）可以用

▌Wrapper

字串雖然不是物件，但呼叫其特性的時候會被轉成「暫時的物件」（稱為Wrapper）

▌Hosting

• JS的區塊設計會有Hosting的功能

var a="global"
function hosting(){
 console.log(a) //undefined
 var a="local"
 console.log(a) // local
}

var a="global"
function hosting(){
 var a //實際上變數的宣告，會在前面出現
 console.log(a) //undefined
 a="local"
 console.log(a) // local
}

​

【Ch4運算式與運算子】forEach ＆ map ＆ filter

運算式（expression)：運算式會得出一個「值」，ＪＳ編譯器會估算（evalute)得到結果值。
運算子（operator）：可以結合運算元，變成運算式
運算元（operand）：計算元素

x * y //運算式 ; x 是運算元 ; * 是運算子

▌基本運算式

• true //估算成boolean true
• false //估算成boolean false
• null //估算成 null值
• this // 估算成current object （估算值會依據位置而不同）
• i //估算成i的value
• undefined // 全域變數

任何字出現，JS會先假設他是變數然後再去查詢他的值，如果沒有對應的，就會估算成undefined。

▌運算後指定

total + = A // total = total + A

▌初始值

• 物件（陣列）初值設定式： [ ]
• 函式定義預算式：function() { }
• 調用運算式：f(0) / new Object()

▌三元運算子

運算式a ? 運算式b : 運算式c：三元運算子

x>10 ?: x : -x //如果x>10，就回傳-x

• 如果第一個運算元估算結果是true，第二個運算元就會被估算，然後回傳
• 如果第二個運算元估算結果是false，第三個運算元就會被估算，然後回傳

▌delete

可以刪除特性（property）或是陣列元素（element）

▌void

估算運算元，丟棄，然後回傳undefiend

​

【Ch7陣列】forEach ＆ map ＆ filter

下面這些函式，基本就是傳入函式

▌forEach

• 把陣列的值取出來，弄進去函式

  var a = [1,2,3]
  var sum=0
  a.forEach(function(x){
  sum+=x*x;
  })
  console.log(sum) //14
  

▌map

• 把陣列的值對應成一個新的陣列

var a = [1,2,3]
var b=a.map(function(x){
return x*x;
})
console.log(b)   // [1,4,9]

▌filter

• 只回傳要的元素成新陣列

var a = [1,2,3]
var b=a.filter(function(x){
  return x>1
})
console.log(b)

​