Javascript 編碼規範(ES5)及其他知識點
阿新 • • 發佈:2018-12-11
資料型別
- string,number,boolean,null,undefined的存取直接作用於它的自身
例:
var foo = 1;
var bar = foo;
bar = 9;
console.log(foo, bar) //結果 => 1,9
- object,array,function的存取時作用於它自身值的引用。
array操作:淺拷貝、深拷貝
var arr = [1,2,3,4];
var arr1 = arr; //淺拷貝
arr[0] = 5;
console.log("//結果 => "+arr[0],arr1[0]) //結果 => 5 5
陣列拷貝不改變原陣列值
方法一
var arr2 = []; arr.push({name:'Sam',age:18}) arr.forEach(function (el) { arr2.push(el) });//深拷貝 arr[1] = 6; arr[4].age = 20; console.log("//結果 => "+arr[1],arr2[1]) //結果 => 6 2 console.log(arr[4],arr2[4]) //結果 => {name: "Sam", age: 20} {name: "Sam", age: 20} //上述深拷貝方法只針對 ****字串,數字時**** 能解決問題,但是當時物件時會出錯
方法二
function copy( sourceObj , c) { var c = c || ( Array.isArray(sourceObj) ? [ ] : {} ); for (var i in sourceObj) { if (typeof sourceObj[i] === 'object') { c[i] = Array.isArray(sourceObj[i]) ? [] : {}; copy (sourceObj[i], c[i]); } else { c[i] = sourceObj[i]; } } return c; }//深拷貝 var arr3 = []; copy(arr, arr3); arr3[4].age = 25; console.log(arr[4], arr3[4]) //結果 => {name: "Sam", age: 20} {name: "Sam", age: 25}
方法三
var arr5 = arr.slice();
arr[3] = 9;
console.log(arr[3], arr5[3])//結果 =>9 4
object操作:深拷貝、淺拷貝
var obj = {name:'Sam',age:18};
var obj1 = obj;
obj.age = 20;
console.log(obj, obj1) //結果 => {name: "Sam", age: 20} {name: "Sam", age: 20} 淺拷貝
物件深拷貝
//物件深拷貝
function clone(p,s){
var s=s||{};//判斷s物件是否存在,不存在則定義s為空物件
for(var prop in p){
if(typeof p[prop]=='object'){
s[prop]=(p[prop].constructor===Array)?[]:{};//三元運算,將s[prop]初始化為陣列或者物件
clone(p[prop],s[prop])
}
else{
s[prop]=p[prop];
}
};
return s;//返回s物件
};
var obj2 = {};
clone(obj, obj2);
obj.name = "Lina";
console.log(obj, obj2); //結果 => {name: "Lina", age: 20} {name: "Sam", age: 20}
物件、陣列
物件:
- 採用直接量建立物件
var obj3 = {}; // √
var obj4 = new Object(); // ×
- 不要使用保留字作為鍵名,它們在 IE8 下不工作。
- 使用同義詞替換需要使用的保留字。
- 使用
.
來訪問物件的屬性。
例:
var obj = {name:'Sam',age:18};
console.log(obj.name)
- 當通過變數訪問屬性時使用中括號
[]
。
例:
var obj = {name:'Sam',age:18};
function getProp(prop) {
console.log(obj[prop])
}
getProp('name');
陣列
- 採用直接量建立陣列
var arr4 = []; // √
var arr5 = new Array(); // ×
- 向陣列增加元素時使用 Array#push 來替代直接賦值。
- 當你需要拷貝陣列時,使用 Array#slice。(陣列拷貝方法三)
- 使用 Array#slice 將類陣列物件轉換成陣列。
function trigger() {
var args = Array.prototype.slice.call(arguments);
...
}
字串
1.使用單引號''
包裹字串。
例:var name = 'hello'
2.程式化生成的字串用arr.join('')
生成。
例:
var arr6 = [1,2,3,4,5,6,7,8,9,0]
//字串*****************************************************************************************//
function inbox(arr) {
items = [];
for (i = 0; i < arr.length; i++) {
// use direct assignment in this case because we're micro-optimizing.
items[i] = '<li>' + arr[i] + '</li>';
}
console.log(items.join(''))
return '<ul>' + items.join('') + '</ul>';
}
var test = document.getElementById('test');
console.log(inbox(arr6))
test.innerHTML = inbox(arr6)
變數
- 使用 var 宣告每一個變數。最後再宣告未賦值的變數。、
例:
var items = [1,2,3,4,5,6,7,8,9]
var i;
- 在作用域頂部宣告變數。
- 變數宣告會提升至作用域頂部,但賦值不會。
- 匿名函式表示式會提升它們的變數名,但不會提升函式的賦值。
- 命名函式表示式會提升變數名,但不會提升函式名或函式體。
- 函式宣告提升它們的名字和函式體。
比較運算子和等號
- 優先使用 和
===
和!==
而不是==
和!=
. - 條件表示式例如 if 語句通過抽象方法 ToBoolean 強制計算它們的表示式並且總是遵守下面的規則:
物件 被計算為 true
Undefined 被計算為 false
Null 被計算為 false
布林值 被計算為 布林的值
數字 如果是 +0、-0 或 NaN 被計算為 false,否則為 true
字串 如果是空字串 ‘’ 被計算為 false,否則為 true
註釋
- 使用 /** … */ 作為多行註釋。包含描述、指定所有引數和返回值的型別和值。
- 使用 // 作為單行註釋。在評論物件上面另起一行使用單行註釋。在註釋前插入空行。
- 給註釋增加 FIXME 或 TODO 的字首可以幫助其他開發者快速瞭解這是一個需要複查的問題,或是給需要實現的功能提供一個解決方式。這將有別於常見的註釋,因為它們是可操作的。使用 FIXME – need to figure this out 或者 TODO – need to implement。
- 使用 // FIXME: 標註問題。
- 使用 // TODO: 標註問題的解決方式。