js基础面试题

JS

变量类型

变量类型：Number、String、Undefined、Null、Boolean、Object、Symbol

类型判断方法：typeof instanceof

值类型和引用类型：值类型按照值传递，引用类型按照指针传递

原型链和原型

原型

所有引用类型(数组、对象、函数)都具有对象特性，可以自由扩展属性

所有引用类型(数组、对象、函数)都有一个隐式原型属性__proto__属性，值为普通对象

所有函数都有一个显式原型属性 __prototype__属性，值为一个普通对象

所有引用类型(数组、对象、函数)，实例对象的隐式原型 __proto__属性值指向它的构造函数的显式原型 __prototype__属性值 即：obj.__proto__ = Function.prototype

// 自由扩展
var obj = {}; obj.a = 100;
var arr = []; arr.b = 100;
function fn() {}; fn.c = 100
//隐式原型
log(obj.__proto__)
log(arr.__prpto__)
log(fn.__proto__)
// 显式原型
log(fn.prototype)
// 实例对象的隐式原型属性值===构造函数的显式原型属性值
log(obj.__proto__ === Object.prototype)

原型链

原型链（隐式原型链）：访问一个对象的属性时，

• 先在自身属性查找，找到返回
• 未找到沿着 __proto__这条链向上查找，找到返回
• 最后还是没有找到返回undefined，尽头是：Object.prototype.__proto__ === null

闭包

产生闭包条件：函数嵌套、内部函数使用了外部函数的数据、执行外部函数

Promise

可以解决地域回调的方法，代码更优雅

3个状态、2个过程、1个方法

3：pending等待 fulfilled实现 rejected拒绝

2：pending —>fulfilled（resolve） pending —>rejected（reject）

1：then

一：面试题

1.1、箭头函数与普通函数区别

1. this的指向不同，箭头函数是this是根据定义的作用域，而普通函数是根据调用时所在的对象。
2. 不可以使用arguments对象。
3. 不可以使用new命令，没有自己的this，无法调用call与apply。
4. 没有prototype属性。

1.2、mixins的作用及使用方法

mixins：混合——可以更高效的实现组件内容的复用。同一生命周期，混入对象会比组件先执行。

mixins与vuex：vuex用来状态管理，每个组件都可以修改和使用里面的变量，并且是响应式的变化；mixins可以定义变量，引用组件中后，每个变量是相互独立的，值的修改在组件中不会相互影响，方法和参数在组件不共享。

mixins与组件：组件相当于在父组件中给出一片独立的空间给子组件使用，然后通过props传值，本质两者是相对独立的；mixins则是引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象和方法

// mixins.js
export const myMixin = {
    data(){return { number: 1 }},
    created() { this.hello()},
    methods: {hello() { console.log('hello word')}}
}
// home.vue 组件 引入mixins
import { myMixin } from '@/assets/mixins.js'
export default {
    mixins: [myMixin],
    data() {return {}}
}

1.3、响应式布局方案

• 媒体查询

  /*@media (){}*/
  html,body{ height: 100% }
  @media screen and (min-width: 375px) {body{background-color: red}}
  

• rem布局

  rem是css中的一个单位，根据字体大小来设定，也就是html的font-size

• vw、vh布局

  css3引入vw、vh单位，将视口划分为100份，一个1vw相当于视口宽度的1%，不同于百分比布局，vw、vh不受父元素宽高影响，只有视口决定

• 百分比布局

  通过百分比单位使得组件的宽和度随着浏览器宽高变化而变化，子元素的height与width中使用百分比相对于直接父元素

1.4、ES6、ES7异步新特性

异步：代码执行时，遇到需要等待响应，不会停下来等待，会去执行下一个任务。

Promise Async–await

// Promise
new Promise((resolve, reject) => {
    setTimeout(()=>{
        resolve()
    },1000)
}).then({})
// Async--await
async function test() {
    const v = await getSomethis()
}

1.5、MVC、MVVM、MVP设计模式

为天地立心、为生民立命、为往圣继绝学、为万世开太平

MVC：M模型model–数据保存，V视图view–用户页面，C控制器controller–业务逻辑；View传送指令到Controller完成业务逻辑处理，改变Model状态，Model将新的数据传送给View，用户得到反馈。所有通信都是单向的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CunyNYdU-1624490073774)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1623986641131.png)]

MVVM：M模型model，VM视图模型view-model，V视图view

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5po4auF-1624490073784)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1623986678872.png)]

MVP：各个部分之间都是双向通信的，View与Mode不发生联系，通过Presenter传递，view不部署任何业务逻辑，没有主动性，presenter存放了所有的业务逻辑

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGxUUrPQ-1624490073786)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1623986666282.png)]

2、0.1+0.2=0.30000004

十进制转换为二进制过程中，会产生精度的损失。

二进制浮点数进行对阶运算时，也会产生精度的损失。

3、let-const-var区别

• var声明变量存在变量提升，而let、const不存在
• let、const存在块级作用域，var没有
• var声明的变量会挂载在window上，let、const不会

4、new操作符做了什么

• 创建一个空对象 var obj = new Object()
• 让对象的原型属性指向原型链，设置原型链 obj._proto_ = Func.prototype
• 让构造函数的this指向object var result = Func.call(obj)
• 判断返回类型，如果是值就返回object，如果是引用类型，就返回这个引用对象

5、判断数组三个方法

• instanceof：arr instanceof Array
• Array.isArray()：Array.isArray(arr)
• Object.prototype.toString.call()：Object.prototype.toString.call(arr)

ES6模块化使用

Module

• 如果只是输出一个唯一对象，使用export default
• 如果想要输出多个对象，不能使用default，只能存在一个default
• 引入的时候使用import 需要{…}

CSS

1.1、水平垂直居中

1、

<div class="fat">
 <div class="son"></div>
</div>

.fat{
 display: flex;
 justify-content: center;
 align-item: center;
}

2、父相子绝，transform: translate(-50%, -50%)

.fat{position: relative}
.son{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%)
}

3、父相子绝，margin-top：负一半的宽度 margin-left：负一半的高度

.fat{position: relative}
.son{
 width: 100px;
 height: 10px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -50px;
 margin-top: -5px;
}

4、父相子绝，定位0，margin：auto

.fat{position: relative}
.child{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}

1.2、flex

flex: 1; 是一个缩写，它等价于 flex: 1 1 0;

flex-grow: 1;	当有剩余空间时，分配给项目的比例
flex-shrink: 1;	空间不足的时候，项目缩写的比例
flex-basis: 0;	分配空间之前，项目占据主轴的空间

1.3、BFC

<!-- 
        一个BFC包含创建上下文元素的所有子元素，但是不包含子元素创建了新BFC的内部元素
        一个元素不能存在2个BFC之中
        BFC最重要的作用是：处于BFC内部的元素与外部的元素相互隔离
    
        BFC:块级格式化上下文，是一个独立的渲染区域
            元素产生BFC满足条件：
                1：根元素
                2：float值不为none
                3：overflow值不为visible
                4：display值为inline-block、table-cell、table-caption
                5：position值为absolute或者fixed
        BFC特性：
            1: 内部的盒会在垂直方向上排列
            2: 处于同一个BFC下的元素，可能会发生margin重叠
            3: 每个元素的margin box的左边与容器块border box的左边会接触
            4：BFC内的子元素的一个隔离的独立容器，与外部隔绝
    -->
    
    <!-- 触发BFC：根元素、float不为none、overflow不为visible、display为inline-block、position值为absolute或者fixed -->