※前端面试--中一些含义对比（汇总中）

 

1.截断字符串方法

• substr

substr(start,length)://指定截取的字符串的头和截取的长度（第二个参数选填，不填默认截取到尾部）

• substring

substring(start,stop):指定头尾进行截取，含头不含尾（第二个参数选填，不填就是默认截取到尾部，如果start比stop大会交换两个数）
与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。若强行传递负数,在执行时会被当成0处理

• slice

slice(start,stop):同上，可以用来操作数组
//在判断数据的类型的时候，常会使用到slice(8,-1)表示从字符串第八位开始截取到倒数第一位（不含尾）
Object.prototype.toString.call([1,2,3]).slice(8,-1)  //"[object Array]".slice(8,-1) => Array

 

2.toString 和 valueOf

• toString 

• valueOf

• ToPrimitive（内含操作valueOf和toString）

value	toNumber	toString	toBoolean
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
[]	0	""	true
[1]	1	"1"	true
null	0	"null"	false
undefined	NaN	"undefined"	false
{}	NaN	"[object Object]"	true
function()	NaN	"function"	true

3.||和&&的用法深究

实际上在js中||和&&并不是意义上的逻辑运算符，而是选择器运算符

a || b ==> a ? a : b

a && b ==> a? b : a

var a = 34;
var b = null;
var c = 'abc'
console.log(a||b) //34
console.log(b&&c)  //null
//因此在有些时候，看到这样的代码就能明白他的意思了
a = a || 'h'; //表示a参数如果赋值了，就取该值，否则默认赋值'h'

4.==和===

==被称为宽松相等，在比较时，会进行强制类型转换（NaN 不等于 NaN -0不等于+0）

• xy都为Null或undefined,return true;

• x或y为NaN, return false;

• 如果x和y为String，Number，Boolean并且类型不一致，都转为Number再进行比较（类型一致的时候，[]不等于[]）

• 如果存在Object，转换为原始值，比较

• 如果比较的两边含有true或者false,或者[],{},0,""这些特殊情况还是不要使用==

===被称为严格相等，比较时不允许类型转换

5.typeof和instanceof

• typeof

  typeof 是判断参数是什么类型的实例，返回值为说明运算数类型的字符串。

  返回值结果：“number”、“string”、“boolean”、“object”、“function”、“undefined”、“symbol"

  若参数为引用类型，始终返回“object”，对于Array、null始终返回“object”，所以用typeof来判断参数类型有很大的局限性。typeof undefined是undefined

  typeof 函数()，要看函数return的值类型，没return 语句就是undefined

typeof foo //“function”
typeof foo()//看return 地值类型

• instanceof

  instanceof是用来判断一个对象在其原型链中是否存在一个构造函数的prototype属性

  a instanceof b：判断a是否为b的实例，可以用于继承关系中

  b是c的父对象，a是c的实例，a instanceof b 与 a instanceof c 结果均为true

  对于所有的引用类型，均为Object的实例

null instanceof Object  --false  // 因为在原型链中null是最后一层
Array instanceof Object  --true

6.cookies，sessionStorage 和 localStorage 的区别?

• cookit:数据大小有限制在4k以下，会随着请求将数据进行表单的提交，浏览器关闭，数据不会被删除

• sessionStorage:数据在5M左右或以上，不能随请求提交到服务器上，浏览器关闭，数据就会被销毁

• localStorage:数据在5M左右，不能随请求提交到服务器上，数据可永久存储，可主动删除

7.src和href的区别

• src用于替换当前元素，引入，是同步加载的，解析到src时会暂停其他资源的加载，例js

• href 用于在当前文档和引用资源之间确立联系，而link加载css文件时可以并行，异步

• 在浏览器解析HTML的时候，遇到script标签立即开始加载javaScript并执行，这个过程会阻塞后面内容的呈现，也就是说会是后面的标签在javaScript执行完成后才呈现，同时也会阻塞后面组件的加载，也就是说script标签后面的组件如图片等在javaScript执行完成后才开始加载，这就是我们说的同步加载，显然我们在页面上使用javaScript的时候，如果位置放置不当，将严重影响浏览器渲染的效率，所以我们一般把javaScript放在页面的最底部，避免浏览器在解析javaScript的时候出现资源阻塞。如果把script标签放在页面的首部且javaScript文件加载需要花很长的时间的话，页面会出现较长时间的白屏。

• 在浏览器解析HTML的时候，如果遇到<link rel="stylesheet" href="style.css">标签的时候，向服务器放出请求来获得css文件，与此同时浏览器继续往下解析HTML文件，构建DOM树，这就是我们说的异步加载，这里我们可以看到，加载css文件的是时候，浏览器仍可以继续做其他的工作，所以我们一般在页面的首部就引入css文件。那么如果css文件较大，DOM树已经构建完成很久，CSSOM还没有构建完成会出现什么情况呢？不同的浏览器有不同的做法，比如chrome认为，样式都没有，painting是没有意义的，于是chrome会出现白屏，直到CSSOM构建完成；firefox观点与chrome不同，firefox认为还是给用户看点东西吧，就算样式还没加载好，要不人家用户以为咱浏览器出现问题了把咱给卸载了咋办，于是firefox会先给用户看点东西，等到CSSOM加载好了又突然把样式给加上了，吓用户一跳，这就是我们说的无样式内容闪烁

