原生js中的常用方法的写法
1、js深度克隆的方法
//第一种 function deepClone(obj){ var str,newObj = obj instanceof Array? [] : {}; if(typeof obj !== 'object'){ return; }else if(window.json){ str = JSON.stringify(obj); newObj = JSON.parse(str); }else{ for(var i in obj){ newObj[i]=typeof obj[i]==='object'?deepClone(obj[i]):obj[i] } } return newObj; } //第二种 function deepClone(obj,newObj){ var newObj = newObj || {}; for(key in obj){ if(typeof obj[key] == 'object'){ newObj[key] = (obj[key].constructor === Array)?[]:{} deepClone(obj[key],newObj[key]); }else{ newObj[key] = obj[key] } } return newObj; }
2、js数组去重的方法
//第一种 function unique(ary){ var obj={}; for(var i=0;i<ary.length;i++){ var cur = ary[i]; if(obj[cur] == cur){ ary[i] = ary[ary.length-1]; ary.length--; i--; } obj[cur] = cur; } return ary; } console.log(unique([2,3,2,4,3,5,6,1,1])); //第二种 function unique(ary){ var arr1 = []; var obj = {}; for(var i=0;i<ary.length;i++){ if(!obj[ary[i]]){ arr1.push(ary[i]); obj[ary[i]] = 1; } } return arr1; }; var arr = [3,1,1,2,2,3,3,4,4]; console.log(unique(arr));
3、js判断对象是不是数组
方法一: instanceof instanceof 用于判断一个变量是否某个对象的实例,左边操作数是一个对象,右边操作数是一个函数对象或者函数构造器。原理是通过判断左操作数的对象的原型链上是否具有右操作数的构造函数的prototype属性。 a instanceof b?alert("true"):alert("false") //注意b值是你想要判断的那种数据类型,不是一个字符串,比如Array。 举一个例子: [javascript] view plain copy var arr=[]; console.log(arr instanceof Array) //返回true 方法二之 constructor 在W3C定义中的定义:constructor 属性返回对创建此对象的数组函数的引用,就是返回对象相对应的构造函数。从定义上来说跟instanceof不太一致,但效果都是一样的。 那么判断各种类型的方法: [javascript] view plain copy console.log([].constructor == Array); console.log({}.constructor == Object); console.log("string".constructor == String); console.log((123).constructor == Number); console.log(true.constructor == Boolean); 注意: 使用instaceof和construcor,被判断的array必须是在当前页面声明的!比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array ==object.constructor;会返回false; 原因: 1、array属于引用型数据,在传递过程中,仅仅是引用地址的传递。 2、每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array。 第三种:判断对象原型类型 function isAry(obj){ return Object.prototype.toString.call(obj) === "[object Array]" }
4、自定义Object.create()——手写
Object.create=function(father,props){ console.log("我的create"); /*使用setPrototypeOf方法 var o=Object();//1. 创建空对象 Object.setPrototypeOf(o,father);//2. 继承father */ /*不使用setPrototypeOf方法 function Constructor(){} Constructor.prototype=father; var o=new Constructor(); */ Object.defineProperties(o,props);//3. 定义新属性 return o; }
5、js判断是否是回文的方法
function isPalindrome(str){ str +=""; for(var i=0,j=str.length-1;i<j;i++,j--){ if(str.charAt(i) !== str.charAt(j)){ return false; } } return true; } console.log(isPalindrome('上海自来水来自海上'));
6、js类数组(arguments,dom元素集合)转化为数组
let arrayLike = { '0' : 'a', '1' : 'b', '2' : 'c', length : 3 }; 1、Array.prototype.slice.call() 利用数组slice的方法实现 let arr1 = Array.prototype.slice.call(arrayLike); 2、[].slice.call(); let arr2 = [].slice.call(arrayLike); 3、Array.from() ES6新增的转换数组的方法 let arr3 = Array.from(arrayLike); 4、扩展运算符(…) ES6中新增的方法,扩展运算符(…)也可以将某些数据结构转为数组 let arr4 = [...arrayLike]