前端小知识

48 阅读9分钟

一、css3有哪些新特性

border-radius:圆角边框

box-shadow:盒子阴影

background-size:背景图片大小

transition:过渡

transform:转换(位移 旋转 缩放)

animation:动画

linear-gradient:线性渐变

box-sizing:css3 盒子模型

二、git的核心概念有哪些

git分为客户端和服务器端。

客户端分为工作区(workspa),暂存区(index)和本地仓库(repository),服务器端就是远程仓库(remote)。

我们在工作区通过git.add将文件添加到暂存区,通过git.commit添加到本地仓库,最后通过git.push添加到远程仓库 需要从远程仓库拉取时,使用git.pull或者git.clone获取文件

image.png

三、git中与分支相关的操作有哪些

git branch 查看本地所有分支

git branch -r 查看远程所有分支

git branch -a 查看本地和远程所有分支

git merge <分支名> 合并分支

git merge --abort 合并分支出现冲突时,取消合并,一切回到合并前的状态

git branch <新分支名> 基于当前分支,新建一个分支

git checkout --orphan <新分支名> 新建一个空分支(会保留之前分支的所有文件)

git branch -D <分支名> 删除本地某个分支

git push <远程库名> :<分支名> 删除远程某个分支

git branch <新分支名称> <提交 ID> 从提交历史恢复某个删掉的某个分支

git branch -m <原分支名> <新分支名> 分支更名

git checkout <分支名> 切换到本地某个分支

git checkout <远程库名>/<分支名> 切换到线上某个分支

git checkout -b <新分支名> 把基于当前分支新建分支,并切换为这个分支

四、标准盒模型与怪异盒模型的区别

标准盒子模型=content(内容)+border(边框)+padding(内边距)

怪异盒子模型=content(内容)(已经包含了 padding 和 border)

五、event loop事件循环如何理解

同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行

异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时函数等

如果将任务划分为同步任务和异步任务并不是那么的准确

异步任务还可以细分为微任务与宏任务

微任务: 一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有:

Promise.then

MutaionObserver

Object.observe(已废弃;Proxy 对象替代)

process.nextTick(Node.js)

宏任务: 宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合

常见的宏任务有:

script (可以理解为外层同步代码) setTimeout/setInterval UI rendering/UI事件 postMessage、MessageChannel setImmediate、I/O(Node.js)

(遇到同步任务先执行同步任务,然后再执行异步任务,异步任务又分为宏任务和微任务,先执行微任务,再执行宏任务)

六、数组方法有哪些?分别有什么作用?

1.push() 可以添加一个或多个参数到数组的尾部,添加之后原来的数组会发生改变,返回的是添加后的数组的长度

2.pop() 从数组尾部删除一个元素,原数组会发生改变,返回数组中被删除的元素

3.unshift() 可以添加一个或多个参数到数组的头部,添加后原来的数组会发生改变,返回的是添加后的数组的长度

4.shift() 从数组头部删除一个元素,原数组会发生改变,返回数组中被删除的元素

5.slice() 从数组中截取,如果不传参,会返回原数组。返回截取的值,两个参数 一个是开始的位置,第二个是结束的位置,原数组不变,最多两个参数

6.splice()截取类 没有参数,返回空数组,原数组不变;一个参数,从该参数表示的索引位开始截取,直至数组结束,返回截取的 数组,原数组改变;两个参数,第一个参数表示开始截取的索引位,第二个参数表示截取的长度,返回截取的 数组,原数组改变;三个或者更多参数,第三个及以后的参数表示要从截取位插入的值。

7.reverse() 数组翻转

8.sort() 数组排序

9.join() 数组拼接

10.isArray() 判断是否是数组

11.toString() 数组转字符串

12.concat( ) 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组

七、扩展运算符与rest剩余参数什么意思,应用场景?

扩展运算符:

将一个数组转为用逗号分隔的参数序列 , 主要用于函数调用的时候,将一个数组变为参数序列

rest :

用来获取已经定义的参数之外的所有参数

当我们不知道函数的实参有多少的时候 可以使用rest

在最后一个形参的位置 通过 ...rest(rest可以替换,但位置必须是最后一位)来获取实参

八、es6新增的Set和Map数据结构代表什么意思?利用其中一种实现数组去重

Set:

Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构

