JS编程题练习

JS编程题练习

1. 两个数组合并成一个数组排序返回

先依次比较两个数组，按照小的就传入新的数组。当这次比较完之后可能有一个数组的长度很长，留下一些数组，然后在新数组的末尾插入即可。

functiongetRes(arr1, arr2){
   var len1 = arr1.length,
       len2 = arr2.length,
       i = 0,
       j = 0,
       k = 0,
       res = new Array(len1+len2);
  
       while(i < len1 && j <len2){
res[k++] = arr[(arr[i] > arr[j]) ? j++ : i++];
}
While(i < len1)   res[k++]= arr1[i++];
While(j < len2)   res[k++]= arr2[j++];
Return res;
}

2. 如何取出一个数组里的图片并按顺序显示出来

function loadImage(imgList,callback){
    if(!$.isArray(imgList) || !$.isFunction(callback)) return ;
    var imageData = [];
    $.each(imgList, function(i,src){
        var img = new Image() ;
        img.onload = function(){
            $(imageData.shift()).appendTo("body") ;
            if(!imageData.length){
                callback() ;
                return ;
            }
            this.onload = null ;
        };
        img.src= src ;
        imageData.push(img) ;
    });
}

3. 在一个UI里有10个li，实现点击对应的li，输出对应的下标

var lis = querySelectorAll('li')
for(var i=0;i<10;i++){
   lis[i].onclick = (function(a) {
      return function() {
       alert(a)
    }
  })(i)
}   

4. 编程实现输出一个数组中第N大的数据

5. 写一个组合继承

var Super = function(name){
    this.name = name;
}
Super.prototype.func1 = function() { console.log('func1'); }
var Sub = function(name,age) {
    Super.call(this, name);
    this.age = age;
}
Sub.prototype = new Super();

6. 深拷贝方案有哪些，手写一个深拷贝

var clone = function(v) {
    var o = v.constructor === Array ? [] : {};
    for (var i in v) {
        o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
    }
    return o;
}

7. 图片预加载和懒加载？

• 预加载

function loadImage(url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 防止IE6不执行onload BUG
        callback.call(img);
        return;
    }
    img.onload = function () {
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

• 懒加载:当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。

var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片
loadImg(aImages);
window.onscroll = function() { //滚动条滚动触发
    loadImg(aImages);
};
//getBoundingClientRect 是图片懒加载的核心
function loadImg(arr) {
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
            arr[i].isLoad = true; //图片显示标志
            (function(i) {
                setTimeout(function() {
                    if(arr[i].dataset) { //兼容不支持data的浏览器
                        aftLoadImg(arr[i], arr[i].dataset.imgurl);
                    } else {
                        aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
                    }
                    arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
                }, 500)
            })(i);
        }
    }
}

function aftLoadImg(obj, url) {
    var oImg = new Image();
    oImg.onload = function() {
        obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
    }
    oImg.src = url; //oImg对象先下载该图像
}

8. 将url的查询参数解析成字典对象

function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);              
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}
getQueryObject("http://www.cnblogs.com/leee/p/4456840.html?name=1&dd=ddd**")
Object {name: "1", dd: "ddd**"}

9. 实现一个once函数

function test () {console.log('test')}
 
var once = function (fn) {
  var isFirst = true;
  return function () {
    if (isFirst) {
      isFirst = !isFirst;
      fn();
    }
  };
};
 
var b = once(test);
b(); // 'test'
b(); // nothing

10. 生成10个20-50之间的随机数，存在数组中，常见排序方法，数组乱序方法

var arr = [];
for(var i = 0;i<10;i++){
    var num = Math.random()*30 + 20;
    num = parseInt(num, 10);
    arr.push(num);
}

arr.sort(function(a,b){
    return 0.5 - Math.random();
})

11. 冒泡排序、快速排序、去重、查找字符串最多值

• 冒泡排序

var bubbleSort = function(arr) {
   for (var i = 0; i < arr.length-1; i++) {
     for (var j = i+1; j < arr.length; j++) {
       if (arr[i]>arr[j]) {
         var temp = arr[i];
         arr[i] = arr[j];
         arr[j] = temp;
       }
     }
   }
   return arr;
};

• 快速排序

//“快速排序”的思想很简单，整个排序过程只需要三步：
//（1）在数据集之中，找一个基准点
//（2）建立两个数组，分别存储左边和右边的数组
//（3）利用递归进行下次比较
var quickSort = function(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    var len = arr.length;
    var midIndex = Math.floor(len/2);
    var mid = arr.splice(midIndex,1);
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < mid) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    return quickSort(left).concat(mid,quickSort(right))
}

• 去重

var distinct = function(arr) {
   var map = {};
   var result = [];
   for (var i = 0; i < arr.length; i++) {
      if (!map[arr[i]]) {
        map[arr[i]] = true;
        result.push(arr[i]);
      }
   }
   return result;
}

• 查找字符串中最多的值

var search = function(str) {
  var json = {};
  var max = 0;
  var char;
  for (var i = 0; i < str.length; i++) {
    if (!json[str[i]]) {
      json[str[i]]=1;
    } else {
      json[str[i]]++;
    }
  }
  console.log(json);
  for(var i in json){
        if(json[i]>max){
                max = json[i];
                char = i;
        }
}
  console.log(max, char);
}

12. 浅克隆和深度克隆

• 浅克隆

function extendCopy(p) {
　　　　var c = {};
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　}
　　　　c.uber = p;
　　　　return c;
}

• 深度克隆

var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}

转载于:https://www.cnblogs.com/luoyu113/p/8680697.html