JavaScript

舊專案必學技術整理 - JavaScript 基礎概念

Posted by Tim Lin on 2018-11-22

JavaScript 基礎概念

變數

都使用 var (JS ES6 後有像是 let, const 等其他關鍵字, 但本案相關開發請都用 var)

資料型態

  • 主要的原始資料類型:
    • 數字(Number)
    • 字串(String)
    • 布林(Boolean)
  • 特殊的原始資料類型:
    • 空(null)
    • 未定義(undefined)
    • 符號(Symbol)
  • 複合型(composite)或參考型(reference)的資料類型:
    • 陣列(Array)
    • 物件(Object)

https://jsbin.com/hafejilazo/edit?js,console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

console.log(typeof 37); //'number'
console.log(typeof NaN); //'number'
console.log(typeof ''); //'string'
console.log(typeof (typeof 1)); //'string'
console.log(typeof true); //'boolean'
console.log(typeof null); //'object'
console.log(typeof function(){}); //'function'


console.log(a);//值: undefined
console.log(typeof(a));//"undefined"
var a = 100;
console.log(a);//值: 100
console.log(typeof(a));//"number"

//console.log(b);//顯示 not defined

//驚嘆號(!)之前有說過是個邏輯運算符，名稱為"Logic NOT"，用在布林值上具有反轉(Inverted)的功能，雙驚嘆號(!!)就等於"反轉再反轉"，等於轉回原本的布林值:
var aBool = true;
console.log(aBool);

var bBool = !aBool; //false
console.log(bBool);

var cBool = !!aBool; //true
console.log(cBool);

//雙驚嘆號(!!)並不單純是在這樣用的，它是為了要轉換一些可以形成布林值的情況值，列出如下:
//false: 0, -0, null, false, NaN, undefined, 空白字串('')
//true: 不是false的其他情況
var aBool = !!0; //false
console.log(aBool);

var bBool = !!'false'; //true
console.log(bBool);

var cBool = !!NaN; //false
console.log(cBool);

Double Equals vs. Triple Equals

  • == , !=
    • 會左右幫你自動轉型後比較
  • === , !==
    • 優先比較資料型態 在比值

請盡量用 === 或 !== 來比較值

https://jsbin.com/nahuqojote/edit?js,console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log(0 == false); //true, 自動型轉成 0, == , 相依性: 從左至右, 所以會以左邊為主來轉

var a = 3 + 4 * 5; // * 運算子優先性比 + 還高(先乘除後加減)
console.log(a)


//當運算子優先性相同，就依據相依性來判斷是左到右執行還是右到左執行。

//現在有兩個 < 運算子，所以優先性是一樣的，那就再來看 < 的相依性：
//< 相依性為左到右，所以3 < 2 < 1 的執行順序是先比較3和2，再比較1。
//3 < 2相比結果是false，接著再運行false < 1的相比較。

//在JS中，true若被強制型轉成數值會是1，false被強制型轉成數值會是0。
//這裡的false因為與數值進行比較判斷，被JS自動型轉成0，變成0 < 1，而0 < 1成立，true
console.log(3 < 2 < 1);  //true

自動轉型

  • string 做加法運算, 自動轉型成 string
  • 減乘除運算 自動轉型 number

https://jsbin.com/cagoyenovi/1/edit?js,console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var a = 1 + '2';
console.log(a)
console.log(typeof(a));
console.log("=================================================");

var b = 'ithome' + 30;
console.log(b);
console.log(typeof(b));
console.log("=================================================");

var c = '10' * 8
console.log(c);
console.log(typeof(b));
console.log("=================================================");

var d = '10' - 8;
console.log(d);
console.log(typeof(d));
console.log("=================================================");

var f = 'ithome' - 30;
console.log(f); //NaN, Not a Number
console.log(typeof(f)); 
console.log("=================================================");
  • if( ) 判斷式
    • 0 , NaN , ‘’ , null , undefinied 自動轉型 false
    • 其餘皆自動轉型 true : 有值的狀態下, {}, [], ’ ’ 等等…

