前端知识整理第一期

最新推荐文章于 2022-07-14 21:28:56 发布

学习滋味有点甜

最新推荐文章于 2022-07-14 21:28:56 发布

阅读量268

点赞数

分类专栏：前端面试笔试文章标签：前端面试前端知识

本文链接：https://blog.csdn.net/weixin_42899305/article/details/102984656

版权

前端面试笔试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Day1

vueAPP适配是怎么写的，用的什么单位？

px2vw-css单位的转换(postcss-px-to-viewport)
get和post有什么区别？

get通过url传递参数，post放在request body
get传递参数有长度限制，post没有
get安全性，不可以传递敏感信息
get会主动cache,post不会
GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

计算属性和监听器有什么区别？

watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
v-for渲染列表是key是用来做什么的？

key的作用主要是为了高效的更新虚拟DOM。需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
数据请求在生命周期哪一个阶段？

Created 我自己的商城项目的数据是通过axios异步获取数据，一般放在created钩子里获取服务端数据，然后保存到data里
水平居中有哪几种方法？

https://blog.csdn.net/jnshu_it/article/details/81317493
- inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center;
- 确定宽度的块级元素水平居中方法 margin：0 auto；
- 绝对定位和margin-left:-(width/2)实现水平居中：
- 位置宽度的块级元素居中方法：display:inline-block 设置text-align:center;
- flex布局实现居中：display:flex justify-content:center
垂直居中有哪几种方法？
- 固定高度实现垂直居中 height+line-height
- 绝对定位+margin-top-(height/2)
- flex布局实现居中：display:flex align-items:center
flex弹性盒模型？

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
```
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
```
```
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```
父盒子中子盒子浮动有什么后果？

父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题，由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除
清除浮动有哪些方法？

1、使用 clear

clear : none | left | right | both

2、增加一个清除浮动的子元素

3、用:after 伪元素

4、父元素设置 overflow:hidden

5、父元素也设成 float

6、父元素设置 display:table。
定位有哪些属性？相对定位是相对什么定位？

Abosolute,relative,fixed

是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）
行内元素和行内块元素有什么区别？行内块元素在同一行显示时有默认空隙，如何解决？
- 行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有_{和^{这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。}}
- 行内元素特征：(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

(3)不会自动进行换行
- 行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
- 行内块状元素特征：(1)不自动换行
(2)能够识别宽高

(3)默认排列方式为从左到右
给DOM元素绑定事件有哪些方法？

https://blog.csdn.net/qq_34134278/article/details/81505256
1. 在DOM元素中直接绑定；
2. 在JavaScript代码中绑定；
3. 绑定事件监听函数。
数组里面有哪些遍历方法？es6
- For…in…
  
  for-in 循环主要用于遍历对象
  　　for()中的格式：for(keys in zhangsan){}
  　　keys表示obj对象的每一个键值对的键！！所有循环中，需要使用obj[keys]来取到每一个值！！！
  
  for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性
  　　所以，可以使用hasOwnProperty判断一个属性是不是对象自身上的属性。
  　　obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原先属性
- For-of
  
  JavaScript 原有的for…in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for…of循环，允许遍历获得键值。
- map方法
  
  将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
  
  注意：是返回一个新数组，而不会改变原数组。
```
var numbers = [1, 2, 3];
 
numbers.map(function (n) { 
     return n + 1; 
}); 
// [2, 3, 4] 
 
numbers // [1, 2, 3]
```
  map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。
```
var arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)
 // ['b', 'c']
```
- forEach循环
  
  forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。也就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。
```
function log(element, index, array) {
     console.log('[' + index + '] = ' + element); 
} ；
[2, 5, 9].forEach(log); // [0] = 2 // [1] = 5 // [2] = 9
```
- filter()过滤循环
  
  filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
  
  filter方法的参数函数也可以接受三个参数：当前成员，当前位置和整个数组。
```
[1, 2, 3, 4, 5].filter(function (elem) {
     return (elem > 3); 
}) // [4, 5]
 
// 上面代码将大于3的数组成员，作为一个新数组返回。
 
var arr = [0, 1, 'a', false]; 
arr.filter(Boolean) // [1, "a"]
```
- some()，every()循环遍历，统计数组是否满足某个条件
  
  它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。
  
  some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。
```
var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true
```
  而every方法则相反，所有成员的返回值都是true，整个every方法才返回true，否则返回false。两相比较，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.
```
var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false
```
- reduce()可依次处理数组的每个成员
  
  reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。
  1. 累积变量，默认为数组的第一个成员
  2. 当前变量，默认为数组的第二个成员
  3. 当前位置（从0开始）
  4. 原数组
  这四个参数之中，只有前两个是必须的，后两个则是可选的。
```
[1, 2, 3, 4, 5].reduce(function (a, b) {
  return a + b;
}, 10);
// 25
```
- Object,keys遍历对象的属性
  
  Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

学习滋味有点甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识整理第一期

Day1vueAPP适配是怎么写的，用的什么单位？px2vw-css单位的转换(postcss-px-to-viewport)get和post有什么区别？get通过url传递参数，post放在request bodyget传递参数有长度限制，post没有get安全性，不可以传递敏感信息get会主动cache,post不会GET产生一个TCP数据包；POST产生两个TC...
复制链接

扫一扫