JavaScript中的经典题型（类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码）

JavaScript中的经典题型

一.JavaScript中的经典题型

1..如何判断一个数组和类数组？

首先要明白什么是类数组。
类数组：类数组是一个普通对象，他的原型是Object。而真实的数组是Array类型。
在JS中的所有对象都是继承自Object对象的，所以可以通过Object对象的原型

Object.prototype.toString.call()方法来判断是数组还是类数组

2.阐述一下CSS Sprites及其优点

CSS Sprites在国内很多人叫精灵图，是一种网页图片应用处理方式,它减少图片的字节 减少了网页的http请求，从而大大的提高了页面的性能解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

3.如今有一个ul,里面有十亿个li，要求点击li触发事件，弹出对应li的内容

假设有十亿个li标签的话，使用for循环肯定不现实，所以这题需要用到事件委托来实现。

//事件委托
var ul=document.getElementsByTagName('ul')[0];
      ul.onclick=function(e){
      var target=e.target||e.srcElement
      alert(target.innerText);
}

4.有字符串“aaabbbcccdddeefggaa”,转换成连续不重复的字符串eg：abcdefga

//字符串去重
        function show(str){
        var newstr="";
        var arr=str.split("");
        var one=arr[0];
        newstr=newstr+one;
        for(var i=1;i<arr.length;i++){
           if(arr[i]!=arr[i-1]){
            newstr+=arr[i]
           }
        }
        return newstr;
     }
     console.log(show("aaabbbcccdddeefggaa"));

简单的字符串去重

    function show(str){
        var arr="";
        for(var i=0;i<str.length;i++){
            if(arr.indexOf(str[i])==-1){  
              arr+=str[i];
            }
        }
        return arr;
    }
    console.log(show('aaabbbcccdddeefggaa'));
    

5.你了解原型链吗？请写出一种原型链实现继承的方式

js中每一个对象都拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性，原型对象也可拥有原型，并从中继承方法和属性，原型对象的原型也可以拥有原型，并从中继承方法和属性，最终构成一个原型链，当调用时，先在自身对象中查找，如果找不到就去原型中查找，如果还找不到，就去原型的原型中查找，一直到原型链的最末端，这种链式关系被称为原型链。
理解了原型链的原理这道题就很好解决。

    //原型链继承
    Object.prototype.add=function(){
        console.log('Hello Word');
    }
    var obj={};
    obj.add();

6.为一个数组数组去重 eg:var arr = [‘a’,’b’,’234’,’a’,‘b’,3,1,234];(要求，在原型链上编程)

        // 原型链去重
        Array.prototype.add=function(arr){
           var newarr=[];
           for(var i=0;i<arr.length;i++){
            // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                if(arr.indexOf(arr[i])==i){
                    newarr.push(arr[i])
                }
           }
           return newarr;
        }
        var arr1 = ['a','b','234','a','b',3,1,234];
        console.log(arr1.add(arr1));

也可以用ES6中的Set去重

        // 原型链去重  
        Array.prototype.add=function(obj){
            return Array.from(new Set(obj));
        }
       var arr1 = ['a','b','234','a','b',3,1,234];
       console.log(arr1.add(arr1));

简单的字符串去重方法

       function show(){
       var arr=['a','b','234','a','b',3,1,234];
       var arr1=[]; //定义一个空数组与原数组做比较
       for(var i=0;i<arr.length;i++){  //循环原数组
       //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
       if(arr1.indexOf(arr[i])==-1){  //如果有没有匹配得字符串就添加到arr1这个空数组
            arr1.push(arr[i]);
        }
       }
       console.log(arr1);
       }
       show();

简单的原型链去重

    var arr=['a','b','234','a','b',3,1,234,234];
    Array.prototype.add=function(str){  
        var arr1=[];
        for(var i=0;i<str.length;i++){
            if(arr1.indexOf(str[i])==-1){
                arr1.push(str[i]);
            }
        }
        return arr1;
    }
    console.log(arr.add(arr));

7.编写函数：获取url地址栏，要求将url地址栏中的参数部分格式化成对象

例如：http://www.baidu.com?name=jack&age=20{name:”jack”,age:”20”}

 function show(){
    var lo=location.search;
    // split() 方法用于把一个字符串分割成数组。
    //slice() 方法可提取字符串的某个部分，从1开始，一个值，返回剩余字符串，两个值，返回提取的字符串
    console.log(lo);               //?name=jack&age=20 
    var arr=lo.slice(1); 
    console.log(arr);              //name=jack&age=20 
    var arr1=arr.split("&");
    console.log(arr1);             //["name=jack", "age=20"]
    var arr2=arr1[0].split("=");  
    console.log(arr2);             //["name", "jack"] 
    var arr3=arr1[1].split("=");
    console.log(arr3);             //["age", "20"]
    var add=arr2.concat(arr3);     // 将两个数组合并成一个
    console.log(add);              //["name", "jack", "age", "20"]
    var obj={}    //创建一个对象
    obj[add[0]]=add[1];          
    obj[add[2]]=add[3];
    console.log(obj);              //{name: "jack", age: "20"}
 }
 show();

8.push()、pop()、shift()、unshift()分别是什么功能?

push()尾部添加，返回新长度
pop()尾部删除,返回这个值
shift()头部删除,返回这个值
unshift()头部添加,返回新长度

9.怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点
　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性

10.什么是闭包，如何使用它，为什么要使用它

外部函数通过特殊的方法(return)访问内部函数,简单的来讲闭包就是函数嵌套函数。使用闭包可以保持变量的唯一性，防止变量受到污染或变量提升。

11.原型链深克隆与浅克隆

浅克隆：

    // 浅克隆
    //数值克隆的表现
    var a="1";
    var b=a;
    b="2";
    console.log(a);// "1"
    console.log(b);// "2"
   //字符串克隆的表现
    var c="1";
    var d=c;
    d="2";
    console.log(c);// "1"
    console.log(d);// "2"
    //字符串克隆的表现
     var x=true;
     var y=x;
     y=false;
    console.log(x);// true
    console.log(y);// false

深度克隆：
1.JSON.parse() 方法与JSON.stringify()方法

    // 深克隆
    //JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
    //提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

    //JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，
    //如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性。
     function Add(name,age){
             this.name=name;
             this.age=age;
     }
     var a=new Add("张三",18);
     var b=JSON.parse(JSON.stringify(a));
     console.log(b.name,b.age);

2.更简单的方法

        var obj={
            name:'zhangsan',
            age:12
        }
        function kl(ob){
            var obj2={};
           for(var i in ob){
               obj2[i]=ob[i];
           }
           return obj2
        }
        var kl2=kl(obj);
        kl2.name="lisi"
        kl2.age=18;
        console.log(obj);
        console.log(kl2);

喜欢小编的可以关注点一点。

小编虽然不能陪你一生，但能让你的基础知识满满登登。