前端面试题系列二（js）

冷不防 2022-10-17 11:28 140阅读 0赞

### 文章目录 ###

*   *  split() join() 的区别
     *  数组方法 pop() push() unshift() shift()
     *  call 和 apply 的区别
     *  添加 删除 替换 插入到某个接点的方法
     *  Javascript 的事件流模型都有什么？
     *  foo = foo||bar ，这行代码是什么意思？为什么要这样写？
     *  列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常 用方法至少 5 个
     *  简述创建函数的几种方式
     *  谈谈 Cookie 的弊端？
     *  哪些操作会造成内存泄漏？
     *  简述 link 和 import 的区别？
     *  如何优化自己的代码？

--------------------

## split() join() 的区别 ##

前者是切割成数组的形式，  
后者是将数组转换成字符串

--------------------

## 数组方法 pop() push() unshift() shift() ##

Push()尾部添加 pop()尾部删除  
Unshift()头部添加 shift()头部删除

--------------------

## call 和 apply 的区别 ##

call 和 apply 相同点：  
都是为了用一个本不属于一个对象的方法，让这个对象去执行

toString.call(\[\],1,2,3)  
toString.apply(\[\],\[1,2,3\])  
Object.call(this,obj1,obj2,obj3)  
Object.apply(this,arguments)

--------------------

## 添加 删除 替换 插入到某个接点的方法 ##

obj.appendChild()  
obj.insertBefore() //原生的 js 中不提供 insertAfter();  
obj.replaceChild()//替换  
obj.removeChild()//删除

--------------------

## Javascript 的事件流模型都有什么？ ##

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播  
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的  
“DOM 事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

--------------------

## foo = foo||bar ，这行代码是什么意思？为什么要这样写？ ##

这种写法称之为短路表达式  
if(!foo) foo = bar; //如果 foo 存在，值不变，否则把 bar 的值赋给 foo。  
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要 最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

--------------------

## 列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常 用方法至少 5 个 ##

对象：Window document location screen history navigator  
方法：Alert() confirm() prompt() open() close()

--------------------

## 简述创建函数的几种方式 ##

//第一种（函数声明）：
    	 function sum1(num1,num2){  
    		return num1+num2;
    	 }
     //第二种（函数表达式）： 
    	 var sum2 = function(num1,num2){  
    	 	return num1+num2; 
    	 }
     //匿名函数： 
     	function(){ }//只能自己执行自己 
     //第三种（函数对象方式）
     	var sum3 = new Function("num1","num2","return num1+num2");

--------------------

## 谈谈 Cookie 的弊端？ ##

缺点：  
1.`Cookie`数量和长度的限制。每个 domain 最多只能有 20 条 `Cookie`，每个 `Cookie`长度不 能超过 4KB，否则会被截掉。  
2.安全性问题。如果 `Cookie`被人拦截了，那人就可以取得所有的 session 信息。即使加密 也与事无补，因为拦截者并不需要知道 `Cookie`的意义，他只要原样转发 `Cookie`就可以达到 目的了。  
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存 一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

--------------------

## 哪些操作会造成内存泄漏？ ##

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。  
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用 数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的 内存即可回收。

1.  setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2.  闭包
3.  控制台日志
4.  循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

--------------------

## 简述 link 和 import 的区别？ ##

区别 1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。  
区别 2：link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入 以后加载。  
区别 3：link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏 览器不支持。  
区别 4：link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

--------------------

## 如何优化自己的代码？ ##

代码重用  
避免全局变量（命名空间，封闭空间，模块化 mvc…）  
拆分函数避免函数过于臃肿：单一职责原则  
适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑 的具体过程  
内存管理，尤其是闭包中的变量释放