转至: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>