面试总结(2019年12月20日)

1.js实现promise

1.promise和async/await的区别

函数前面多了一个async关键字。await关键字只能用在async定义的函数内。async函数会引式返回一个promise,改promise的resolve值就是函数return的值。
简洁:使用async和await明显节约了不少代码,不需要.then,不需要写匿名函数处理promise的resolve的值,不需要定义多余的data变量,还避免了嵌套代码。
async/await让try/catch 可以同时处理同步和异步错误。try/catch不能处理JSON.parse的错误,因为他在promise中。此时需要.catch,这样的错误处理代码非常冗余。并且,在我们的实际生产代码会更加复杂

1.什么是promise,解决了什么问题

Promise 概括来说是对异步的执行结果的描述对象
Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了。
解决回调地狱(Callback Hell)问题

由于Promise只能被决议一次,且决议之后无法改变,所以,即便是多次回调,也不会影响结果,决议之后的调用都会被忽略。

1.async的返回值是什么

1.async函数的返回值是Promise对象,可以用then方法指定下一步的操作。async函数可以看做多个异步操作,包装成一个Promise对象,await命令就是内部then命令的语法糖。

2.async函数返回一个Promise对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体后面的语句。

2.vue data为什么是一个函数

组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响

总结:组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

3.写一个ES5继承和ES6继承

//组合继承
function Supertype(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}
?
Supertype.prototype.sayName = function(){
    console.log(this.name);
};
?
function Subtype(name,age){
    \\继承属性
    Supertype.call(this,name);
    this.age  = age;
}
?
\\继承方法
Subtype.prototype = new Supertype();
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function(){
    console.log(this.age);
};
?
var instance1 = new Subtype(‘Annika‘,21);

//构造函数继承
缺点:方法都在构造函数中定义,函数无法复用

在超类型中定义的方法,子类型不可见,结果所有类型都只能使用构造函数模式

function Supertype(name){
    this.name = name;
}
?
function Subtype(){
    Supertype.call(this,‘Annika‘);
    this.age  = 21;
}
?
var instance = new Subtype;
console.log(instance.name);  \\Annika
console.log(instance.age);   \\29

class Colorpoint extends Point {
    constructor(x,y,color){
        super(x,y); //调用父类的constructor(x,y)
        this.color = color
    }
    toString(){
        //调用父类的方法
        return this.color + ‘ ‘ + super.toString();
    }
}

4.写一个数组去重的方法

利用indexOf去重
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(‘type error!‘)
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,‘true‘,‘true‘,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN‘, 0, 0, ‘a‘, ‘a‘,{},{}];
console.log(unique(arr))

利用ES6 Set去重(ES6中最常用)
function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,‘true‘,‘true‘];
console.log(unique(arr))

利用对象的属性不能相同的特点进行去重(这种数组去重的方法有问题,不建议用,有待改进)
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(‘type error!‘)
        return
    }
    var arrry= [];
     var  obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            arrry.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return arrry;
}

5.移动端点透事件

使用 fastclick 插件
这个也是在网上看到的,也可以解决点透问题,使用方法可以看 fastclick 的文档,在这里提供一下 Vue.js 的引入及使用

import FastClick from ‘fastclick‘; // 引入插件
FastClick.attach(document.body, options); // 使用 fastclick或者
  1. 直接用click,不考虑延迟,
  2. 下层避开click事件,如a链接改为span等标签,使用js跳转页面

dom2二级事件 取消默认行为 addEventListener   e.preventDefault()

利用touch事件模拟click,延迟一定的时间(300ms+)来处理事件

6.移动端一像素边框问题怎么解决的

transform: scale(0.5)   border-image border-shower 都可以解决

7.vue实现原理

8.vue computed和watch的区别

9.vue 组件通信

10.vue query和params 的区别

11.vue watch深监听怎么搞

12.vuex 比如有两个module 如果两个名字相同 怎么commit

vuex中的store分模块管理,需要在store的index.js中引入各个模块,为了解决不同模块命名冲突的问题,将不同模块的namespaced:true,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名

13.你们vue项目用的是hash路径还是history的

14.浏览器打开一个url 发生了什么

15.会css3动画吗 都有什么

16.flex的属性都有什么

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
flex-grow: number|initial|inherit;
flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
flex-shrink: number|initial|inherit;

17.左边固定 右边自适应怎么搞?

18.平时怎么封装组件的?
19.cookies和sessionstorage的区别

20.闭包什么

21.ES6的新特性有哪些

22.let和var的区别

let 配合for循环的独特应用
let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变

let没有变量提升与暂时性死区

let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误

let变量不能重复声明

var 存在变量提升,而 let 不存在变量提升,所以用 let 定义的变量一定要在声明后再使用

var:只有全局作用域和函数作用域概念,没有块级作用域的概念。

let:只有块级作用域的概念 ,由 { } 包括起来,if语句和for语句里面的{ }也属于块级作用域。

