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;
}
JS编程题练习的更多相关文章
- JS编程题
1.计算给定数组 arr 中所有元素的总和 (数组中的元素均为 Number 类型) function sum(arr) { var sum=0; for (var i=arr.length-1; i ...
- Js 编程题汇总
Coding题: 1. 预测以下代码的输出结果: var Foo = function(a) { function bar() { console.log(a); }; this.baz = func ...
- 五四青年节,今天要学习。汇总5道难度不高但可能遇到的JS手写编程题
壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...
- 去哪儿网2017校招在线笔试(前端工程师)编程题及JavaScript代码
编程题很简单.整个试卷结构为: 一.问答题: 对前端的理解,了解哪些框架库? 二.在线编程题:身份证分组 如下第一道:身份证分组 三.在线编程题:身份证分组.统计字符.酒店价格(三选二) 如下第二三四 ...
- 算法是什么我记不住,But i do it my way. 解一道滴滴出行秋招编程题。
只因在今日头条刷到一篇文章,我就这样伤害我自己,手贱. 刷头条看到一篇文章写的滴滴出行2017秋招编程题,后来发现原文在这里http://www.cnblogs.com/SHERO-Vae/p/588 ...
- C算法编程题系列
我的编程开始(C) C算法编程题(一)扑克牌发牌 C算法编程题(二)正螺旋 C算法编程题(三)画表格 C算法编程题(四)上三角 C算法编程题(五)“E”的变换 C算法编程题(六)串的处理 C算法编程题 ...
- C算法编程题(七)购物
前言 上一篇<C算法编程题(六)串的处理> 有些朋友看过我写的这个算法编程题系列,都说你写的不是什么算法,也不是什么C++,大家也给我提出用一些C++特性去实现问题更方便些,在这里谢谢大家 ...
- C算法编程题(六)串的处理
前言 上一篇<C算法编程题(五)“E”的变换> 连续写了几篇有关图形输出的编程题,今天说下有关字符串的处理. 程序描述 在实际的开发工作中,对字符串的处理是最常见的编程任务.本题目即是要求 ...
- C算法编程题(五)“E”的变换
前言 上一篇<C算法编程题(四)上三角> 插几句话,说说最近自己的状态,人家都说程序员经常失眠什么的,但是这几个月来,我从没有失眠过,当然是过了分手那段时期.每天的工作很忙,一个任务接一个 ...
随机推荐
- openvas开放式漏洞评估系统
OpenVAS是开放式漏洞评估系统,也可以说它是一个包含着相关工具的网络扫描器.其核心部件是一个服务器,包括一套网络漏洞测试程序,可以检测远程系统和应用程序中的安全问题. 用户需要一种自动测试的方法, ...
- Android内存优化相关
Android的内存管理方式 Android系统内存分配与回收方式 一个APP通常就是一个进程对应一个虚拟机 GC只在Heap剩余空间不够时才去垃圾回收 GC触发时,所有线程都会被暂停!!! APP内 ...
- 用Delphi改变图片的像素,即大小
我给你讲一种非常简单的方法: 第一步:在窗体上放上image1和image2两个图片控件.再放一个Button按钮控件. 第二步:在image1的Picture属性中载入一张JPG或者BMP图片.而i ...
- Hibernate 再接触 关系映射 一对一单向外键关联
对象之间的关系 数据库之间的关系只有外键 注意说关系的时候一定要反面也要说通 CRUD 数据库之间设计 主键关联 单向的外键关联 中间表 一对一单向外键关联 Husband.java package ...
- Python unindent dese not match any out indentation level 问题
今天写个小程序出现 “unindent dese not match any out indentation level”. 一直没找到原因,经过仔细对比发现实际上是缩进的问题. 上下两行的缩进用的 ...
- Applese的QQ群-(拓扑+二分)
链接:https://ac.nowcoder.com/acm/contest/330/F来源:牛客网 题目描述 Applese 有一个QQ群.在这个群中,大家互相请教问题.如 b 向 a 请教过问题, ...
- Linux安装face_recgnition
Ubuntu 3:apt-get install python3.6-dev 4:pip3 install face_recgnition 5: pip3 install opencv-python ...
- 线上问题!----------org.apache.catalina.connector.ClientAbortException: java.io.IOException: Broken pipe
1.问题出现 昨晚项目在上线的时候因为推广的原因,新增的大量请求.在八点的时候. org.apache.catalina.connector.ClientAbortException: java.io ...
- ssh架构之hibernate(四)二级缓存
二级缓存使用步骤: 1.拷贝jar包 2.配置Hibernate.cfg.xml文件 a.#开启二级缓存 hibernate.cache.use_second_level_cache=true b.# ...
- IDEA配置 gradle
下载解压自己需要的gradle版本:https://gradle.org/releases/(免安装) 配置环境变量 打开命令窗口,输入 gradle -v IDEA配置gradle:file-&g ...