JS基础笔记（面试笔试有用）

时间 2019-11-15

原文原文链接

【if判断‘=’和‘==’问题】千万记着之后都写双等于去判断
一、if( i = 0)和if( i == 0)

第一个是赋值操做判断语句(这样写容易进入死循环除非是true和false的状况) 第二个才是正常状况css

【for循环的】
一、先声明变量后判断终止条件再执行括号内容最后++i
二、对于for循环 i++和++i均可以使用，++i的内存应用效率更高，在转化成汇编语言的时候，会少开辟一个变量html

【字符相加和相减的类型变化】
一、5 + '8' 和 ‘5’+‘8’打印结果为58(最终都转换为string类型) 5 + 8 =13 num 类型
二、‘8’ - 5 和 ‘8’ - ‘5’ 和 8 - 5 打印结果都为3（最终都转换为num类型）
三、 ‘asd’ - ‘zcx’ 打印结果未NaN(最终结果为num类型)node

【释放内存和销毁变量】
一、函数调用完后，当即销毁函数内的局部变量面试

【style和script的位置】
一、style样式通常写在<head></head>里面，但实际上能够写在body里面或者其余位置，但这就会涉及到浏览器渲染顺序问题，style标签写在body里
CSS会从新渲染一次页面，占用必定时间，若是网页篇幅少的话感受不出来，若是篇幅多（大量HTML）会有必定的影响，因此大页面中不建议将style
写进body
（就像一些电商网站，有部分CSS写在body里面，这是为了方便修改源代码，不然你还得去翻CSS好比网站左侧、右侧的广告模块，不少页面都
要加入这个广告，因此他就把广告这一块的html写到一个文件里，而后在加载过来。因此css也和他写在一块儿。）算法

【淘宝搜索框 oninput&&onpropertychange】
一、   打字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";json

}
}
}数组

二、<input type="text" placeholder="必败的国际大牌"> 一样获得上面的效果 placeholder是H5 input的新属性浏览器

这2种写法避免多重判断光标位置，是否打字等，闭包

【算法、关系、逻辑运算符的关系】
一、逻辑运算符（!,&&,||）与操做：eg var result=true&&3 //3
               var result=1&&3 //3
               var result=false&&3//false
               var result=""&&3 //"" (前面根据booler类型决定 true就取最后一个true的值 false就取false的值)app

或操做：若是第一个值为真则结束后面的判断（true就取第一个true的值 false就取最后一个false的值)

二、优先级----------------算术运算符》关系运算符》逻辑运算符

运算符顺序

1 ()

2 !、-、++、-- (-10) 负号正号

3 *、/、%

4 +、- 10-5

5 <、<=、<、>=

6 ==、!=、===、!==、

7 &&

8 ||

9?:

10 =、+=、-=、*=、/=、%= 赋值

【window.getComputedStyle("元素", "伪类")[attr]】（伪类位置默认为null）
一、获取一个元素的属性集合
用法：getComputeStyle(element,null).width

优势：解决obj,style[attr]只能去行内样式的缺陷

缺点：由于要获得所有属性集合才能取想要的值，因此是很是耗内存的操做

【eval】（通常不用，以防面试会问）
一、eval方法是开启程序解析器的入口，对于js程序来讲，当程序运行的时候，会开启一次程序解析器，会解析对应的代码，当咱们
使用eval函数的时候会再次开启程序解析器，会解析eval中的内容
二、能够用来让浏览器本身识别简单的算法运算并得出结果

三、eval原理去掉字符串的冒号，变成非string类型

【JS的数组和别的语言数组最大区别】
一、JS同一个数组能同时存放不一样的数据类型，别的语言只能存贮相同类型的数据类型

【全选与反选得出的取反思想】
一、
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】
一、页面跳转方法

【定时器的本质】
一、Interval定时器：在外设置1s间隔循环一次，若是里面的程序须要2s才能运行完毕，那么最终时间2s
（一个定时器，外面设置间隔时间，里面也有执行时间，最终时间按长的时间计算）
二、TimeOut定时器：间隔时间+程序执行时间 = 最终时间；

这里涉及队列问题，有异步的思想在里面，原理是定时器的运做会与定时器里面的程序同时启动，如定时器间隔1s运行1次，里面程序2秒才能执行完程序，那么定时器会与里面程序同时执行（异步）当定时器1s过完后，必需要等待里面程序执行完毕才能执行下一次定时器循环，而这里因为定时器的1s已经完成，因此下一次循环会马上开启

三、函数声明放在定时器外面，能提升效率，避免每一次定时器循环都声明变量开辟新的内存，这样会耗用性能

