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.srcElementalert(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);// trueconsole.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);
喜欢小编的可以关注点一点。
小编虽然不能陪你一生,但能让你的基础知识满满登登。
JavaScript中的经典题型(类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码)相关推荐
- JavaScript中利用for循环遍历数组
这篇文章主要为大家详细介绍了JavaScript中利用for循环遍历数组,最好不要使用for in遍历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先看一段代码 1 2 3 4 5 6 7 8 ...
- JavaScript 的怪癖 8:“类数组对象”
原文: JavaScript quirk 8 array-like objects 译者: Malcolm Yu 此文是 javascript 的 12 个怪癖(quirks) 系列的第八篇. Jav ...
- JavaScript中十种一步拷贝数组的方法
JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是 ...
- JavaScript中十个一步拷贝数组的方法
JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是 ...
- JavaScript 中 15 种常见的数组操作
本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习 ...
- javascript --- 类、class、事件委托的编程风格
类风格: // 父类 function Widget(width, height) {this.width = width || 50;this.height = height || 50;this. ...
- html中sprite标签,网页切图 CSS Sprites(CSS精灵)介绍和图文使用教程
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- html中精灵图的使用方法,css sprites(精灵图)如何使用?
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
最新文章
- 5. 编程规范和编程安全指南--JavaScript
- Access中出现改变字段“自己主动编号”类型,不能再改回来!(已解决)
- 一个毕业生对大学爱情和奋斗的思考!
- 根据数据建立分析模型是什么意思
- PowerBI 报表服务器刷新失败自动重刷并邮件通知
- 通过FD耗尽实验谈谈使用HttpClient的正确姿势
- Silverlight 5 Beta新特性[5]隐式模板支持
- Windows平台下使用Dokan实现文件系统的开发
- python端口转发_Python实现TCP/IP协议下的端口转发及重定向示例
- Cookie和Session的详细介绍和使用规范
- 软件学报 流程 期刊投稿记录 状态变更 时间
- Contains Duplicate 包含重复值
- JSP学习——EL表达式和JSTL学习小结
- 无刷直流电动机及其控制
- Android自定义View、ViewGroup
- 服务器排队系统怎么做,多服务器排队系统的平均排队时间的近似分析
- 《通天秘笈》学习笔记
- 2018——广东工业大学校赛题解
- 【华为提前批】笔试 测评 面试 全流程(结构与材料工程师)
- vue实现带样式的textarea输入框,contenteditable属性应用
热门文章
- vue3+ts实现视频根据时间轴截取,并可以通过传入截取起止时间进行当前剪辑的回显
- 第九届大唐杯省赛知识点梳理-5G无线技术(35%)
- input type=“radio“默认按钮选中状态
- 量子计算机分解时间,量子计算机如何分解两个质数乘积
- MyBatis-plus拦截器
- windows电脑无线投屏到小米电视
- 如何分发大文件、大文件断点续传解决方案
- STM32 串口的使用
- 激活函数的作用及选择
- 阿ken的HTML、CSS的学习笔记_浮动与定位(笔记六)