Leo's Space

[Day23] jsES6語法-常用陣列方法(上)

發表於 2020-10-07 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 921 所需閱讀時間 ≈ 1 分鐘

every

如果我們想要確認陣列裡面的資料都符合條件，我們可以在陣列裡面使用 every 條件來篩選， return 後面的條件式如果全部符合條件就會回傳 true，如果沒有就是回傳 false。像是陣列 people 裡面只有一個物件的 money > 150 ，因此會回傳 false。

let people = [
    {
        name:'Leo',
        money:100
    },
    {
        name:'Peter',
        money:200
    }
];

let ans = people.every(function(item){
    return item.money > 150
});

console.log(ans)

some

和 every 最大的差異在於，陣列裡面只要有條件符合，就會回傳 true ，比如有有其中一個物件的 money > 150 ，最後就會回傳 true。

let people = [
    {
        name:'Leo',
        money:100
    },
    {
        name:'Peter',
        money:200
    }
];

let ans = people.some(function(item){
    return item.money > 150
});

console.log(ans)

reduce

參數 prev 代表先前的值，而 prev 的初始值就是 reduce 的第二個參數，像這範例就是 0，最後我們將陣列的值全部加起來，得到 300 的總和。

let people = [
    {
        name:'Leo',
        money:100
    },
    {
        name:'Peter',
        money:200
    }
];

let ans = people.reduce(function(prev,item){
    return prev+item.money
},0);

console.log(ans);

[Day22] jsES6語法-縮寫用法

發表於 2020-10-06 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 575 所需閱讀時間 ≈ 1 分鐘

如果我們宣告兩個物件 milk 和 fruits，並且要生成一個新的物件 dic 去存放這兩個物件。如果我們將 dic 裡面的物件名稱和我們設定的物件值設為一樣，此時我們可以省略掉後面的物件值，像是 dic 2 的物件宣告方式。最後 dic 和 dic2 得到的結果會是一樣的。

const milk = '牛奶';
const fruits = {
    apple:'蘋果',
    banana:'香蕉'
};
const dic = {
    fruits:fruits,
    milk:milk
}

const dic2 = {
    fruits,
    milk
}

如果之後學到 Vue router，就很常會使用到這個縮寫用法。

import Vue from 'vue'
import App from '/App'
import router from './router'

new Vue({
    el:'#app',
    router:router,//可以縮寫成 router
    template:'<App/>',
    component:{App}
})

[Day21] jsES6語法-字串模板 Template String

發表於 2020-10-05 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 959 所需閱讀時間 ≈ 1 分鐘

如果我們要我們今天要再字串裡面加入值，就會需要使用到+號。常常我們如果要想要使用 innerHTML 來渲染變數，就會在變數裡面存放一大串的 html 結構，並且用+號將數值連起來，如果為了排版，我們還必須加上\ 來換行，這樣其實相當麻煩。

let dataArr = ['Peter','Merry','Leo'];
let text = '我叫做'+dataArr[0];
console.log(text);
let list = '<ul>\
<li>'+dataArr[0]+'</li>\
<li>'+dataArr[1]+'</li>\
<li>'+dataArr[2]+'</li>\
<ul>';

如果我們ES6 新的模板語法，就可以省去這些麻煩。我們可以直接使用模板語法，並且將想要打的標籤結構還有值輸入進’’(是鍵盤1旁邊的符號，不是這個，因為如果使用它，it邦內建是反紅色的語法，所以打不出來)內，記得如果是值的呈現要加上${}，才可以正確顯示出值來。

1
2
3

<body>
    <div id="content"></div> 
</body>

let dataArr = ['Peter','Merry','Leo'];
let text = `我叫做${dataArr[0]}`;
let list = `
        <ul>
       <li>${dataArr[0]}</li>
       <li>${dataArr[1]}</li>
       <li>${dataArr[2]}</li>
    <ul>
`;
document.getElementById('content').innerHTML=list;

[Day20] jsES6語法-展開與其餘參數

發表於 2020-10-04 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 1.5k 所需閱讀時間 ≈ 1 分鐘

合併陣列

一般來說，如果我們要合併陣列可以使用陣列內建的方法 concat 來合併陣列，但是我們也可以透過展開方式來合併陣列，我們可以使用 …arr1 ,…arr2 來將陣列的值取出，並且將他們合併到一個陣列 arr3 中。

let arr1 = ['Leo','Peter','Amy'];
let arr2 = ['Alex','Ray'];
let arr3 = arr1.concat(arr2);
console.log(arr3);

