打基礎的作業練習，用到的技巧：array, object, set, random(陣列、物件、集合、亂數), v-for。
這次要做的是寫一個樂透亂數程式，有第一區1~第一區6，還有第二區。第一區可選的號碼有1~38，不可重複。第二區是1~8。
完成後如下，每次f5之後出現的數字會改變，因為亂數。
寫了兩種，一種是全部都陣列，一種是用物件去接，把a的字串當作key。（因為一開始琢磨不出來後者怎麼寫XDD）
第一區1 ------- 13
第一區2 ------- 11
第一區3 ------- 26
第一區4 ------- 37
第一區5 ------- 6
第一區6 ------- 34
第二區 ------- 4
因為公司用的框架是vue，所以就用vue寫。(純js也可以完成)
先做一個陣列a，放字串'第一區1', '第一區2'…，之後要新增刪除都直接改陣列a即可。
亂數的部分，直接用js內建的Math.floor與Math.random。
Math.floor回傳小於指定數字的最大整數值，
Math.random回傳介於0~1之間的亂數，包含0但不包含1。
寫一個function。
getrandom(min, max)
return Math.floor(Math.random() * (max - min + 1) + 1)
設定min與max這樣第二區的亂數也可以使用同一個function獲得。
為了得到不重複的亂數，宣告一個集合f1，每次執行亂數都把值塞進f1。
然後如果不是第一次執行getrandom，f1裡又有相同值，即表示重複，再次執行getrandom，直到f1沒有相同值(用while實作)。
第二區的亂數，用個隨便變數記住a最後一個index，再執行一次getrandom即可獲得。
方法1是將要印出的內容用第二個陣列b顯示，把a用forEach跑一遍然後在裡面對b做push即可。
html
<div id="prac0719">
<div v-for="(item,index) in b">{{ b[index] }}</div>
</div>
js
let vm = new Vue({
el: "#prac0719",
data() {
return {
a: ['第一區1', '第一區2', '第一區3', '第一區4', '第一區5', '第一區6', '第二區'],
b: []
}
},
mounted: function() {
let d = []
let f1 = new Set()
for (var x in this.a) {
d[x] = this.getrandom(1, 38)
while (f1.has(d[x])) d[x] = this.getrandom(1, 38)
f1.add(d[x])
}
d[x] = this.getrandom(1, 8)
let i = 0
this.a.forEach(c =>this.b.push(`${c}-------${d[i++]}`))
},
methods: {
getrandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + 1)
}
}
})
</script>
也沒啥難的，其實反而是在html顯示上卡住比較久。
比較值得講講的也就forEach了，我一直覺得不太懂他在幹嘛。
經過幾次實驗之後總算有一點小心得。
forEach裡面接一個function，這邊用ES6的箭頭函數，反正就把他想成一個return後面的東西的代號就好。
forEach執行每個陣列裡面的值，我是想成把值用回傳的function：c來代替，這種思路比較好讓我自己理解。
template literal (模板字串符)，`${ }`也是ES6的寫法，可以跨行顯示字串，可以在字串裡面放變數，超級好用，不用讓你的字串遇到變數時就一直蠢蠢的+++。
d[i++]也沒啥好解釋的，就直接在forEach裡面跑d這樣，最後出來結果就是如上圖。
方法2則是把陣列b改成物件oo。
把a的字串當作key，d的亂數當作value。
練習一下擴充運算符，把a複製過來變成另一個陣列cc。
html
<div id="prac0719">
<div v-for="(item,index,key) in oo">
{{ Object.keys(oo)[key]}} ------- {{ Object.values(oo)[key] }}
</div>
</div>
js
<script>
let vm = new Vue({
el: "#prac0719",
data() {
return {
a: ['第一區1', '第一區2', '第一區3', '第一區4', '第一區5', '第一區6', '第二區'],
cc: [],
oo: {}
}
},
mounted: function() {
let d = []
let f1 = new Set()
for (var x in this.a) {
d[x] = this.getrandom(1, 38)
while (f1.has(d[x])) d[x] = this.getrandom(1, 38)
f1.add(d[x])
}
d[x] = this.getrandom(1, 8)
i = 0
this.cc = [...this.a]
this.cc.forEach(dd =>this.oo[dd] = d[i++])
},
methods: {
getrandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + 1)
}
}
})
大概就是這樣，很基礎的作業，但是如果基礎本來就不穩，可能還是要花點時間，比如我=w=
留言列表