什么是集合?什么又是字典?

集合 是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合

字典 是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同

Set 类似于数组,但是成员的值都是唯一的,没有重复的值,我们一般称为集合

Set本身是一个构造函数,用来生成 Set 数据结构

Set的实例关于增删改查的方法:

add() 添加某个值,返回 Set 结构本身

delete() 删除某个值,返回一个布尔值,表示删除是否成功

has() 返回一个布尔值,判断该值是否为Set的成员

clear() 清除所有成员,没有返回值

Map:

Map类型是键值对的有序列表,而键和值都可以是任意类型

Map本身是一个构造函数,用来生成 Map 数据结构

Map 结构的实例针对增删改查有以下属性和操作方法:

size size属性返回 Map 结构的成员总数。 set() 设置键名key对应的键值为value,然后返回整个 Map 结构 get() get方法读取key对应的键值,如果找不到key,返回undefined has() has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中 delete() delete方法删除某个键,返回true。如果删除失败,返回false clear() clear方法清除所有成员,没有返回值

let arr = [1,1,1,2,3,4,4,5,6]

let arr2 = new Set(arr)

console.log(arr2) //[1,2,3,4,5,6]

九、说下对promise的理解

promise 相当于一存放异步操作的容器 ,他本身并不是异步的 ,是异步编程的一种解决方案, 可以获取异步操作的信息,很好的避免了地狱回调,比传统的解决方案回调函数和事件更合理更强大。

promise 的三种状态改变

pending 变为 resolved

pending 变为 rejected

只有这两种 且一个 promise 对象只能改变一次无论成功还是失败,都会有个结果

promise 是 es6 提供的一种异步解决方案,在我的理解中 promise 就是把异步操作换了一种写法 从之前的嵌套回调函数 变成了链式的写法 promise 本身其实就是一个容器 里面放异步的代码 这样就可以让这个异步的代码执行.then .catch 的操作

1.1 说⼀下你对 promise 的理解?(必问) promise 是 es6 提供的一种异步解决方案,在我的理解中 promise 就是把异步操作换了一种写法 从之前的嵌套回调函数 变成了链式的写法

1.2 什么是 promise?通过 promise 能够解决什么问题? promise 是 es6 提供的一种异步解决方案, promise 可以解决回调地狱的问题 回调地狱就是拿到 a 接口的数据后才能根据 a 返回的数据请求 b 接口 这样回调函数嵌套回调函数的写法就叫回调地狱 这种写法会让代码臃肿 并且后期难以维护 除了 promise 之外 async 是解决回调地狱的最终方案

1.3 说⼀下 promise 的特点?也就是三种状态? promise ⼀共有三个状态,分别是进⾏中,成功或者失败 如果成功的话可以通过 resolve ⽅法将正确结 果返回出去,通过.then 的⽅式进⾏接受,失败的话可以通过 reject 的⽅式将失败的结果返回出去,通 过.catch 的⽅式进⾏接受,pending 状态是进⾏中,⼀旦进⾏之后,他的状态是不可逆的

1.4 说⼀下 promise 怎么⽤? 如果要使⽤ promise,我们需要对 promise 进⾏实例化,在实例化的构造函数⾥⾯有⼀个回调函数,这个 回调函数⾥⾯有两个参数,分别是 resolve 和 reject,我们可以通过 promise 的实例化对象调⽤.then 或 者.catch ⽅式接受结果

1.5 我们之前遇到的哪些东西本身就是一个 promise 对象? jq 的 ajax 请求本身就是一个 promise 对象 所以可以直接用.then axios 也是一个 promise 对象 原生的 ajax 以及 小程序的 wx.request 请求都不是 promise 对象 不能用。then 的写法,如果想用链式写法 就要自己封装一个 promise

1.6. promise 的 all 和 race 方法 promise 还给我们提供了.all 和 race, 其中 all ⽅法的作⽤是将多个请求合并成⼀个请求, ⽐如当⾸⻚ 要请求 10 个接⼝,我们可以 promise.all 进⾏合并,.race 的作⽤也可以将多个请求合并成⼀个请求,不过 是谁先请求成功就先返回谁.

十、说一下es6的导入导出如何使用?

默认导出的语法: export default {默认导出的成员}

默认导入的语法: import 变量名称 from '模块路径'