2018年12月13日 星期四

【JavaScript】TypeScript是什麼?怎麼用?


(本篇只是筆記,不是教學,看不懂不是你笨。)



什麼是TypeScript

  • 一個JS的超集合
  • 最後「還是會轉成JS」,但可以在編譯前,讓我們使用強型別run前顯示錯誤
  • 在檔案的尾端打ts,就可以用ts了

JS有什麼問題

  • 討厭的自動型別轉換(因爲JS是弱型別)
  • 必須Run起來才會知道哪裡有錯誤

如何安裝

npm install -g typescript //安裝ts編譯器
tsc -int //產生config檔案,可以設定要編譯成ES5/6
tsc XXX.ts //把xxx.ts編譯成xxx.js

Quokka套件

  • 裝在VScode裡面
  • 會在run之前就顯示出結果,是開發的好朋友!!
  • 會在run之前就告訴你錯誤,是開發的好朋友!!
Control+Shift+P 開啟VScode開啟命令,輸入:
Quokka new typescript //可以開啟typescript檔案
Quokka start on current file //可以開啟「輸出提示」(有時候他會不見)

TypeScript語法

a:型別
var a:boolen|member = 12  //這樣a就可以是布林或是數字


*明天要面試,但我還不會TS,所以來研究一下XDD

2018年9月12日 星期三

【JavaScript】兩種函式宣告的差別——聲明的提前 var a = function () {} & function a(){}


var a = function () {….} :Expression

・這種寫法應該比較穩定
var hereOrThere = function () { // 表達式
    return 'here';
};

console.log(hereOrThere()); // console'here'

hereOrThere = function () {
    return 'there';
};
(聲明提前)
var hereOrThere  //聲明提前

hereOrThere=function () { // 表達式
    return 'here';
};

console.log(hereOrThere()); // console 'here'

hereOrThere = function () {
    return 'there';
};

function a() {….}:statement

  • function a () {…} 是一種聲明,因此會提前
function hereOrThere() { 
    return 'here';
}

console.log(hereOrThere()); // console 'there'

function hereOrThere() { 
    return 'there';
}
(聲明提前)

function hereOrThere() {
    return 'here';
}

function hereOrThere() {  //聲明提前
    return 'there';
}

console.log(hereOrThere()); // console 'there'

推薦文章:JavaScript中對變量和函數聲明的“提前(hoist)”

【JavaScript】Var、Let、Const的不同


VAR

  • var如果再function裡面,就只會存在於function裡面(如果只是單純的大括號依然會跑去)
  • var如果再function外面,就會變成全域變數
  • var可以被覆寫
function say() {
    var a = 123;
 }
 console.log(a) //undefined
var price = 100;
if (price > 3) {
    var discount = 0.7 * price;
//這裡的Var雖然在大括號裡面,但並不是在function裡面
}
 console.log(discount) //70

let

  • let只會存在block大括號當中
  • let可以被覆寫
var price = 100;
if (price > 3) {
    let discount = 0.7 * price;
//這裡的let只會存在於block當中
}
 console.log(discount) //Undefined

const

  • const只會存在block大括號當中
  • const不可以被覆寫

【JavaScript】文字中串JS & JS碼中串HTML的好方法


文字中串JS

