2016年7月16日 星期六

型態、迴圈 (JavaScript 5)

※七種型態

Boolean
null
undefined
Number
String
Symbol: ECMAScript 6 中新增,實體是唯一且不可變的
Object


※有new 和沒new的差別

var n = new Number(5);
console.log('n=' + n + ',tn=' + typeof n); // object
    
var n2 = 5;
console.log('n2=' + n2 + ',tn2=' + typeof n2); // number
    
var s = new String('a');
console.log('s=' + s + ',ts=' + typeof s); // object
    
var s2 = 'a';
console.log('s2=' + s2 + ',ts2=' + typeof s2); // string
    
var b = new Boolean(true);
console.log('b=' + b + ',tb=' + typeof b); // object
    
var b2 = true;
console.log('b2=' + b2 + ',tb2=' + typeof b2); // boolean
    
var nil = null;
console.log('nil=' + nil + ',tnil=' + typeof nil); // object
    
var u = undefined;
console.log('u=' + u + ',tu=' + typeof u); // undefined
    
var f = new Function();
console.log('f=' + f + ',tf=' + typeof f); // 看下面的圖
    
var f2 = function(){};
console.log('f2=' + f2 + ',tf2=' + typeof f2); // 看下面的圖

※結果:

※除了function外,有new的型態都是object

※字串用「'」和「"」都可以


※型態要注意的事

// var b = new Boolean(false);
var b = false;
console.log('b1=' + b);// false
console.log('b2=' + b ? 'true':'false'); // true
console.log('b3=' + b == true ? 'true':'false');// false
    
    
// null 和 undefined 區別
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(1 + null); // 1
console.log(1 + undefined); // NaN
    
    
// 數字
var n = .1;
console.log(n); // 0.1
console.log(typeof n); // number
    
    
// 字串+數字和數字+字串
var a = '1';
var b = 2;
console.log(a + b); // 12
console.log(b + a); // 21

※要注要boolean用來判斷時的寫法,如判斷b而已,它會認為有東西就是true

※null 可以加減;undefined 不行

※數字用「.」開頭,會幫你加上0

※使用 typeof 關鍵字可顯示型態

※字串+數字和數字+字串,較舊的瀏覽器有可能變成3,我用IE11和Google51結果都一樣


※六種迴圈

// 一、do...while
var i = 0;
outer:
do {
    console.log(++i);
    if (i == 3){
        break outer;
    } else {
        continue outer;
    }
} while (i < 5);
    
    
// 二、while
var i = 0;
outer:
while (i < 5) {
    console.log(++i);
    if (i == 3){
        break outer;
    } else {
        continue outer;
    }
}
    
    
// 三、for
outer:
for(var i=1; i<5; i++){
    console.log(i);
    if (i == 3){
        break outer;
    } else {
        continue outer;
    }
}
    
    
// 四、for in
var obj = ['a', 2, 'c', 4, 'e'];
outer:
for (var i in obj) {
    console.log(i);      // 0 1 2 3
    console.log(obj[i]); // a 2 c 4
    if (i == 3){
        break outer;
    } else {
        continue outer;
    }
}
    
    
// 五、for of
var obj = ['a', 2, 'c', 4, 'e'];
for (var i of obj) {
    console.log(i); // a 2 c 4 e
}
    
    
// for in 和 for of 區別
var arr = ['a', 2, 'c'];
arr.six = 6;
for (let i in arr) {
    console.log(arr[i]); // a 2 c 6
}
    
for (let i of arr) {
    console.log(i); // a 2 c
}
    
    
// 六、forEach
var obj = ['a', 2, 'c'];
obj.forEach(xxx);
function xxx(element, index, array) {
    console.log('element=' + element); // a 2 c
    console.log('index=' + index); // 0 1 2
    console.log('array=' + array); // 都是a,2,c
}
/* 匿名寫法
obj.forEach(function (element, index, array) {
    console.log('element=' + element); // a 2 c
    console.log('index=' + index); // 0 1 2
    console.log('array=' + array); // 都是a,2,c
});
*/
/* lambda寫法
obj.forEach((element, index, array) => {
    console.log('element=' + element); // a 2 c
    console.log('index=' + index); // 0 1 2
    console.log('array=' + array); // 都是a,2,c
});
*/

※for in和for of的區別是在裡面宣告變數時,用for in是index;而for of是值
還有上面的陣列,後面給的值,for of 不會抓
for of 是 ECMAScript 6新增的

※這六種迴圈,只有forEach沒有標籤的寫法和break、continue,但可以用return true/false代替break、continue

※forEach不能呼叫var xxx = 的function

沒有留言:

張貼留言