温故而知新

原创已于 2023-02-15 17:21:15 修改 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-02-07 11:20:46 首次发布

记录生活专栏收录该内容

1 篇文章

订阅专栏

文章详细介绍了JS中的forin和forof遍历的区别，forin遍历数组的下标，forof遍历元素值。CSS中的BFC（BlockFormattingContext）特性导致了同BFC内元素上下外边距的重叠现象。v-model的双向数据绑定原理涉及v-bind和v-on的组合使用。JavaScript的循环机制包括宏任务和微任务，如setTimeout、Promise等，以及async/await的执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

for in 和 for of 是js中常用的遍历方法。但是两者有什么区别呢？
const arr = ['a', 'b', 'c']
for(let i in arr){
    console.log(i)
    // '0', '1', '2'
}
for(let i of arr){
    console.log(i)
    // a, b, c
}
for in 是ES5的语法标准，而for of则是ES6语法标准。
通过上述代码我们可以发现for in遍历的是下标，而for of遍历的是属性值
而且。for in所遍历的下标是Strign类型而不是Number类型。
两者多可以遍历数组，for in可以遍历对象 for of不行

2.CSS 中的 BFC 是什么？

BFC 的特性
BFC 主要有两个特性，我们来学习一下。

特性1：上下外边距重叠
同一个 BFC 下的两个相邻块级元素，会发生上下方向的 margin 重叠。

比如前一个 div 设置了 margin-bottom: 20px，下一个 div 设置了 margin-top: 10px，然后你会发现它们的上下距离其实是 20px（二者的最大值），而不是 30px（二者之和）。

3.v-model双向数据绑定原理

一、简介

v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定.

1. 原理

分两步骤

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体
v-model = v-bind:value + v-on:input
2. 实现

用v-bind:value + v-on:input来模拟实现v-model
<input type="text" :value="username" @input="username = $event.target.value" />

4.JavaScript的循环机制

一、简介

js单线程从上到下执行

常见的宏任务与微任务

宏任务: setTimeout setInterval ajax Dom事件

微任务:promise.then/finally/catch async/await 隐式创建promise.then
// // 事件循环 
setTimeout(function () {   //setTimeout 宏任务
  console.log('1');
});
async function test(){
	console.log('5')
	await async2();
	// 隐式创建一个微任务 promise.then()
	console.log('6')
}
new Promise(function (resolve) {
  console.log('2');
  resolve();
}).then(function () {
  console.log('3');
}).finally(()=>{
	console.log('8');
})
function async2(){
	console.log('7');
}
test()
console.log('4');
 
//2 5 7 4 3 6 8 1
 
 
 
注意：async/await的执行顺序

遇到await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，继续执行await后面的代码。(好好理解一下上面的说明。也就是说，await只会阻塞当前async方法内的代码，不会影响外部代码的执行)