学习前端笔记（一）

不强求
63 阅读5分钟

1：css3有哪些新属性

  • border-radius:圆角边框
  • box-shadow:盒子阴影
  • background-size:背景图片大小
  • transition:过渡
  • transform:转换(位移 旋转 缩放)
  • animation:动画
  • linear-gradient:线性渐变
  • box-sizing:css3 盒子模型

2：git的核心概念有哪些

lALPJwnI2pHxx03NAnTNBPQ_1268_628.png

3：git中与分支相关的操作有哪些

  • 查看分支：git branch
  • 创建本地分支：git branch lizhihui
  • 删除本地分支：git branch -d lizhihui
  • 切换分支：git checkout lizhihui
  • 合并分支: git merge master

4： 标准盒模型与IE怪异盒模型的区别

  • 标准盒子模型=content(内容)+border(边框)+padding(内边距)
  • 微信图片_20230210165206.png
  • 怪异盒子模型=content(内容)(已经包含了 padding 和 border)
  • 微信图片_2.png

5： event loop时间循环如何理解

因为js是单线程的，如果某段程序需要等待一会再执行，后面的程序都会被阻塞，这样也就带来了一些问题。为了解决这个问题，js出现了同步和异步两种任务，两种任务的差异就在于执行的优先级不同。event loop就是对任务的执行顺序做了详细的规范。

同步和异步任务

  • 异步任务：异步任务分为宏任务和微任务。

  • 常见的微任务有：Promise.then()，.then中的逻辑是微任务；process.nextTick（node环境）。

  • 常见的宏任务有：setTimeout、setInterval、setImmediate（node环境)、xhr(发送网络请求)，callback。

  • 同步任务：除了上面的这些情况，都属于同步任务。

  • 任务的执行顺序： 先到后：同步任务 -> 微任务 -> 宏任务。

6： 常见的数组方法有哪些

  • 遍历方法

    • map : 映射数组，得到一个映射之后的新数组
    • filter:筛选数组
    • forEach：遍历数组
    • some:判断数组是否有元素满足条件（相当于逻辑或：一真则真，全假为假）
    • every:判断数组是否所有满足都满足条件（相当于逻辑与：一假则假，全真为真）
    • findIndex:查找元素下标，一般用于元素是引用类型
    • reduce:给数组每一个元素执行一次回调，一般用于数组元素求和（也可以求最大值、最小值）

  • 增删改查方法

    • push() : 末尾新增元素，返回值是新数组长度
    • unshift():开头新增元素，返回值是新数组长度
    • pop() ：末尾删除元素，返回值是删除的那个末尾元素
    • shift()： 开头删除元素，返回值是开头的那个末尾元素
    • splice() : 删除指定下标元素，第三个参数是一个剩余参数，可以在删除的元素后面插入元素

  • 其他方法

    • reverse:翻转数组，会修改数组自身
    • sort: 数组排序，会修改数组自身
    • json: 拼接数组元素，返回值是拼接之后的字符串
    • slice: 根据下标范围查询数组元素，返回值是查询后的新数组
    • indexOf: 查询元素下标，一般用于元素是值类型

7： 扩展运算符与rest剩余参数什么意思，应用场景

扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。 说的通俗易懂点就是把一个大元素给打散成一个个单独的小元素。

基本用法：拆解字符串与数组

3.png

8： ES6新增的数据结构Map和Set

  • Map ：对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。

  • 特点 ：

    1. Map 对象这种数据结构和和对象类型，都已键值对的形式存储数据，即 key-vlue 形式。
    2. Map 对象存储的数据是有序的，而我们平常使用的对象是无序的，所以通常当我们需要使用对象形式（键值对）存储数据且需要有序时，采用 Map 对象进行存储。
    3. Map 对象的键值可以是任意类型，我们平时使用的对象只能使用字符串作为键。

  • Set： 和 Map 类似，我们同样先来看一看官网是怎么解释 Set 这个数据结构的。 s1s1.png

    1. Set 对象是一个类数组对象，它长得就很像数组。
    2. Set 对象存储的值是不重复的，所以我们通常使用它来实现数组去重。
    3. Set 对象存储的数据不是键值对的形式，而且它可以存储任何类型的数据。

9： Promise的理解并且用Promise封装一个网络请求

promise 是 es6 新增的一种解决异步回调的一种方案，可以理解为就是把异步操作的回调函数的写法变成 链式写法.then .catch

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

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

promise 是解决回调地狱的，回调地狱就是回调函数嵌套回调函数，存在的弊端就是写法⾮常臃肿,并且后期难以维护, 除了 promise 之外 还能用 generator async await 解决回调地狱 async await 是最终解决方案

简单用promise封装 promise.png

10： 说一下es6的导入导出如何使用

默认导出语法： export default 默认导出的成员

默认导入语法： import 接收名称 from ' 模块

注意：每个模块中，只允许使用唯一的一次export default，否则会报错！

avatar
文章
阅读
粉丝