面试题总结

js笔记总结
**

JS笔记总结40-100道题

**

一、正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？

答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高。

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

二、看下面代码，给出输出结果。

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};
答案：4 4 4。

原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);    
   })(i),0);  
};
1           //输出
2
3

三、写一个function，清除字符串前后的空格。（兼容所有浏览器）

if (!String.prototype.trim) { 
 String.prototype.trim = function() { 
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 } 
} 
 // test the function 
var str = " \t\n test string ".trim(); 
alert(str == "test string"); // alerts "true"

四、Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

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];
        }
   }
}

五、Javascript中, 以下哪条语句一定会产生运行错误？ 答案( B )

A、var _变量=NaN; B、var 0bj = []; C、var obj = //; D、var obj = {};

六、以下两个变量a和b，a+b的哪个结果是NaN？ 答案( C )

A、var a=undefind; b=NaN
B、var a=‘123’; b=NaN
C、var a =undefined , b =NaN
D、var a=NaN , b=‘undefined’

七、var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B )

A、34 B、35 C、36 D、37

八、要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ）

A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”

九、以下哪条语句会产生运行错误：（A）

A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;

十、以下哪个单词不属于javascript保留字：（B）

A.with
B.parent
C.class
D.void

十一、以下哪个单词不属于javascript保留字：（B）

A.with
B.parent
C.class
D.void

十二、分析代码，得出正确的结果。

var a=10, b=20 , c=30;
	++a;
	a++;
	e=++a+(++b)+(c++)+a++;
	alert(e);

弹出提示对话框：77

十三、写出函数DateDemo的返回结果，系统时间假定为今天

function DateDemo(){
 var d, s="今天日期是：";
 d = new Date();
s += d.getMonth() + "/";
s += d.getDate() + "/";
s += d.getYear();
return s;}

结果：今天日期是：7/17/2010

十四、写出程序运行的结果？

for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;}

结果：10

十五、阅读以下代码，请分析出结果：

var arr = new Array(1 ,3 ,5);
	arr[4]='z';
	arr2 = arr.reverse();
	arr3 = arr.concat(arr2);
	alert(arr3);
弹出提示对话框：z,,5,3,1,z,,5,3,1

十六、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉

var str = “<div>这里是div<p>里面的段落</p></div>”;
//
<scripttype=”text/javascript”>
varreg = /<\/?\w+\/?>/gi;
varstr = “<div>这里是div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>

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

对象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close() 

十八、js延迟加载的方式有哪些？

1. defer和async
2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）
3. 按需异步载入js

十九、哪些操作会造成内存泄漏？

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

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

二十、字符串反转，如将 ‘12345678’ 变成 ‘87654321’

//大牛做法；
//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符串
var str = '12345678';
str = str.split('').reverse().join('');

二十一、将数字 12345678 转化成 RMB形式 如： 12,345,678

//个人方法；
//思路：先将数字转为字符， str= str + '' ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
for(var i = 1; i <= re(str).length; i++){
    tmp += re(str)[i - 1];
    if(i % 3 == 0 && i != re(str).length){
        tmp += ',';
    }
}

一.什么是mvvm

数据( Model )和视图( View )是不能直接通讯的，而是需要通过 ViewModel 来实现双方的通讯。当数据( Model )变化的时候， ViewModel 能够监听到这种变化，并及时通知 View 视图做出修改。同样的，当页面有事件触发的时候， ViewModel 也能够监听到事件，并通知数据( Model )进行响应。所以 ViewModel 就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
Vue.js 的数据驱动是通过 MVVM 这种框架来实现的， MVVM 框架主要包含三部分： Model , View , ViewMode

Model :指的是数据部分，对应到前端就是 JavaScript 对象。
View :指的就是视图部分

二.如何让CSS只在当前组件中起作用？

只需要在Style标签添加Scoped属性

<style scoped></style>。

三.至少说出vue.js中的4种指令和它们的用法

v-if：判断对象是否隐藏。
v-for：循环渲染。
v-bind：绑定一个属性。
v- model：实现数据双向绑定。

四.Class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute ，所以我们可以用v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 vbind 用于 class 和 style 时， Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<style>
.actived {
background-color: #dddddd;
}
</style>

<li
v-for="(item,index) in users"
:key="item.id"
:class="{actived:true}"
>
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>

五.Vue.js生命周期的理解。

beforeCreate：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。
created：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始，el属性目前不可见。
beforeMount：在挂载开始之前调用，相关的 render函数首次调用。
mounted: el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。
beforeUpdate：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

六.如何创建vue.js组件？

<div id="app">
 
<ickt></ickt>
 
</div>
 
<！--模板-->
 
<template id="demo">
 
<！--模板元素要有同一个根元素-->
 
<div>
 
<h1>{{msg}}</h1>
 
</div>
 
</template>
 
<script type="text/javascript">
 
//定义组件类
 
var Ickt = Vue.extend ({
 
template：'#demo',
 
data:function(){
 
return {
 
msg：'有课前端网'
 
}
 
}
 
})
 
//注册组件
 
Vue .component（'ickt, Ickt）
 
//定义Vue实例化对象
 
var app= new Vue ({
 
el：'#app',
 
data:{}
 
})
 
</script>

七.ajax请求的时候get 和 post方式的区别

get是在url后面 post放在虚拟载体里面

