记某次初面笔试题

最新推荐文章于 2023-10-21 05:05:08 发布

润桦铧骅哗烨

最新推荐文章于 2023-10-21 05:05:08 发布

阅读量710

点赞数 1

分类专栏：个人面试题总结文章标签：前端基础面试题

本文链接：https://blog.csdn.net/qq_39492840/article/details/86063203

版权

个人面试题总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

都是一些很基础的题目，但是假如对作用域和原型链这些不熟悉的话，还是很难理解，直接放题，答案也只是我个人的答案和解释，有不对的欢迎大家指出~

1.简述一下CSS的标准盒模型？它和ie6盒模型的区别？有没有了解过css3的box-sizing的属性？

盒模型的内容包括内容区，内边距，边框，外边距。其中盒模型有标准盒模型和ie6盒模型，这两个的主要区别在于，标准盒模型的宽高度即为内容区宽高度，而ie6盒模型的宽高度则是内容区，内边距以及边框的宽高度总和。css3的box-sizing属性有两个，一个是content-box，一个是border-box，前者对应的是默认的标准盒模型，设置的宽度width即为内容区的宽度，后者对应的是ie6盒模型，设置的宽度width为内容区加内边距加边框的总宽度

2.写出如下标签元素的英语全称和中文翻译：ul，ol，div，dd，dt，dl？

ul：无序列表（Unordered Lists），有序列表（Ordered Lists），划分（Division），定义描述（Definition Description），定义术语（Definition term），定义列表（Definition List）

3.请写出以下代码段的输出结果：

alert(-1?true:false);

alert(''?true:false);

alert(()?true:false);

输出结果：

true

false

false

解释：Boolean类型只有两个值：true和false，true不一定就是1，false不一定就是0；任何类型的值都有Boolean值：

对于String类型，任何非空字符串都转换为true，“”会转换为false；对于Number，任何非零字符串包括无穷大都转换为true，0和NAN会转换为false；对于Object，除null以外，任何对象都会转换为true；对于Undefined，永远为false

4.请写出js基本数据类型：

Number、String、Boolean、Null、Symbol、Undefined

5.请编写js数组函数delSame(arr)，去除数组里的重复项，并返回新的数组。

function delSame(arr){
    var a=[];
    for(var i=0;i<arr.length;i++){
        if(a.indexOf(arr[i])==-1){
            a.push(arr[i]);
        }
    }
    return a;
}

function delSame(arr){
    var a=[];
    arr.forEach(function(e){
        if(arr.indexOf(e)==-1){
            a.push(e);
        }
    })
    return a;
}

(1)编写css和html代码，使得文本‘text’在宽高为100px的父div内水平和垂直居中；

<style>
    div{
        text-align: center;
        width:100px;
        height: 100px;
        line-height: 100px;
        border: 1px red solid;
    }
</style>
<body>
    <div>text</div>
</body>

(2)编写css和html代码，使得宽高为50px的div在宽高为100px的div内水平和垂直居中；

<style>
    .father{
        width: 100px;
        height: 100px;
        border: 1px red solid;
        position: relative;
    }
    .sub{
        width:50px;
        height:50px;
        border:1px blue solid;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px; 
    }
</style>
<body>
    <div class="father">
        <div class="sub"></div>
    </div>
</body>

7.相对定位元素、绝对定位元素和固定定位元素三者的定位原点分别是什么？

相对定位元素的定位原点为元素本来的位置，绝对定位元素的定位原点相对于定位为绝对定位或是相对定位的父元素的左上角，固定定位相对于窗口左上角。

8.谈谈你对json的理解，如何实现json对象与json数据之间的互转？

json是一种轻量级的数据交换格式，将数据转换成为字符串，使其在客户端和服务器端之间传递。JSON.parse()可以将json字符串转换为json对象，JSON.stringfy可以将json对象转换为json字符串

9.写出以下代码的输出结果

var name="Global";
var object={
	name:'local',
	fn:function(){
		return this.name;
	},
	getName:function(){
		console.log("1."+this.name);
		return function(){
			return this.name;
		}
	},
	getFn:function(){
		return this.fn;
	}
};
var fun=object.getName();
console.log("2."+fun());
console.log("3."+fun.apply(object));
console.log("4."+fun.call(object));
var fn=object.getFn();
console.log("5."+fn());

输出结果：

1.local
2.Global
3.local
4.local
5.Global

解释：考点主要是this的用法，要理解此题，只需要记住一点：在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了！

var fun=object.getName();语句中，执行了object.getName()函数，并且返回一个匿名函数给变量fun。此时，getName的调用对象是object，因此先输出local

console.log("2."+fun());语句中，此时的fun仅仅只是匿名函数的副本，他的执行环境是全局环境，因此输出Global

console.log("3."+fun.apply(object));和console.log("4."+fun.call(object));将fun执行的环境改为了object，因此输出为local