let arr1 = ['Leo','Peter','Amy'];
let arr2 = ['Alex','Ray'];
let arr3 = [...arr1, ...arr2];//...將陣列的值取出
console.log(arr3);

淺複製觀念

如果我們今天將 arr2 陣列設定成 arr1 陣列，此時當我們將 arr2 陣列的值 push 一個值 Harry，此時我們如果使用 console.log 顯示出陣列，會發現 arr1 也增加了 Harry 的值，原因在於我們是傳 arr1 的參考給 arr2 ，因此當我們更動 arr2 的值，同樣也會修改到 arr1 的值。如果我們想要修改 arr2 的值卻不影響 arr1 ，此時我們將 arr2 設定成 […arr1] ，陣列 arr2 就會設定成從 arr1 取出的值，但是不是傳參考，因此當 arr2 更改時，arr1 不會跟著變動。

let arr1 = ['Leo','Peter','Amy']; 
let arr2 = arr1;
arr2.push('Harry');
console.log(arr1);
console.log(arr2);
// 傳參考

閱讀全文 »

[Day19] jsES6語法-使用 let 與 const 宣告變數

發表於 2020-10-03 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 1.1k 所需閱讀時間 ≈ 1 分鐘

Hoisting 差異

所先我們先複習一下 Hoisting ，就是變數和函數的宣告，會在編譯階段就被放進記憶體。今天如我們分別使用 let 和 var 宣告變數，並且在宣告前使用 consolo 顯示出變數，會發現使用 let 宣告的變數是 not defined，代表還沒有配置記憶體空間給這個變數，而使用 var 宣告的則是 undefined ，代表已經宣告記憶體給這個變數。

console.log(name1) //not defined
console.log(name2) //undefined
let name1 = 'Leo';
var name2 = 'Peter';

作用域差異

var 作用域是 function scope，let 作用域是 block。因此只要是我們在函數裡面用 var 宣告的變數都會有影響，像是如果我們在 show1 函數中使用 var 宣告兩次 name ，if 條件式裡面用 var 宣告的 name 也會影響原本使用 var 宣告的變數 name，因此 name 被改成了 Peter。但是如果我們是使用 let 宣告變數，像是 show2 函數，if 裡面使用 let 宣告的變數因為只在那個 if 條件的區塊(block) 產生作用，所以不會影響原本宣告的 name 變數，變數 name 還是 Leo。

function show1(){
    var name = 'Leo'
    if(true){
        var name = 'Peter'
    }
    console.log(name);
} // 顯示 peter
<!-- more -->
function show2(){
    let name = 'Leo'
    if(true){
        let name = 'Peter'
    }
    console.log(name);
} // 顯示 Leo

const 與物件用法

當我們使用 const 宣告變數後，此時這個變數就不能再次宣告，否則會出錯。但是如果我們使用 const 來宣告物件，我們可以修改 const 物件內的屬性值，而不會出錯。

const name = 'Leo';
name = 'Peter';

const family = {
    mom:'小美',
    father:'小明',
}
family.father = '爸爸';
console.log(family.father)
//物件傳參考

[Day18] 表單使用進階

發表於 2020-10-02 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 3k 所需閱讀時間 ≈ 3 分鐘

使用 v-for 動態產生選項

如果我們今天要將陣列的資料放進 select 單選下拉式選單中，可以在 option 標籤中使用 v-for，將 item 帶入到選項中，記得要在 value 前面加上 : ，因為 value 的值是隨著陣列的內容而不同是一種動態的屬性，最後我們使用 v-model 將 select 和資料 selected 綁定，當我們點擊選項後，選項的 value 就會變成 selected 的值。

<body>
    <div class="app">
        <select v-model="select">
            <option disabled>請選擇</option>
            <option v-for="item in dataArray" :value="item">{{item}}</option>
        </select>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            dataArray:['Leo','Perter','Harry'],
                        selected:''
        }
    });
</script>

閱讀全文 »

[Day17] 條件式 (v-if) 進階

發表於 2020-10-01 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 2.7k 所需閱讀時間 ≈ 2 分鐘

!否定用法

我們在 v-if 條件直接使用否定！用法，將 true 的條件式改成 false，當條件等於 true 就會顯示出成功的 div 區塊，反之則會顯示失敗的 div 區塊。我們也可以寫一個 checkbox 綁定 isSucceed 來更改 true 和 false。

<body>
    <div class="app">
        <div v-if="isSucceed">成功</div>
        <div v-if="!isSucceed">失敗</div>
        <input type="checkbox" v-model="isSucceed">更換
      </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            isSucceed:false,
        },
    });
</script>

閱讀全文 »