get 有大小限制(只能提交少量参数)

post 比 get 安全

应用不同，请求数据和提交数据

八. Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一 直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

九。同步、异步的区别

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

十.闭包的好处

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)

(2)避免全局变量的污染

(3)私有成员的存在

(4)安全性提高

十一.ES6新特性

1， let ：作用与var类似，用于声明变量，let 不能重复声明变量，var 可以重复声明变量；
2，const ：用于声明常量
注意：一定要赋初始值，一般常量使用大写(属于编程规范)，常量值不能修改，存在块级作用域
3，解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值
4，模板字符串：(反引号)内容中可以直接出现换行符，’ '和" "中则不可以，出现会报错。还可以直接进行变量拼接。
5，.箭头函数
6，扩展运算符：…能将「数组」转为逗号分隔的「参数序列」
7，Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

十二.前端如何优化网站性能

1，减少HTTP请求
2，css sprites 精灵图
3，合并js文件和css文件
4，采用lazyload 懒加载

十三.一次完整的HTTP事务是怎样的一个过程

1，域名解析
2，发起TCP的3次握手
3，建立TCP连接2后发起HTTP请求
4，服务器端响应HTTP请求，浏览器得到HTML代码
5，浏览器解析HTML代码，并请求HTML代码中的资源
6，浏览器对页面进行渲染呈现给用户

十四.vue特点

1，国人开发的一个轻量级框架
2，双向数据绑定，在数据操作方面更为简单。
3，视图，数据，结构分离，不需要进行逻辑代码的修改，只需要操作数据完成相关操作
4，组件化，方便封装和复用
5，虚拟dom

十五.Vue父子组件传值的方法

1.父向子传值props

父组件：<child :inputName="name">

子组件：

（1）

props: {
   inputName: String,

   required: true

  }

（2）props: ["inputName"]

2.子组件向父组件传值$emit

子组件:

 <span>{{childValue}}</span>

<input type="button" value="点击触发" @click="childClick">


 export default {
  data () {
   return {
    childValue: '我是子组件的数据'

   }

  },

  methods: {
   childClick () {  

    this.$emit('childByValue', this.childValue)

   }

  }

 }

十六.如何避免回调地狱

1，模块化：将回调函数转换为独立的函数
2，使用流程控制库，列如 aync
3，使用promise
4，使用aync/await

十七.v-show和v-if共同的和不同点

共同点：都能控制元素的显示和隐藏。
不同的：v-shou本质是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向dom树内添加或删除dom元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-shou（切换开销比较小，初始开销较大）。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）

十八.cookies，sessionStorage，localStorage的区别

cooki e是网站为了标示用户身份而储存在用户本地终端(Client Side) 上的数据(通常经过加密)。
cooki e数据始终在同源的http请求中携芾(即使不需要)，记会在浏览器和服务器间来回传递。
sessionStor age和1ocalstor age不会自动把数据发给服务器，仅在本地保存。
存储大小:
cooki e数据大小不能超过4k。
sessionStor age和localstorage虽然也有存储大小的限制，但比cookie大得多， 可以达到5M或更大。
有期时间:
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage数据在 当前浏览器窗口关闭后自动删除。
cookie设置的cooki e过期时间之前一直有效，即使窗口或浏览器关闭

二十.使用NPM有哪些好处?

1，通过NPM，你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号。
2，对于Node应用开发而言，你可以通过package. json文件来管理项目信息，配置脚本，以及指明依赖的具体版本
3，npm install xx -S和npm install -D的命令含义
4，项目转换的时候，不会把node_ modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来（npm install安装所有的依赖)

二十一.display：inline-block什么时候会出现间隙？及解决办法。

<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
	<span>111</span>
	<span>111</span>
	<span>111</span>
	<span>111</span>
</div>
</body>

解决办法
方法一： 元素之间不换行
方法二： 给其父元素设置font-size:0;给其自身设置实际需要的字号大小。 方法三： 负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。

二十二.css3新增属性？

border-radius 圆角
border-shadow 盒子阴影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景显示原点
text-shadow 文字阴影
text-overflow 文字隐藏的方式 裁剪/省略号
box-sizing
transform 变换 转换
animation 动画
transition 过渡动画
媒体查询 @media

二十三.如何用css绘制一个实心三角？

.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、
right四个方向的三角*/
}

二十四.css盒子的margin中的合并和塌陷问题如何解决？

外边距塌陷:

当嵌套的两个块元素,给子盒子加向上的外边距时,
父盒子会跟着掉下来,此时就是外边距塌陷.
解决方案:
1.给父盒子加padding
2.给父盒子加上边框
3.给父元素加overflow:hidden 属性

嵌套盒子垂直外边距合并方案:

给父亲上边框
border: 1px solid transparent
给父亲内边距
padding-top: 1px;
给父元素 添加 overflow: hidden
子元素 添加 position:absolute/relative 或 float

二十五.说一下你对css盒子模型的理解？

图中最内部的框是元素的实际内容，也就是元素框， 紧挨着元素框外部的是内边距padding， 其次是边框（border）， 然后最外层是外边距（margin），整个构成了框模型。

通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。 而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

注意最后加上box-sizing:border-box;和box-sizing:content-box;的区别

二十六.如何解决跨域问题？

JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面

二十七、CSS中 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不支持。