六角Vue筆記_ES6

使用 let 與 const 宣告變數/ 展開與其餘參數/ 解構賦值/ 縮寫/ 箭頭函式與傳統函式/ Template String 樣板字串

以下筆記出自六角學院課程，詳情請參➤ 六角學院-Vue 出一個電商網站

▶︎ 使用 let 與 const 宣告變數

詳參這篇文章

undefined v.s no defined

for loop和setTimeout

1. var有向上提升，而let和const則無
2. 同個區塊上不能重複命名
3. let和const不會變成全域變數(window)
let i=23;
for(let i=0; i<5; i++){ //又重新宣告了一個I，此i非彼i
  console.log(i) //0, 1, 2, 3, 4 }
console.log(i) //23

These variables are block-scoped. and so this i here is a completely different variable from below one, so they happen to have the same name, but it really doesn't matter, cos they are separate variables.

var i=23;
for(var i=0; i<5; i++){ //複寫掉上面的i
  console.log(i) //0, 1, 2, 3, 4 }
console.log(i) //5

These variables are not block-scoped. So they are not different variable, and so this 23 here will be overwritten and in the end, we have the final I from this counter variable here.

＊如果想讓{}外的console.log能取得值

function driversLicence(passedTest){
  let firstName; //在外部先宣告則可讀取block之值
  const yearOfBirth=1990; //const必須要賦值，只宣告依然不可(const error)
if(passedTest){
    firstName='John'} // 這裡不能用let firstName，不然等同重新再建一個變數
  console.log(firstName+yearOfBirth)}// 'John1990'

＊當const是物件時

const family = {
  mom: ‘老媽’,
  me: ‘小明’,
  sister: ‘小橙’};
family.father = ‘爸爸’//物件本身是傳參考，而非傳值，裡面的東西是可以被改的
然而family={}直接改掉物件，是不可的。

▶︎ 展開與其餘參數

• 展開語法：...將陣列中的值一個個取出來再return回去

let groupA = [‘小明’, ‘杰倫’, ‘阿姨’];
let groupB = [‘老媽’, ‘老爸’];
let familyAll5 = groupA.concat(groupB) //ES5合併陣列
let familyAll6=[…groupA,…groupB] //ES6合併陣列

• 淺複製觀念 (shallow copy)

by value v.s by reference 參考文章

//淺複製 Shallow copy
let groupA = [‘小明’, ‘杰倫’, ‘阿姨’];
let groupB = groupA //此時AB的參考是相同的
groupB.push(‘阿明’); //因此儘管是向B推入阿明，A陣列也會受影響
console.log(groupA); //["小明", "杰倫", "阿姨", "阿明"]

為了避免這種影響到A陣列的事發生：

//深複製 Deep copy
let groupA = [‘小明’, ‘杰倫’, ‘阿姨’];
let groupB = […groupA]; //此為新陣列，與A無關，只是將A的值一個個取出來而已
groupB.push(‘阿明’);
console.log(groupA); //["小明", "杰倫", "阿姨"]

• 類陣列觀念說明

let doms = document.querySelectorAll(‘li’); //此為node list，非陣列，不能使用陣列的方法
let newDom=[...doms] //利用展開的方式將類陣列轉為陣列
console.log(newDom); //array

• 展開&其餘參數：

// 法一：展開，將arguments在函式內部展開轉為陣列
var originCash = 1000;
function updateEasyCard() {
  let arg = [...arguments] //arguments為類陣列的物件，需展開轉為陣列才能使用.reduce()的方法
  let sum = arg.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue;}, 0);
  console.log(‘我有 ‘ + sum + ‘ 元’);}
updateEasyCard(0); // 我有 1000 元
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500); // 我有 718 元

_____
// 法二：其餘參數：傳入的參數的量是不確定的
var originCash = 1000;
function updateEasyCard(...money) {
  let sum = money.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue;}, 0);
  console.log('我有 ' + sum + ' 元');}
updateEasyCard(0); // 我有 1000 元
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500); // 我有 718 元

