JS基础笔记（面试笔试有用）
2016-11-28 00:00
302 查看
摘要: JS笔试面试
【if判断‘=’和‘==’问题】千万记着以后都写双等于去判断
1、if( i = 0)和if( i == 0)
第一个是赋值操作判断语句(这样写容易进入死循环除非是true和false的情况) 第二个才是正常情况
【for循环的】
1、先声明变量 后判断终止条件 再执行括号内容 最后++i
2、对于for循环 i++和++i都可以使用，++i的内存应用效率更高，在转化成汇编语言的时候，会少开辟一个变量
【字符相加和相减的类型变化】
1、5 + '8' 和 ‘5’+‘8’打印结果为58(最终都转换为string类型) 5 + 8 =13 num 类型
2、‘8’ - 5 和 ‘8’ - ‘5’ 和 8 - 5 打印结果都为3（最终都转换为num类型）
3、 ‘asd’ - ‘zcx’ 打印结果未NaN(最终结果为num类型)
【释放内存和销毁变量】
1、函数调用完后，立即销毁函数内的局部变量
【style和script的位置】
1、style样式一般写在<head></head>里面，但实际上可以写在body里面或者其他位置，但这就会涉及到浏览器渲染顺序问题，style标签写在body里
CSS会重新渲染一次页面，占用一定时间，如果网页篇幅少的话感觉不出来，如果篇幅多（大量HTML）会有一定的影响，所以大页面中不建议将style
写进body
（就像一些电商网站，有部分CSS写在body里面，这是为了方便修改源代码，否则你还得去翻CSS比如网站左侧、右侧的广告模块，很多页面都
要加入这个广告，所以他就把广告这一块的html写到一个文件里，然后在加载过来。所以css也和他写在一起。）
【淘宝搜索框 oninput&&onpropertychange】
1、 打字label文字就消失，清空文字就显示原本的label文字
window.onload = function(){
function $(id){return document.getElementById(id);}
//oninput 大部分浏览器支持 检测用户表单输入内容
//onpropertychange ie678 检测用户表单输入内容
$("txt").oninput = $("txt").onpropertychange = function(){
if(this.value == " ")
{
$("message").style.display = "block";
}
else
{
$("message").style.display = "none";
}
}
}
2、<input type="text" placeholder="必败的国际大牌"> 同样得到上面的效果 placeholder是H5 input的新属性
这2种写法避免多重判断光标位置，是否打字等，
【算法、关系、逻辑运算符的关系】
1、逻辑运算符（!,&&,||）与操作：eg var result=true&&3 //3
var result=1&&3 //3
var result=false&&3//false
var result=""&&3 //"" (前面根据booler类型决定 true就取最后一个true的值 false就取false的值)
或操作：如果第一个值为真则结束后面的判断 （true就取第一个true的值 false就取最后一个false的值)
2、优先级----------------算术运算符》关系运算符》逻辑运算符
运算符顺序
1 ()
2 !、-、++、-- (-10) 负号 正号
3 *、/、%
4 +、- 10-5
5 <、<=、<、>=
6 ==、!=、===、!==、
7 &&
8 ||
9?:
10 =、+=、-=、*=、/=、%= 赋值
【window.getComputedStyle("元素", "伪类")[attr]】（伪类位置默认为null）
1、获取一个元素的属性集合
用法：getComputeStyle(element,null).width
优点：解决obj,style[attr]只能去行内样式的缺陷
缺点：因为要得到全部属性集合才能取想要的值，所以是非常耗内存的操作
【eval】（一般不用，以防面试会问）
1、eval方法是开启程序解析器的入口，对于js程序来说，当程序运行的时候，会开启一次程序解析器，会解析对应的代码，当我们
使用eval函数的时候会再次开启程序解析器，会解析eval中的内容
2、可以用来让浏览器自己识别简单的算法运算并得出结果
3、eval原理 去掉字符串的冒号，变成非string类型
【JS的数组和别的语言数组最大区别】
1、JS同一个数组能同时存放不同的数据类型，别的语言只能存贮相同类型的数据类型
【全选与反选得出的取反思想】
1、
btns[1].onclick = function () {
for(var i =0;i <inputs.length;i ++){
//左边的设置值，右边的是取值
inputs[i].checked = !inputs[i].checked;
}
}
这种方法一般是控制dom元素的属性值，！这里是关键，因为一般属性判断只有2个值true 和 false，用这种方法会比较简洁;
【window.location.href】
1、页面跳转方法
【定时器的本质】
1、Interval定时器：在外设置1s间隔循环一次，如果里面的程序需要2s才能运行完毕，那么最终时间2s
（一个定时器，外面设置间隔时间，里面也有执行时间，最终时间按长的时间计算）
2、TimeOut定时器：间隔时间+程序执行时间 = 最终时间；
这里涉及队列问题，有异步的思想在里面，原理是定时器的运作会与定时器里面的程序同时启动，如定时器间隔1s运行1次，里面程序2秒才能执行完程序，那么定时器会与里面程序同时执行（异步）当定时器1s过完后，必须要等待里面程序执行完毕才能执行下一次定时器循环，而这里由于定时器的1s已经完成，所以下一次循环会立刻开启
3、函数声明放在定时器外面，能提高效率，避免每一次定时器循环都声明变量开辟新的内存，这样会耗用性能
【元素的类型判断nodeType】
1、nodeType = 1 为元素节点
2、nodeType = 2 为属性节点
3、nodeType = 3 为文本节点
4、用法****************** （可以在循环内判断nodeType类型去添加不同节点类型）
【array.srot()】（面试可能会问）
1、sort（）原理是通过ascII编码顺序去排列，是按照数组的值的首字母或者首位数字去进行由大到小排列，所以是不精准的
如果需要按顺序由大到小或者小到大完整排列，必须在sort()括号里添加一个参数去判断比较a,b值大小，
************* 详情查看W3C
【document.body】
1、如果在用 document.body.appendChild(); 生成的元素会插在<script></script>的后边
(原因是浏览器解析的时候会把<script></script>标签放到body内)
【innerHTML和value】
1、获取文本，<input>和<textarea> 必须用.value
【offsetLeft的位置】
1、offsetLeft是相对于有定位(无论相对定位还是绝对定位)的父盒子(offsetParent) 没有就找body去找位置
【json的一些注意事项】
1、json是无序的，不能用下标去表示
2、访问里面的值，可以用点语法，也可以用[]
如果用json['key'] 那么json里面的键值对的键可以用引号也可以不用引号都能获取
如果用json.key 怎么取值都能获取,但不能写成json.'key';
3、反正想着获取的key值 是否是字符串就可以选择相对应的方法
【抽取工具类的原因】（面试）
1、提高代码扩展性，可以举 12.7最后一个例子 json----myfn的例子去解释 （是一个由获取id tagname 到 for循环的抽取例子）
这个封装的each方法，只是作了声明 和 调用 ，所以赋值在调用each的时候才真正完成一个函数的调用
【右键事件】
1、document.oncontextmenu = function(e){} document是最大的事件源
e是事件源 兼容ie的方法 var e = e || event;
2、return false;能清空默认右键事件并且不影响自定义事件
【e.currentTarget】
1、用来获取当前的事件源是谁 类似于this
【for循环的另一种写法】（思想一致）（遍历最里层盒子到页面边的距离）
1、 var box2 = document.getElementsByTagName('div')[2];
var sum = 0;
for( var i = box2; i.offsetParent; i = i.offsetParent){
sum += i.offsetLeft + i.offsetParent.clientLeft;
}
console.log(sum);
【offset和client前缀】
1、offsetWidth,offsetHeight 是 content + padding + border 的距离
************************ document.body.offsetHeight 获取标签高度
offsetLeft,offsetTop 是到最近的有定位的父级的距离（不包含该父级的边框）
2、clientWidth,clientHeight 是 content + padding 的距离
********************* document.body.clientHeight 获取页面视口高度（与上面不一样）
clientLeft,clientTop 是该元素border的厚度
3、parentNode和offsetParent parentNode是找父盒子（最深找到HTML标签） offsetParent是找有定位的父盒子（最深只找到body标签）
【获取屏幕分辨率（就是显示屏的）】
1、window.screen.width / window.screen.height
【闭包的原理】
1、闭包的作用:延长局部变量的生命周期 （同时，弊端就会大量占用内存）
2、需求1:想要在函数外面（另外一个函数中）访问某一个函数内部的局部变量
【for循环内部的一些原理】
1、在for循环遍历按钮时，如果要在按钮输出变量i，会得到最后的i值，这是因为按钮、定时器等都是延时操作，只要有延时操作最终输出的变量都是i值，
因为在按钮点击或者触发定时器的时候外层的for循环已经完成。（基本我接触到的里面任何函数操作都是延时操作,除了闭包)
eg: var div = document.getElementsByTagName('div');
for( var i = 0; i < div.length; ++i){
(function(a){
div[i].onmouseover = function(){
console.log(a);
}
})(i)
}
******************这里闭包里面的div[i] 为什么能获取i的值，就是因为外面的闭包不是延时操作，所以可以遍历所有的div;
【btn.onclick = function(){}】
1、为什么这里的匿名函数funtion(){} 不能传入普通参数进行操作，是因为这里的参数是代表前面btn的onclick事件源，
btn.onclick = function(a){
console.log(a); //返回ClickEvent{} （代表事件源）
}
btn.onclick 等于号后面是一个函数体，要有click出发才会执行，所有不应该有小括号立即调用，所以也不存在有普通参数传递的原因，但事件参数a会一直存在
【字符操作】
1、（获取数字） indexOf('string') 括号里放获取位置的字符 从左向右顺序，没有该字符就返回-1；
else:(lastIndexOF('strinig')) 从右向左找，但返回的数字也是从左向右
2、（获取字符） charAt() 括号里放对应字符的位置去获取相应字符
3、 charCodeAt() 去对应字符的Unicode编码 普通编码‘0-127编号’ 中文的编码是大于127 而且中文占2个字符的位置
**********Unicode和askcII
【ClientY和PageY（不兼容IE）】
1、e.ClientY 只能获取视觉上的页面顶部
2、e.PageY 获取页面最顶部，不管是否有滚动条
【for里面定义的变量是全局变量】
1、for里面定义的变量是全局变量
2、var a = 1;
var a = 2; //第二个var被自动忽略
console.log(a); //2
********************************JS容错率很高，当检测到第一个var a的时候会向内存开辟一个空间，后边的重复声明a都会自动忽略var
这是引擎处理程序问题，要了解要自己百度
【透明度兼容】
1、opacity: 0.4; W3C浏览器
2、filter: alpha(opacity:40); 兼容IE
【if判断‘=’和‘==’问题】千万记着以后都写双等于去判断
1、if( i = 0)和if( i == 0)
第一个是赋值操作判断语句(这样写容易进入死循环除非是true和false的情况) 第二个才是正常情况
【for循环的】
1、先声明变量 后判断终止条件 再执行括号内容 最后++i
2、对于for循环 i++和++i都可以使用，++i的内存应用效率更高，在转化成汇编语言的时候，会少开辟一个变量
【字符相加和相减的类型变化】
1、5 + '8' 和 ‘5’+‘8’打印结果为58(最终都转换为string类型) 5 + 8 =13 num 类型
2、‘8’ - 5 和 ‘8’ - ‘5’ 和 8 - 5 打印结果都为3（最终都转换为num类型）
3、 ‘asd’ - ‘zcx’ 打印结果未NaN(最终结果为num类型)
【释放内存和销毁变量】
1、函数调用完后，立即销毁函数内的局部变量
【style和script的位置】
1、style样式一般写在<head></head>里面，但实际上可以写在body里面或者其他位置，但这就会涉及到浏览器渲染顺序问题，style标签写在body里
CSS会重新渲染一次页面，占用一定时间，如果网页篇幅少的话感觉不出来，如果篇幅多（大量HTML）会有一定的影响，所以大页面中不建议将style
写进body
（就像一些电商网站，有部分CSS写在body里面，这是为了方便修改源代码，否则你还得去翻CSS比如网站左侧、右侧的广告模块，很多页面都
要加入这个广告，所以他就把广告这一块的html写到一个文件里，然后在加载过来。所以css也和他写在一起。）
【淘宝搜索框 oninput&&onpropertychange】
1、 打字label文字就消失，清空文字就显示原本的label文字
window.onload = function(){
function $(id){return document.getElementById(id);}
//oninput 大部分浏览器支持 检测用户表单输入内容
//onpropertychange ie678 检测用户表单输入内容
$("txt").oninput = $("txt").onpropertychange = function(){
if(this.value == " ")
{
$("message").style.display = "block";
}
else
{
$("message").style.display = "none";
}
}
}
2、<input type="text" placeholder="必败的国际大牌"> 同样得到上面的效果 placeholder是H5 input的新属性
这2种写法避免多重判断光标位置，是否打字等，
【算法、关系、逻辑运算符的关系】
1、逻辑运算符（!,&&,||）与操作：eg var result=true&&3 //3
var result=1&&3 //3
var result=false&&3//false
var result=""&&3 //"" (前面根据booler类型决定 true就取最后一个true的值 false就取false的值)
或操作：如果第一个值为真则结束后面的判断 （true就取第一个true的值 false就取最后一个false的值)
2、优先级----------------算术运算符》关系运算符》逻辑运算符
运算符顺序
1 ()
2 !、-、++、-- (-10) 负号 正号
3 *、/、%
4 +、- 10-5
5 <、<=、<、>=
6 ==、!=、===、!==、
7 &&
8 ||
9?:
10 =、+=、-=、*=、/=、%= 赋值
【window.getComputedStyle("元素", "伪类")[attr]】（伪类位置默认为null）
1、获取一个元素的属性集合
用法：getComputeStyle(element,null).width
优点：解决obj,style[attr]只能去行内样式的缺陷
缺点：因为要得到全部属性集合才能取想要的值，所以是非常耗内存的操作
【eval】（一般不用，以防面试会问）
1、eval方法是开启程序解析器的入口，对于js程序来说，当程序运行的时候，会开启一次程序解析器，会解析对应的代码，当我们
使用eval函数的时候会再次开启程序解析器，会解析eval中的内容
2、可以用来让浏览器自己识别简单的算法运算并得出结果
3、eval原理 去掉字符串的冒号，变成非string类型
【JS的数组和别的语言数组最大区别】
1、JS同一个数组能同时存放不同的数据类型，别的语言只能存贮相同类型的数据类型
【全选与反选得出的取反思想】
1、
btns[1].onclick = function () {
for(var i =0;i <inputs.length;i ++){
//左边的设置值，右边的是取值
inputs[i].checked = !inputs[i].checked;
}
}
这种方法一般是控制dom元素的属性值，！这里是关键，因为一般属性判断只有2个值true 和 false，用这种方法会比较简洁;
【window.location.href】
1、页面跳转方法
【定时器的本质】
1、Interval定时器：在外设置1s间隔循环一次，如果里面的程序需要2s才能运行完毕，那么最终时间2s
（一个定时器，外面设置间隔时间，里面也有执行时间，最终时间按长的时间计算）
2、TimeOut定时器：间隔时间+程序执行时间 = 最终时间；
这里涉及队列问题，有异步的思想在里面，原理是定时器的运作会与定时器里面的程序同时启动，如定时器间隔1s运行1次，里面程序2秒才能执行完程序，那么定时器会与里面程序同时执行（异步）当定时器1s过完后，必须要等待里面程序执行完毕才能执行下一次定时器循环，而这里由于定时器的1s已经完成，所以下一次循环会立刻开启
3、函数声明放在定时器外面，能提高效率，避免每一次定时器循环都声明变量开辟新的内存，这样会耗用性能
【元素的类型判断nodeType】
1、nodeType = 1 为元素节点
2、nodeType = 2 为属性节点
3、nodeType = 3 为文本节点
4、用法****************** （可以在循环内判断nodeType类型去添加不同节点类型）
【array.srot()】（面试可能会问）
1、sort（）原理是通过ascII编码顺序去排列，是按照数组的值的首字母或者首位数字去进行由大到小排列，所以是不精准的
如果需要按顺序由大到小或者小到大完整排列，必须在sort()括号里添加一个参数去判断比较a,b值大小，
************* 详情查看W3C
【document.body】
1、如果在用 document.body.appendChild(); 生成的元素会插在<script></script>的后边
(原因是浏览器解析的时候会把<script></script>标签放到body内)
【innerHTML和value】
1、获取文本，<input>和<textarea> 必须用.value
【offsetLeft的位置】
1、offsetLeft是相对于有定位(无论相对定位还是绝对定位)的父盒子(offsetParent) 没有就找body去找位置
【json的一些注意事项】
1、json是无序的，不能用下标去表示
2、访问里面的值，可以用点语法，也可以用[]
如果用json['key'] 那么json里面的键值对的键可以用引号也可以不用引号都能获取
如果用json.key 怎么取值都能获取,但不能写成json.'key';
3、反正想着获取的key值 是否是字符串就可以选择相对应的方法
【抽取工具类的原因】（面试）
1、提高代码扩展性，可以举 12.7最后一个例子 json----myfn的例子去解释 （是一个由获取id tagname 到 for循环的抽取例子）
这个封装的each方法，只是作了声明 和 调用 ，所以赋值在调用each的时候才真正完成一个函数的调用
【右键事件】
1、document.oncontextmenu = function(e){} document是最大的事件源
e是事件源 兼容ie的方法 var e = e || event;
2、return false;能清空默认右键事件并且不影响自定义事件
【e.currentTarget】
1、用来获取当前的事件源是谁 类似于this
【for循环的另一种写法】（思想一致）（遍历最里层盒子到页面边的距离）
1、 var box2 = document.getElementsByTagName('div')[2];
var sum = 0;
for( var i = box2; i.offsetParent; i = i.offsetParent){
sum += i.offsetLeft + i.offsetParent.clientLeft;
}
console.log(sum);
【offset和client前缀】
1、offsetWidth,offsetHeight 是 content + padding + border 的距离
************************ document.body.offsetHeight 获取标签高度
offsetLeft,offsetTop 是到最近的有定位的父级的距离（不包含该父级的边框）
2、clientWidth,clientHeight 是 content + padding 的距离
********************* document.body.clientHeight 获取页面视口高度（与上面不一样）
clientLeft,clientTop 是该元素border的厚度
3、parentNode和offsetParent parentNode是找父盒子（最深找到HTML标签） offsetParent是找有定位的父盒子（最深只找到body标签）
【获取屏幕分辨率（就是显示屏的）】
1、window.screen.width / window.screen.height
【闭包的原理】
1、闭包的作用:延长局部变量的生命周期 （同时，弊端就会大量占用内存）
2、需求1:想要在函数外面（另外一个函数中）访问某一个函数内部的局部变量
【for循环内部的一些原理】
1、在for循环遍历按钮时，如果要在按钮输出变量i，会得到最后的i值，这是因为按钮、定时器等都是延时操作，只要有延时操作最终输出的变量都是i值，
因为在按钮点击或者触发定时器的时候外层的for循环已经完成。（基本我接触到的里面任何函数操作都是延时操作,除了闭包)
eg: var div = document.getElementsByTagName('div');
for( var i = 0; i < div.length; ++i){
(function(a){
div[i].onmouseover = function(){
console.log(a);
}
})(i)
}
******************这里闭包里面的div[i] 为什么能获取i的值，就是因为外面的闭包不是延时操作，所以可以遍历所有的div;
【btn.onclick = function(){}】
1、为什么这里的匿名函数funtion(){} 不能传入普通参数进行操作，是因为这里的参数是代表前面btn的onclick事件源，
btn.onclick = function(a){
console.log(a); //返回ClickEvent{} （代表事件源）
}
btn.onclick 等于号后面是一个函数体，要有click出发才会执行，所有不应该有小括号立即调用，所以也不存在有普通参数传递的原因，但事件参数a会一直存在
【字符操作】
1、（获取数字） indexOf('string') 括号里放获取位置的字符 从左向右顺序，没有该字符就返回-1；
else:(lastIndexOF('strinig')) 从右向左找，但返回的数字也是从左向右
2、（获取字符） charAt() 括号里放对应字符的位置去获取相应字符
3、 charCodeAt() 去对应字符的Unicode编码 普通编码‘0-127编号’ 中文的编码是大于127 而且中文占2个字符的位置
**********Unicode和askcII
【ClientY和PageY（不兼容IE）】
1、e.ClientY 只能获取视觉上的页面顶部
2、e.PageY 获取页面最顶部，不管是否有滚动条
【for里面定义的变量是全局变量】
1、for里面定义的变量是全局变量
2、var a = 1;
var a = 2; //第二个var被自动忽略
console.log(a); //2
********************************JS容错率很高，当检测到第一个var a的时候会向内存开辟一个空间，后边的重复声明a都会自动忽略var
这是引擎处理程序问题，要了解要自己百度
【透明度兼容】
1、opacity: 0.4; W3C浏览器
2、filter: alpha(opacity:40); 兼容IE
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java面试笔试题基础笔记1
- C++笔试、面试、基础问题笔记
- JAVA基础笔试、面试常见问题集合
- jQuery基础教程笔记适合js新手第1/2页
- 【JS】JavaScript高级程序设计笔记 第2章 ECMAScript基础
- 基础考查的面试、笔试题
- java笔试面试基础知识
- C#基础知识（不管笔试还是面试基础知识很重要）
- JS笔记(1) 基础概念
- 笔记 - JS易忘基础知识（一）（ECMAScript基础）
- 公司的JS笔试题~你能的JS基础牢不牢！
- C++ 面试 笔试 题 笔记
- jQuery基础教程笔记适合js新手第1/2页
- Java面试笔试题（基础）一：内部类及静态块
- C#基础知识（不管笔试还是面试基础知识很重要）
- 笔记 - JS易忘基础知识（一）（ECMAScript基础）
- JAVA基础笔试、面试常见问题集合
- java面试基础题，学习笔记！
- Javascript笔记（一）——js以及json基础
- Android系统基础面试笔试题积累，持续更新。。。。