前端面试 问题汇总

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

 

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

解决思路：

<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 有三种->主要数据类型、两种->复合数据类型和两种->特殊数据类型。

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

主要（基本）数据类型

字符串
数值
布尔

复合（引用）数据类型

对象
数组

特殊数据类型

 Null
`Undefined`
Array 对象方法





方法描述



concat()
连接两个或更多的数组，并返回结果。




join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。




pop()
删除并返回数组的最后一个元素




push()
向数组的末尾添加一个或更多元素，并返回新的长度。




reverse()
颠倒数组中元素的顺序。




shift()
删除并返回数组的第一个元素




slice()
从某个已有的数组返回选定的元素




sort()
对数组的元素进行排序




splice()
删除元素，并向数组添加新元素。




toSource()
返回该对象的源代码。




toString()
把数组转换为字符串，并返回结果。




toLocaleString()
把数组转换为本地数组，并返回结果。




unshift()
向数组的开头添加一个或更多元素，并返回新的长度。




valueOf()
返回数组对象的原始值






 


二、 使用slice()


Array.slice 方法:


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


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


可使用slice()进行复制，因为slice()返回也是数组。




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










三、 使用concat()


      注意concat()返回的并不是调用函数的Array，而是一个新的Array，所以可以利用这一点进行复制。




var array1 = new Array("1","2","3"); 
var array2; 
array2 = array1.concat(); 
array1.length = 0; 
alert(array2); //返回1、2、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        不同域名                         不允许

一、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>  


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


ajax的基本概念


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


    

  • 同步交互：客户端浏览器给服务器发送一个请求，服务器返回一个页面，返回的页面会把之前的页面覆盖掉，我们把这种交互方式称为同步交互
    • 

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



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


交互的原理


    

  • 

    同步交互原理：我们在浏览器，怎么给服务器发送请求呢？可以点击超链接，提交表单，浏览器地址栏输入地址，都是给服务器发送请求，实际上是浏览器帮助我们给服务器去发送请求
    

    • 

  • 

    异步交互的原理：JavaScript给我们提供了一个新的API接口，帮我们去发送http请求，由XMLHttpRequest 对象来帮助我们发送请求
    

    • 



我们所有的交互操作都可以通过这个对象来完成，发送请求，接受服务器的数据


ajax的具体应用场景


    

  • 前台可以通过XMLHttpRequest 给服务器发送请求，然后再通过XMLHttpRequest 对象来接受服务器返回的数据，最后通过dom操作把数据写到页面上
    • 

  • ajax：可以用来表单输入规范验证
    • 

  • ajax：也可以用来做性能优化，比如一个页面非常庞大，这个页面不可能一次加载完毕，实现一个滚动加载
    • 



XMLHttpRequest 交互的四个步骤


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


①传统的ajax方法


js


$("#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));


 











            

            
posted @ 
2018-04-09 11:07 
黄志鹏_博客 
阅读(215) 
评论(0) 
编辑 
收藏 
举报