转至：https://blog.csdn.net/runner_123/article/details/82864164
今日头条实习面试总结
1、实现数组扁平化
数组扁平化是指将一个多维数组变为一维数组
[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]
（1）toString & split或者jion & split
调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组
-
function flatten(Ary){
-
var midAry=Ary.toString();
-
// var midAry=Ary.join(",");
-
var result=midAry.split(
",");
-
return result;
-
}
（2）递归
递归的遍历每一项，若为数组则继续遍历，否则concat
2、实现三栏布局，中间自适应，左右两边固定
自己的实现：
-
.container{
-
position:relative;
-
width:
100%;
-
}
-
.left{
-
width:
100px;
-
background:red;
-
float:left;
-
}
-
.main{
-
width:
100%;
-
padding:
0
100px;
-
background:green;
-
}
-
.right{
-
width:
100px;
-
background:red;
-
position:absolute;
-
right:
0;
-
top:
0;
-
}
html代码段
-
<div class="container">
-
<div class="left">left
</div>
-
<div class="main">main
</div>
-
<div class="right"> right
</div>
-
</div>
3、说一说var 、let、const 的区别
| 声明变量的三种方式 | 概念区别 | 重复声明 | 作用域问题 | 变量提升问题 |
| var | var 声明全局变量 | 用于声明变量，重复声明同一变量后面的覆盖前面的。 | 可以在作用域外使用 | var 申明的变量作用域会提升 |
| let | let：声明块级变量，即局部变量。 | 用于声明变量，let在相同的作用域下面不能申明相同的变量 | 声明的地方形成作用域，作用域外无法访问 | let 申明的变量作用域不会提升 |
| const | const：用于声明常量，也具有块级作用域 ，也可声明块级 | 用于声明常量，const申明的变量初始化后不能被修改 | cosnt只能作用于当前作用域 | const申明的作用域不会被提升 |
4、css实现圆，梯形
圆：
-
#circle{
-
width:
100px;
-
height:
100px;
-
border-radius:
50px;
-
background:
#ccc;
-
}
椭圆：border-radius可以单独指定水平和垂直半径，只要用一个(/)分隔这两个值就行。还一个特性是，它可以接受长度值，还可以接受百分比，两种特性结合，就可以自适应了。
-
.ellipse{
-
width:
200px;
-
height:
100px;
-
background-color: red;
-
border-radius:
50%;
-
}
梯形：
-
.tx1{
-
float:left;
-
width:
0px;
-
height:
0px;
-
border-width:
50px;
-
border-style: solid;
-
border-color: transparent blue blue transparent;
-
}
-
.tx2{
-
width:
100px;
-
height:
100px;
-
background:
#ccc;
-
float:left;
-
-
}
-
.tx3{
-
float:left;
-
width:
0px;
-
height:
0px;
-
border-width:
50px;
-
border-style: solid;
-
border-color: transparent transparent blue blue;
-
}
html代码
-
<div class="tx1">
</div>
-
<div class="tx2">
</div>
-
<div class="tx3">
</div>
5、清除子元素的内容，还要清除其事件，一般用什么
如果仅仅删除父元素下面的子元素，使用removeChild。但是可能为子元素绑定了事件，所以不能只删除元素，而让绑定的时间继续占用内存
btn1.onclick = function(){}
btn1.onclick =null;
这样就是在解除事件绑定。
如果是用addEventListener给元素绑定的事件，那么可以用removeEventListener来解除事件绑定。
6、一般怎么实现响应式布局
(1)先介绍几种其他布局的概念
静态布局：设计固定样式，如果要适配移动端，则单独再设计一套样式
弹性布局：css3引入的一种布局方式（用来替代之前的float浮动布局）
flex-flow: 应用到需要布局的元素的父元素上，先指定元素为flex布局，display:flex;
fllex-flow是 flex-direction和 flex-wrap的简写形式
| flex-direction | 定义了弹性项目在弹性容器中的放置方向，（默认行内方向、从左到右） |
自适应布局：分别为不同的屏幕分辨率定义布局
流式布局：对页面元素的宽度进行适配调整
响应式布局：运用各种样式技巧，实现随着屏幕的变化以及PC端移动端的变化，页面布局做出相应调整。
（2）响应式布局的步骤实现
须加一句头部代码
<meta name="viewport" content="width=device-width",initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
通过媒体查询来设置样式，媒体查询@media不仅可以设置字体，也可以对图片进行设置。
@media screen and ( min-width:750px){}
宽度不用固定值，用百分比。
浮动布局使用flex;
图片处理：height：auto；为了保证图片的原始宽高比例，以至于图片不失真。
-
.m-home img{
-
max-width:
100%;
-
height:auto;
-
}
7、说一下jsonp的原理，你遇到过跨域嘛，如何解决，除了jsonp还有其他什么方法。 （1）jsonp的原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。 （2）jsonp的具体实现
比如访问不同源的域www.practice-zhao.com
直接添加script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本
-
<script type=
"text/javascript">
-
function jsonhandle(data){
-
alert(
"age:" + data.age +
"name:" + data.name);
-
}
-
<
/script>
-
<script type="text/javascript
" src="http:
//www.practice-zhao.com/remote.js"></script>
这里调用了跨域的remote.js脚本，remote.js代码如下：
-
jsonhandle({
-
"age" :
15,
-
"name":
"John",
-
})
动态的添加了一个script标签，src指向跨域的一个脚本，并且将js函数名作为callback参数传入
-
<script type=
"text/javascript">
-
function jsonhandle(data){
-
alert(
"age:" + data.age +
"name:" + data.name);
-
}
-
<
/script>
-
<script type="text/javascript
">
-
$(document).ready(function(){
-
var url = "http:
//www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
-
var obj = $(
'<script><\/script>');
-
obj.attr(
"src",url);
-
$(
"body").append(obj);
-
});
-
</script>
这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入
JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。
jQuery提供了方便使用JSONP的方式
-
$(
document).ready(
function(){
-
$.ajax({
-
type :
"get",
-
async:
false,
-
url :
"http://www.practice-zhao.com/student.php?id=1",
-
dataType:
"jsonp",
-
jsonp:
"callback",
//请求php的参数名
-
jsonpCallback:
"jsonhandle",
//要执行的回调函数
-
success :
function(data) {
-
alert(
"age:" + data.age +
"name:" + data.name);
-
}
-
-
});
-
});
只要设置dataType为jsonp即可。
总结：JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。
（3）跨域的其他解决办法
CORS 前后端协作设置请求头，Access-Control-Allow-Origin等头部信息
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
使用HTML5中新引进的window.postMessage方法来跨域传送数据
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
接收2个参数
调用postMessage方法的window对象是指要接收消息的那一个window对象，
该方法的第一个参数message为要发送的消息，类型只能为字符串；
第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
<script>
(function(){
function setArticleH(btnReadmore,posi){
var winH = $(window).height();
var articleBox = $("div.article_content");
var artH = articleBox.height();
if(artH > winH*posi){
articleBox.css({
'height':winH*posi+'px',
'overflow':'hidden'
})
btnReadmore.click(function(){
if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
if(!window.csdn.anonymousUserLimit.judgment()){
window.csdn.anonymousUserLimit.Jumplogin();
return false;
}else if(!currentUserName){
window.csdn.anonymousUserLimit.updata();
}
}
articleBox.removeAttr("style");
$(this).parent().remove();
})
}else{
btnReadmore.parent().remove();
}
}
var btnReadmore = $("#btn-readmore");
if(btnReadmore.length>0){
if(currentUserName){
setArticleH(btnReadmore,3);
}else{
setArticleH(btnReadmore,1.2);
}
}
})()
</script>
</article>
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
