前端面试题
第六套
1.
var a=1;
function func(){
console.log(a);
var a="in function";
}
func();
console.log(a);
写出两个conslole.log(a);的值。
解：
var a=1;
function func(){
console.log(a);//undefined
var a="in function";
}
func();//undefined
console.log(a);//1
相等于：
var a=1;
function func(){
var a;
console.log(a);//undefined
a="in function";
}
func();//undefined
console.log(a);//1
函数内部的a，在console.log后面，这里无法访问a的值，a这里先声明，后赋值。
2.
(function func() {
var a=b='res';
})();
console.log(b);
console.log(a);
解:
(function func() {
var a=b='res';
})();
console.log(b);//res
console.log(a);//a is not defined
这里a是局部变量，b是全局变量
3.
function func1() {
var n=99;
nAdd=function(){
this.n+=1;
console.log(this.n);
};
function func2(){
console.log(n);
}
return func2;
}
var result=func1();
result();
nAdd();
result();
解:
function func1() {
var n=99;
nAdd=function(){
this.n+=1;
console.log(this.n);
};
function func2(){
console.log(n);
}
return func2;
}
var result=func1();
result(); //99
nAdd();//NAN
result();//99
第八套
1. 请用javascript实现数组的快速排序
解:
var quickSort=function fun(arr) {
if (arr.length<=1) {
return arr;
}
var pivotIndex=Math.floor(arr.length/2);
var pivot=arr.splice(pivotIndex,1)[0];
var left=[];
var right=[];
for (var i = 0; i < arr.length; i++) {
if(arr[i]<pivot){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot],quickSort(right));
}
第九套
编写函数sum，实现不定量参数的求和；非number类型参数需要进行过滤；
解:
function Sum(argument) {
var sum=0;
for(var i=0;i<arguments.length;i++){
if (typeof(arguments[i])=="number") {
sum +=arguments[i]
}
}
return sum;
}
注意：访问参数使用arguments[i]
判断数据类型：typeof(a)==="number"
第十三套
var fullname='John';
var obj={
fullname:'Colin',
prop:{
fullname:'Allen',
getFullname:function () {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test=obj.prop.getFullname;
console.log(test());
解:
Allen John
第一次调用，直接在对象中寻找fullname
第二次调用，指向全局环境
第十四套
1.请至少用两种方式实现不使用第三个变量的情况下，讲两个变量值对调。
var a=1,b=2;
[a,b]=[b,a]
var a=1,b=2;
a=[a,b];
b=a[0];
a=a[1];
第十五套
1.一个满屏的品字布局如何设计？
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,html{
width: 100%;
height: 100%;
}
#top{
width: 100%;
height: 50%;
background: #c0ff55;
}
#left{
width: 50%;
height: 50%;
background: #d97fff;
float: left;
}
#right{
width: 50%;
height: 50%;
background: #2fe2ff;
float: left;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
2.::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用。
css2时代，伪元素和伪类都已一个：开头。css3时代为进行区分，伪元素使用双冒号::
伪类使用单冒号:.但是对于css2新增的伪元素，必须采用双冒号写法。
第十九套
编写一个javascript函数fn，该函数有一个参数n（数字类型），其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是[2,32]。
function fn(n) {
var arr = [];
var state = true;
if (n < 1 || n > 30) {
console.log("您的输入有误")
} else {
for (var i = 0; i < n; i++) {
newNum = Math.floor(Math.random() * 31) + 2;
for (var j = 0; j < arr.length; j++) {
if (arr[j] == newNum) {
i=i-1;
state = false;
break;
}
}
if (state == true) {
arr.push(newNum);
}
state=true;
}
return arr;
}
}
上面的代码很笨，特别是遍历arr这里可以使用arr.indexOf函数。
function fn(n) {
var min = 2,
max = 32;
var arr = [];
function getRandom(mix, max) {
var w = max - min;
return Math.floor(Math.random() * (w + 1)) + min;
}
function checkInarr(arr, rnd) {
if (arr.indexOf(rnd) === -1) {
return false;
} else {
return true;
}
}
for (i = 0; i < n; i++) {
var randomNumber = getRandom(min, max);
if (checkInarr(arr, randomNumber)) {
i--;
} else {
arr.push(randomNumber);
}
}
return arr;
}
把随机函数生成和检查新数和数组是否相等独立出来，增强了函数的可读性，代码更加健壮，第一种写法，维护将是一种灾难！
