1. 程式人生 > >Javascript 編碼規範(ES5)及其他知識點

Javascript 編碼規範(ES5)及其他知識點

資料型別

  1. string,number,boolean,null,undefined的存取直接作用於它的自身

例:

var foo = 1;
var bar = foo;
bar = 9;
console.log(foo, bar) //結果 => 1,9
  1. 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}

物件、陣列

物件:

  1. 採用直接量建立物件
var obj3 = {};  // √
var obj4 = new Object();  // ×
  1. 不要使用保留字作為鍵名,它們在 IE8 下不工作。
  2. 使用同義詞替換需要使用的保留字。
  3. 使用.來訪問物件的屬性。
    例:
var obj = {name:'Sam',age:18};
console.log(obj.name)
  1. 當通過變數訪問屬性時使用中括號 []
    例:
var obj = {name:'Sam',age:18};
function getProp(prop) {
	console.log(obj[prop])
}
getProp('name');

陣列

  1. 採用直接量建立陣列
var arr4 = [];  // √
var arr5 = new Array();  // ×
  1. 向陣列增加元素時使用 Array#push 來替代直接賦值。
  2. 當你需要拷貝陣列時,使用 Array#slice。(陣列拷貝方法三)
  3. 使用 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)

變數

  1. 使用 var 宣告每一個變數。最後再宣告未賦值的變數。、
    例:
var items = [1,2,3,4,5,6,7,8,9]
var i;
  1. 在作用域頂部宣告變數。
  2. 變數宣告會提升至作用域頂部,但賦值不會。
  3. 匿名函式表示式會提升它們的變數名,但不會提升函式的賦值。
  4. 命名函式表示式會提升變數名,但不會提升函式名或函式體。
  5. 函式宣告提升它們的名字和函式體。

比較運算子和等號

  1. 優先使用 和===!== 而不是 ==!=.
  2. 條件表示式例如 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: 標註問題的解決方式。