原文地址:https://www.cnblogs.com/yangsg/p/12071008.html

时间: 2024-10-13 08:33:26

面试总结(2019年12月20日)的相关文章

2019年12月20日 java学习知识记录

一个"java"源文件中是否可以有多个类? 有什么限制? 一个java的源文件中都可以都多个类 ,但是public的类只能有一个  而且public的名字要和文件名一致(大小写也得一致) java 有没有 goto? java中有goto 但是现在java中不使用 &和&&有什么区别? &和&&都是逻辑运算符 运算符两边的表达式,如果运算结果都是true的话,结果返回就为true   如果有一边的运算结果为false,那么结果返回的就为f

2019年12月20日是个特殊的日子

那天是个特殊的日子,是煎熬的结束,是新生的开始,我应该怀揣梦想开启自由的航程,不是应该高兴才对吗,可是,更多的是悲伤.在产假结束回到公司后,一切都变了,再不是从前的感觉了,“中年危机”多么可怕的字眼,这个字眼也随之纠缠了我一年有余,说煎熬一点也不为过.曾经想开个花店,研究鲜花行业,让每个喜欢花又因为经济问题望而却步的人都可以每天有鲜花陪伴:曾经想学服装设计,让每个人都很容易的得到适合自己的衣服,而不是一堆不合适的衣服束之高阁.曾经...太多梦想,终究是梦想,胆小.怕风险.怕拖亲人后腿...于是,

蔡康永的说话之道——2019年12月15日

.bodyContainer { font-family: Arial, Helvetica, sans-serif; text-align: center; padding-left: 32px; padding-right: 32px; } .notebookFor { font-size: 18px; font-weight: 700; text-align: center; color: rgb(119, 119, 119); margin: 24px 0px 0px; padding:

2019年12月8日 运飞龙 linux

1.system v init运行级别及作用 init运行级别                  作用 0                                  关机 1                                  单用户模式 2                                  多用户的文本界面 3                                  多用户的文本界面 4                             

19.go语言基础学习(上)——2019年12月16日

2019年12月16日16:57:04 5.接口 2019年11月01日15:56:09 5.1 duck typing 1. 2. 接口 3.介绍 Go 语言的接口设计是非侵入式的,接口编写者无须知道接口被哪些类型实现. 而接口实现者只需知道实现的是什么样子的接口,但无须指明实现哪一个接口. 编译器知道最终编译时使用哪个类型实现哪个接口,或者接口应该由谁来实现. 每个接口类型由数个方法组成.接口的形式代码如下: type 接口类型名 interface{ 方法名1( 参数列表1 ) 返回值列表

33.《高血压看这本就够了》摘录-陈罡——2019年12月22日

.bodyContainer { font-family: Arial, Helvetica, sans-serif; text-align: center; padding-left: 32px; padding-right: 32px; } .notebookFor { font-size: 18px; font-weight: 700; text-align: center; color: rgb(119, 119, 119); margin: 24px 0px 0px; padding:

tmux使用——2019年11月20日16:40:15

1.tmux 命令行的典型使用方式是,打开一个终端窗口(terminal window,以下简称"窗口"),在里面输入命令.用户与计算机的这种临时的交互,称为一次"会话"(session) . 会话的一个重要特点是,窗口与其中启动的进程是连在一起的.打开窗口,会话开始:关闭窗口,会话结束,会话内部的进程也会随之终止,不管有没有运行完. 一个典型的例子就是,SSH 登录远程计算机,打开一个远程窗口执行命令.这时,网络突然断线,再次登录的时候,是找不回上一次执行的命令的

23.密码学知识-加密介绍-1——2019年12月19日

2019年12月19日14:51:00 1. 第1天 - 对称加密 1.1 基础知识点 知识点大纲介绍 密码的基础概念 对称加密 非对称加密 单向散列函数 哈希函数 消息认证码 数字签名 证书 ssl/tls - https 为什么要加密, 以及解决方案 保证数据安全 加密三要素 明文/密文 秘钥 定长的字符串 需要根据加密算法确定其长度 算法 加密算法 解密算法 加密算法和解密算法有可能是互逆的, 也有可能相同 常用的两种加密方式 对称加密 秘钥: 加密解密使用的是同一个秘钥, 秘钥有一个 特

linux运维实战练习案例-2015年12月20日-12月31日 (第一次)

一.实战案例(练习)内容 假如你学习完Linux,想找一份儿Linux相关的运维工作,某天你接到一家公司给出的邀请,你来到该公司面试,面试前,运维主管给你出了一些简单的笔试题,题目如下: 1.创建一个10G的文件系统,类型为ext4,要求开机可自动挂载至单独数据/data目录: 操作步骤: (1).使用fdisk工具创建一个10G的分区 [[email protected] ~]# fdisk /dev/sda 欢迎使用 fdisk (util-linux 2.23.2). 更改将停留在内存中,