8.Commonjs 中的require/ exports和ES6中的import.export区别

es6通过babel转化为es5执行，所以写的import/export是通过babel转换为require/exports执行的

A. CommonJs模块的重要特性是加载是执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被“循环加载”， 就会只输出已经执行的部分，还未执行的不部分不会输出;

B. ES6 模块是动态引用，如果使用 import 从一个模块加载变量，那变量不会被缓存。 *而是成为一个指向被加载模块的引用， 需要开发者自己保证，真正取值的时候能够取得值;

C. import/export 最终都是编译为require/exports来执行的;

D. CommonJs 规范规定,每个模块内部，module 变量代表当前模块，这个变量是一对像，**它的exports属性（即 module.exports）是对外的接口， 加载某模块其实是加载这个模块的module.exports属性;

E. export命令规定是对外的接口，必须与模块内部的变量建立一一对应关系;

9.Attribute和property的区别是什么？

attribute是DOM元素在文档中作为HTML标签拥有的属性。

property是DOM元素在文档中作为JS对象拥有的属性。

对于HTML的标准属性来说他们是可以同步的，但是对自定义的属性来说不是同步的。

10.DOM中的事件操作在ie和w3c的区别

11.js数组的方法对比

方法	描述	是否改变原始数组
concat	连接两个或更多的数组，并返回结果(仅仅会返回被连接数组的一个副本)	否
map	返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。	否
join	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔，返回一个字符串	否
pop	删除并返回数组的最后一个元素	是
push	向数组的末尾添加一个或更多元素，并返回新的长度	是
shift	删除并返回数组的第一个元素	是
unshift	向数组的开头添加一个或更多元素，并返回新的长度。	是
reverse	颠倒数组中元素的顺序。	是
slice	从某个已有的数组返回选定的元素，slice(start,end)	否
sort	对数组的元素进行排序。	是
splice	向/从数组中添加/删除项目，然后返回被删除的项目。splice参数一 start :开始删除或者插入的位置，-1的时候代表反着来 参数二：删除的个数，0和负数表示不删除，空的话是start开始的全部； 参数三：用来插入和替换的内容	是
toLocaleString	把数组转换为本地字符串。	否
toString	可把数组转换为字符串，并返回结果。	否
valueOf	返回 Array 对象的原始值。	否
forEach	方法为每个数组元素调用一次函数（回调函数）。	否
filter	创建一个包含通过测试的数组元素的新数组。	否
every	检查所有数组值是否通过测试。	否
some	检查某些数组值是否通过了测试。	否
find	返回通过测试函数的第一个数组元素的值。	否
findIndex	返回通过测试函数的第一个数组元素的索引。	否
reduce	在每个数组元素上运行函数，以生成（减少它）单个值,prev,curr,还要传入init	否

12.js中的堆和栈

• 栈stack: 栈会自动分配内存空间，会自动释放，存放基本数据类型（Number string Boolen Undefined Null ），简单的数据段，占据固定大小的空间。

• 堆heap: 动态分配的内存，大小补丁也不会自动释放，存放引用类型(Function Array Object等)，指那些可能由多个值构成的对象，保存在堆内存中，包含引用类型的变量，实际上保存的不是变量本身，是指向该对象的指针。

  在方法中定义的基本变量，都放在栈中，随着方法结束，这个方法的内存栈也就自然销毁了。

13. readonly和disabled

• readonly: 表单项只读，不可以编辑修改，但是可以聚焦，且表单提交的时候也会提交

• disabled:表单项禁用，不可以修改编辑，不可以聚焦，表单提交的时候不会提交。

  无论是上面的哪一种，都是可以通过脚本js去修改value的

14.回流和重绘

回流必将引起重绘，重绘不一定会引起回流。

回流：reflow 当render tree中的一部分或者全部因为：元素的规模尺寸，布局，隐藏（display）发生改变需要重新构建的时候，需要回流重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

1：改变窗口大小

2：改变文字大小

3：内容的改变，如用户在输入框中敲字

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

重绘：repaint render tree中的元素需要更新属性，这些属性只是影响元素的外观，风格等，不会影响到布局时。

15.css中单位的对比

• px: 相对长度单位，这里的px是相对于屏幕分辨率而言的。

  特点：对于px设置的不是相对的，修改的时候需要一个一个修改

• em：相对长度单位，相对于当前对象内文本的尺寸大小，如果对于文本尺寸没有设置，就是相对于浏览器的默认字体。

  会继承父级元素的字体大小

  em的值不是固定的，1em是当前的字体尺寸。2em是当前字体的两倍大小。

• rem：css3新增的相对单位，与em的区别是。rem是相对于root元素的相对大小，在使用的时候可以只修改根元素的字体大小就完成了其他元素的字体大小的修改。

• % ： 百分比，一般是相对于父元素。也有少部分的元素是相对自身。

• cm in mm pc 等

16.clientWidth offsetWidth

• clientWidth = contentWid + padding

• offsetWidth = contentWid + padding + border

• scrollTop : 被卷去的上侧距离

• scrollWidth : 自身实际的高度contentWid