＊其餘參數也可與其他一般參數混用

function moreMoney(ming,…money) {
  console.log(ming,money);}
moreMoney(‘小明’,100, 100, 100)

▶︎ 解構賦值

概念：將右方資料鏡射到另一方

//ES5
let family = [‘小明’, ‘杰倫’, ‘阿姨’, ‘老媽’, ‘老爸’];
let ming = family[0];
let jay = family[1];
let auntie = family[2];
//ES6
let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, jay, auntie, mom, dad]=family;
＊左右數量不對等時
let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, jay, auntie]=family
console.log(ming, jay, auntie) // 小明 杰倫 阿姨
＊中間有跳過時
let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, jay, , mom, dad]=family; //跳過阿姨，以, ,隔開
console.log(ming, jay, mom, dad) //小明 杰倫 老媽 老爸

將變數的值交換

let Goku = ‘悟空’;
let Ginyu = ‘基紐’;
[Goku,Ginyu]=[Ginyu,Goku]
console.log(Goku, Ginyu) //基紐 悟空

拆解字元到單一變數上

let str = ‘基紐特攻隊’;
let [a,b,c,d,e]=str;
console.log(a, b, c, d, e) //基 紐 特 攻 隊

解構物件

let GinyuTeam = {
  Ginyu: ‘基紐’,
  Jeice: ‘吉斯’,
  burter: ‘巴特’}
let { Ginyu } = GinyuTeam //從物件中取出特定屬性值
console.log(Ginyu) //基紐
let { Ginyu:Goku } = GinyuTeam //將屬性Ginyu替換成Goku
console.log(Ginyu, Goku) // undefined, 基紐

預設值

let [ming = ‘小明’, jay = ‘杰倫’] = [‘阿明’] //右側鏡射至左時，jay沒有對又的直，因此第一個會被賦值，第二個會用預設
ming: “阿明”
jay: “杰倫”
let { family: ming = '小明' } = {}
ming: '小明'

▶︎ 縮寫

//合併物件
const Frieza = ‘弗利沙’
const GinyuTeam = {
  Ginyu: ‘基紐’,
  Jeice: ‘吉斯’,
  burter: ‘巴特’,}
const allTeam = { //合併上述二物件，當屬性與值名稱相同時可省略
  Frieza,
  GinyuTeam }
//eg: Vue.js CLI 常見情境
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }});
//物件函式縮寫
const newTeam = { //原始物件內涵是
  showPosture: function () {
    console.log('我們是 基紐特戰隊')}
  }
const newTeam = { //縮寫，注意這是傳統函式，與箭頭函式不同
  showPosture() {
    console.log('我們是 基紐特戰隊')}
  }
//縮寫+解構賦值
const GinyuTeam = {
  Ginyu: {name: '基紐'},
  Jeice: {name: '吉斯'},
  burter: {name: '巴特'},}
const newTeam = { ...GinyuTeam } //同陣列的手法，避免參考影響到GinyuTeam
newTeam.ming='小明' //newTeam加入小明且不影響GinyuTeam

▶︎ 箭頭函式與傳統函式

詳參這篇文章

//沒有arguments參數避免undefined的情況，使用其餘參數
const updateEasyCard = (...args)=> {
  let cash = 0;
  console.log(args);}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

覺得不錯的this影片

▶︎ Template String 樣板字串

//一般字串
let originUl = ‘<ul>\
<li>我叫作 ‘ + people[0].name + ‘</li>\
<li>我叫作 ‘ + people[1].name + ‘</li>\
<li>我叫作 ‘ + people[2].name + ‘</li>\
</ul>’;
//ES6字串
let newString= `<ul>\
<li>我叫作${people[0].name}</li>\
<li>我叫作${people[1].name}</li>\
<li>我叫作${people[2].name}</li>\</ul>`
//利用map和join再進化 //運算的地方用${}
let superNewString= 
`<ul>\
${people.map((person)=>`<li>我叫作${person.name}</li>`).join('')}\</ul>`