https://jsbin.com/bozizitanu/edit?js,console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 0 , NaN , '' , null , undefinied 自動轉型 false
// 其餘皆自動轉型 true : 有值的狀態下, {}, [], ' ' 等等...
var f = 'ithome' - 30;
console.log(f); //NaN, Not a Number

if(f) {
  console.log('pass');
}

var b;
if(!b) {
  console.log('pass');
}

if('3332') {
  console.log('pass');
}

var c = 0;
if(c) {
  console.log('pass');
}

運算子優先序

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

https://jsbin.com/nahuqojote/edit?js,console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log(0 == false); //true, 自動型轉成 0, == , 相依性: 從左至右, 所以會以左邊為主來轉

var a = 3 + 4 * 5; // * 運算子優先性比 + 還高(先乘除後加減)
console.log(a)


//當運算子優先性相同，就依據相依性來判斷是左到右執行還是右到左執行。

//現在有兩個 < 運算子，所以優先性是一樣的，那就再來看 < 的相依性：
//< 相依性為左到右，所以3 < 2 < 1 的執行順序是先比較3和2，再比較1。
//3 < 2相比結果是false，接著再運行false < 1的相比較。

//在JS中，true若被強制型轉成數值會是1，false被強制型轉成數值會是0。
//這裡的false因為與數值進行比較判斷，被JS自動型轉成0，變成0 < 1，而0 < 1成立，true
console.log(3 < 2 < 1);  //true

js 裡稀奇古怪靈異事件一大堆

•http://zero.milosz.ca/
•http://wtfjs.com/

陣列

1
var arr = [1, 2, 3, 4];

https://www.w3schools.com/js/js_arrays.asp

物件

1
{name: 'Simon',isF2E: true}

https://jsbin.com/xezuyikigo/edit?js,console
https://www.w3schools.com/js/js_objects.asp

函式(function)就是物件

在JS這個物件導向語言裡，其函式的特性被稱為一級函式。
一級函式First Class Functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//匿名函式
function() {

}

//有名稱的函式
function sport() {

}

因為函式就是物件，所以我們可以接著這樣寫

sport.basketball  = '打籃球';
console.log(sport.basketball); // 打籃球

JS 函式就是物件，物件可以自由擴增屬性，我們等於對 sport 這個函式物件，
新增一個 basketball 屬性，其值為字串打籃球。

所以也可以寫成這樣, 函式物件
var sport = function(a) {

}

sport(3);

https://jsbin.com/gocofesiha/edit?js,console
https://jsbin.com/wozilisedo/1/edit?js,console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var sport = function(a) {
  console.log(a);
}

sport('test');

// 可以把 Function Expression 表示式當成參數傳進去
function a() {
    console.log(a);

}

log(a);

log(function a() {
    console.log(a);
});

function logf(a){
	a();
}
logf(function(){
    console.log("狗");
})
//--------------------------------------

var sport = function(a) {
  console.log(a);
}

sport('test');

function log(a){
	console.log(a);
}

log(sport('test'));

Hoisting 提升

函式 與其 函式 內容(定義):會存至記憶體，所以可以正確的呼叫，呼叫後建立這個函式的執行環境　
變數(var): 也會被創造存至記憶體，但其賦值內容並沒有再創造時跟著被進去

1
2
3
4
5
6
7
8
var a = 'Hello World!';

function b() {
    console.log('Called b!');
}

b();
console.log(a);

https://jsbin.com/cahapugisa/edit?js,console
v.s.

1
2
3
4
5
6
7
8
b(); 
console.log(a);

var a = 'Hello World!';

function b() {
    console.log('Called b!');
}

https://jsbin.com/nujawaqidi/edit?js,console

ex1:

1
2
3
4
5
cat()

function cat(){
    console.log("貓咪");
}

ex2:

1
2
3
4
5
var dog = function(){
    console.log("狗");
}

dog();

ex3:

1
2
3
4
5
dog();

var dog = function(){
    console.log("狗");
}

loop

1
2
3
for (var count = 0 ; count < 10 ; count++){
    console.log(count)
}

References:

FEATURED TAGS
JavaScript
FRIENDS