1. 程式人生 > >109_js筆記12_js物件的CRUD操作 + 深淺拷貝

109_js筆記12_js物件的CRUD操作 + 深淺拷貝

一,js物件的CRUD操作

  • 1,增(creat)
    • 動態給屬性賦值,例如 p1.score = 99;
  • 2,刪(delete)
    • 利用delete關鍵字,例如delete p1.name;
  • 3,改(update)
    • 動態修改屬性,例如 p1.age = 66;
  • 4,查(retrieve)
    • 利用物件方法hasOwnProperty,例如p1.hasOwnProperty("type")
  • // 1.定義建構函式
    	function Person(name, age) {
    		this.name = name;
    		this.age = age;
    	}
    	Person.prototype.type = "人";
    
    // 2.利用建構函式建立物件
    	var p1 = new Person("kaka", 33);
    	var p2 = new Person("zq", 18);
    // 3.動態增加屬性
    	p1.score = 99;
    	console.log(p1);
    	console.log(p2);
    // 4.刪除某個屬性
    	delete p1.name;
    	console.log(p1);
    	console.log(p2);
    // 5.修改某個屬性的值
    	p1.age = 66;
    	console.log(p1);
    	console.log(p2);
    // 6.查詢是否包含某個屬性
    	// in 會到原型物件裡面查詢
    	console.log("type" in p1);
    	// hasOwnProperty: 只在物件自身查詢
    	console.log(p1.hasOwnProperty("type"));
    結果:
    Person { name: 'kaka', age: 33, score: 99 }
    Person { name: 'zq', age: 18 }
    Person { age: 33, score: 99 }
    Person { name: 'zq', age: 18 }
    Person { age: 66, score: 99 }
    Person { name: 'zq', age: 18 }
    true
    false

     

 

二,js物件的淺拷貝

  1. 對於基本型別屬性是值拷貝,無論是深淺拷貝,都會複製一份
  2. 對於引用型別屬性是地址拷貝,拷貝的是引用型別的地址
  3. 淺拷貝修改引用型別屬性, 拷貝前拷貝後的物件都會受到影響
    1. //被拷貝物件
      var obj1 = {
      		name: "jj", // 基本型別屬性
      		age: 33,     // 基本型別屬性
      		dog: {       // 引用型別屬性
      			name: "wc",
      			age: 1,
      		}
      	};
      //拷貝輸出的新物件
      var obj2 = {};
      
      //淺拷貝方法:
      	function copy(o1, o2){
      		for(var key in o1){
      			o2[key] = o1[key];
      		}
      	}
      	copy(obj1, obj2);
      //輸出列印	
      	console.log(obj1);
      	console.log(obj2);
      
      // 修改基本型別屬性, 不會影響原有物件
      	obj2.name = "zs";
      	console.log(obj1.name);
      	console.log(obj2.name);
      
      // 修改引用型別屬性, 會影響原有物件
      	obj2.dog.name = "xq";
      	console.log(obj1.dog.name);
      	console.log(obj2.dog.name);
      
      結果:
      { name: 'jj', age: 33, dog: { name: 'wc', age: 1 } }
      { name: 'jj', age: 33, dog: { name: 'wc', age: 1 } }
      jj
      zs
      xq
      xq
      

三,js物件的深拷貝

  1. 對於基本型別屬性無論是深淺拷貝,都會複製一份
  2. 對於基本型別和引用型別屬性深拷貝,都只是值拷貝,會將引用型別複製一份
  3. 深拷貝修改引用型別屬性, 只會影響當前修改物件
  4. //被拷貝物件
    var obj1 = {
    			name: "jj", // 基本型別屬性
    			age: 33,     // 基本型別屬性
    			dog: {       // 引用型別屬性
    				name: "wc",
    				age: 1,
    			}
    		};
    		
    //拷貝輸出的新物件		
    var obj2 = {};
    
    //深拷貝方法
    function copy(o1, o2){
    	for(var key in o1){
    		var item = o1[key];
    		// 判斷當前屬性是否是引用型別
    		if(item instanceof Object){
    			// 建立一個新引用型別屬性
    			var o = {};
    			o2[key] = o;
    			// 進一步拷貝引用型別屬性
    			copy(item, o);
    		}
    		// 判斷當前屬性是否陣列
    		else if(item instanceof Array){
    			// 建立一個數組屬性
    			var arr = [];
    			o2[key] = arr;
    			// 進一步拷貝陣列屬性
    			copy(item, arr);
    		}
    		// 如果不是引用型別, 直接拷貝即可
    		else{
    			o2[key] = item;
    		}
    	}
    }
    copy(obj1, obj2);
    
    //輸出列印
    console.log(obj1);
    console.log(obj2);
    
    //修改基本型別屬性, 不會影響原有物件
    		obj2.name = "zs";
    		console.log(obj1.name);
    		console.log(obj2.name);
    
    // 修改引用型別屬性, 也不會影響原有物件
    		obj2.dog.name = "xq";
    		console.log(obj1.dog.name);
    		console.log(obj2.dog.name);
    
    結果:
    { name: 'jj', age: 33, dog: { name: 'wc', age: 1 } }
    { name: 'jj', age: 33, dog: { name: 'wc', age: 1 } }
    jj
    zs
    wc
    xq

     

 

  1.