前端必会的js知识总结整理
1、晨曦。
2、js是一门什么样的语言及特点？
js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。
主要的目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。
（详细拓展：http://www.360doc.com/content/14/0317/11/10186276_361233415.shtml）
3、js的数据类型？
基本数据类型：String、boolean、Number、undefined、null
引用数据类型：Object、Array、Date、RegExp、Function
拓展：如何判断数组数据类型？
1、通过专有方法判断如：push(),pop(); //可自己给变量定义该方法，有时失效
2、 obj instanceof Array 返回值判断；
3、es5和jquery都有方法Array.isArray()。
4、toString.call(param) 判断；返回格式 [object Undefined] 5、obj.constructor === Function 返回值判断
4、获取所有的checkbox？
var domlist = document.getElementsByTagName("input");
var checkboxlist = [];
var len = domlist.length;
for (var i = 0; i < len; i++) {
if(domlist[i].type == "checkbox"){
checkboxlist.push(domlist[i])
}
}
//(for效率更高)在测试五百多个不同input中，while：for = 3~2ms：1~0ms，显然for效率更高
5、绑定事件的方式？
1、直接在dom里绑定：<div onclick="test()"></div>
2、在js中通过onclick绑定：xxx.onclick=test;
3、通过事件绑定：dom.addEventListener("click",test,boolean)
(拓展：js事件流模型？)
“事件冒泡”：事件由最具体的元素接收，然后逐级向上传播；
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体元素；
“dom事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡；
（附：事件流详解）
ie事件流：冒泡型事件：button->div->body
netscape事件流：捕获型事件：body->div->button
dom事件模型：body->div->button->button->div->body;
dom事件流同时支持两种事件模型：但是捕获事件先发生，从document对象开始，也在document对象结束
ie9以下不支持addEventListener/removeEventListener,采用attachEvent/detachEvent
(无关东东css：<!--[if lt IE 9]><![endif]-->)
（附：阻止事件传播）
w3c中，使用stopPropagation()方法阻止冒泡;阻止默认事件：preventDefault()；
ie中，cancelBubble = true阻止事件冒泡；阻止默认事件：window.event.returnValue = false;
6.什么是Ajax和JSON，它们的优缺点？
Ajax（Asynchronous Javascript And XML/异步的javascript和xml）。
优点：
可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量。
避免用户不断刷新或者跳转页面，提高用户体验。
缺点：
对搜索引擎不友好。
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON：json是一种轻量级的数据交换格式，ECMA（欧洲计算机制造商协会）的一个子集；
优点：轻量级，占用带宽小、易于人的阅读和编写，便于机器（js）解析，支持复合数据类型（数组，对象，字符串，数字），能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量。
缺点：相对xml通用性较差，数据可描述性较差；
（拓展：json与xml的区别？）
xml定义：可拓展标记语言，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的语言。xml是SGML（标准通用标记语言）的子集，非常适合web传输。
xml提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。
xml优点：
1、格式统一，符合标准；
2、容易与其他系统进行交互，数据共享比较方便
缺点：
1、xml文件格式文件庞大，格式复杂，传输占用更多带宽
2、服务器和客户端都需要花费大量代码来解析xml，服务器和客户端代码变得异常复杂和不容易维护。
3、客户端不同浏览器之间解析xml的方式不一致，需要重复编写很多代码。
4、服务器端和客户端解析xml花费更多资源和时间
与json的优缺点比较？
1、可读性、可拓展性都很出色，但是xml的编码难度更高。
2、json的解码难度几乎为0，而xml得考虑子父节点；
3、xml的通用性更广，json则广泛应用于前端。
4、json相对xml，数据体积更小；与js交互更方便；
5、json对数据的描述性比xml较差；
6、json的无论是传播还是解析速度远远快于xml；
7、什么情况会出现undefined？
当只声明变量，并未赋值初始化的时候这个变量的值就是undefined；
(拓展：解释原因？)
var a=null;
console.log(typeof a); // object
null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象。所以typeof返回object；
8、双等号的类型转换？
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
// alert(!![]) //true
// alert(![]) //false
// alert([] == 0) //true
// alert(false == 0) //true
分析：undefined与null 但不全等（===）
当为number与string时，会将string转换为number；
number和boolean时，会将boolean转换为number
number或string与Object，会将Object转换成number或string
（附：js中的数据类型转换？）
函数转换：parseInt()、parseFloat()、toString()
强类型转换：Boolean()、Number()、String()
弱类型转换：“==”、“-”、“+”、if（）
（拓展：for循环中的效率问题？）
1.for(var i=0;i<arr.length;i++)
2.for(var i in arr)
3.for(var i=0,len=arr.length;i<len;i++)
第三种效率更高！
在大数据下：
第三种方式比第一种执行速度快3~4倍；
至于第三种比第三种快100多倍开外（详细数据：http://www.111cn.net/wy/js-ajax/39368.htm）
9、基础算法？已知：var str="get-element-by-id",写一个函数转化成驼峰形式（你懂得）？
function Naizi(str){
var arr = str.split("-");
var target = "";
for(var i=0,len=arr.length;i<len;i++){
target+=arr[i].substr(0,1).toUpperCase()+arr[i].substr(1);
}
return target;
}
10、基础API？
数组：
var numberArray = [3,6,2,4,1,5];
倒序：numberArray.reverse();
降序：numberArray.sort(function(a-b){return b-a})
a.concat(b,c,d)
日期：
输出YYYY-MM-DD
function getYMD(){
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
function getDouble(str){
var str;
if(str < 10){
return str = "0"+str;
}else{
return str = str;
}
}
return y +"-"+getDouble(m)+"-"+getDouble(d);
}
（值得一提：date.getDay() 返回星期0~6 星期日~星期六）
11、正则？
var str = ”<tr><td>{$id}</td><td>{$name}</td></tr>”的{$id}替换成10，{$name}替换成Tony
var target = str.replace(/{\$id}/,"10").replace(/{\$name}/,"Tony");
(拓展:tirm方法实现)
var str = " sdasad ";
function trim(str){
return str.replace(/(^\s*)|(\s*$)/g,"");
}
(拓展：转义字符方法实现)
function escapeHTML(str){
return str.replace(/[<>"&]/g,function(match,key){
switch(match){
case '<':
return '\<';
break;
case '>':
return '\>';
break;
case '"':
return '\"';
break;
case '&':
return '\&';
break;
}
})
}
（拓展：正则构造函数var reg=new RegExp("xxx")与正则字面量形式var reg=//有什么不同？匹配邮箱？）
使用RegExp()构造函数的时候，不仅需要转义引号（“\”），并且还需要双反斜杠\\表示一个\。使用正则字面量形式效率更高；
邮箱匹配：
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]{2,3})$/;
12、短路表达式 || &&？
foo = foo || bar；
如果foo 为真 foo = foo； 否则 foo = bar；
|| 第一个为真则返回第一个，否则返回第二个；
&& 第一个为假则返回第一个，否则返回第二个；
作用：精简代码，不过可读性较低；
13、随机取10个10-100数？
function getNumArr(n){
var arr = [];
for(var i = 0;i <n;i++){
arr.push(parseInt(Math.random()*90+10))
}
return arr;
}
14、dom增删查改？
增：
document.createElement(tag);
document.createTextNode();
document.createDocumentFragment()
dom.appendChild(sondom);
dom.insertBefore(newdom,targetdom);
删：
document.removeChild();
改：
document.replaceChild();
查：
getElementById()
getElementsByTagName()
getElementsByName();
15、字符串操作？
var str = 'http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e';
//将GET参数按照键值对的形式输出json
function getGEt(str){
var dataStr = str.split("?")[1];
var result = {};
if(dataStr.indexOf("&") > 0){
var bigArr = dataStr.split("&");
for(var i = 0,len = bigArr.length;i<len;i++){
var smallArr = bigArr[i].split("=");
result[smallArr[0]] = smallArr[1];
}
}else{
var arr = dataStr.split("=");
result[arr[0]] = arr[1];
}
return result;
}
16、闭包的使用？
for(var i = 0,len=domlist.length;i<len;i++){
domlist[i].onclick = function(){
console.log(i);
}
}
都输出domlist.length；
onclick 是一个异步函数；当onclick执行的时候i此时变成了domlist.length；
解决：（闭包）
for(var i=0,len=domlist.length;i<len;i++){
domlist[i].onclick = (function(a){
return function(){
console.log(a)
}
})(i);
}
//也可以设置私有属性；
17、js中callee和caller？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的对象的正文；
（注：callee是arguments的属性，只有当函数被调用的时候才会生成arguments，未调用时为null，所以调用callee将会报错）
var result=[];
function fn(n){ //典型的斐波那契数列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
18、实现函数clone，包括Number、String、Object、Array、Boolean?
function clone(param){
var result;
switch(typeof param){
case "object":
if(param instanceof Array){
result = [];
for(var i=0,len=param.length;i<len;i++){
result.push(param[i]);
}
return result;
} else if(param instanceof Object){
result = {};
for(var key in param){
result[key] = param[key];
}
return result;
}else{
return result = param;
}
break;
default:
return result = param;
break;
}
}
19.老掉牙的数组去重？
var arr = [123,"1",123,12,312,3,123,"123",1,23,123,12,312,3,123,123,123,123,12] function gotU(arr){
var result = [];
var json = {};
for(var i = 0,len=arr.length;i<len;i++){
var temp = arr[i];
var type = typeof temp;
if(!json[temp]){
json[temp] = [type];
result.push(temp);
}else{
if(json[temp].indexOf(type) < 0){
json[temp].push(type);
result.push(temp);
}
}
}
return result;
}
20.提取对象属性与方法？
粗壮的旺财是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。
function Dog(){
this.name = "粗壮的旺财";
this.type = "cute";
this.animalkind = "dog";
}
Dog.prototype={
sound:function(){
alert("wow SB");
},
seeMaster:function(){
this.sound();
},
seeMasterBeingB:function(){
var bitches = 50;
for(var i=0;i<bitches;i++){
this.seeMaster();
}
}
}
小猪和粗壮的旺财一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。
function MadDog(){
this.name = "小猪";
}
MadDog.prototype = new Dog();
MadDog.prototype.foundSomeoneIsAGay=function(){
var self = this;
this.timer = setInterval(function(){
self.seeMaster();
},500)
}
21、编写一个js，输入指定类型选择器返回匹配的dom节点（id,class,tag），考虑浏览器兼容性和性能；
function select(str){
if(str){
var doms;
var result = [];
var first = str.charAt(0);
var other = str.substr(1);
if(first == "#"){
doms = document.getElementById(other);
result.push(doms);
return result;
}else if(first == "."){
if(document.getElementsByClassName){
doms = document.getElementsByClassName(other);
return getArr(doms);
}else{
doms = document.getElementsByTagName("*");
for(var i = 0,len = doms.length;i<len;i++){
if(hasClass(doms[i],other)){
result.push(doms[i])
}
}
return result;
}
}else{
doms = document.getElementsByTagName(str);
return getArr(doms);
}
}
}
function getArr(param){
var result = null;
try{
result = Array.prototype.slice.call(param,0) //非ie
}catch(e){
result = [];
for(var i=0,len=param.length;i<len;i++){
result.push(param[i]);
}
}
return result;
}
function hasClass(dom,classname){
var clas = dom.className;
var arr = [];
if(dom && clas){
arr = clas.split(" ");
for (var i = 0,len = arr.length; i < len; i++) {
if(arr[i] == classname) return true;
}
return false;
}
return false;
}
22、评价代码，给出意见。
if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
};
}else if(document.all){
addListener = function(el,type,listener){
el.attachEvent("on"+type,function(){
listener.apply(el);
});
}
}
不应在if和else语句中声明addListener函数，应该先声明；
不需使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
改进：
function addEvent(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,handler);
}else{
elem["on"+type] = handler;
}
}
(拓展：阻止默认事件与冒泡事件)
function preventEvent(e){
var e = e || window.event;
e.preventEvent || e.returnValue = false;
e.stopPropagation || e.cancelBubble = true;
}
23、String对象添加方法，例:addSpace("hello world") // -> 'h e l l o w o r l d';
String.prototype.addSpace = function() {
if(this.length>0){
var arr = this.split("");
var tempArr = [];
var target;
for(var i=0,len=arr.length;i<len;i++){
if(arr[i] != " "){
tempArr.push(arr[i]);
}
}
return target = tempArr.join(" ");
}
return this;
};
(附：函数声明与函数表达式的区别？)
在js中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁的，
解析器会率先读取函数声明，并使其在执行任何代码之前可用（也就是函数声明提升），
至于函数表达式要等到解析器执行到它所在的代码，才会真正解析执行。（只有变量名称提升）
24、定义一个方法代理console.log。
function log(){
console.log.apply(null,arguments);
}
(拓展：apply与call的区别？)
apply与call的作用相同，即调用一个对象的一个方法，改变该方法的this的指针。
在第二个参数：apply传入的是一个参数数组，而call传入的是离散型参数。
25、在js中什么是伪数组？如何转化成真数组？
伪数组：无法直接调用数组的方法，但是仍含有length属性。
getElementsByTagName/getElementsByClassName/childNodes/arguments 都是伪数组;
通过使用Array.prototype.slice.call(fakeArray)将伪数组转化为真数组；
（拓展：给log添加前缀？）
function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift("aa");
console.log.apply(null,args);
}
原文地址：http://www.qdfuns.com/notes/38026/5ef8849c800b10ee798e46d05fd12680.html
前端必会的js知识总结整理的更多相关文章
- 前端必用正则(js)
手机号 /^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/ 大写字母 /^[A- ...
- 前端开发必须知道的JS（二） 闭包及应用
http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html 在前端开发必须知道的JS(一) 原型和继承一文中说过下面写篇闭包,加之最近越 ...
- 前端开发必须知道的JS之闭包及应用
本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用 ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
- js知识学习图谱，新手必看
前端新手学习也不外乎就是Html css html5 css3 这是最基本的,学会这些仅仅可以说是会写布局,写网页,不算前端开发,还有最重要的js,jq要学习,我自己java后台转前端,现在复 ...
- (转)【推荐】初级.NET程序员，你必须知道的EF知识和经验
转自:http://www.cnblogs.com/zhaopei/p/5721789.html [推荐]初级.NET程序员,你必须知道的EF知识和经验 阅读目录 [本文已下咒.先顶后看,会涨 ...
- 前端开发者必备的Nginx知识
摘要: 最常用的Web服务器 -- Nginx 原文:前端开发者必备的Nginx知识 作者:ConardLi Fundebug经授权转载,版权归原作者所有. Nginx在应用程序中的作用 解决跨域 请 ...
- JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
随机推荐
- linux进程调度函数浅析（基于3.16-rc4）
众所周知,进程调度使用schedule()函数来完成,下面我们从分析该函数开始,代码如下(kernel/sched/core.c): asmlinkage __visible void __sched ...
- EasyMock
使用 EasyMock 更轻松地进行测试 窥探EasyMock(1)基础使用篇 窥探EasyMock(2)进阶使用篇
- poj1001 Exponentiation
Description Problems involving the computation of exact values of very large magnitude and precision ...
- Java8新特性 1——利用流和Lambda表达式操作集合
Java8中可以用简洁的代码来操作集合,比如List,Map,他们的实现ArrayList.以此来实现Java8的充分利用CPU的目标. 流和Lambda表达式都是Java8中的新特性.流可以实现对集 ...
- 第二百八十八天 how can I坚持
明天,就要回济南了.早上八点的票,去火车站还得一个半小时,六点就得起床啊,好早,忍了. 这两天又没法更新日志了.周一才能回来. 今天好忙,事情好杂. 其实不想请假. 算了,睡觉了,没什么可写的了.是没 ...
- 【现代程序设计】【homework-07】
C++11 中值得关注的几大变化 1.Lambda 表达式 Lambda表达式来源于函数式编程,说白就了就是在使用的地方定义函数,有的语言叫“闭包”,如果 lambda 函数没有传回值(例如 void ...
- jpa仓库接口
可以使用的仓库接口有: Repository: 是 Spring Data的一个核心接口,它不提供任何方法,开发者需要在自己定义的接口中声明需要的方法. CrudRepository: 继承Repos ...
- 斯特灵数 (Stirling数)
@维基百科 在组合数学,Stirling数可指两类数,都是由18世纪数学家James Stirling提出的. 第一类 s(4,2)=11 第一类Stirling数是有正负的,其绝对值是个元素的项目分 ...
- 苹果所有常用证书，appID,Provisioning Profiles配置说明及制作图文教程（精）
holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...
- matlab eps中文乱码的解决方法
直接存成eps总是乱码 最优解决方法是matlab print 保存成jpg,之后用adobe acrobat pro 打开jpg文件另存为eps