【学习笔记一】- JS 类型识别 和 deepclone 深复制

写在前面：

本人自学前端不久，博客的【学习笔记】既不算原创也不算转载，都是自己通过各个网站、博客、书籍、视频课程等学习的笔记，以及做的一些测试。

下面的代码是在sublime text3上编辑在nodejs上运行过的。

/**js类型识别的四种方法：
 * 
 * 1.typeof
 * typeof可识别标准类型，但不能识别Null，不能识别除Function之外的具体对象类型
 * 识别String、Number、Boolean、Undefined、Object、Function类型
 */
console.log(typeof []);//object
 /** 
 * 2.Object.prototype.toString
 * 可以识别标准类型：
 * String、Number、Boolean、Undefined、Object、Null；
 * 可以识别内置对象类型:
 * Object、String、Number、Boolean、Function、Array、Date、RegExp、Error、Math、JSON、全局对象
 * 不能识别自定义对象类型 
 */
function type(obj){
	return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
	//call方法让obj使用Object.prototype.toString方法，
	//返回例如"object Number"
}
console.log(type(global));//global
/**
 * 3.constructor
 * 识别标准类型除Null、Undefined（它们无构造器）
 * 识别内置对象类型
 * 识别自定义对象类型
 */
console.log('123'.constructor);//[Function: String]
var a=123;
console.log(a.constructor);//[Function: Number]
console.log([].constructor==Array);//true
function Person(name){
	this.name=name;
}
console.log(new Person('ccc').constructor);//[Function: Person]
console.log(Person.constructor);//[Function: Function]
//获取最想构造函数名称
function getConstructorName(obj){
	return obj&&obj.constructor&&obj.constructor.toString().match(/function\s*([^(]*)/)[1];
}
console.log(getConstructorName([]));
/**
 * 4.instanceof
 * 识别内置对象类型
 * 能识别自定义对象类型
 * 
 * 不能识别原始类型：
 * String、Number、Boolean、Undefined、Null；
 */
console.log([] instanceof Array);//true
console.log('a' instanceof String);//false
console.log('---------------------------------------------------');

/*function fun(obj) {
　　　　var obj = obj || {};
		//if(obj === 0 || obj === "" || obj === false || obj === null || obj === undefined){obj = {};}
		//即，data不存在时obj为{}
}*/

//一维数组的深拷贝方法：slice、concat
/**
arrayObj.slice(start, end)
只有一个参数时从该位置一直复制到结尾
不改变原数组
if(start<0)
	start+=length;
if(end<0)
	end+=length;
if(end<start)
	不复制
 */

var array = ["One","Two","Three"];
var copyarray = array.slice();
copyarray[1] = "replace sth";
console.log(array);
//Export:[ 'One', 'Two', 'Three' ]
console.log(copyarray);
//Export:[ 'One', 'replace sth', 'Three' ]
console.log('---------------------------------------------------');
var array = ["One",["One","Two","Three"],"Three"];
var copyarray = array.slice();
copyarray[1][1]="replace sth";
console.log( array);
//Export:[ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ]
console.log(copyarray);
//Export:[ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ]
console.log('---------------------------------------------------');
/**
 * concat() 方法用于连接两个或多个数组,该方法不会改变现有的数组.
 */
var array = ["One","Two","Three"];
var copyarray = array.concat();
copyarray[1] = "replace sth";
console.log( array);
//Export:[ 'One', 'Two', 'Three' ]
console.log(copyarray);
//Export:[ 'One', 'replace sth', 'Three' ]
console.log('---------------------------------------------------');
var array = ["One",["One","Two","Three"],"Three"];
var copyarray = array.concat();
copyarray[1][1]="replace sth";
console.log( array);
//Export:[ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ]
console.log(copyarray);
//Export:[ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ]
console.log('---------------------------------------------------');

function type(obj){
	return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
function deepclone(data){
	var clone;
	if(type(data)==='array'){
		clone=[];
		for (var i = 0; i < data.length; i++) {
			clone[i]=deepclone(data[i]);
		}
	}else if(type(data)==='object'){
		clone={};
		for (var key in data) {
			clone[key]=deepclone(data[key]);
		}
	}else{
		clone=data;
	}
	return clone;
}

//测试
var a='a';
var b=deepclone(a);
console.log(a);//a
console.log(b);//a
a='b';
console.log(a);//b
console.log(b);//a
console.log('---------------------------------------------------');

var array = ["One",["One","Two","Three"],"Three"];
var copyarray = deepclone(array);
console.log(array);//[ 'One', [ 'One', 'Two', 'Three' ], 'Three' ]
console.log(copyarray);//[ 'One', [ 'One', 'Two', 'Three' ], 'Three' ]
copyarray[1][1]="replace sth";
console.log(array);//[ 'One', [ 'One', 'Two', 'Three' ], 'Three' ]
console.log(copyarray);//[ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ]
console.log('---------------------------------------------------');

var obj={a:1,b:'abc',c:true,d:["One",["One","Two","Three"],"Three"],e:{key:1,keykey:'string'}};
var copyobj=deepclone(obj);
console.log(obj);
/*{ a: 1,
  b: 'abc',
  c: true,
  d: [ 'One', [ 'One', 'Two', 'Three' ], 'Three' ],
  e: { key: 1, keykey: 'string' } }*/
console.log(copyobj);
/*{ a: 1,
  b: 'abc',
  c: true,
  d: [ 'One', [ 'One', 'Two', 'Three' ], 'Three' ],
  e: { key: 1, keykey: 'string' } }*/
obj.d[1][1]="replace sth";
console.log(obj);
/*{ a: 1,
  b: 'abc',
  c: true,
  d: [ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ],
  e: { key: 1, keykey: 'string' } }*/
console.log(copyobj);
/*{ a: 1,
  b: 'abc',
  c: true,
  d: [ 'One', [ 'One', 'Two', 'Three' ], 'Three' ],
  e: { key: 1, keykey: 'string' } }*/

  /**
 * 借助JSON全局对象
 * var newobj = JSON.parse(JSON.stringify(obj));
 * 深复制后构造函数变成Object
 */
var arr=["One",["One","Two","Three"],"Three"];
var newobj = JSON.parse(JSON.stringify(arr));
console.log(newobj.constructor);//[Function: Array]
console.log(arr.constructor);//[Function: Array]
newobj[1][1]='replace sth';
console.log(arr);//[ 'One', [ 'One', 'Two', 'Three' ], 'Three' ]
console.log(newobj);//[ 'One', [ 'One', 'replace sth', 'Three' ], 'Three' ]
console.log('---------------------------------------------------');

/**借助框架实现深复制
 * 1.Underscore —— _.clone()
 * 
 * 2.jQuery —— $.extend()
 * 深复制 JSON 对象
 * var newobj=$.extend(true, {}, obj);
 * 	<script type="text/javascript">
		var obj = {
		    a: 'a string',
		    b: { obj2: { key: 1 } },
		    c: [ 0 ,[10,11,12] , 2 ]
		};

		var shallow = $.extend({}, obj),
	    	deep = $.extend(true, {}, obj);

		if(shallow.b.obj2=== obj.b.obj2){document.write('shallow'); } 
		if(deep.c[1] === obj.c[1]){document.write('deep'); } 
		//shallow
	</script>
 *
 * 3.lodash —— _.clone() / _.cloneDeep()
 * _.clone(obj, true)等价于_.cloneDeep(obj)
 * var newobj = _.cloneDeep(obj);
 */