前端基础问题----认识前端（面试常问）

前言：现在很多人都以为前端就是简单地调调页面，换换接口没什么难的。其实不然，不可否认的是前端确实会给人一种很轻松的感觉。这主要是因为前端在刚开始学习的时候，并不会像后端有些抽象。就算不认识不了解其作用的代码，在调试页面的时候根据情况也可以有自己的答案。这里我主要对刚接触前端的朋友应该从哪几个方面去认识，并进行学习

H5部分：

一.介绍下BFC及其作用

BFC就是块级格式上下文，是页面盒模型布局中的一种css渲染模式，相当于一个独立的容器==，里面的元素和外部的元素互不影响

创建BFC的方式有：

​    1、html 根元素

​    2、float 浮动

​    3、绝对定位absolute,固定定位fixed

​    4、overflow 不为 visiable

​    5、display 为表格布局或者弹性布局

BFC主要的作用是：

​    1、清除浮动

​    2、外边距重叠问题

二.谈谈你对BFC的理解

块级格式上下文，它形成一个完全独立的空间，让空间中的子元素不会影响外面的布局

如何触发：float、position：absolute

三.css选择器包含六种

1、元素选择器

2 、关系选择器

3、类选择器

4、id选择器

5、伪类选择器

6、为元素选择器

四.谈谈你对盒模型的理解或者说什么是盒子？

盒模型概念：是css布局  的思维模型   把一个元素的尺寸分为  content  +   padding  +  border  +   margin几部分

box-sizing属性：告诉浏览器怎么计算一个元素的尺寸

标准盒模型：box-sizing：content-box

怪异盒模型（IE盒模型）：box-sizing：border-box

区别：假设两个div都设置100px的宽高，加上padding、border、margin等尺寸

​            如果是标准盒模型：内容区content尺寸100px不变，再加尺寸会向外扩张，整体尺寸变大

​            如果是怪异盒模型：整体尺寸100px不变，再加尺寸会向内压缩，内容区尺寸会小于100px

五.HTML和XHTML的区别？

主要是体现在代码规范上，XHTML规范会更加严格

六.CSS3新特性有哪些？

// 边框
border-radius 圆角边框
box-shadow 边框阴影

// 背景
background-size 背景图片大小
background-origin 背景图片定位

// 字体
@font-face{
    font-family
}

// 2D、3D转换
transform: translate rotate等

// 动画
// 定义动画:  
@keyframes name { // from to 也可以写成百分比的形式 0% 50% 100% ····
    from {
    
    }
    to {
    
    }
}

// 引用动画：
animation: name 2s linear 2s infinite alternate
// 动画名 持续时间 时序函数 延迟时间 播放次数 是否逆向播放

七.Sass、Less、css的区别有什么

• Sass、Less 和 css的区别

  Sass和Less都是==css预处理语言==，使用他们可以编写更简便、更灵活、更加强大的css样式

• Sass 和 Less 的区别

1. 实现方式：

   Less是==基于==JavaScript，是==在==客户==端处理==的。

   Sass是==基于==Ruby的，是==在==服务器==端处理==的。

2. 如何表示变量：

   Less用@

   Sass用$

3. 实用性：

   Sass功能更强大、Less上手更容易

Less的语法包括：

1、变量： @color: red

2、父子嵌套:

3、混合

4、函数

5、@import

这里我并没有直接上代码去解释，后续会陆陆续续把几个主流前端框架的基础代码展示出来，病解释一下。

JS 部分

1.for...in 和 for...of的区别

1. es6 新引入了for...of循环 , 作为遍历所有数据结构的统一的方法

2. for...in循环读取Key (键名), for...of循环读取Value(键值)

3. for...in只适用于遍历对象，for...in可以遍历对象时，遍历时需要和 Object.keys() 搭配使用

4. 总之，遍历对象基本使用for...in，遍历数组基本使用for...of

2.new一个对象，这个过程中会发生了什么

例如 let p = new clickButton(a,b)

1. 在内存中开辟一个新的空间，创建一个空对象
2. 在空对象中添加 proto  属性，指向构造函数的原型对象
3. 将构造函数中的this指向这个新对象
4. 执行构造函数内部的代码，为这个对象添加属性。
5. 返回对象

3.防抖和节流

-一句话定义：函数防抖和节流都是用来==控制事件触发频率==的方法, 利用定时器setTimeout，节约了性能.

应用场景：输入框持续输入，或者根据输入内容远程校验，用户多次触发点击事件，滚轮事件，拖拽事件等等.

形象一些的说明就是：

​                    防抖(debounce) => 当持续触发事件时，函数不执行，等最后一次触发结束，的一段时间后，再去执行（一段时间后）

​                   节流() =>  当持续触发事件时，规定在一段f时间内只能触发一次（一段时间内）

4.数组中常用的方法

1. 改变原数组的数组方法（9个）：

   • push() => 向数组的末尾添加元素

   • unshift() => 向数组的头部添加元素

   • pop() => 删除数组最后一个元素

   • shift() => 删除数组第一个元素

   • splice() => 删除数组中一个或连续的几个元素，而且可以在删除位置添加新的元素，最后把删除元素作为返回值返回

   • sort() => 将数组中的元素按照字典序排序

   • reverse() => 翻转数组

   • copyWithin() => 复制数组中的元素，粘贴到其它的位置（覆盖）

   • fill() => 使用给定的值填充数组，常用于空数组的初始化