[Day16] 頁面操作 (v-on) 進階

發表於 2020-09-30 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 4.2k 所需閱讀時間 ≈ 4 分鐘

帶入參數

我們設定一個 dataArr 陣列，裡面存放 name 還有 money 組成的物件，我們宣告一個 save 方法，傳入一個物件 item 把當成這個方法參數，並將這個方法用 ＠click 綁定在 button 的點擊事件。最後我們使用 v-for 存取 dataArr 的資料，將 dataArr 的值傳入 item ，此時當我們點擊按鈕後，dataArr 就會用 item 物件的方式傳入 save 方法中，執行將物件的 money 加 500。

<body>
    <div class="app">
        <ul>
            <li v-for="item in dataArr">
                {{item.name}}有{{item.money}}$ <input type="button" value="儲值" @click="save(item)">
            </li>
        </ul>
    </div>
</body>

閱讀全文 »

[Day15] 元件概念

發表於 2020-09-29 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 1.6k 所需閱讀時間 ≈ 1 分鐘

我們今天在 Vue 應用中宣告一個資料 counter，並且設定一個按鈕綁定點擊事件，此時當我們點擊按鈕時，會發現按鈕上的 counter 變數值加一，我們將相同按鈕程式碼複製再產生一個相同的按鈕。此點會發現當我們點擊按鈕時，兩顆按鈕的資料都會加一，如果我們要將按鈕的資料分開，可能的做法是將不同的按鈕綁定不同的變數，但這樣就變成我們要多設定一個變數，如果此時按鈕一多，那麼要設定新的變數也會變多。此時我們可以使用 Vue 元件的做法來解決這個問題。透過元件，我們可以將程式給模組化重複利用。接下來說明元件的使用方式，首先我們必須再 Vue 應用程式前面宣告一個 Vue.component ，() 內第一個參數我們放的是元件的名稱，像是範例程式將元件名稱設定成 'counter' ，接下來第二個參數就很像是我們宣告一個 Vue app 的樣子，裡面是一個物件形式，也有 data 資料不過和一般 Vue 應用宣告的方式不太一樣，我們必須以物件的形式透過 function return 來傳遞資料，像是範例程式我們將資料 counter 包裝物件透過函數來回傳。接下來我們使用 template 的方式來宣告元件，有很多可以產生元件的方法，這邊我們先用 template 為例子，template 裡面我們必須以字串的方式來放入我們想在畫面呈現的程式碼，就很像是 js 的 innerHTML ，然後這邊我們使用一個 js ES6 模版字符串的語法，將我們要呈現在畫面上的 html 程式語法直接打在模版字符串裡面，透過此方法我們可以省略串接字串的加號，更容易撰寫程式，因此我們複製上一個按鈕得程式碼將它放進中，最後我們透過元件<counter></counter>來產生兩格按鈕，當我們點擊兩顆按鈕時，可以明顯發現按鈕內的資料不會都加一，達到了資料的獨立。透過 Vue 開發者工具，我們也可以看到再在root 元件裡面有兩個 counter 元件，點進去 counter 元件發現他們的資料確實都是獨立的。

<body>
    <div id='app'>
        一般寫法:
        <button @click="counter+=1">{{counter}}</button>
        <button @click="counter+=1">{{counter}}</button>
        元件寫法：
        <counter></counter>
        <counter></counter>
    </div>
</body>

閱讀全文 »

[Day14] 迴圈 (v-for) 進階(2)

發表於 2020-09-28 更新於 2021-03-05 分類於 Web ， it鐵人競賽 Disqus：
文章字數： 1.8k 所需閱讀時間 ≈ 2 分鐘

不能運行的狀況

設定陣列長度為０

在 js 中我們可以將某個陣列長度設定為０來將這個陣列的值消失，如範例的 dataArray2 ，但是在 Vue 中這種寫法是不行執行的，我們今天透過一個 noWork 方法去將陣列的長度設定為 0，並且在 console 上印出我們修改的陣列，會發現雖然最後陣列裡面的元素變成 0 ，但是畫面上 li 標籤所渲染的陣列資料卻沒有改變。

<body>
    <div id='app'>
        <ul>
            <li v-for='item in dataArray1'>{{item}}</li>
        </ul>
        <button @click='noWork'>更改陣列長度</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            dataArray1:[1,2,3,4]
        },
        methods: {
            noWork:function(){
                this.dataArray1.length = 0;
                console.log(this.dataArray1.length);
            }
        }
    })
    var dataArray2 = [1,2,3,4]
    dataArray2.length = 0;
</script>

閱讀全文 »