null 和 undefined
Undefined相當於一個變數並沒有明確的被賦值(是否被賦值, 可能無心忽略, 邏輯問題) JS的怪異之處就在於undefined真的是一個可以使用的值。
> var foo;
> foo
undefined
登入後複製
同理，當缺失參數時 JavaScript 會指派一個 undefined：
> function id(x) { return x }
> id()
undefined
a = 1;
a !== undefined // true
a = undefined
var b
a === b //true
登入後複製
Null相當於變數被明確指定了沒有值，而不是因為意外的原因被忽略掉了(賦值null, 正當邏輯)
參與運算
JS的null如果進入運算，真的會被解析成為0或false：
(1 + null) # 1 (1 * null) # 0 (1 * null) # Infinity
登入後複製
undefined進入運算，一律得到NaN：
(1 + undefined) # NaN (1 * undefined) # NaN (1 / undefined) # NaN
登入後複製
邏輯判斷
null和undefined邏輯判斷時都認為是false。
只用一個判斷，就可以同時檢驗這兩項是否為真:
//也会把 false, -0, +0, NaN 与 '' 当成“空值”
if (v) {
// v 有值
} else {
// v 没有值
}
登入後複製
但是如果碰到大坑==的時候
var foo;
console.log(foo == null); // true
console.log(foo == undefined); // true
console.log(foo === null); // false
console.log(foo === undefined); // true
console.log(null == undefined); // true
登入後複製
好的做法, 一律使用===
判斷一個量已定義且非空，只使用：if (a !== null && a !== undefined)。
=== 和 ==
1.==用來判斷兩個值是否相等
當兩個值類型不同時，會發生自動轉換，得到的結果非常不符合直覺，這可能不是你想要的結果。
"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" \t\r\n" == 0 // true
登入後複製
2.===
類型 值比較
"如果兩邊的操作數有相同的型別和值，===回傳true，!==回傳false。"—《JavaScript：語言精粹》
最佳實踐:
任何時候在比較操作中使用 === 和 !==
json操作
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
to string
var obj = {
name: 'myObj'
};
JSON.stringify(obj);
登入後複製
函數物件及匿名函數
函數物件賦值
var slice_func = [].slice
//slice_func()
var a = function() {
};
// a()
var a = {
fun : function() {
};
}
// a.fun()
someElement.addEventListener("click", function(e) {
// I'm anonymous!
});
登入後複製
以及
var f = function foo(){
return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"
登入後複製
匿名函數
from
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
to
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.
登入後複製
最佳實務
1.定義多個變數時，省略var關鍵字，用逗號取代
var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';
登入後複製
更好的做法
var someItem = 'some string',
anotherItem = 'another string',
oneMoreItem = 'one more string';
登入後複製
2.謹記，不要省略分號, 不要省略花括號
省略分號,可能導致更大的,未知的,難以發現的問題
var someItem = 'some string'
function doSomething() {
return 'something'
}
登入後複製
更好的做法
var someItem = 'some string';
function doSomething() {
return 'something';
}
登入後複製
3.使用{}代替 new Ojbect()
在JavaScript中建立物件的方法有多種。可能是傳統的方法是使用”new”加構造函數，像下面這樣:
var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
console.log(this.name);
}
登入後複製
更好的做法
var o = {
name: 'Jeffrey',
lastName = 'Way',
someFunction : function() {
console.log(this.name);
}
};
登入後複製
只要把多個全域變數都整理在一個名稱空間下，擬將顯著降低與其他應用程式、元件或類別庫之間產生糟糕的相互影響的可能性。 ——Douglas Crockford
4.使用[]代替 new Array()
var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';
登入後複製
更好的做法：
var a = ['Joe','Plumber'];
登入後複製
5.typeof判斷
typeof一般只能回傳以下幾個結果：number,boolean,string,function,object,undefined
expr:
typeof xx === ''
typeof xx !== ''
登入後複製
e.g.
// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"
// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串
// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量
// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法可以分辨出一个数组和真实的对象
typeof new Date() === 'object';
// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';
typeof null === 'object'; // 从JavaScript诞生以来,一直是这样的.
登入後複製
6.三元運算子 :強大且風騷
文法
expression ? xxx : yyy
bad
var direction;
if(x < 200){
direction = 1;
} else {
direction = -1;
}
good
var direction = x < 200 ? 1 : -1;
登入後複製
7.用邏輯 AND/OR 做條件判斷
var foo = 10;
foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();
foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();
//默认值
a = b || 'default'
return b || c || d > 1 ? 0 : 2
登入後複製
8.給一個變數賦值的時候不要忘記使用var關鍵字
給一個未定義的變數賦值會導致創建一個全域變數。要避免全域變數
9.自我呼叫的函數
自呼叫匿名函數（Self-Invoked Anonymous Function）或即時呼叫函數表達式（IIFE-Immediately Invoked Function Expression)。這是一個在建立後立即自動執行的函數
(function(){
// some private code that will be executed automatically
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)
登入後複製
10.避免使用 eval() 和 Function 建構子
Eval=邪惡, 不僅大幅降低腳本的效能（譯註：JIT編譯器無法預知字串內容，而無法預先編譯和最佳化），而且這也會帶來巨大的安全風險，因為這樣付給要執行的文字太高的權限，避而遠之
使用 eval 和 Function 建構子是非常昂貴的操作，因為每次他們都會呼叫腳本引擎將原始程式碼轉換成可執行程式碼。
var func1 = new Function(functionCode);
var func2 = eval(functionCode);
登入後複製
11.避免使用 with()
使用 with() 會插入一個全域變數。因此，同名的變數會被覆蓋值而造成不必要的麻煩
12.腳本放在頁面的底部
記住－首要目標是讓頁面盡可能快的呈獻給用戶，腳本的夾在是阻塞的，腳本載入並執行完之前，瀏覽器不能繼續渲染下面的內容。因此，使用者將被迫等待更長時間
13.避免在For語句內宣告變數
bad
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
登入後複製
good
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}
登入後複製
14.為程式碼新增註解
// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）.
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
登入後複製
15.instanceof
instanceof 方法要求开发者明确地确认对象为某特定类型
var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 输出 "true"
// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true
// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承
var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true
登入後複製
16.apply/call
someFn.call(this, arg1, arg2, arg3);
someFn.apply(this, [arg1, arg2, arg3]);
登入後複製
apply
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）
call
Function.call(obj,[param1[,param2[,…[,paramN]]]])
登入後複製
obj：这个对象将代替Function类里this对象
params：这个是一个参数列表
使用哪个取决于参数的类型