2. 不改变原数组的数组方法 (5个) ：

   • join() => 以==指定参数作为分隔符==，将所有数组元素连接成一个字符串返回

   • concat() => 合并多个数组，并返回一个新数组

   • slice() => 提取数组中一个或几个连续的元素，并返回一个新数组

   • indexOf()、lastIndexOf() => 返回指定元素在数组中第一次（最后一次）出现的位置（索引）

   • includes() => 判断数组中是否包含给定的某个值，返回一个布尔值

3. 遍历数组的方法 (8个) ：

   • forEach() => ==接收一个函数作为参数，遍历数组时，所有数组成员依次执行该函数==，中途不可停止

   • map() => 和forEach()作用相同，不同点在于最后通常有返回值

   • some() => 接收一个函数作为参数，遍历数组时，所有数组成员依次执行该函数，只要有一个成员符合函数中的条件，返回true

   • every() => 与some()作用相同，不同点在于所有数组成员都符合条件时，才返回true

   • filter() => 接收一个函数作为参数，遍历数组时，所有数组成员依次执行该函数，把满足条件的成员组成一个新数组返回

   • reduce() => 对累加器和数组中的每一个每个元素应用一个函数，最后合并成一个值

   • keys()、values()、entries() => 辅助 for...of 遍历数组用， keys()遍历键名，values()遍历键值，entries()遍历键值对

   • find()、findIndex() => 接收一个函数作为参数，遍历数组时，所有数组成员依次执行该函数，返回==第一个==符合条件的数组成员

     ，findIndex的区别在于：返回==第一个==符合条件的数组成员的位置，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。

5.Html5中的  sessionStorage，localStorage、 cookie的概念与区别

H5新增的两种客户端存储数据的方式，一种是持久化的本地存储localStorage，另一种是针对一个session会话的暂时存储sessionStorage，在他们俩出现之前这些都是由`cookie`来完成的，`cookie`的特点是容量=，需要在服务器和客户端之间来回传递，因此效率不高

6.回流和重绘

1. 什么是回流？

   • 当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要页面重新构建==的时候，就产生了回流

2. 什么是重绘？

   • 当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘

3. 什么时候会发生回流？

   • 添加或者删除可见的DOM元素的时候

   • 元素的尺寸发生改变

   • 元素的位置发生改变

   • 元素的内容发生改变

   • 页面第一次渲染的时候

   • 列举一些相关的CSS样式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow等

4. 什么时候会进行重绘？

   • 列举一些相关的CSS样式：color、background、background-size、visibility、box-shadow

5. 如何进行性能优化？

   • 用transform 代替 top，left ，margin-top， margin-left这些位移属性

   • 不要使用 js 代码设置多条样式，选择用一个 className 代替

   • 不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流

   • 避免设置多层内联样式，写个外部类这样只回流一次

   • 让多次回流的元素脱离文档流比如动画，使用 position 属性的 fixed 值或 absolute 值

   • 一起变化（同时修改所有需要变化的属性）

7.什么是闭包

概念：

​    说法一、函数嵌套函数，内部函数可以使用外部函数的变量

​    说法二、有权访问另一个函数作用域中的变量的函数

优点：可以读取函数内部的变量，该变量常驻内存中，即使变量调用完毕也不会被销毁

缺点：闭包在不使用的情况下要及时释放，否则会造成内存泄露

8.数组和字符串如何相互转化？

// 字符串 => 数组  (split(arg1) arg1是字符串，表示用arg1作为分隔符来检测原字符串)
const a1 = "123" 
const a2 = " 1 23 "
const a3 = "1,2,3"
const a4 = "1-2-3"
console.log(a1.split("")); // array["1","2","3"]
console.log(a2.split(" ")); // array["1","23",""]
console.log(a3.split(",")); // array["1","2","3"]
console.log(a4.split("-")); // array["1","2","3"]

// 数组 => 字符串  (join(arg2) arg2是字符串,表示用arg2作为分隔符来拼接新字符串)
const a = [1,2,3] 
console.log(a.join("")); // "123"
console.log(a.join(" ")); // "1 2 3"
console.log(a.join(" | ")); // "1 | 2 | 3"
console.log(a.join()); // "1,2,3"

8.this的指向

普通函数  =》  window

箭头函数  =》  执行上下文中的this，（指向父函数的this，如果没有父函数，就指向window）

构造函数  =》  指向新new出来的对象

对象中的this  =》  对象本身

call、apply、bind方法  =》  自定义

以上就是暂时整理的一部分知识点，来CSDN三年第一次写博客，后续会继续更新一些比较重要的部分以及前端各主流框架的基础代码，虽然是我自己敲着玩的。工作空闲的时候写下这篇就当摸鱼了= =。欢迎关注点赞。

BY     

---REKI

一个喜欢动漫的CSDN自身潜水的民工爱好家