【元素的类型判断nodeType】
一、nodeType = 1 为元素节点
二、nodeType = 2 为属性节点
三、nodeType = 3 为文本节点

四、用法****************** （能够在循环内判断nodeType类型去添加不一样节点类型）

【array.srot()】（面试可能会问）
一、sort（）原理是经过ascII编码顺序去排列，是按照数组的值的首字母或者首位数字去进行由大到小排列，因此是不精准的
若是须要按顺序由大到小或者小到大完整排列，必须在sort()括号里添加一个参数去判断比较a,b值大小，

************* 详情查看W3C

【document.body】
一、若是在用 document.body.appendChild(); 生成的元素会插在<script></script>的后边

(缘由是浏览器解析的时候会把<script></script>标签放到body内)

【innerHTML和value】
一、获取文本，<input>和<textarea> 必须用.value

【offsetLeft的位置】
一、offsetLeft是相对于有定位(不管相对定位仍是绝对定位)的父盒子(offsetParent) 没有就找body去找位置

【json的一些注意事项】
一、json是无序的，不能用下标去表示
二、访问里面的值，能够用点语法，也能够用[]
若是用json['key'] 那么json里面的键值对的键能够用引号也能够不用引号都能获取

若是用json.key 怎么取值都能获取,但不能写成json.'key';

三、反正想着获取的key值是不是字符串就能够选择相对应的方法

【抽取工具类的缘由】（面试）
一、提升代码扩展性，能够举 12.7最后一个例子 json----myfn的例子去解释（是一个由获取id tagname 到 for循环的抽取例子）

这个封装的each方法，只是做了声明和调用，因此赋值在调用each的时候才真正完成一个函数的调用

【右键事件】
一、document.oncontextmenu = function(e){} document是最大的事件源

e是事件源兼容ie的方法 var e = e || event;

二、return false;能清空默认右键事件而且不影响自定义事件

【e.currentTarget】
一、用来获取当前的事件源是谁相似于this

【for循环的另外一种写法】（思想一致）（遍历最里层盒子到页面边的距离）
一、   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前缀】
一、offsetWidth,offsetHeight 是 content + padding + border 的距离

************************ document.body.offsetHeight 获取标签高度

offsetLeft,offsetTop 是到最近的有定位的父级的距离（不包含该父级的边框）

二、clientWidth,clientHeight 是 content + padding 的距离

********************* document.body.clientHeight 获取页面视口高度（与上面不同）

clientLeft,clientTop 是该元素border的厚度

三、parentNode和offsetParent parentNode是找父盒子（最深找到HTML标签） offsetParent是找有定位的父盒子（最深只找到body标签）

【获取屏幕分辨率（就是显示屏的）】
一、window.screen.width / window.screen.height

【闭包的原理】
一、闭包的做用:延长局部变量的生命周期（同时，弊端就会大量占用内存）

二、需求1:想要在函数外面（另一个函数中）访问某一个函数内部的局部变量

【for循环内部的一些原理】
一、在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(){}】
一、为何这里的匿名函数funtion(){} 不能传入普通参数进行操做，是由于这里的参数是表明前面btn的onclick事件源，
   btn.onclick = function(a){
   console.log(a); //返回ClickEvent{} （表明事件源）
   }

btn.onclick 等于号后面是一个函数体，要有click出发才会执行，全部不该该有小括号当即调用，因此也不存在有普通参数传递的缘由，但事件参数a会一直存在

【字符操做】
一、（获取数字） indexOf('string') 括号里放获取位置的字符从左向右顺序，没有该字符就返回-1；
else:(lastIndexOF('strinig')) 从右向左找，但返回的数字也是从左向右

二、（获取字符） charAt()       括号里放对应字符的位置去获取相应字符
三、       charCodeAt()       去对应字符的Unicode编码普通编码‘0-127编号’ 中文的编码是大于127 并且中文占2个字符的位置
                   **********Unicode和askcII

【ClientY和PageY（不兼容IE）】
一、e.ClientY 只能获取视觉上的页面顶部
二、e.PageY 获取页面最顶部，不论是否有滚动条

【for里面定义的变量是全局变量】
一、for里面定义的变量是全局变量

二、var a = 1;
var a = 2; //第二个var被自动忽略 console.log(a); //2 ********************************JS容错率很高，当检测到第一个var a的时候会向内存开辟一个空间，后边的重复声明a都会自动忽略var 这是引擎处理程序问题，要了解要本身百度【透明度兼容】一、opacity: 0.4; W3C浏览器二、filter: alpha(opacity:40); 兼容IE