前端面试题分享第二期

1.页面导入样式时，使用link和@import有什么区别？

1. 从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则，除了加载CSS，还可以定义rel连接等；
2. 加载顺序的区别：页面加载时会同时加载，而@import引用会同时加载完CSS以上的加载。

2. 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

function randomArr(count, arr = []) {
  if(count === 0){
        return arr;
  }
  let num = Math.floor(Math.random() * 31) + 2;
  if(!arr.includes(num)) {
    arr.push(num);
    count--;
  }
  return randomArr(count, arr);
}
console.log(randomArr(5))

3.写一个方法去掉字符串中的空格

方法一：
function trim(str) {
    return str.split(' ').join('');
}
var result = trim(' hello world, I am keke. ');
console.log(result); // helloworld,Iamkeke. 
方法二：
var trim = function(str){
return str.replace(/\s*/g,"");
}
str.replace(/\s*/g,""); //去除字符串内所有的空格
str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
str.replace(/^\s*/,""); //去除字符串内左侧的空格
str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格

4.在页面上隐藏元素的方法有哪些？

利用 dispaly

• disaplay: none; 页面不会渲染
• visibility: hidden; 页面会渲染只是不限显示
• opacity: 0; 看不见，但是会占据空间

利用 position （absolute 的情况下）

• left/right/top/bottom: 9999px/-9999px 让元素在视区外
• z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

5.简述超链接target属性的取值和作用

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

6.CSS3新增伪类有哪些并简要描述

CSS3 中规定伪类使用一个 : 来表示；伪元素则使用 :: 来表示。

CSS3 中新增的伪类有以下这些:

:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的（控制表单奇数、偶数行的样式）
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素

7.写一个把字符串大小写切换的方法 

function caseTransform (str) {
	let transformed = '';
	for (let v of str) {
		const charCode = v.charCodeAt();
		if (charCode >= 97 && charCode <= 122) {
			transformed += v.toUpperCase();
		}
		else if (charCode >= 65 && charCode <= 90) {
			transformed += v.toLowerCase();
		}
		else {
			transformed += v;
		}
	}
	return transformed;
}

注释：这个所使用的方法是通过ASCII码判断的

8.label都有哪些作用？

lable可以关联控件，可以和表单元素结合，使表单元素获得焦点。有两个属性，for和accesskey。
for 属性用来关联表单，accesskey属性设置快捷键。

9.iframe框架都有哪些优缺点？

优点：

1. 可以实现异步刷新，单个 iframe 刷新不影响整体窗口的刷新（可以实现无刷新上传，在 FormData 无法使用时）
2. 可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容）
3. 多页面应用时，对于共同的 header, footer 可以使用 iframe 加载，拆分代码（导航栏的应用）

缺点：

1. 每一个 iframe 都对应着一个页面，也就意味着多余的 css, js 文件的载入，会增加请求的开销
2. 如果 iframe 内还有滚动条，会严重影响用户体验
3. window.onload 事件会在所有 iframe 加载完成后才触发，因此会造成页面阻塞

• 10. 统计某一字符或字符串在另一个字符串中出现的次数

• function substrCount(str, target) {
    let count = 0;
    while (str.includes(target)) {
      const index = str.indexOf(target);
      count++;
      str = str.substring(index + target.length);
    }
    return count;
  }

  11.清除浮动的方式有哪些及优缺点？

• 1 给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。
  2给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。
  3给父盒子添加overflow属性。 overflow:auto; 有可能出现滚动条，影响美观。overflow:hidden; 可能会带来内容不可见的问题。
  4 父盒子里最下方引入清除浮动块。最简单的有：
  . 有很多人是这么解决的，但是并不推荐，因为其引入了不必要的冗余元素 。
  5 after伪类清除浮动。外部盒子的after伪元素设置clear属性。这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，但是低版本IE不兼容。

12.viewport常见设置都有哪些？

设置	解释
width	设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

13.简要描述下什么是回调函数

回调是把一个函数作为参数传递给另一个函数，当该函数满足某个条件时触发该参数函数,但是如果回调函数嵌套过多就会形成回调地狱。。。

14.css常用的布局方式有哪些？

• 流式布局: 最基本的布局，就是顺着 html 像流水一样流下来
• 绝对定位: 利用 position: absolute 进行绝对定位的布局
• float 布局: 最初用来解决多栏布局的问题。
• 珊格布局: bootstrap 用的布局，把页面分为 24 分，通过 row 和 col 进行布局
• flex 布局: css3 的布局可以非常灵活地进行布局和排版
• grid 布局: 网格布局

15.简要描述下JS有哪些内置的对象 

• 时间对象Date
• 字符串对象String
• 数学对象Math
• 数值对象Number
• 数组对象Array
• 函数对象Function
• 函数参数集合arguments
• 布尔对象Boolean
• 错误对象Error
• 基础对象Object

注释：以上面试题是我在github中找到的我认为比较常用的面试题，以及弥补了我这些知识点的部分知识盲区，该链接中有很多是我们平时不常用的，建议有时间的可以了解一下，每天刷刷看看，前端还是挺多的，目前五千多道