快手前端一面凉经2021-10_sw的的

未知 02-07 3068

css: 1. bfc特性

@1. 内部的盒子（Box）会在垂直方向上一个接一个的放置； @2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；

@3. 每个盒子的左边，与包含块的左边相接触（从右往左的格式，右边缘接触）。即使存在浮动也是如此，除非产生了新的BFC；

就是浮动的盒子会盖住不浮动的盒子，解决办法：给没浮动的盒子设置bfc

@4. BFC的区域不会与float box重叠；

@5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；

@6.计算BFC的高度时，浮动元素也参与计算。

BFC盒子一般就3个用途:

1、清除浮动

2、修复margin折叠

3、两栏布局自适应，仅overflow+float有效

2. How well do you know CSS?

Given these classes:

.red { color: red; }

.blue { color: blue; }

Which color would these divs be?

3. 实现一个大盒子，里面三个盒子像骰子斜着放置 <style> .box { width: 300px; height: 300px; background-color: yellow; display: flex; flex-direction: column; justify-content: space-between; } .item { width: 20px; height: 20px; background-color: pink; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> js: 1. forEach for…in for…of区别

forEach

forEach专门用来循环Array, Set, Map ，可以直接取到元素，同时也可以取到index值

存在局限性，不能continue跳过或者break终止循环，没有返回值，不能return

for…in

一般循环遍历的都是对象的属性，遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性

key会变成字符串类型

for of

for of是ES6新引入的特性。修复了ES5中for in的不足

允许遍历 Arrays（数组）、Strings（字符串）、Maps（映射）、Sets（集合）等可迭代的数据结构

for of 支持 break, continue 和 return, 只能遍历数组不能遍历对象（遍历对象需要通过和Object.keys()搭配使用）

2. Promise.all如何不抛出异常等到所有的成员执行完成 Promise.all([a,b,c].map(item => item.catch(e => {...}))) .then(res => {...}) .catch(err => {...}); 3. es6中this的指向 let obj = { name: 'dede', fn: () => { console.log(this.name) } } obj.fn() // undefined let obj = { name: 'dede', fn() { console.log(this.name) } } obj.fn() // 'dede' 4. 数组去重 let arr = [1, 2, 3, 4, 1, '1'] let newArr = [...new Set(array)] console.log(newArr) 5. script引入两个js文件，执行顺序

先引入的先执行

6. defer async的区别 1. 在没有defer或者async的情况下,会立即执行脚本 2. 有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。但是多个js文件的加载顺序不会按照书写顺序进行 3. 有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成,并且多个defer会按照顺序进行加载。 7. DOMContentLoaded和load的区别解析HTML结构加载外部脚本和样式表文件解析并执行脚本构建 HTML DOM模型 // DOMContentLoaded加载外部资源文件（image等）页面渲染完成 // load

https://·/p/c3384c315d40

vue: 1. 插槽v-slot

插槽内容：

父： <HelloWorld> <h1> 111111111 </h1> </HelloWorld> 子： <template> <div class="hello"> // slot标签里设置默认值（这个默认值文档里叫后备内容） <slot>2222222</slot> </div> </template>

具名插槽：

父： <HelloWorld :msg="'这是一条消息'"> <template v-slot:header> <h1>这是header</h1> </template> <h2>这是main</h2> <template v-slot:footer> <h1>这是footer</h1> </template> </HelloWorld> 子： <template> <div class="hello"> <header class="header"> <slot name="header"></slot> </header> <main class="main"> <slot></slot> </main> <footer class="footer"> <slot name="footer"></slot> </footer> </div> </template>

作用域插槽：

父： <HelloWorld :msg="'这是一条消息'"> <template v-slot:default="obj"> <h1>{{obj.gameId}}</h1> </template> </HelloWorld> 独占插槽的默认写法： <HelloWorld :msg="'这是一条消息'" v-slot:default="obj"> <h1>{{obj.gameId}}</h1> </HelloWorld> 也可以写成： <HelloWorld :msg="'这是一条消息'" v-slot="obj"> <h1>{{obj.gameId}}</h1> </HelloWorld> 解构插槽prop: <HelloWorld :msg="'这是一条消息'" v-slot:default="{gameId}"> <h1>{{gameId}}</h1> </HelloWorld> 可以定义后备内容，用于插槽 gameId 是 undefined 的情形: <HelloWorld :msg="'这是一条消息'" v-slot:default="{gameId={name: '后备内容'}}"> <h1>{{gameId.name}}</h1> </HelloWorld> 子： <template> <div class="hello"> <slot v-bind:gameId="gameId">{{realName}}</slot> </div> </template>

动态插槽名：

<HelloWorld :msg="'这是一条消息'"> <template v-slot:[slot]> <h1>{{obj.gameId}}</h1> </template> </HelloWorld> data() { return { slot: 'default' } }

具名插槽的缩写：

v-slot:header -> #header v-slot:default="obj" -> #default="obj"

被废弃的语法：

slot="default" slot-scope="obj"