面试20

最新推荐文章于 2024-04-12 23:45:35 发布

Am_bi_ti_on

最新推荐文章于 2024-04-12 23:45:35 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/Am_bi_ti_on/article/details/115324697

版权

1.说一下对promise的了解

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大；
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果；
有三种状态： pending(等待态)，resolved(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

2.es6新增的特性

ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域
　　ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明

2）箭头函数
　　ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

3）模板字符串
　　模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

4）解构赋值
　　ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

5）for of循环
　　for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

6）import、export导入导出
　　ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

7）set数据结构
　　Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

8）… 展开运算符
　　可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

9）修饰器 @
　　decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

10）class 类的继承
　　ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

11）async、await
　　使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
　　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

12）promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

13）Symbol
　　Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

14）Proxy代理
　　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

3.实现双飞翼布局（两端固定，中间自适应）

方式一：通过flex弹性布局来实现

//HTML结构，div2是中间的自适应区域
...
<body>
    <div class="wrap">
        <div class="div1"></div>  
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
...

*{  //先简单粗暴的解决一下浏览器的默认样式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //使用border-box，盒模型好计算，妈妈再也不用担心我算不清块宽高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //使用弹性布局
    flex-flow:row nowrap;  //以沿主轴方向行显示，不换行，从而来显示3个块
    justify-content:space-around;  //这一个加和不叫其实也没事，加上去的意思就是两端对齐
}

[class^='div']{  // 给所有的div都加上高和边框样式，方便观看，不然都缩成一条线了
    height: 400px;
    border: 1px solid #f00;
}

.div1,.div3{  //给两端的div固定的宽
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默认是1，所以不用写也没事，写出来自是表达这个意思
}
.div2{
    background-color: #0f0;
    flex-grow:1;  //这个比较重要，作用是让第二个块的宽度撑满剩余的空间
}

方式二：通过定位来实现 (HTML结构不变，看样式)

.wrap{
    width: 100%;  //同样实现宽高100%铺开
    height: 100%;
    position: relative;  //父层添加相对定位，让子元素相对父层来定位
}
[class^='div']{
    height: 400px;
    border: 1px solid #f00;
}
.div1,.div3{
    position: absolute;
    width: 200px;
    background-color: #ccc;
}
.div1{
    left: 0;  //固定在父层的左侧
    top: 0;
}
.div3{
    right: 0;  //固定在父层的右侧
    top: 0;
}
.div2{
    background-color: #0f0;
    /*这个是关键，我们没有给中间的div2添加过宽属性，所以默认占用父层宽的100%，
     由于两侧块宽是固定的，所以中间的自适应块左右分别200px的外边距中间的content区域就会实现自适应*/
    margin: 0 200px;  
}

4.你所了解的数组的方法

1.将数组合并成字符串（返回字符串）[ Array.join() ]

var a = [1,2,3];
var b = a.join("");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串

2.倒序排列数组 [ Array…reverse() ]

var a = [1,2,3];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是[3,2,1]

3.Array.sort()方法，返回排序后的数组。如果数组包含undefined，会被排到数组的尾部。如果不带参数的调用sort()，数组元素以字母表顺序排序。

从大到小排列
var a = [2,33,1111,444]; 
a.sort() 
console.log(a); //返回的结果是[1111, 2, 33, 444]
从小到大排列
var a = [2,33,1111,444]; 
a.sort(function (a,b) {
return a-b
}) 
console.log(a); //[2, 33, 444, 1111]

4.Array.concat(),拼接并返回一个新数组

var a = [1,2,3]; 
var b = a.concat(4,5); 
var c = a.concat([4,5]); 
console.log(a); //返回的还是[1,2,3]
console.log(b); //返回[1,2,3,4,5] 
console.log(c); //返回[1,2,3,4,5]
// 复制数组
var a = [1,2,3]; 
var b = a.concat(); 
console.log(a); //返回[1,2,3] 
console.log(b); //返回[1,2,3]

5.Array.slice()方法，返回截取子数组。不会改变原数组

var a = [1,2,3,4,5];<br>
a.slice(0,3); //返回[1,2,3] 第一个参数是截取开始的位置（包括），第二个参数是截取结束的位置（不包括） 
a.slice(3); //返回[4,5] 
a.slice(1,-1); //返回[2,3,4] 负数表示倒数 
console.log(a); //返回[1,2,3,4,5]

6.Array.splice()方法，用来增加删除替换元素，会修改原数组！

数组的起始位置为0
var a = [1,2,3,4,5,6,7,8]; 
var b = a.splice(1,2); //第一个参数是截取的起始位置（包括），第二个参数是截取的个数，之后的参数就是添加在元数组的新值 
console.log(a); //返回[1, 4, 5, 6, 7, 8] 
console.log(b); //返回[2, 3]

eg:可以用来解决在数组起始部位加入数据

this.noticeMessageList.splice(0, 0, { fromUser: 'zhangq1',
noticeMessage: '此处添加message'})

7.push()方法与pop()方法
push()方法在数组的尾部添加一个或者多个元素，并返回数组的新长度。注意的是，改变的是原数组的值，返回的是新数组的长度;
pop()方法删除数组的最后一个元素，并返回它的删除值。也是改变原数组，返回的是删除的值。

8.unshift()方法与shift()方法
unshift()方法类似于push()不同的是，他是在数组头部添加，其他都一样
shift()方法则类比pop()方法。

9.toString()和toLocaleString()
toString()方法将每个元素转化为字符串，类似于不传参的join()方法。
toLocaleString()方法是toString()的本地化版本。

10.forEach()方法，从头至尾遍历数组，为每个元素调用指定的函数。

var a = [1,2,3,4,5]; 
var sum = 0; 
a.forEach(function (value) {
sum += value
}) 
console.log(sum); //sum = 15

11.map()方法
和forEach()类似，调用数组的每个元素传递给指定函数，并返回一个数组，所以它和forEach()的区别在于，有一个返回值。不修改原数组，返回的数组长度和原数组相同

var a = [1,2,3,4,5]; 
var b = a.map(function (value) {
return value+1
}) 
console.log(b); //返回[2,3,4,5,6]

12.filter()方法，返回的是调用数组的一个子集

var a = [1,2,3,4,5]; 
var b = a.filter(function (value) {
return value > 3
}) 
console.log(b); //返回[4,5]
注意：如果使用map()方法，返回的是[false, false, false, true, true]

filter()会跳过稀疏数组中缺少的元素，他的返回数组总是稠密的。所以可以用一下方法来压缩稀疏数组的空缺。

var a = [1,2,,,5]; 
var b = a.filter(function (value) {
return true
}) 
console.log(b); //返回[1,2,5]

13.every()和some()
every()方法是只有数组中所以元素都满足某个条件才会返回true；some()方法是只要有满足条件的值，就返回true。
以every()方法为例:

var a = [1,2,3,4,5];
a.every(function (value) {
return value < 10
}) //true 
a.every(function (value) {
return value % 2 === 0
}) //false

14.indexOf()和lastIndexOf()
这两个方法都是用来搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引，如果没找到，则返回-1。

lastIndexOf()与indexOf()区别在于:从头至尾搜索，而后者则是反向搜索。

5.什么是闭包

闭包就是能够读取其他函数内部变量的函数。
在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

6.vue中常用的指令

1、视图输出指令（ v-text和v-html ）
2、属性绑定指令（v-bind）
3、事件绑定指令
简写：@

.click 点击事件
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

4、v-model （双向绑定指令）
注意： v-model 只能运用在表单元素中 input(radio, text, address, email…) select checkbox textarea
5、v-for和key属性（迭代数组）
6、v-if和v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

7.双向数据绑定

1.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
3.介绍一下Object.defineProperty()方法
（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；
在这里插入图片描述

8.vuex工作原理

首先从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，然后请求后端接口，拿到数据我们需要改变state中的状态，改变状态唯一的方式是commit提交一个mutation，提交以后state状态改变了，状态改变后，试图就会改变，因为Vuex是响应式的.
在这里插入图片描述

9.this指向

1.普通函数调用，此时 this 指向 window
2.构造函数调用，此时 this 指向实例对象
3.对象方法调用，此时 this 指向该方法所属的对象
4. 箭头函数中，此时 this 指向外层作用域的 this
4.通过事件绑定的方法，此时 this 指向绑定事件的对象
5.定时器函数，此时 this 指向 window

附：更改this指向的三个方法：
eval、apply、call方法的说明：
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
call 、apply 这个两个函数的第一个参数都是 this 的指向对象，第二个参数的区别如下：
　　call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘params1’, … ,‘paramsn’ )；
　　apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘params1’, …, ‘paramsn’ ]);

10.所了解的盒模型

W3C盒模型（标准盒模型）
给一个标签添加：box-sizing:content-box；(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
怪异盒模型(又称ie盒模型)
给一个标签添加：box-sizing:border-box；
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。
区别

主要区别：对于宽高的定义不同
w3c盒模型：设置的宽度就等于内容的宽度
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

11.常用的UI库有哪些

1.VUX（移动端）
2.element UI(饿了么后台)
3.Mint UI
4.iview
5.vue-mui
6.radon-ui
7.antd vue
8.vuikit
9.weex
10.N3

Am_bi_ti_on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试20

1.说一下对promise的了解Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大；从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果；有三种状态： pending(等待态)，resolved(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。2.es6新增的特性3.实现双飞翼布局（两端固定，中间自适应）4.你所了解的数组的方法5.什么
复制链接

扫一扫