1、写输出,关于提升
alert(a);
var a=1;
functiona(){
alert(a);
}
alert(a);
分别输出
function a(){
alert(a);
}
1
相当于
var a;
function a(){
alert(a);
}
alert(a);
a=1;
alert(a);//1
拓展:
(function(){
var a=b=1;
})()
console.log(a);//出错,a is notdefined
console.log(b);//1
//相当于
(function(){
var a;
a=1;
b=1;//b是全局变量,外部能访问,但是a是局部变量
})()
但是使用严格模式‘use strict’则都报错
(function(){
'use strict'
var a=b=1;
})()
console.log(a);//出错,a is notdefined
console.log(b);//出错,b is notdefined
2、两个有序数组,合并成一个有序数组。
思路,A,B两个数组从头比较,将较小着放入新数组,同时下标++,直到其中一数组走到头,将另一个数组的后面的数同时加入新数组,返回这个新数组
function merSort(A,B){
var i=0,j=0,arr=[];
while(A[i]&&B[j]){
if(A[i]<B[j]){
arr.push(A[i]);
i++;
}else{
arr.push(B[j]);
j++;
}
}
if(!A[i]){
arr=arr.concat(B.slice(j));
}
if(!B[j]){
arr=arr.concat(A.slice(i));
}
return arr;
}
3、给定两个数组,两数组的交集后,去重输出。不能用es6.
思路,定义一个新数组,存放不重复的交集元素。遍历A(B)数组,判断另一个数组是否有重复元素,若有且在新数组中没有,则吧该数加入新数组,最后输出新数组
function onlyEle(A, B) {
var i = 0,
j = 0,
arr = [],
l = A.length;
for (let i = l - 1; i >= 0; i--) {
let index = B.indexOf(A[i]),
indexArr = arr.indexOf(A[i]);
if (index >= 0 && indexArr < 0) { //B中和A[i]相等的元素
arr.push(A[i]);
}
}
return arr;
}
4、不定宽元素垂直居中
父亲相对定位,孩子绝对定位,top,left各50%,然后相对自身移动一半
//dom
<div id="bd">
<div class="main">main</div>
</div>
//css
#bd{
position: relative;
height: 100px;
width: 100px;
border: 1px solid;
}
.main{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
5、布局,中间自适应,两侧栏固定
1、flex布局
//html
<div id="bd">
<div class="l"></div>
<div class="c"></div>
<div class="r"></div>
</div>
//css
#bd{
display: flex;
width: 100%;
height: 500px;
}
.c{
flex:1;
background-color: #f00;
}
.l,.r{
flex:0 0 100px;
background-color: #ff0;
}
圣杯布局
//html
div id="bd">
<div class="main">m</div>
<div class="sub">l</div>
<div class="extra">r</div>
</div>
//css
.main {
float: left;
width: 100%;
background:#ff0;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
background-color: #f00;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
background-color: #f00;
}
#bd {
padding: 0 230px 0 190px;
}
3、双飞翼布局
//dom
<div id="main-wrap" class="column">
<div id="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
//css
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
6、绘制布局
注意看清楚所给出的数值。看清每一个字眼,时间宝贵,面试官不会无缘无故写上的,凡是写上的,或者强调说了的,都是要考虑的,否则考虑不周到就掉进陷阱里了
<div id="bd" style="width: 100px;height: 100px;border:1px solid;">
<div class="main" style="width:50px;height: 50px;margin-top: 100px;background-color: #f00;">m</div>
</div>

这里的margin-top:100px,和父元素的高度一样高了,孩子模型必定跑出父亲的范围
网友评论