前端面试题1-10

最新推荐文章于 2024-08-13 22:07:58 发布

Mr丶_____

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量87

点赞数

分类专栏：前端面试题文章标签： javascript css html html5 jquery

本文链接：https://blog.csdn.net/Mllmlu/article/details/115689743

版权

前端面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1-css的居中方式

1.水平居中的 margin：0 auto;
	这个是用于子元素上的，前提是不受float影响
2.水平居中 text-align：center；
	img的display：inline-block；类似一样在不受float影响下进行
	使在父元素上添加效果让它进行水平居中
3.水平垂直居中一：定位和需要定位的元素的margin减去宽高的一半
	这种方法的局限性在于需要知道需要垂直居中的宽高 才能实现，经常使用这种方法
4.水平垂直居中二：定位和margin:auto;
	这个方法也很实用，不用受到宽高的限制,也很好用
5.水平垂直居中三：绝对定位和transfrom
6.水平垂直居中（四）diplay：table-cell
	其实这个就是把其变成表格样式，再利用表格的样式来进行居中
7.水平垂直居中（五）flexBox居中
	这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题
8.水平垂直居中（六）利用vertical-align:middle;

2-px,em,rem,%

1、px:像素单位，一旦设置就无法因为适应页面大小而改变
2、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
4、%也是相对于父元素参考设置元素的大小

3-display的值和作用

display 的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit
其中常用的的有none、inline、block、inline-block。分别的意思是：
1、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。
2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

4-数组去重

1、利用ES6 Set去重（ES6中最常用）
2、利用for嵌套for，然后splice去重（ES5中最常用）
3、indexof去重
4、sort去重
5、利用hasOwnProperty
6、利用filter去重

5-统计字符串中出现最多的字符

1、数组的方式去重

	// 数组去重：
		var arr = [1, 2, 3, 4, 5, 6, 745, 3, 2, 4, 5, 7, 2, 3, 21, 4, 6, 3, 3, 6, 73, 3];
		var h = [];
		var m = [];
		// 数组去重
		for (var n = 0; n < arr.length; n++) {
			if (h[arr[n]] == undefined) { // arr中的元素n没有在h中出现过
				h.push(arr[n]); // 将arr[n]追加到h数组中
			}
		}
		console.log(h);
		// 统计数组中相同元素出现的个数
		for (var i = 0; i < arr.length; i++) {
			if(m[arr[i]] == undefined) {
				m[arr[i]] = 1;
			}else{
				m[arr[i]] ++;
			}
		}
		console.log(m);

6-js垃圾回收机制

1、垃圾回收
JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。
可达性
JavaScript 中内存管理的主要概念是可达性。

简单地说，“可达性” 值就是那些以某种方式可访问或可用的值，它们被保证存储在内存中。

a. 有一组基本的固有可达值，由于显而易见的原因无法删除。例如:

本地函数的局部变量和参数
当前嵌套调用链上的其他函数的变量和参数
全局变量
还有一些其他的，内部的
这些值称为根。

b. 如果引用或引用链可以从根访问任何其他值，则认为该值是可访问的。

例如，如果局部变量中有对象，并且该对象具有引用另一个对象的属性，则该对象被视为可达性， 它引用的那些也是可以访问的，详细的例子如下。

JavaScript 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，并删除那些不可访问的对象。

7-原型、原型链

1、原型：在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。
2、原型链：当从一个对象中读取属性或者方法的时候，如果对象自身没有这样的属性和方法时，就会从关联的prototype哪里寻找，如果prototype中没有，就会从prototype关联的prototype中寻找，直到prototype...prototype...为null的时候，从而形成了原型链(根本上来说就是继承的关系)
		a.isProtoitypeOf(b)----判断a是否存在于b的原型链中

8-作用域及作用域链

1、作用域：
在js中，只有全局作用域和函数作用域
全局作用域指的是：代码在任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
函数作用指的是：在函数中才能生效的代码片段
2、一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。
但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

9-闭包

1、什么是闭包？
1.在一个外函数中定义了一个内函数，内函数里运用了外函数的临时变量，并且外函数的返回值是内函数的引用。这样就构成了一个闭包。
一般情况下，在我们认知当中，如果一个函数结束，函数的内部所有东西都会释放掉，还给内存，局部变量都会消失。但是闭包是一种特殊情况，如果外函数在结束的时候发现有自己的临时变量将来会在内部函数中用到，就把这个临时变量绑定给了内部函数，然后自己再结束。

			function outer(){//外层函数
				var n=0;//外层函数封装的受保护的局部变量
				return function(){//内层函数
					return ++n;//用内层函数调用外层函数的局部变量
				}
			}
			var getNum=outer(); //getnum保存的是内部函数的引用
			console.log(getNum());//1
			console.log(getNum());//2
			console.log(getNum());//3
			var n=100;
			console.log(getNum());//4

10-数组转化为字符串的方法

1、toString() 将数组转换成一个字符串
2、toLocalString() 把数组转换成本地约定的字符串
3、join() 将数组元素连接起来以构建一个字符串

var a = [1,2,3,4,5,6,7,8,9,0];  //定义数组
var s = a.toString();  //把数组转换为字符串
console.log(s);  //返回字符串“1,2,3,4,5,6,7,8,9,0”
console.log(typeof s);  //返回字符串string，说明是字符串类型
```javascript
var a = [1,2,3,4,5];  //定义数组
var s = a.join("==");  //指定分隔符
console.log(s);  //返回字符串“1==2==3==4==5”

Mr丶_____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题1-10

css的居中方式1.水平居中的 margin：0 auto; 这个是用于子元素上的，前提是不受float影响2.水平居中 text-align：center； img的display：inline-block；类似一样在不受float影响下进行使在父元素上添加效果让它进行水平居中3.水平垂直居中一：定位和需要定位的元素的margin减去宽高的一半这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法4.水平垂直居中二：定位和margin:auto; 这个方法也很实用
复制链接

扫一扫

专栏目录