var fn=object.getFn();console.log("5."+fn());和第一个语句类似，fn的执行环境是全局对象，因此this指向为全局对象，输出Global

10.写出以下程序的输出结果：

var name="global";

var obj={
    name:"fromObj",
    test:function(){
        setTimeout(function(){
            var name="local";
            console.log(this.name);
        },1)
    }
};

obj.test();

输出结果：

global

解释：简单理解可以理解为，setTimeout以及setInterval中的参数假如是一个函数，则会在一个与函数完全分离的执行环境中执行，this指向对象是window，但是假如是一句语句，则this指向原来的对象。在MDN中关于this的问题中有提及：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

11.写出以下程序的输出结果：

console.log(typeof sayHello);
sayHello();
function sayHello(){
    console.log("hello!");
}

输出结果：

function
hello!

解释：

解释：变量提升，function的定义会被提升到前面

12.写出以下程序的输出结果：

var father1={
    name:"John"
}
var father2={
    name:"Tom"
}
var Son=function(){
    
};
Son.prototype=father1;
var son1=new Son();
console.log(son1.name);
Son.prototype=father2;
console.log(son1.name);
var son2=new Son();
console.log(son2.name);
son2.name="jack";
console.log(father2.name);

输出结果：

John
John
Tom
Tom

解释：第一句console，构造函数中没有name，因此会去找到原型对象的name输出John；第二句console，就是问你，如果改变一个 constructor 的 prototype，他的实例会发生什么改变？答案是：改变了prototype之后创建的实例指向了新的prototype对象，而之前的依然指向老的prototype对象。

另外，附上prototype，constructor，_proto_关系图：

13.写出以下程序的输出结果：

function fn(obj){
    obj.name="Tom";
    return obj;
}
var obj={
    name:"John"
}
var newObj=fn(obj);
console.log(obj.name);
console.log(newObj.name);

输出结果：

Tom
Tom

解释：这里考的是函数的传参是按值传递还是按引用传递，ECMAScript永远是按值传递的，不论是基本类型还是引用类型。但是ECMAScript对于对象的引用是特别的，就是它永远只会给变量赋予这个对象的地址，即指针，因此在函数fn中obj保存的是对象地址的一个副本，不是对象地址，也不是对象的副本，对参数obj的更改是会影响到外部obj的。

需要注意的是，很多人对这里理解为js对对象的引用是按引用传递的，修改一下题目代码：

function fn(obj){
    obj=new Object();
    obj.name="Tom";
    return obj;
}
var obj={
    name:"John"
}
var newObj=fn(obj);
console.log(obj.name);
console.log(newObj.name);

这时候的输出结果就是：

John
Tom

如果对象是按引用传递的，那么在参数对象obj被修改的时候，外部obj就会自动被修改为name为Tom的新对象。但是输出的依然是John，这就说明即使在函数内部修改了参数obj的值，但是原始的引用仍然没改变。实际上，当在函数重写obj的时候，这个变量引用的就是一个局部对象了。

14.写出下面数字的颜色：

<style>
    body{
        color: black;
    }
    body span:nth-child(2){
        color: red;
    }
    body span:nth-child(4){
        color: green;
    }
    body span:nth-child(5){
        color: blue;
    }
</style>
<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <div>4</div>
    <span>5</span>
    <span>6</span>
</body>

结果：

黑
红
黑
黑
蓝
黑

解释：这里做题的同学，可能会犹豫的是，就是对nth-child和nth-of-type这两种选择器的使用有混淆。假如把nth-child换成nth-of-type，那么输出结果就是黑红黑黑绿蓝。因此，ele:nth-child(n)选择的就是第n个子元素并且这个子元素是ele元素，而ele:nth-of-type(n)选择的是子元素中第n个ele元素，有点拗口，好好理解一下就好了

优先级：!important>行内样式>id>类>伪类选择器>结构选择器>标签选择器>统配选择器>继承

15.跨域的实现方案有哪些？

有一个参考的博客：https://www.cnblogs.com/JChen666/p/3399951.html，不过一般主要用jsonp或者document.domain+iframe

16.Js数组的api有哪些？如何用js实现堆栈？

reverse，sort，push，pop，slice，splice，unshift，shift等；结合push和pop可以实现堆栈的后进先出

17.现有一个div，其高度和宽度均为100px，如何使得一个高度为25px，宽度为50px的图片在其内部水平垂直居中，给出至少两种以上的答案

参考博客：https://www.cnblogs.com/chenwenhao/p/6942536.html

18.请实现一个阶乘函数

//最基本递归
function factorial (num) { 
    if (num < 0) { 
        return -1; 
    } else if (num === 0 || num === 1) { 
        return 1; 
    } else { 
        return (num * factorial(num - 1)); 
    } 
};

//取消耦合
function factorial(num){
    if (num <=1) {
        return 1;
    } else {
        return num * arguments.callee(num-1)
    } 
}
//尾递归
function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}