前端面试问题汇总

时间 2019-11-13

原文原文链接

1.css 垂直居中 2.JS数据类型和数组复制javascript

1.css/css3实现未知宽高元素的垂直居中和水平居中php

解决思路：css

<div class="demo">
　　 <img src="img/pic3.jpg" />
</div>

.demo{
    /*设置元素绝对定位*/
    position: fixed;/*没用定宽高，写了一个定位left:50%离左边百分之五十，transform: translateX(-50%); 这一句的做用就是让自身位置水平左移自身50%的宽度。这样就恰好实现咱们想要的效果。*/  top:50%;

  left:50%;
  transform:translate(-50%,-50%);
 -webkit-transform: translateX(-50%);//兼容到ie9
 -ms-transform: translateX(-50%);//兼容到ie9
}
2.JS数据类型和数组复制
解决思路：

2.js的数据类型

jscript 有三种->主要数据类型、两种->复合数据类型和两种->特殊数据类型。html

基本数据类型：String,boolean,Number,Undefined, Null
　　引用数据类型：Object(Array,Date,RegExp,Function)java

主要（基本）数据类型

字符串
数值
布尔

复合（引用）数据类型

对象
数组

特殊数据类型

Null
`Undefined`

Array 对象方法

方法	描述
concat()	链接两个或更多的数组，并返回结果。
join()	把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

2、使用slice()jquery

Array.slice 方法:css3

public slice([startIndex:Number], [endIndex:Number])web

返回由原始数组中某一范围的元素构成的新数组，而不修改原始数组。返回的数组包括 startIndex 元素以及从其开始到 endIndex 元素（但不包括该元素）的全部元素。ajax

可以使用slice()进行复制，由于slice()返回也是数组。json

var array1 = new Array("1","2","3");
var array2;
array2 = array1.slice(0);
array1.length = 0;
alert(array2); //返回一、二、3

3、使用concat()

注意concat()返回的并非调用函数的Array，而是一个新的Array，因此能够利用这一点进行复制。

var array1 = new Array("1","2","3");
var array2;
array2 = array1.concat();
array1.length = 0;
alert(array2); //返回一、二、3

3.js跨域 什么是跨域
解决思路：

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源，这里跨域是广义的。

广义的跨域：

1.) 资源跳转： A连接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操做等

其实咱们一般所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。

同源策略限制如下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 没法读取 2.) DOM 和 Js对象没法得到 3.) AJAX 请求不能发送

常见跨域场景

URL                                      说明                    是否容许通讯
http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不一样文件或路径 容许 http://www.domain.com/lab/c.js  http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名，不一样端口 不容许  http://www.domain.com/a.js https://www.domain.com/b.js 同一域名，不一样协议 不容许  http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名对应相同ip 不容许  http://www.domain.com/a.js http://x.domain.com/b.js 主域相同，子域不一样 不容许 http://domain.com/c.js  http://www.domain1.com/a.js http://www.domain2.com/b.js 不一样域名 不容许

1、jsonp解决跨域
 
jsonp的原理
   JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
  JSONP即JSON with Padding。因为同源策略的限制，XmlHttpRequest只容许请求当前源（域名、协议、端口）的资源。若是要进行跨域请求， 咱们能够经过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中能够直接使用JSON传递javascript对象。 这种跨域的通信方式称为JSONP。 
   Jsonp的执行过程以下： 
   首先在客户端注册一个callback (如:'testjsonpcallback'), 而后把callback的名字(如:testjsonpcallback)传给服务器。注意：服务端获得callback的数值后，要用testjsonpcallback(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。 
   而后以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 'callback'的值 testjsonpcallback 
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。 
   客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据，做为参数， 传入到了客户端预先定义好的 callback 函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
<h1>测试jsonp</h1>
<ul>
<li class="num">手机号码: <span></span></li>
<li class="province">归属省份: <span></span></li>
<li class="operators">运营商: <span></span></li>
</ul>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function testjsonpcallback(data){
alert(JSON.stringify(data));
var province = data.province,
operators = data.catName,
num = data.telString;

$('.num span').html(num);
$('.province span').html(province);
$('.operators span').html(operators);

}

</script>
<script src ="http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15510588888&callback=testjsonpcallback" type="text/javascript"></script>
</body>
</html>

2、jquery 基本概念和ajax解决跨域

ajax的基本概念

了解这个概念，首先得先知道同步交互与异步交互

同步交互：客户端浏览器给服务器发送一个请求，服务器返回一个页面，返回的页面会把以前的页面覆盖掉，咱们把这种交互方式称为同步交互
异步交互：就是可会断浏览器给服务器发送一个请求，服务器返回数据，返回的数据不会把以前的页面覆盖掉，咱们把这种交互方式称之为异步交互

ajax主要的应用场景：页面不刷新，就能够与服务器进行动态的数据交互

交互的原理

同步交互原理：咱们在浏览器，怎么给服务器发送请求呢？能够点击超连接，提交表单，浏览器地址栏输入地址，都是给服务器发送请求，其实是浏览器帮助咱们给服务器去发送请求
异步交互的原理：JavaScript给咱们提供了一个新的API接口，帮咱们去发送http请求，由XMLHttpRequest 对象来帮助咱们发送请求

咱们全部的交互操做均可以经过这个对象来完成，发送请求，接受服务器的数据

ajax的具体应用场景

前台能够经过XMLHttpRequest 给服务器发送请求，而后再经过XMLHttpRequest 对象来接受服务器返回的数据，最后经过dom操做把数据写到页面上
ajax：能够用来表单输入规范验证
ajax：也能够用来作性能优化，好比一个页面很是庞大，这个页面不可能一次加载完毕，实现一个滚动加载

XMLHttpRequest 交互的四个步骤

1，实例化XMLHttpRequest 对象
2，想和服务器进行交互，必须和服务器打开一个链接
3，给服务器发送数据，发送参数数据到服务器
4，接受服务器返回的数据，服务器在返回给客户端的时候会返回一些状态，能够经过监听服务器状态的改变，来更好的操控整个交互流程

①传统的ajax方法

$("#ajax").click(function(){  
     $.ajax({  
         type: "POST",  
         url: "http://js.phpsong.com/a.php",  
         data: 'name=ajax',  
         dataType:"json",  
         success: function(data){  
            alert(data.name);  
         }  
     });  
 });

②$.getJSON

$.getJSON('http://js.phpsong.com/a.php?name=getjson&callback=?', function(data){  //没有回调函数，直接处理  
    alert(data.name);    
 });

③$.getScript

$.getScript('http://js.phpsong.com/a.php?name=getscript&callback=getdata');  //回调函数根jsonp同样

④ajax jsonp

$("#jsonp").click(function(){  
     $.ajax({  
         url: 'http://js.phpsong.com/a.php',  
         data: {name: 'jsonp'},  
         dataType: 'jsonp',  
         jsonp: 'callback',      //为服务端准备的参数  
         jsonpCallback: 'getdata',   //回调函数  
         success: function(){  
            alert("success");  
         }  
     });  
 });  
  
function getdata(data){  
 $('#Result').text(data.name);  
}

js对象怎么转换为json

alert(JSON.stringify(data));

前端面试 问题汇总