佛系前端面试题记录--第一周

1. src和 href 的区别

src：是引入。src的指向会嵌入到当前标签所在的位置，比如img标签中的src，可以引入本地的图片。src的内容是页面必不可少的一部分，所以浏览器在解析src时会停下来对后续文档的处理，直到src内容加载完毕。

href：是建立链接关系。比如a标签中，它可以指向一些网络资源。加载它的时候不会停止对当前文档的处理。

2.对html 语义化的理解

即html结构中用相对应的，有一定语义的英文字母（标签）表示。
语义化的优点：易阅读，方便解析，易于维护。
例如：<header> <main> <footer> 等。
如何判断自己的html是否语义化：除去css样式，页面也能很好的展现出内容结构。

3.怎样让元素水平垂直居中

(1)弹性布局下:
对父容器：

justify-content: center;
align-items: center;  

(2)已知width下：

margin-left: auto;
margin-right: auto;

4.说说两种盒模型以及区别

content-box：盒子定义宽高 = 内容宽高（content）
border-box：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）

5.说说positon 属性

6.对 BFC 的理解

BFC是一个独立的布局环境，BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）

触发BFC的条件：
浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值inline-block, table-cell, table-caption, flex,inline-flex
overflow 除了 visible 以外的值（hidden，auto，scroll）

应用一：解决浮动塌陷

父元素由于包含了浮动元素，但本身没有设置高度，所以踏缩为零。

解决方案：

应用二：自适应两栏布局

如果想要黑色部分跳出红色的包裹，实现跟随浏览器宽度自适应的两栏布局，可以运用BFC布局。

7.清除浮动的方法

（1）触发BFC清除浮动（6中的应用一）
（2）after伪元素

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}

8.给出 [‘1’, ‘3’, ‘10’].map(parseInt) 执行结果

本条解析参考这里

结果为：1，NaN，2

首先理解map()与parseInt。

map函数

将数组的每个元素传递给指定的函数处理，并返回处理后的数组，所以 [‘1’,‘2’,‘10’].map(parseInt) 就是将字符串1，2，10作为元素；0，1，2作为下标分别调用 parseInt 函数。即分别求出 parseInt(‘1’,0), parseInt(‘2’,1), parseInt(‘10’,2)的结果。

parseInt函数

概念：以第二个参数为基数来解析第一个参数字符串，通常用来做十进制的向上取整（省略小数）如：parseInt(2.7) //结果为2

特点：接收两个参数parseInt(string,radix)

string：字母（大小写均可）、数组、特殊字符（不可放在开头,特殊字符及特殊字符后面的内容不做解析）的任意字符串，如 ‘2’、‘2w’、‘2!’

radix：解析字符串的基数，基数规则如下：

1） 区间范围介于2~36之间；

2 ） 当参数为 0，parseInt() 会根据十进制来解析；

3 ） 如果忽略该参数，默认的基数规则：

如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数；parseInt(“0xf”) //15

如果 string 以 0 开头，其后的字符解析为八进制或十六进制的数字；parseInt(“08”) //8

如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数；parseInt(“88.99f”) //88

只有字符串中的第一个数字会被返回。parseInt(“10.33”) //返回10；

开头和结尾的空格是允许的。parseInt(" 69 10 ") //返回69

如果字符串的第一个字符不能被转换为数字，返回 NaN。parseInt(“f”) //返回NaN 而parseInt(“f”，16) //返回15

说白了radix就是以二进制到36进制来解析String,如果不写默认以十进制解析。

回到题目：

parseInt(‘1’,0)：radix为0，即以十进制解析1，结果为1；
parseInt(‘2’,1)：radix为1，不符合进制范围，结果为NaN；
parseInt(‘10’,2) ：radix为2，即以二进制解析10，结果为2。（运算过程：0X2的零次方+1X2的一次方=0+2=2）。

9.数组去重

全部方法见https://segmentfault.com/a/1190000016418021

（1）ES6 Set():

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}
];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

unique()：返回参数数组中所有不同的值，并按照从小到大排序
不考虑兼容性，这种去重的方法代码最少。缺点：这种方法还无法去掉“{}”空对象。

(2)hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了
   

10.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是专门为 Vue.js 设计的状态管理库，Vuex 可以帮助我们管理共享状态，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

vuex的配置：自己整理的博客：https://blog.csdn.net/qq_43446007/article/details/108762390

适用场景：管理非父子组件之间的通信，或多层嵌套的组件之间的通信。

11.vue 组件之间的传值通信

等我项目修好的…

12.常用的meta标签

<meta charset="utf-8">
<meta name="author" content="author name" />
<meta name="renderer" content="webkit"> 默认极速内核