Literal Template

  • ES6才有支援
  • 注意符號不是’而是`(鍵盤左上角)
var a = 10
var b = 20
console.log(` 加起來是${a+b} `)

JS碼中串HTML

//1.先用一個Javascript把HTML放進來
 <script type="text/template" id="html_template">  html..... </script>
//2.把HTML取出來,然後再給函式使用
var html = document.getElementById('html_template').innerHTML //取出HTML

偶個函式: function () {

                            infoWindow: {
                                content: html 

                            }
                    });

2018年9月6日 星期四

【JavaScript】物件轉陣列 Object.values


物件轉陣列

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};
console.log(Object.values(object1));
// Array [“somestring”, 42, false]

2018年7月24日 星期二

【JavaScript】陣列合併concat / […groupA,…groupB] / 類陣列的轉換 / 其餘參數


陣列與物件都是儲存值

var a = [1, 2, 3, 4] //a不直接儲存[1, 2, 3, 4],而是[1, 2, 3, 4]的地址
var b=a  // b儲存了[1, 2, 3, 4]的地址
a.push(5) // [1, 2, 3, 4]改變了
console.log(b)  // [1,2,3,4,5]

取陣列

  • 可以把陣列逐一取出然後return
  • 用法:’[…array]’
var a = [1, 2, 3, 4] 
var b=[...a] //把1,2,3,4一個個拿出來,然後return回b
a.push(5) 
console.log(b)  //扔然是[1,2,3,4]

陣列合併:concat 以及 […groupA,…groupB]

  • groupAa.concat(groupB) 和 […groupA,…groupB]的結果是一樣的
var groupA = [1, 2, 3, 4] 
var groupB = [5, 6, 7, 8]

consoel.log(groupAa.concat(groupB))
console.log([...a, ...b])

類陣列轉變成真陣列

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
var fakearray = document.querySelectorAll("li")
        console.log(fakearray)  //會得到類陣列,可以使用的方法比較少
var reallyarray = [...fakearray] //把類陣列取出,放入新陣列
        console.log(reallyarray)  //得到一個真正的陣列

其餘參數

  • 當參數太多時,可以用…表示
var money = function (a, ...b) { //參數太多了,所以只要a就好,剩下的就放進去b
    console.log(a, b)
}
money(10, 20, 30, 40, 50)

a:10
b:[20,30,40,50]


2018年7月23日 星期一

【JavaScript】陣列的批次處理 ForEach/Map/Filter/ Reduce/ Every/Some/Sort/For in


ForEach函數

  • 用來處理原始的陣列
  • 用法:陣列.forEach(function(item,index){.....})
原始資料:一個調查誰是gay的問卷
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
教授說:「哎呀,這些受訪人數的平均年齡太小了,這不好跟倫理委員會招待,讓他們多10歲吧。」
whoisgay.forEach(function (item, index) {
    item.age += 10;
})

輸出 [{
    name: "neo",
    age: 22,
    gay: true
}, {
    name: "ben",
    age: 30,
    gay: true
}, {
    name: "chen",
    age: 24,
    gay: false
}]

Map函數

  • 陣列轉換器,可以把原始資料A(N筆)一筆ㄧ的轉換資料成B(N筆)
  • Map很棒,可以它不能篩選資料。原始陣列有100筆,新資料就會有100筆。
  • 和ForEach的差別是Map會return
  • 用法:陣列.map(function(item,index){ return .....})
同樣的原始資料:調查誰是gay的問卷
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
教授說:「哎呀這其實是個匿名調查,我們只需要年齡跟性向資料就好。」
➡︎ 用map轉換正個陣列,讓他變成新的沒有名字陣列
var noname = whoisgay.map(function (item, index) {
    return {
        age: item.age,
        gay: item.gay
    }
})

console.log(noname)

輸出:
[ { age: 12, gay: true },
  { age: 20, gay: true },
  { age: 14, gay: false } ]
另一個案例:把陣列平方處理
var array = [1, 2, 3, 4, 5];

var newarray = array.map(function (item, index) {
    return item * item;  //[1,4,9,16,25]
})

Filter函數

  • Filter可以篩選資料,只要return結果是true,它就會把這筆資料塞進去新陣列
  • 用法:陣列.filter(function(item,index){ return true/false})
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
教授又來了,教授說:「哎呀,我們只要研究同性戀的年齡,那些不是同性戀的資料可以不用啦。」
var gayage = whoisgay.filter(function (item, index) {
    if (item.gay) {  //如果是gay
        return true  //就是return true,並把這個item篩進去這個陣列
    }
})

結果(2筆):
[ { name: 'neo', age: 12, gay: true },
  { name: 'ben', age: 20, gay: true } ]

Find函數

  • 找到第一筆符合的資料
  • filter會回傳陣列,但find只會找到第一筆資料
  • 用法:陣列.find(function(item,index){ if ... return item)
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
教授說:「那個啊,我們這個研究做了可以抽獎,嗯...就抽第一個是gay的同學吧。」
var ifgay = whoisgay.find(function (item, index) {
    if (item.gay) {
        return item
    }
})
輸出:{ name: 'neo', age: 12, gay: true }

Every函數

  • 如果每個資料都符合某個標準,回傳true/false
  • 用法:陣列.every(function(item,index){ if ... return 判斷式)
教授說:「那個啊,可以確定一下是不是每個受訪者都成年嗎?」
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
var ifadult = whoisgay.every(function (item, index) {
    return item.age>=20
})
輸出:false

Some函數

  • 如果有至少一筆資料是符合標準,回傳true/false
  • 用法:陣列.some(function(item,index){ return 判斷式)
教授說:「那個啊,我聽說叫neo的人很少,我看一下這些受試者是不是有至少一個叫neo的啊?」
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
var ifneo = whoisgay.some(function (item, index) {
    return item.name == 'neo'
})

輸出:true

Sort排序函數

  • 可以進行資料排序a>b(小到大)a<b(大到小)
  • 用法:陣列.sort(function(a,b){ return a<b)
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
教授說:「我想要讓資料順序,由年齡從小到大排」
whoisgay.sort(function (a, b) {
    return a.age > b.age;
    // 如果為真,就由小排到大
})

輸出:[ { name: 'neo', age: 12, gay: true },
  { name: 'chen', age: 14, gay: false },
  { name: 'ben', age: 20, gay: true } ]

Reduce函數

  • 可以有一個暫存的變數去收集資料
  • 用法:reduce(function (變數, 抓陣列的資料) { return 變數 + 抓陣列的資料}, 初始值)
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
教授:「我想要知道大家的平均年齡:)」
var total = whoisgay.reduce(function (total, item) {
    return total + item.age
}, 0)

var number = whoisgay.length

console.log(total / number)

For in

  • 可以把資料的index撈出來
var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]
for (index in whoisgay) {
    console.log(index)
}
輸出:0,1,2

【JavaScript】用物件Mapping的方法

If的寫法 我們希望當變數是a時就回傳1,變數是b就回傳2,變數是c就會回傳3,一般寫法就是用if,但是這樣會很冗 ​ // IF style var word if(word == 'a'){ word = 1 } else if...