前端面试题

面试题

1.js中数组的4种遍历方式

<script>

 var arr = [11,22,33,55];  

1. //普通的循环遍历方式

 for(var i= 0;i<arr.length;i++){  

                console.log("第一种遍历方式 "+arr[i]);  

            } 

1. //2、for ..in 遍历方式  

  for(var index in arr){  

                console.log("第二种遍历方式 "+arr[index]);  

  }  

2.ES5.数组的几种方法

1. join()//将所有元素转为字符串并连接在一起。Array.join();

String.split()方法与其相反，是将字符串分割成若干串来创建一个数组。

1. Reverse()//将数组中的元素倒序。
2. Sort()//按字母排序
3. Concat()//将原始数组和新数组拼接成一个数组
4. slice（）//返回指定的片段，包括第一个参数，但不包括第二个参数，索引从0开始。例如：

Var a=[1,2,3,4,5];   a.slice(0,3)  //[1,2,3]     a.slice(3) //[4,5]

1. Splice(x,y)在数组插入或删除，x表示起始位置，y表示删除的个数，若只有一个参数，那么从这个参数起始位置到结尾所有的元素被删掉。例如：var a=[1,2,3,4,5,6,7,8]

 a.splice(4)//[5,6,7,8]           a.splice(1,2）//[1,4,5,6,7,8]

1. Pop()删除末尾；
2. Shift()删除首部；
3. unshift（）往首部加入新值；
4. Push()往末尾加入新值；
5. ToString()将每个元素转为字符串（这里与不使用任何参数的join方法返回的字符串是一样的）
6. ForEach()从头至尾遍历数组
7. Map()从头至尾遍历数组，返回新数组。
8. Filter()带有判断的返回值
9. Every()判断所有元素为true时候返回true，some()只要有一个为true就为true
10. Reduce()，reduceright数组求值
11. indexOf（）从头到尾搜索是否有想找到的元素，如果找到了，返回索引位置，没有找到 返回-1；lastindexof是从末尾到开头找，同理

3.什么是图片的懒加载，图片延迟加载

【1】延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。
【2】条件加载，符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有矿长时间的停顿。

基本步骤

【1】网页中的图片都设为同一张图片
【2】给图片增加data-original = "img/test.jpg"的属性，保存图片的真实地址
【3】当触发某些条件时，自动改变该区域的图片的src属性为真实的地应用

懒加载的实现原理

原理很简单，先把img的src指向空或者一个小图片，图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

https://blog.csdn.net/gy_u_yg/article/details/73132171

web.jobbole.com/92265/

4http几种常见的状态码

https://blog.csdn.net/u010412301/article/details/65069032

当为跨域时候，状态码5开头

jquery ajax跨域的时候dataType: 'jsonp',  // 请求方式为jsonp

跨域请求通常不会携带cookies信息. 为了能让跨域请求带上cookies, 你需要将做如下设置:

xhr.withCredentials = true;

为了能让这个属性正常工作, 你还需要在服务器端在响应是带上
Access-Control-Allow-Credentials: true

Jsonp:”callback2”；cache:true;

jsonp解决跨域时候，有哪些弊端？

1>    服务器需要改动代码支持

2> 只支持get方法；

3> 发送的不是xhr。

跨域最好的解决方法：

1>    让服务器支持跨域（在响应头增加字段，告诉浏览器允许对方使用，浏览器就不会跨域【被调用方-从浏览器发出请求】）

2> 让前台请求的时候隐藏跨域（通过http服务器转发，浏览器会发现所有的请求都是同一个域，就不会跨域【调用方-从服务器发出请求）

【1】当为简单请求时候，先执行后判断

什么是简单请求？

当请求header里面请求的方法为GET,POST,HEAD时候，或者当

Content-type为text/plain或者multipart/form-data或者application/x...

【2】当为非简单请求时候，先判断后执行

什么是非简单请求

1. ajax请求方法为put,delete,options(预检查命令）
2. 发送json格式的ajax请求
3. 带自定义头的ajax请求

跨域使具体如何解决？

服务器端设置被允许的请求方式，以及域名和端口号，那么前端的响应头增加了;

Access-control-Allow-Methods:GET;

Access-control-Allow-origin:http://localhost:8081

但是通常后台不会将这两条数据写死，通常用*代替所有类型，但是带*不是所有方法都被允许，例如带cookie的跨域就必须让origin全匹配，不能用*，并且要加上Access-Control-Allow-Credentials:true;

5.什么是闭包,

简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。占用更多内存,不容易被释放

js的闭包的最简形式，大概是这样子的。
其中i是函数a的一个局部变量，又被返回的匿名函数所使用。

function a(i) {return function(){return i+1} }

6.移动开发与适配

1>百分比布局和媒体查询

2>flex弹性布局flex更符合响应式的特点，你从不用给它设置一个固定的宽高，它就能达到你想要的效果。

7.