原生js中的常用方法的写法

Posted 2020-10-15 前端学堂

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(‘上海自来水来自海上‘));