1、实现数组扁平化
原
今日头条实习面试总结
转至：https://blog.csdn.net/runner_123/article/details/82864164
数组扁平化是指将一个多维数组变为一维数组
[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 | 定义了弹性项目在弹性容器中的放置方向，（默认行内方向、从左到右） |
| flex-wrap |
指定项目是否在必要的时候换行，默认不换行 arap初始值，还有 wrap || wrap-reverse |
- .top ul{
- display:flex;
- flex-direction: row;
- flex-wrap:nowrap;
- }
自适应布局：分别为不同的屏幕分辨率定义布局
流式布局：对页面元素的宽度进行适配调整
响应式布局：运用各种样式技巧，实现随着屏幕的变化以及PC端移动端的变化，页面布局做出相应调整。
（2）响应式布局的步骤实现
须加一句头部代码
"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脚本
这里调用了跨域的remote.js脚本，remote.js代码如下：
-
jsonhandle({
-
"age" :
15,
-
"name":
"John",
-
})
动态的添加了一个script标签，src指向跨域的一个脚本，并且将js函数名作为callback参数传入