快手前端一面凉经2021-10

最新推荐文章于 2024-07-12 16:27:40 发布

sw的的

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量1k

点赞数 3

分类专栏： 2021-10面经文章标签：前端 css vue

本文链接：https://blog.csdn.net/qq_37594428/article/details/120914314

版权

2021-10面经专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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://www.jianshu.com/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"

sw的的

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
5
评论
快手前端一面凉经2021-10

css:1. bfc特性@1. 内部的盒子（Box）会在垂直方向上一个接一个的放置；@2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；@3. 每个盒子的左边，与包含块的左边相接触（从右往左的格式，右边缘接触）。即使存在浮动也是如此，除非产生了新的BFC；就是浮动的盒子会盖住不浮动的盒子，解决办法：给没浮动的盒子设置bfc@4. BFC的区域不会与float box重叠；@5.
复制链接

扫一扫