精华内容
下载资源
问答
  • web前端笔试题

    2019-02-21 15:05:07
    web前端工程师笔试题,题目不多,涵盖了大多公司会问到的问题
  • Web前端笔试题

    2017-10-17 22:26:56
    前端开发者不得不知的ES6十大特性 IE兼容问题? 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 Html 块级元素和内联元素的区别 html块级元素与行内元素 其他 同环比区别 本期...

    CSS

    1. 如何改变某个元素的文本颜色? color:
    2. 如何显示没有下划线的超链接?a {text-decoration:none}
    3. 如何使文本以大写字母开头?text-transform:capitalize
    4. 如何显示这样一个边框:上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素?border-width:10px 1px 5px 20px
      备注:由上顺时针至左边框。
    5. 如何产生带有正方形项目的列表?list-style-type: square
    6. 如需定义元素内容与边框间的空间,可使用 padding 属性,并可使用负值?错误

    JavaScript

    1. 什么是Callback Hell?如何避免?
      Callback Hell 与编程思路的探索
    2. 关于ES6?
      前端开发者不得不知的ES6十大特性
    3. IE兼容问题?
      一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    Html

    1. 块级元素和内联元素的区别
      html块级元素与行内元素

    其他


    1. 同环比区别
      本期统计数据与上期比较,例如2014年7月份与2014年6月份相比较,叫环比。与历史同时期比较,例如2014年7月份与2013年7月份相比,叫同比,公式如下:

    1)环比增长率=(本期数-上期数)/上期数×100%。
    2)同比增长率=(本期数-同期数)/同期数×100%。

    展开全文
  • web前端笔试题(含答案).doc
  • 2018WPS暑期实习生web前端笔试题昨天参加的现场笔试,总共六题,现将题目整理如下:1.判断如下A,B,C各输出什么var arr = []; arr['a'] = a; console.log(arr.length) // A arr['2'] = 2; console.log(arr.length) /...

    2018WPS暑期实习生web前端笔试题

    昨天参加的现场笔试,总共六题,现将题目整理如下:

    1.判断如下A,B,C各输出什么

    var arr = [];
    arr['a'] = a; 
    console.log(arr.length) // A
    arr['2'] = 2;
    console.log(arr.length) // B
    arr.length = 0;
    console.log(arr);       // C

    个人解析:
    第一个把’a’转成Number时,变为NaN,所以存不进去,A输出为0,答案是对的,不过解析好像不是这样,大家可以再控制台试一下,因为此时arr是’[a:”a”]’;
    第二个,把’2’转为了2,所以相当于’arr[2]=2’这样就把数组变成了3个元素长度的,其中前两个为undefined,B输出3;
    第三个,因为length变为0了,所以元素清除,剩下’[a:”a”]’,我答成了’[]’

    2.添加代码使得如下代码每隔一秒输出一个数字

    for (var i = 0; i < 5; i++) {
    // to do
    }

    代码:

    for (var i = 0; i < 5; i++) {  
      (function(j) {  
        setTimeout(function() {  
          console.log(j);  
        }, 1000 * j);  
      })(i);  
    } 

    3.如下代码输出啥

    var f = function g() {
        return 32;
    }
    typeof g();

    报错,undefined

    4.如下代码输出啥

    function jude(val) {
        swith(val) {
            case "A":
                console.log(1);
                break;
            case "string":
                console.log(2);
                break;
            case "undefined":
                console.log(3);
                break;
            case undefined:
                console.log(4);
                break;
            default:
                console.log(5);
                break;
        }
    }
    jude(new String("A"));

    输出5,我的理解是他new出来的是一个object,然后switch是用的全相等,所以都没有符合的

    5.用javascript实现map的数据结构,使得外部只能通过map提供的接口访问数据
    这道题就用闭包做的

    6.对于一个排好序的数组,如果当中有两个数的和为某个给定的数target,返回true,否则false,事件复杂度O(n)
    这是道简单的算法题,分别从头和尾向中间扫描,头尾相加判断和与target的大小关系
    和比target小的话,头++
    和比target大的话,尾–

    展开全文
  • web前端笔试题-完善版

    千次阅读 多人点赞 2020-08-08 19:51:04
    web面试 1、定位有哪几种?分别简述其特点。 static:默认值,没有定位,元素出现在正常的文档流中 relative:生成相对定位的元素,不脱离文档流,相对于自身位置进行定位 absolute:生成绝对定位的元素,脱离文档...

    web面试题

    1、定位有哪几种?分别简述其特点。

    static:默认值,没有定位,元素出现在正常的文档流中
    relative:生成相对定位的元素,不脱离文档流,相对于自身位置进行定位
    absolute:生成绝对定位的元素,脱离文档流,相对于最近一级的定位,而不是static的父元素来进行定位
    fixed:生成绝对定位元素(老IE不支持),脱离文档流,相对于浏览器窗口进行定位
    

    2、请描述一下网页从开始请求到最终显示的完整过程

    1.1在浏览器中输入地址
    1.2发送到DNS服务器,解析获取域名对应的web服务器的ip地址
    1.3与web服务器建立TCP链接
    1.4浏览器向web服务器发起相应的HTTP请求
    1.5web服务器响应请求,并返回响应数据
    1.6浏览器解析并展示HTML
    1.7如果当前页面存在其他请求(外布css/js),浏览器对这些文件重复以上的步骤
    

    3、link和import的区别

    区别1:link是XHTML标签,除了加载css外,还可以定义RSS等其他事务;
    	@import属于css范畴,只加载css
    区别2:link引入css时,在页面载入时同时加载
    	@import需要页面完全加载后再加载
    区别3:link是XHTML标签,无兼容问题
    	@import是css2.1提出的,低版本浏览器不支持
    区别4:link支持JavaScript控制DOM去改变样式
    	而@import不支持
    

    4、阅读一下代码

    代码运行后,是产生输出结果还是报错?为什么?

    Var age=20;
    Var test;
    If(age>20&&test.length>0){
       console.log(1)
    }else{
       console.log(2)
    }
    
    输出2,不会报错
    因为if判断的第一个条件就是false不满足,此时就产生了‘逻辑短路’,第二个判断不会执行,就不会报错
    

    5、call()和apply()和bind()的区别和作用?

    apply()函数有两个参数,第一个参数是上下文,第二个是参数组成的数组。
    如果上下文为null,则使用全局对象this代替
    	function.apply(this,[1,2,3]);
    call()的第一个产生是上下文,后续是实例传入的参数序列
    	function.call(this.1,2,3)
    bind()方法会创建一个新函数,当这个新函数被调用时
    	function.bind(null, 10,20);
    
    * call和apply会立即执行函数,而bind不会,它会生成一个新的函数
    

    6、js深拷贝和浅拷贝的区别?

    浅拷贝:复制一层对象的属性,并不包括对象里面的引用类型的数据,当改变拷贝的对象里面的引用类型时,源对象也会改变
    深度拷贝:重新开辟一块内存空间,需要递归拷贝对象里的引用数据类型,直到子属性都为基本类型。两个对象的对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
    
    function deepClone(obj){
        let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
        return objClone
    } 
    

    7、通过es6解构赋值的方法提取以下对象的street值和prices的第2个元素

    let sth={
      orderId:123456,
      address:{city:HZ,street:XIHU},
      prices:[10,20,30]
    }
    
    let {address:{street},prices:[,prices]} = sth;
    console.log(street,prices);
    
    //变量互换
    let a = 1;
    let b = 2;
    [a,b] = [b,a];
    
    //解构赋值
    function demo({name="小代"}){
         console.log(name);
    }
    

    8、HTTP状态码知道哪些

    100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
    200 OK 正常返回信息
    201 Created 请求成功并且服务器创建了新的资源
    202 Accepted 服务器已接受请求,但尚未处理
    301 Moved Permanently 请求的网页已永久移动到新位置。
    302 Found 临时性重定向。
    303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
    304 Not Modified 自从上次请求后,请求的网页未修改过。
    400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
    401 Unauthorized 请求未授权。
    403 Forbidden 禁止访问。
    404 Not Found 找不到如何与 URI 相匹配的资源。
    500 Internal Server Error 最常见的服务器端错误。
    503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
    

    9、vue.js的两个核心是什么?

    数据驱动、组件化系统
    

    10、vue中怎么使css只在当前组件起作用?

    在style标签中写 scoped 即可
    <style scoped></style>
    

    11、常见兼容性问题及解决方法

    1.1浏览器默认的margin和padding不同
    	解决方法:加一个全局的*{margin:0;padding:0;}统一
    1.2IE6双边距问题,在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍
    	解决方法:在float的标签样式控制中加入_display:inline;将其转换为行内属性
    1.3ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和matgin-bottom却会发生重合
    	解决方法:养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom
    1.4几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中通配符也不起作用
    	解决方法:使用float属性为img布局
    

    12、说出至少5个ES6的新特性,并简述它们的作用

    1 let关键字,用于声明只在块级作用域起作用的遍变量
    2 const 关键字,用于声明一个常量
    3 解构赋值,一种新的变量赋值方式。常用来交换变量值,提取函数返回值,设置默认值等
    4 for-of遍历,可用来遍历具有Iterator接口的数据解构(Array,String,Set,Map,arguments,NodeList等)
    5 Set解构,存储不重复的成员的集合
    6 Map结构,键名可以是任何类型的键值对集合
    7 Promise对象,更合理规范的处理异步操作
    8 Class类,定义类和更简便的实现类的继承
    9 Symbol数据类型,定义一个独一无二的值。
    10 Proxy代理,用于编写处理函数,来拦截目标对象的操作。
    

    13、使用模板字符串改写下面的代码(ES5 to ES6改写题)

    let iam = "我是";
    let name = "tom";
    let str = "大家好,"+ iam + name +",多指教。";
    改写:
    let str = `大家好,${iam+name},多指教`;
    
    let name = "小代";
    let obj = {
        "name":name,
        "say":function(){
            alert('hello world');
        }
    };
    改写:
    let name = "小代";
    let obj = {
        name,
        say(){
            alert('hello world');
        }
    };
    

    14、什么是vue生命周期和生命周期钩子函数?第一次页面加载会触发哪几个钩子?

    vue的生命周期就是vue实例从创建到销毁的过程
    beforeCreate 在实例初始化之后,数据观察(data observer)和event/watch事件配置之前被调用
    created 在实例创建完成后立即被调用,在这一步实例已经完成了:数据观察、属性和方法的运算和event/watch事件的回调,但是$el属性目前不可见
    beforeMount 在挂载开始之前被调用
    mounted 在挂载成功后被调用,el被创建的vm.$el替换
    beforeUpdate 数据更新之前调用
    update 数据更新完成时调用,组件DOM已经更新 activated组件被激活时调用deactivated组件被移除时调用
    beforeDestory 组件销毁前调用
    destoryed 组件销毁后调用
    
    第一次页面加载会触发:beforeCreate, created, beforeMount, mounted
    
    创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
    载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
    更新前/后:当data变化时,会触发beforeUpdate和updated方法。
    销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
    

    15、如何解决跨域问题

    1.1 JSONP:原理是动态插入script标签引入一个带回调函数的js文件,这个js文件载入成功后会执行该文件所请求的地址,并且把我们需要的JSON参数传入,在会调函数中我们就可以获得所请求到的数据
    	优点:兼容性好,支持浏览器与服务器双向通信
    	缺点:只支持get请求
    1.2 cors:该方法主要作用服务端,设置Access-Control-Allow-Origin来进行,就可以通过Ajax实现跨域访问了
    1.3 反向代理转发
    

    16、说活对闭包的理解

    使用闭包主要是为了设计私有的方法和变量。
    	优点:可以避免全局变量的污染
    	缺点:闭包会常驻内容,会增大内存使用量,使用不当容易造成内存泄漏
    在js中函数即闭包,只有函数才会产生作用域的概念
    	特性:函数嵌套函数
    		函数内部可以引用外部的参数和变量
    		参数和变量不会被垃圾回收机制回收
    
    function foo(){
        var a = 20;
        var b = 30;
        function(){
            return a+b;
        }
        bar();
    }
    foo();
    

    17、JavaScript对象的几种创建方式

    1.1 工厂模式
    1.2 构造函数模式
    1.3 原型模式
    1.4 混合构造函数和原型模式
    1.5 动态原型模式
    1.6 寄生构造函数模式
    1.7 稳妥构造函数模式
    

    18、v-for产生的列表,key 值的作用,实现active切换

    使用key来给每个节点做一个唯一标识
    key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
    
    html:
    <ul>
        <li v-for="(item,index) in list" :key="index" @click="select(index)" :class="{'active': item.active}">{{item.name}}</li>
    </ul>
    
    Data:
    list:[
    	{name:'a',active:false},
    	{name:'b',active:false},
    	{name:'c',active:false},
    ]
    
    事件:
    select(i){
    	this.list.map(item=>item.active = false);
    	this.list[i].active = true;
    }
    
    样式:
    <style scoped>
        li.active{
            background-color:red;
        }
    </style>
    

    19、小程序页面间有哪些传递数据的方法

    1.1 使用全局变量实现数据传递,使用的时候,直接用getApp()拿到存储信息
    1.2 使用wx.navigateTO与wx.redirectTo的时候,可以将部分数据放在url里面,并在新页面onLoad时初始化
    	注意:wx.navigateTo和wx.redirectTo不允许跳转tab所包含的页面,onLoad只执行一次
    1.3 使用本地缓存Storage
    

    20、简单描述下微信小程序的相关文件类型

    项目目录结构主要有四种文件类型
    1.1 wxml 是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构,内部主要是微信自己定义的一套组件
    1.2 wxss 是一套样式语言,用于描述wxml的组件样式
    1.3 js 逻辑处理,网络请求
    1.4 json 小程序设置,如页面注册、页面标题及tabBar设置
    

    21、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

    1.1 Gecko内核   Mozilla Firefox火狐浏览器   		兼容性前缀 -moz-
    1.2 WebKit内核   Chrome(blink是WebKit的分支)、Safari  兼容性前缀 -webkit-
    1.3 Presto内核    Opera(欧朋原为:Presto,现为:Blink)				兼容性前缀 -o-
    1.4 Trident内核    IE						兼容性前缀 -ms-
    

    22、css清除浮动的几种方法

    1)为浮动元素的父级盒加固定的高度——不够灵活  
    2)为浮动元素的父级盒加浮动——会产生新的浮动问题        
    3)为浮动元素的父级盒设置overflow属性,属性值可以是hidden|scroll|auto——可能会导致内容显示不完全;代码简洁        
    4)在浮动元素之后,跟浮动元素呈并列关系的位置,加一个空div,在空div上添加一个属性clear: both;——代码冗余;通俗易懂、书写方便                
    5)推荐方法:
    给浮动元素的父元素添加.clearfix,(不会在结构上产生冗余代码,可多次重复使用)
    .clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
    .clearfix:after{ content: ""; display: block; clear: both; }
    
    //其他方法
    1.1【.clr{clear:both;}】,设置了clear属性的元素,其上边框会紧贴着浮动元素的margin-bottom边界位置渲染,忽略其margin-top设置
    1.2 空标签清浮动:【.clr{clear:both;height:0;overflow:hidden;}】,不推荐。
    1.3 伪类after清浮动:【.clearfix:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clearfix{zoom:1}】。
    1.4 使用【display:table】。
    1.5 使用overflow除visible,类似于激发haslayout。
    1.6 使用浮动父元素清浮动。
    

    23、关于Set结构,阅读下面的代码

    问:打印出来的size的值是多少?为什么?

    let s = new Set(); 
    s.add([1]); 
    s.add([1]); 
    console.log(s.size);
    

    1、打印出来的值是2,两个[1]定义的是两个不同的数组,在内存种的存储地址不同,所以是不同的值
    2、如果回答为1的,多必是记得Set结构是不会存储相同的值。其实在这个案例中,两个数组[1]并不是同一个值,它们分别定义的数组,在内存中分别对应着不同的存储地址,因此并不是相同的值。所以都能存储到Set结构中,size为2。

    24、es6:定义一个类Animal,通过传参初始化它的类型

    如:“猫科类”。它有一个实例方法:run,run函数体内容可自行定义

    Class Animal{
    	constructor(type){
    		this.type = type;
    	}
    	run(){
    		console.log("i can run");
    	}
    }
    

    基于题的Animal类,定义一个子类Cat并继承Animal类。初始化Cat类的昵称name和年龄age。并拥有实例方法eat,eat函数体内容可自行定义

    class Cat extends Animal{
        constructor(type,name,age){
            super(type);
            this.name = name;
            this.age = age;
        }
       
        eat(){
            alert('I am eating');
        }
    }
    

    25、利用module模块

    实现两个模块A和B,A模块导出变量name,age和say方法。B模块只导入变量name和say方法,并且重命名name为nickname

    A模块:
    let name = 'tom';
    let age = ()=>{console.log("age")};
    let say = ()=>{console.log("say")};
    export {name,age,say}
    
    B模块:
    import {name as nickname,say} from 'A'
    

    26、判断字符串中出现次数最多的元素,并统计次数

    let str = 'asdfghhgffffieekdnwolfhqnczeeesssg';
    let obj = {};//存放每个字符的个数
    let num = str.length;
    for(let i=0;i<num;i++){
    	if(obj[str.charAt(i)]){
    		obj[str.charAt(i)] = parseInt(obj[str.charAt(i)])+1;//个数增加
    	}else{
    		obj[str.charAt(i)] = 1;//设置初始值 添加
    	}
    }
    
    let maxNum = 0;//次数
    let maxDocument = null;//字符
    for(let j in obj){
    	if(obj[j]>maxNum){
    		maxNum = obj[j];
    		maxDocument = j;
    	}
    }
    console.log('obj:',obj);
    console.log('次数:',maxNum,'字符:',maxDocument);
    

    27、MVC和MVVM的理解

    MVC:
    	Model(模型):是应用程序中处理应用程序数据逻辑的部分。
    				通常模型对象负责在数据库中存取数据
    	View(视图):是应用程序中处理数据显示的部分。
    				通常视图是依据模型数据创建的
    	Controller(控制器):是应用程序中处理用户交互的部分。
    				通常控制器负责从视图层读取数据,控制用户输入,并向模型发送数据
    				
    MVVM:
    	MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型
    	模型(Model):指的是后端传递的数据。
        视图(View):指的是所看到的页面。
        视图模型(ViewModel):是mvvm模式的核心,它是连接view和model的桥梁
    它有两个方向:
    	一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
    	二是将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
    

    28、vue-router有哪几种导航钩子( 导航守卫 )?

    1.1 全局钩子函数:定义在全局的路由对象中
    	主要有:beforeEach:在路由切换开始时调用
    		   afterEach:在每次路由切换成功进入激活阶段时调用
    1.2 单独路由独享的钩子:可以在路由配置上直接定义beforeEnter钩子
    1.3 组件的钩子函数:定义在组件的router选项中
    	beforeRouteEnter
    	beforeRouteUpdate
    	beforeRouteLeave
    

    29、Promise对象

    Promise对象是什么?三种状态是什么?成功时执行的方法,失败时执行的方法?

    Promise对象是ES6( ECMAScript 2015 )对于异步编程提供的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
    Promise对象有三种状态:pending(进行中)、reslove(已成功)和reject (已失败)。
        then方法:用于指定调用成功时的回调函数。
        catch方法:用于指定发生错误时的回调函数。
    
    

    30、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

    定义:在router目录下的index.js文件中,对path属性加上/:id;
    获取:使用router对象的params.id;
    
    动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒	号开头
    {
      path: '/details/:id'
      name: 'Details'
      components: Details
    }
    访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。
    当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数:this.$route.params.id
    

    31、原生js ajax请求有几个步骤?分别是什么

    //创建 XMLHttpRequest 对象
    var ajax = new XMLHttpRequest();
    //规定请求的类型、URL 以及是否异步处理请求。
    ajax.open('GET',url,true);
    //发送信息至服务器时内容编码类型
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    //发送请求
    ajax.send(null);  
    //接受服务器响应数据
    ajax.onreadystatechange = function () {
        if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
        }
    ]
    

    32、在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?

    px是相对长度单位,相对于显示器屏幕分辨率而言的。
    em是相对长度单位,相对于当前对象内文本的字体尺寸。
    px定义的字体,无法用浏览器字体放大功能。
    em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值
    
    

    33、解释下 CSS sprites原理,优缺点

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
    优点:
    a. 减少网页的http请求
    b. 减少图片的字节
    c. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
    d. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。
    缺点:
    a. 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂
    b. CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置
    c. 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片
    

    34、split() join() 的区别

    前者是将字符串切割成数组的形式,后者是将数组转换成字符串
    

    35、get和post 的区别?

    1. Get是不安全的,因为在传输过程,数据被放在请求的URL中;Post的所有操作对用户来说都是不可见的。 
    2. Get传送的数据量较小,这主要是因为受URL长度限制;Post传送的数据量较大,一般被默认为不受限制。 
    3. Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。 
    4. Get执行效率却比Post方法好。Get是form提交的默认方法。 
    

    36、Vue组件间的参数传递

    1.父组件与子组件传值
    父组件传给子组件:子组件通过props方法接受数据;
    子组件传给父组件:$emit方法传递参数
    2.非父子组件间的数据传递,兄弟组件传值
    $bus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)
    
    

    37、添加 删除 替换 插入到某个节点的方法

    1.1 创建新节点
    	createElement()//创建一个具体的元素
    	createTextNode()//创建一个文本节点
    1.2 添加、移除、替换、插入
    	appendChild()//添加
    	removeChild()//移除
    	replaceChild()//替换
    	insertBefore()//插入
    1.3 查找
    	getElementsByTagName()    //通过标签名称
        getElementsByName()     //通过元素的Name属性的值
        getElementById()        //通过元素Id,唯一性
    

    38、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

    全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
    钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
    钩子函数参数:el、binding
    

    39、说出至少4种vue当中的指令和它的用法?

    v-if:判断是否隐藏;
    v-show:显示隐藏
    v-for:数据循环出来;
    v-bind:class绑定一个属性;
    v-model:实现双向绑定
    

    40、请说出vue.cli项目中src目录每个文件夹和文件的用法?

    assets文件夹是放静态资源;
    components是放组件;
    router是定义路由相关的配置;
    view视图;
    app.vue是一个应用主组件;
    main.js是入口文件
    

    41、怪异盒模型box-sizing?弹性盒模型|盒布局?

    在标准模式下的盒模型:盒子总宽度/高=width/height+padding+border+margin
    在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin 
    box-sizing有两个值一个是content-box,另一个是border-box。
    当设置为box-sizing:content-box时,将采用标准模式解析计算;
    当设置为box-sizing:border-box时,将采用怪异模式解析计算
    

    42、简述几个css hack?

    (1) 图片间隙
    	在div中插入图片,图片会将div下方撑大3px。
        hack1:将<div>与<img>写在同一行。
        hack2:给<img>添加display:block;
    (2) dt li 中的图片间隙。
    	hack:给<img>添加display:block;
    (3) 默认高度,IE6以下版本中,部分块元素,拥有默认高度(低于18px)
    	hack1:给元素添加:font-size:0;
    	hack2:声明:overflow:hidden;
    (4) 表单行高不一致
    	hack1:给表单添加声明:float:left;height: ;border: 0;
    

    43、vue常用的修饰符?

    .prevent: 提交事件不再重载页面;
    .stop: 阻止单击事件冒泡;
    .self: 当事件发生在该元素本身而不是子元素的时候会触发;
    .capture: 事件侦听,事件发生的时候会调用
    

    44、vue-router 是什么?它有哪些组件?router-link有哪些属性?

    vue用来写路由一个插件。router-link、router-view、Router-link的属性有:to,active-class,replace...
    

    45、回答以下代码,alert的值分别是多少?

    var a = 100; 
    function test(){ 
        alert(a); //100
        a = 10; 
        alert(a);//10
    } 
    test();//调用函数执行
    alert(a);//最后执行 10
    
    因为a为全局变量,函数中改变的也是全局a
    

    46、new操作符具体干了什么呢?

    1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
    2、属性和方法被加入到 this 引用的对象中
    3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
    

    47、componentWillUpdate可以直接修改state的值吗?

    不能,如果在shouldComponentUpdate和componentWillUpdate中调用了setState,此时this._pendingStateQueue != null,则performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新。但是updateComponent方法又会调用shouldComponentUpdate和componentWillUpdate,因此造成循环调用,使得浏览器内存占满后崩溃
    

    48、vue中如何获取dom?

    ref="domName" 
    用法:this.$refs.domName
    

    49、vue组件中data为什么必须是一个函数?

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
    组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。
    而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
    

    50、冒泡排序算法

    let arr = [5,4,6,2,7,1];
    for(let i=0;i<arr.length-1;i++){
    	for(let j=0;j<arr.length-i-1;j++){
    		if(arr[j]>arr[j+1]){
    			let temp = arr[j+1];
    			arr[j+1] = arr[j];
    			arr[j] = temp;
    		}
    	}
    }
    console.log('arr',arr);//[1, 2, 4, 5, 6, 7]
    

    51、Doctype作用,HTML5 为什么只需要写

    doctype是一种标准通用标记语言文档类型声明,目的是告诉标准通用标记语言解析器要用什么样的文档类型定义DTD来解析文档,<!DOCTYPE>声明必须是HTML文档的第一行,位于html标签之前
    

    52、如何实现浏览器内多个标签页之间的通信

    1)使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
    2)websocket协议
    3)webworker
    

    53、响应式和自适应有什么区别?

    响应式设计(Responsive design):一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
    自适应设计(Adaptive Design):是为同类别的物理设备建立三种不同的网页(PC),检测到设备分辨率大小后调用相应的网页。
    

    54、Vue 中怎么自定义指令?

    指令:分为全局指令和局部指令
    //注册一个全局自定义指令 v-focus
    Vue.directive('focus',{
    	//当绑定的元素插入到DOM中时...
    	inserted:function(el){
    		//聚焦元素
    		el.focus()
    	}
    })
    
    //局部注册
    directive:{
    	focus:{
    		//指令的定义
    		inserted:function(el){
    			el.focus()
    		}
    	}
    }
    

    55、 什么是事件代理,它的原理是什么

    事件代理:通俗来说就是将元素的事件委托给它的父级或者更外级元素处理	原理:利用事件冒泡机制实现的
    优点:只需要将同类元素的事件委托给父级或者更外级的元素,不需要给所有元素都绑定事件,减少内存空间占用,提升性能; 动态新增的元素无需重新绑定事件
    

    56、watch、methods 和 computed 的区别?

    watch 为了监听某个响应数据的变化。
    computed 是自动监听依赖值的变化,从而动态返回内容,主要目的是简化模板内的复杂运算。
    所以区别来源于用法,只是需要动态值,那就用 computed ;需要知道值的改变后执行业务逻辑,才用 watch。
    methods是一个方法,它可以接受参数,而computed 不能,computed 是可以缓存的,methods 不会。computed 可以依赖其他 computed,甚至是其他组件的 data。
    

    57、break和continue语句的作用?

    break语句 当前循环中退出
    continue语句 继续下一个循环语句
    

    58、b继承a的方法

    原型链继承
    构造函数继承
    实例继承
    组合继承
    拷贝继承
    寄生组合继承
    

    59、列举浏览器对象模型中常用的对象,并列举window对象常用的方法至少五个

    对象:Window,document,location,screen,history,navigator,screen
    方法:Alert(),confirm(),prompt(),open(),close(),moveTo(),moveBy()。
    

    60、vue自定义组件@click点击失效的原因和解决办法

    原因:click事件作用于组件内部,如果组件内没有写click事件,便会无响应。
    解决:
    1.参照官方文档,可以用@click.native=“click”解决	
    2.可以用:将事件传递至组件内,也符合组件间的单向数据流,我就是这样解决的
    主组件写法:
    	<v-nav :click="toggle"></v-nav>
    被调用组件写法:
    	<div @click="click">...</div>
    	export default{
    		props:{
    			click:{
    			type:Function
    			}
    		}
    	}
    3.使用$emit来实现事件传递
    	<div @click="_click"></div>
    	methods:{
    		_click(){
    		this.$emit("click");
    		}
    	}
    

    61、 r o u t e 和 route和 routerouter的区别

    1.$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。
    2.$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
    

    62、请描述一下 cookies,sessionStorage 和 localStorage 的区别

    1.localStorage长期存储数据,浏览器关闭数据后不丢失;
    2.sessionStorage数据在浏览器关闭后自动删除;
    3.cookie是网站为了标识用户身份而存储在用户本地终端(Client Side)上的数据(通常经过加密)。cookie始终在同源的http请求中携带(即使不需要)都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;
    4.存储大小:cookie数据大小不会超过4K,sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或者更多;
    5.有期时间:localStorage存储持久数据,浏览器关闭后数据不丢失,除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭;
    

    63、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)

    行内元素:会水平方向排列,不能包含块级元素,设置width无效,height无效,可设置line-height,margin上下无效,padding上下无效
    块级元素:各占据一行,垂直方向排列,可设置width、height等属性,从新行开始结束接着一个断行
    
    兼容问题:display:inline-block;*display:inline;*zoom:1;
    

    64、ie和标准浏览器,有哪些兼容的写法?

    let ev = ev || window.event;
    document.documentElement.clientWidth || document.body.clientWidth;
    let target = ev.srcElement || ev.target;
    

    65、事件委托是什么?如何阻止事件冒泡?如何阻止默认事件?

    事件委托:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行
    阻止事件冒泡:
        ie:阻止冒泡ev.cancelBubble = true;IE ev.stopPropagation(); 
    阻止默认事件:
    	(1)return false
    	(2)ev.preventDefault()
    

    66、简述下面页面跳转区别

    wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别?

    wx.navigateTo():保留当前页面,跳转到应用内的某个页面。不能跳转tabBar页
    wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。不能跳转tabBar页
    wx.switchTab():跳转到tabBar页,关闭其他非tabBar页面
    wx.navigateBack():关闭当前页面,返回上一页面或多级页面
    	可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
    wx.reLaunch():关闭所有页面,打开到应用内的某个页面
    

    67、setTimeout、Promise、Async/Await 的区别

    事件循环中分为宏任务队列和微任务队列
    其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行
    promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行
    async函数表示函数里面可能会有异步方法,await后面跟一个表达式
    async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行
    

    68、小程序的声明周期函数

    onLoad()页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数
    onShow()页面显示/切入前台时触发
    onReady()页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
    onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等
    onUnload()页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时
    

    69、react 生命周期函数

    初始化阶段:
    getDefaultProps:获取实例的默认属性
    getInitialState:获取每个实例的初始化状态
    componentWillMount:组件即将被装载、渲染到页面上
    render:组件在这里生成虚拟的 DOM 节点
    componentDidMount:组件真正在被装载之后
    
    运行中状态:
    componentWillReceiveProps:组件将要接收到属性的时候调用
    shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
    componentWillUpdate:组件即将更新不能修改属性和状态
    render:组件重新描绘
    componentDidUpdate:组件已经更新
    
    销毁阶段:
    componentWillUnmount:组件即将销毁
    

    70、Vue 组件中data 为什么必须是函数

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

    71、forEach、for in、for of三者区别

    forEach 用来遍历数组
    for of 数组对象都可以遍历,历的是数组元素值
    	遍历对象需要通过Object.keys()
    for in 一般用来遍历对象或json,遍历的是数组的索引(即键名key)
    

    72、v-show和v-if指令的共同点和不同点?

    共同点:都能控制元素的显示和隐藏;
    不同点:实现本质方法不同
    	v-show:本质是通过控制css中的display设置为none,控制隐藏,只会编辑一次;
    	v-if是动态的向DOM树内添加或删除DOM元素,若初始值为false,就不会编译了,而且v-if不停的销毁和创建会比较销毁性能;
    
    总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。
    

    73、Vue的双向数据绑定原理是什么?

    vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
    

    74、canvas在标签上设置宽高和在style中设置宽高有什么区别?

    canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。
    而style的width和height是canvas在浏览器中被渲染的高度和宽度,还会出现被拉伸的效果,和设置的值不符合
    如果canvas的width和height没指定或值不正确,就被设置成默认值
    

    75、vue第一次页面加载会触发哪几个钩子?

    beforeCreate,created,beforeMount,mounted
    

    76、params和query的区别

    传参可以使用params和query两种方式。
    2、使用params传参只能用name来引入路由,即push里面只能是	name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!。
    3、使用query传参使用path来引入路由。
    4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
    5、二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。
    

    77、vuex是什么?怎么使用?哪种功能场景使用它?

    vue框架中的状态管理器
    State、 Getter、Mutation 、Action、 Module五种属性
    state => 基本数据(数据源存放地)
    getters => 从基本数据派生出来的数据
    mutations => 提交更改数据的方法,同步!
    actions => 像一个装饰器,包裹mutations,使之可以异步。
    modules => 模块化Vuex
    
    在main.js引入store 注入挂载
    新建一个目录store.js,...导出export
    场景:当页面应用中,组件之间的状态、音乐的播放、登录状态、加入购物车等
    

    78、push()、pop()、unshift()、shift()的用处及返回值

    push()方法是向数组末尾添加一个或者多个元素,并返回新的长度。
    pop()方法删除数组的最后一个元素,把数组的长度减1,并且返回它被删除元素的值unshift()方法是向数组的开头添加一个或多个元素,并且返回新的长度。
    Shift()方法用于把数组的第一个元素从其中删除,并返回被删除的值
    

    79、window.onload和$(document).ready的区别

    window.onLoad只会出现一次,$(document).ready能出现多次
    window.onload需要等所有文件都加载完才开始加载,$(document).ready只需等文档结构加载完了就开始加载
    

    80、哪些操作会造成内存泄露

    内存泄露指任何对象在不再拥有或不再需要它之后依然存在
    setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
    闭包
    控制台日志
    循环(两个对象彼此引用且彼此保留)
    

    81、实现数组去重

    // 数组去重
    let arr = [1,1,2,3,2,3,5,6,7,8,8,7];
    let narr = [];
    function removeItem(arr){
    	for(let i=0;i<arr.length;i++){
    		// 判断narr中是否已存在该值
    		if(narr.indexOf(arr[i])==-1){
    			narr.push(arr[i]);
    		}
    	}
    	return narr;
    }
    console.log(removeItem(arr));//[1, 2, 3, 5, 6, 7, 8]
    

    82、CSS3新增伪类有那些?新增属性?

    p:first-of-type 选择属于其父元素的首个元素
    p:last-of-type 选择属于其父元素的最后元素
    p:only-of-type 选择属于其父元素唯一的元素
    p:only-child 选择属于其父元素的唯一子元素
    p:nth-child(2) 选择属于其父元素的第二个子元素
    :enabled :disabled 表单控件的禁用状态。
    :checked 单选框或复选框被选中。
    
    1、border-color(为边框设置多种颜色)
    2、border-image(图片边框)
    3、border-radius(圆角边框)
    4、box-shadow(阴影效果)
    5、text-shadow(文本阴影)
    6、text-overflow(文本截断)
    7、word-wrap(自动换行)
    8、opacity(透明度)
    9、box-sizing(控制盒模型的组成模式)
    10、resize(元素缩放)
    11、outline(外边框)
    12、background-size(指定背景图片尺寸)
    13、background-origin(指定背景图片从哪里开始显示)
    14、background-clip(指定背景图片从什么位置开始裁剪)
    15、background(为一个元素指定多个背景)
    16、hsl(通过色调、饱和度、亮度来指定颜色颜色值)
    17、hsla(在hsl的基础上增加透明度设置)
    18、rgba(基于rgb设置颜色,a设置透明度)
    

    83、 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?

    该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
    试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。
    

    84、下面代码输出什么?

    var output = (function(x){
        delete x;//只针对对象属性,不会释放内存 间接中断对象的引用
        return x;
    })(0);//函数的自执行
    console.log(output); //0
    
    

    85、解释一下变量的提升

    变量的提升是JavaScript的默认行为,这意味着将所有变量声明移动到当前作用域的顶部,并且可以在声明之前使用变量。初始化不会被提升,提升仅作用于变量的声明。

    var x = 1;
    console.log(x,y);//1 undefined
    console.log(x,y,z);//z is not defined
    var y = 2;
    let z = 3;//不会提升
    console.log(x,y,z);//1 2 3
    

    86、解释一下严格模式(strict mode)

    严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中,关键字'use strict'。使用严格模式后的代码应遵循JS严格的语法规则。例如,分号在每个语句声明之后使用。
    

    87、Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

    Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。 框架底层
    

    88、vue更新数组时能够触发视图更新的数组方法

    push();pop();shift();unshift();splice();sort();reverse()
    

    89、created和mounted的区别

    created(创建完成):在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted(挂载完成):在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    

    90、为什么要初始化CSS样式

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
    

    91、display:none与visibility:hidden的区别?

    display:none 不显示对应的元素(不占位),在文档布局中不再分配空间(回流+重绘)
    visibility:hidden 隐藏对应元素(占位),在文档布局中仍保留原来的空间(重绘)
    

    92、null,undefined的区别?

    null 表示一个对象被定义,但是放了个空指针,转换为数值时为0
    undefined 表示声明的变量未初始化,转换为数值时为NaN
    typeof(null) //object
    typeof(undefined) //undefined
    

    93、同步和异步的区别?

    同步的概念在操作系统中:不同进程协同完成某项工作而先后次序调整(通过阻塞、唤醒等方式),同步强调的是顺序性,谁先谁后。异步不存在顺序性。
    同步:浏览器访问服务器,用户看到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容之后进行下一步操作。
    异步:浏览器访问服务器请求,用户正常操作,浏览器在后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。
    

    94、请给出异步加载js方案,不少于两种

    1)defer,只支持IE
    2)async/await
    3)创建script,插入到DOM中,加载完毕后callBack
    

    95、项目做过哪些性能优化?

    1、减少HTTP请求数
    2、减少DNS查询
    3、使用CDN
    4、避免重定向
    5、图片懒加载
    6、减少DOM元素数量
    7、减少DOM操作
    8、使用外部JavaScript和CSS
    9、压缩JavaScript、CSS、字体、图片等
    10、优化CSS Sprite
    11、使用iconfont
    12、字体裁剪
    

    96、vue-router如何定义嵌套路由?

    主要是通过 children,它同样是一个数组
    {
    	path:'/user',
    	component:user,
    	children:[
    		{
    			path:'file',
    			component:()=>import(...)//懒加载
    		}
    	]
    }
    

    97、媒体查询是什么?怎么使用?

    媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式。
    @media [not | only] media-type [and] ( media-condition){}
    
    @media screen and (max-width: 300px) {
        body {
            background-color:lightblue;
        }
    }
    

    98、promise.all和promise.race的区别

    Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例,包装成一个新的Promise实例。都成功才会返回成功
    promise.race类似于Promise.all() ,区别在于 它有任意一个返回成功后,就算完成,但是 进程不会立即停止
    

    99、import和require区别

    遵循规范
        require 是 AMD规范引入方式
        import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法
    调用时间
        require是运行时调用,所以require理论上可以运用在代码的任何地方
        import是编译时调用,所以必须放在文件开头
    本质
        require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
        import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require
    

    100、storage和cookie的区别

    存储空间不同:
    	storage能提供5M左右的存储空间,cookie能提供4k左右的存储空间
    	storage每个域都有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混淆
    服务端交互:
    	storage中的数据仅仅是本地存储,不会和服务器发生任何交互
    	cookie的内容会跟随着请求一并发送到服务端(每个新页面请求时,都会携带cookie,无形中造成带宽浪费)
    接口:
    	storage:提供丰富的接口供使用(setItem,removeItem,getItem,clear,key)
    	cookie:需要自己封装方法(setCookie,getCookie等)
    

    101、跨域请求的解决办法有哪些?

    古老的方法 JSONP跨域(动态创建script来读取他域的动态资源)
    跨域资源共享(CORS)
    nginx代理跨域(porxy代理)
    nodejs中间件代理跨域
    

    102、vue的指令有哪些

    v-if(判断是否隐藏)、v-else-if、v-else
    v-show、v-for(把数据遍历出来)、v-bind(绑定属性 简 :)、v-on(简 @)、v-model(实现双向绑定)、v-html、v-text
    

    103、vue的计算属性和方法有什么区别

    methods中定义的函数,只要页面上调用,就无条件的执行
    computed中的计算属性依赖的数据不发送变化时,只读取,不会重新计算,计算属性的结果无需在data中定义,在页面中可以直接使用,会在vue实例上产生一个缓存,如果依赖的数据不发生变化,则会读取缓存
    

    104、keep-alive的作用是什么

    <keep-alive></keep-alive>
    用于保留组件状态或避免从新渲染(缓存的作用 | 缓存使用频率高的页面,提高渲染效率)
    可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
    属性:
    该标签有两个属性include与exclude:
    	include:字符串或者正则表达式。只有匹配的组件会被缓存
    	exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。
    

    105、列举vue生命周期钩子函数

    beforeCreate、created	//创建
    beforeMount、mounted		//挂载
    beforeUpdate、updated	//更新
    beforeDestroy、destroyed	//销毁
    

    106、vue的路由hash模式和history模式的区别

    hash:在地址栏url中的#符号,虽然在url中,却不会被包含在http请求中,对后端没有影响,因此改变不会重新加载页面
    history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求
    

    107、箭头函数有什么特点

    没有this
    不能使用 new 构造函数
    不能使用argumetns,取而代之用rest参数...解决
    使用外层的this,作为自己的this(箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向,如call(), bind(), apply())
    箭头函数没有原型属性
    箭头函数不能当作Generator函数
    箭头函数不能换行
    

    108、vue组件间如何传值

    父子组件通信 --通过自定义属性和props来实现
    子父组件通信 --通过自定义事件和$emit实现
    非父子组件通信	--通过eventbus和$on/$emit
    
    vuex状态管理传值
    本地缓存传值
    

    109、vue等单页面应用及其优缺点

    优点:
    	用户体验好,快,内容的改变不需要重新加载整个页面,对服务器压力较小
    	前后端分离,如vue项目
    	完全的前端组件化,前端开发不再以页面为单位,更多采用组件化思想,代码结构和组织方式更加规范,便于修改和调整
    缺点:
    	首次加载页面的时候需要加载大量静态资源,相对时间相对较长
    	不利于seo优化,单页页面,数据渲染前,意味着没有seo
    	浏览器的前进、后台导航不能使用
    

    110、iframe有哪些优缺点

    优点:
    	能够原封不动的把嵌入页面展示出来
    	如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷
    	网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用
    	如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决
    缺点:
    	会产生很多页面,不容易管理
    	iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差
    	代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化
    	很多的移动设备(PDA手机)无法完全显示框架,设备兼容性差
    	iframe框架页面会增加服务器的http请求,对于大型网站是不可取的
    	
    现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发
    

    111、css选择器有哪些?哪些属性可以继承

    选择器:
    	通配符选择器(*)、标签选择器(div)、类选择器(.myid)、id选择器(#myid)
    	相邻选择器(h1 + p)、群组选择器(div,p)、后代选择器(ul li)、父子选择器(ul > li)
    	交集选择器(div.box)、伪类选择器(a:hover, li:nth-child)、属性选择器(a[rel=”external”])
    可继承属性:
    	font-size、font-weight、font-style、line-height、font-family
    	text-indent、text-align、color
    不可继承的样式:
    	border, padding, margin, width, height
    	
    优先级(就近原则):!important > [ id > class > tag ]
    !important 比内联优先级高
    

    112、margin和padding分别适合什么场景使用?

    margin:
    	需要在border外侧添加空白时
    	空白处不需要背景时
    	上下相连接的两个盒子之间的空白,需要相互抵消时
    padding:
    	需要在border内侧添加空白时
    	空白处需要背景时
    	上下相连的两个盒子之间的空白,希望等于两者之和时
    

    113、介绍js的基本数据类型

    String	字符串类型
    Number	数字类型
    Boolean	布尔型 true 和 false
    Null	空类型  typeof null; // object
    undefined	未定义类型 typeof undefined; // undefined
    Symbol	符号类型
    

    114、介绍js有哪些内置对象

    Number      数值
    String      字符串
    Boolean     布尔
    Object      对象
    Function    函数
    Array       数组
    Date        时间
    Math		数学
    Error       错误
    RegExp     正则表达式
    

    115、说几条写JavaScript的基本规范?

    不在同一行声明多个变量
    使用===或!==来比较
    使用字面量方式创建对象、数组,(替代new Array)
    不要使用全局函数
    switch语句必须要带default分支
    函数不应该有的时候有return,有的时候没有return
    fon-in循环中的变量,用var关键字说明作用域,防止变量污染
    

    116、如何实现数组的随机排序?

    // 数组随机排序
    let arrpx = [1,2,3,4,6,5,7,9,8];
    function randpx(arr){
        for(let i=0;i<arr.length;i++){
            let rand = parseInt(Math.random()*arr.length);
            let temp = arr[rand];
            arr[rand] = arr[i];
            arr[i] = temp;
        }
    	return arr;
    }
    console.log(randpx(arrpx));
    // sort排序
    let arrpx2 = [1,2,3,4,5,6,7,8,9,10];
    arrpx2.sort(function(){
    	return Math.random() - 0.5;
    })
    console.log(arrpx2);
    

    117、null、undefined的区别

    null 代表空值是一个空对象指针,null默认转成 0 ,typeof null  // object
    undefined 是声明了一个变量未初始化时,得到是undefined,undefined 默认转成 NaN,typeof undefined  //  undefined
    

    118、使用js实现获取文件扩展名?

    // 获取扩展名
    let filename = 'js.html';
    let index = filename.lastIndexOf('.');
    let suffix = filename.substring(index+1);//从.加一 到最后
    // let suffix = filename.substr(index+1);
    let spl = filename.split('.');
    console.log(suffix,spl[spl.length-1]);
    

    119、列举几个你知道的js框架么?能讲出他们各自的优点和缺点?

    jQuery、AngularJs、vue、React
    jQuery:实现脚本与页面的分离,最少的代码做最多的事情,插件丰富/不向后兼容,插件兼容,
    AngularJs:双向数据绑定,模块化/无法完美兼容低版本,太笨重
    vue:性能好,简单易用,前后的分离,单页面应用/不利于seo优化,报错不明显
    React:虚拟DOM,跨浏览器兼容,模块化,单项数据流,兼容性好/不适合单独做一个完整的框架
    

    120、请简要介绍下DOM文档流,请指出document.onload和document.ready的区别

    文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为普通流/文档流
    文本流:文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式
    区别:
        ready:表示文档结构已经加载完成(不包含图片等非文字媒体文件)
        onload:表示页面包含图片等文件在内的所有元素都加载完成
    

    121、vue数据双向绑定原理

    采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
    

    122、mvc和mvvm的理解

    MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。
    	模型(Model)指的是后端传递的数据。
    	视图(View)指的是所看到的页面。
    	视图模型(ViewModel)是mvvm模式的核心,它是连接view和model的桥梁。
    	它有两个方向:
    		一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
    		二是将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
    	
    MVC是Model-View- Controller的简写。即模型-视图-控制器。
    	M和V指的意思和MVVM中的M和V意思一样。
    	C即Controller指的是页面业务逻辑。
    	使用MVC的目的就是将M和V的代码分离。
    	MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。
    
    MVC和MVVM的区别并不是VM完全取代了C,只是在MVC的基础上增加了一层VM,只不过是弱化了C的概念,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性。
    

    123、怎么封装组件

    封装组件:主要是为了解耦,具备高性能、低耦合,在通用组件的时候要留一个插槽
    第一步:在compoents文件夹中新建一个vue文件
    第二步:在main.js中全局引入,先import,再注册到VUE中
    第三步:在任何页面直接使用自己定义的组件
    

    124、params和query的区别

    用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
    	url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
    注意点:query刷新不会丢失query里面的数据,params刷新会丢失params里面的数据。
    

    125、$nextTick的使用

    当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
    你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。
    

    126、delete和Vue.delete删除数组的区别

    delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
    

    127、vue-loader是什么?使用他的用途有哪些?

    vue-loader是解析 .vue 文件的一个加载器,跟 template/js/style转换成 js 模块;
    用途:js可以写es6、style样式可以scss或less;template可以加jade等
    

    128、active-class是哪个组件的属性?

    vue-router模块的router-link组件
    

    129、vue-router懒加载怎么实现?

    为什么需要懒加载?
    像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
    路由种设置:
    import Vue from 'vue';
    import Router from 'vue-router';
    Vue.use(Router);
    // const index = ()=>import('@/components/pages/index');
    export default new Router({
    	routes:[
    		{
    			path:'/home',
    			name:'home',
    			component:() => import('@/components/pages/home')
    			//component:resolve=>require(['@/components/pages/home'])
    			children:[{
    				path:'/index',
                    name:'index',
                    component:() => import('@/components/pages/index')
    			}]
    		},
    		{
              path: '',
              redirect: '/home'
            }
    	]
    })
    

    130、vue开发过程中用过的性能优化的方式?

    1:图片优化
    	图片大小优化,部分图片使用WebP(需要考虑webp兼容性) 在线生成,如智图、又拍云 gulp生成,gulp-webp或gulp-imageisux canvas生成
    	减少图片请求,使用雪碧图 在线生成:sprites Generator、腾讯的gopng、spriteme 代码生成:gulp.spritesmith或者sass的compass
    2:页面性能优化
    	图片或组件懒加载
    3:三方插件懒加载(按需加载)
    4:减少引入外部文件大小
    

    131、Javascript中什么是伪数组?如何将伪数组转化成标准数组?

    在js中,数组是特殊的对象,凡是对象有的性质,数组都有,数组表示有序数据的集合,而对象表示无序数据的集合。
    那伪数组是什么呢,当然它也是对象,伪数组一般具有以下特点:
        按索引方式存储数据;
        具有length属性;
        没有数组的push、shift、pop等方法;
    function的arguments对象,还有getElementsByTagName、ele.childNodes等返回的NodeList对象,或者自定义的某些对象,这些都可以是伪数组。
    
    1 使用Array.prototype.slice.call()或[].slice.call()
     
    let arr1 = {  
     0:"hello",  
     1:12,  
     2:true,  
     length:3  
    }
     
    let arr11 = Array.prototype.slice.call(arr1); //返回的是数组
    let arr111 = [].slice.call(arr1);//同上
    //["hello", 12, true]
     
    2 使用ES6中Array.from方法
    let arr2 = {  
     0:"hello",  
     1:12,  
     2:2013,  
     3:"大学",  
     length:4  
    }
     
    Array.from(arr2);  
    //["hello", 12, 2013, "大学"]
    

    132、什么是JSON

    JSON:JavaScript 对象表示法(JavaScript Object Notation)。
    JSON 是存储和交换文本信息的语法。类似 XMLJSONXML 更小、更快,更易解析。
    

    133、列和栈有什么区别


    栈是一种重要的线性结构,其特殊性在于限定插入和删除数据元素的操作只能在线性表的一端进行。(后进先出)
    栈的元素必须“后进先出”。
    栈的操作只能在这个线性表的表尾进行。
    注:对于栈来说,这个表尾称为栈的栈顶(top),相应的表头称为栈底(bottom)。
    因为栈的本质是一个线性表,线性表有两种存储形式,那么栈也有分为栈的顺序存储结构(顺序栈)和栈的链式存储结构(链式栈)。

    队列也是一种线性表。它允许在表的一端插入数据,在另一端删除元素。插入元素的这一端称之为队尾。删除元素的这一端我们称之为队首。
    队列的特性:
    在队尾插入元素,在队首删除元素。
    FIFO(先进先出),就向排队取票一样。

    134、数组和链表有什么区别

    数组特点
    优点
    
    随机读取效率很高。
    查找速度快
    缺点
    
    内存空间要求高,必须有足够的连续内存空间。(在内存中,数组是一块连续的区域。知道每一个数据的内存地址,可以直接找到给地址的数据。)
    浪费内存空间。(数组需要预留空间,在使用前要先申请占内存的大小,可能会)
    插入数据和删除数据效率低(插入数据时,这个位置后面的数据在内存中都要向后移。删除数据时,这个数据后面的数据都要往前移动。 )
    数组大小固定,不能动态拓展
    链表特点
    优点
    
    内存利用率高,不会浪费内存。(在内存中可以存在任何地方,不要求连续。)
    每一个数据都保存了下一个数据的内存地址,通过这个地址找到下一个数据。
    插入删除速度快
    不指定大小,扩展方便。(链表大小不用定义,数据随意增删。)
    缺点
    
    不能随机查找,必须从第一个开始遍历,查找效率低
    

    135、MVP和MVC模型

    MVC(Module View controller)模型
    它是一种设计模式。所谓的设计模式其实是一种框架结构的体呈现,目的分离应用程序的页面展示,网络数据交互,数据呈现
    
    Module,模型层,用户数据管理,通常是一些 javaBean, db,sharePreference,network,图片处理等耗时操作均应该放在该层。
    View,视图层,展现给用户的视图,是应用程序最外层的壳,比如 xml 布局,drawable 显示
    controller 控制层,也叫中间层。一般指的是在四大组,接收 View 层的指令,处理相关指令,并对处理后的指令进去进一步操作,下发指令到Module层。
    MVC模型逻辑
    以点击某个按钮为例,当用户在 View 布局上发生事件交互的时候,View 层会下发指令到 control 层,control监听到事件交互,并进行处理,接着 control 下发指令到 Module 层,Module 层进行数据更新后,把数据直接显示在View上面。
    
    优点
    可维护性高,结构清晰明了,利于后期维护
    重用性高,比如多个 View 视图可以共同依赖同一个Module 层
    利于项目工程化管理 由于每个层各司其职,每一个层具有鲜明的特征
    缺点
    View 层与Module 层相互耦合,不利于后期的维护
    View 对 Module 访问低效率
    MVP(Module View Presenter )模型
    Module,模型层,用户数据管理,通常是一些 javaBean, db,sharePreference,network,图片处理等耗时操作均应该放在该层。
    View,视图层,一般指的是四大组件,四大组件对作为View,来完成应用程序界面的展示
    Presenter 控制层,也叫中间层。相当于一个中间桥梁的作用,用于解决View 层与 Module 层的耦合,一般一个 Presenter 可以对应多个 View,一个Presenter 也可以对应多个Module
    MVP模型逻辑
    从图中我们可以了解到 View 与 Module 已经完全没有联系了,所有的操作均是在 Presenter 中操作的,Presenter 成了中间桥梁。于操作view层发出的事件传递到presenter层中,presenter 层去操作model 层,并且将数据返回给 view 层,整个过程中 view 层和 model 层完全没有联系。一般在设计View 与 Presenter 的时候会采用接口的形式,来降低 Presenter 与 View 的耦合。
    
    优点
    降低View 与 Module 的耦合
    使View 层更加的饱满
    一个Presenter 可以对应多个 View
    便与测试,可以脱离用户接口来测试某些逻辑。
    缺点
    
    Presenter 层会存在引用View 层的东西出现空指针的问题
    两者的不同
    MVP模式:
    1.View不直接与Model交互,而是通过与Presenter交互来与Model间接交互
    2.Presenter与View的交互是通过接口来进行的,更有利于添加单元测试
    3.通常View与Presenter是一对一的,但复杂的View可能绑定多个Presenter来处理逻辑,业务相似的时候也可以多同个View共享一个Presenter。
    MVC模式:
    1.View可以与Model直接交互
    2.Controller是基于行为的,并且可以被多个View共享
    3.Controller可以负责决定显示哪个View
    
    MVVM
    MVVM框架
    Angular.js
    react.js
    vue.js
    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
    Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
    

    在这里插入图片描述

    展开全文
  • web前端笔试题整合

    千次阅读 2018-12-13 16:19:48
    1.一个200 * 200的格在不同分辨率屏幕上下左右居中,用CSS实现 div{ width: 200px; height: 200px; background-color: red; position:absolute; top:50%; ...

    1.一个200 * 200的格在不同分辨率屏幕上下左右居中,用CSS实现

             div{
             	width: 200px;
             	height: 200px;
             	background-color: red;
                    position:absolute; 
                    top:50%; 
                    left:50%; 
                    margin-left:-100px;
                    margin-top: -100px;
                    z-index:1000; 
             }

    2.实现左中右三栏布局,左右固定宽度,中间自适应

    如果是最外层DIV布局设置的CSS宽度100%(宽度:100%),此时该DIV将盒子浏览器随宽度改变而宽度自适应改变。

    一般情况下如果要让布局网页自适应浏览器宽度改变而改变,通常即使最外层的DIV默认宽度就是自适应值100%的,但我们依然最好也设置个宽度:100%,达到最大限度让各大浏览器兼容

    有父级的盒子对象如果设置宽度为100%,那么这个盒子将继承上一级(父级)宽度而计算百分比值。假如父级宽度设置400像素,级子的格设置宽度为100%,那么这个子级的DIV宽度就是400像素。

    格,p这类标签,默认宽度是自适应100%的有时的英文不需要设置100%宽度的(可以不设置宽度),只要不给设置浮子样式,那么宽度就是默认为自适应100%的。但最外层的 DIV宽度的英文百分百时候,就最好给予设置宽度宽度为100%,这样最大限度兼容各大浏览器。

    详情:https//www.thinkcss.com/jiqiao/1000.shtml

    ①margin+浮动

            <style type="text/css">
            *{
            	margin: 0;
            	padding: 0;
            }
            #left{
            	width: 200px;
            	height: 300px;
            	float: left;
            	background-color: red;
            }
            #middle{
            	height: 300px;
            	margin: 0 200px 0 200px;
            	background-color: green;
            }
            #right{
            	width: 200px;
            	height: 300px;
            	float: right;
            	background-color: orange;
            }
    
            </style>

    ②定位+浮动

            *{
            	margin: 0;
            	padding: 0;
            }
            #left{
            	width: 200px;
            	height: 300px;
            	float: left;
            	background-color: red;
            }
            #middle{
            	height: 300px;
            	/* margin: 0 200px 0 200px; */
            	position: absolute;
            	left: 200px;
            	right: 200px;
            	background-color: green;
            }
            #right{
            	width: 200px;
            	height: 300px;
            	float: right;
            	background-color: orange;
            }
    

    ③盒布局

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style type="text/css">
            *{
            	margin: 0;
            	padding: 0;
            }
            #content{
                display: -webkit-box;
                display: -moz-box;
            	width: 100%;
            	height: 300px;
            }
            #left{
            	width: 200px;
            	height: 300px;
            	background-color: red;
            }
            #middle{
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
            	height: 300px;
            	background-color: green;
            }
            #right{
            	width: 200px;
            	height: 300px;
            	background-color: orange;
            }
    
            </style>
        </head>
     <body>  
             <div id="content">
                <div id="left">我是左侧内容</div>
                <div id="middle">我是中间内容</div>
                 <div id="right">我是右侧内容容</div>
           </div>
    
    </body>  
    </html>

    3.清除浮动的几种方式

    ①父级DIV定义伪类:后和变焦

    /* 清除浮动的代码  在父类div中定义*/
            .clearfloat:after{
            	display: block;
            	clear: both;
            	content: "";
            	visibility: hidden;
            	height: 0;
            }
            .clearfloat{
            	zoom: 1;
            }

    ②在结尾处添加空格标签样式添加明确:两者(如果页面浮动布局多,就要增加很多空格,让人感觉很不爽)

    ③父级DIV定义溢出:隐藏

     4.请描述的的的sessionStorage的和localStorage的的的的的区别

    相同点:都存储在客户端

    不同点:

    存储大小:饼干为4K,的的sessionStorage的和的localStorage的的为500万或更多

    有效值时间

           的的的sessionStorage的数据在当前浏览器关闭后自动删除;

          localStorage的的的的数据存储持久数据,浏览器关闭数据也不会丢失,除非主动删除;

          饼干数据在浏览器关闭之后也不会丢失,直到其设置的过期时间到了才会失效;

    数据与服务之间的交互方式

         饼干的数据会自动传递到服务端,服务端也可以写到客户端;

        的的的的sessionStorage和localStorage的的的的不会主动发送数据到服务端,数据一致保存在客户端;

     5. 计算一个数组ARR所有元素的和

    var s=[1,2,3,4];
    var sum=s.reduce(function(pre,cur,index,array){  //返回数组项的和 正向相加
       return pre+cur;
    });
    alert(sum);  //10
    
    function sum2(arr){
    var all=0;
    for (var i=0;i<arr.length;i++) {
      if (typeof arr[i]=="number") {
      all+=arr[i];
     }
    }
    return all;
    }
    document.write(sum2([1,2,3,4]));

     

     6. 编写一个方法去掉数组里面重复的内容

    ①一般写法:

    var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
    //定义一个新的数组
    var s = [];
    //遍历数组
    for(var i = 0;i<arr.length;i++){
    
        if(s.indexOf(arr[i]) == -1){  //判断在s数组中是否存在,不存在则push到s数组中
    
            s.push(arr[i]);
        }
    }
    console.log(s);

    ②es6写法(组对象中的每一项都不会重复)

             let arr = ['abc','abcd','sss','2','d','t','2','sss','f','22','d'];
             console.log(Array.from(new Set(arr)));

     

     7.null跟未定义的区别

    空是空对象指针

    未定义是声明了变量未赋值就是未定义;

    8. http和https的区别

    HTTP:HTTP协议运行在TCP之上,传输的都是明文传输速度快,但客户端和服务器都无法验证对方的身份,不安全;

    HTTPS:HTTP运行在SSL / TSL之上,而SSL / TSL运行在TCP之上,传输的内容是经过加密的,如果客户端配置客户端验证,那么服务端也可以验证客户端身份,足够安全。

    HTTP +加密+认证+完整性保护= HTTPS

    使用两把密钥的公开密钥加密

    公开密钥加密使用一对非对称的密钥。一把叫做私钥,另一把叫做公钥。私钥不能让其他任何人知道,而公钥则可以随意发布,任何人都可以获得。使用公钥加密方式,发送密文的一方使用对方的公钥进行加密处理,对方收到被加密的信息后,再使用自己的私钥进行解密。利用这种方式,不需要发送用来解密的私钥,也不必担心密钥被攻击者窃听而盗走。

     9.常见的HTTP状态码

    200:服务器已经成功处理了请求;

    400:错误请求,服务器不理解请求的语法

    403:服务器拒绝请求

    404:服务器找不到请求的网页

    500:服务器内部遇到错误,无法完成请求

    501:服务器不具备完成请求的功能

    503:服务器目前无法使用

    以4开头的状态码代码表示:请求出了错误,妨碍服务器的处理;

    以5开头的状态码表示:服务器在尝试处理请求的时候发生了内部错误;

    10.网站性能优化的方法

    缓存,JavaScript的的的的压缩和模块打包,按需加载资源,图片编码优化

     11.哪些JS操作会引起内存泄漏?

    ①意外的全局变量;

    ②闭包;

    ③没有清理的DOM元素引用;

    ④被遗忘的定时器或回调;

     12.浏览器是如何渲染页面的

    ①解析HTML文件,创建DOM树;

    ②解析CSS;

    ③将CSS和DOM合并,构建渲染树;

    ④布局和绘制,重绘和重排

     13.一次完整的HTTP事务是怎样的过程?

    ①域名解析;

    ②发起TCP三次握手;

    ③建立起TCP连接后发起HTTP请求;

    ④服务端响应请求,返回的HTML代码;

    ⑤浏览器解析HTML代码,并请求代码中的资源;

    ⑥浏览器对页面进行渲染呈现给用户;

    14. 从网址到显示页面,都经历了什么?

    1,首先,在浏览器地址栏中输入网址

    2,器浏览查看先浏览器缓存 -系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容若没有,则跳到第三步操作。

    3,在发送HTTP请求前,需要域名解析(DNS解析),解析获取相应的IP地址。

    4,浏览器向服务器发起TCP连接,与浏览器建立TCP三次握手

    5,握手成功后,浏览器向服务器发送HTTP请求,请求数据包

    如图6所示,服务器处理收到的请的英文什么意思?,将数据返回至浏览器

    7,浏览器收到HTTP响应

    如图8所示,读取页面内容,浏览器渲染,解析HTML源码

    9,生成的大教堂树,解析CSS样式,JS的交互

    10,客户端和服务器交互

    11,阿贾克斯查询

     15.什么是盒子模型?

    在网页中,一个元素占有空间的大小由几个部分构成,包括其中元素的内容(内容),元素的内边距(填充),元素的边框(边框),元素的外边距(保证金)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域0.4个部分一起构成了CSS中元素的盒模型。

     16.行内元素有哪些?块级元素有哪些?空(虚)元素有那些?

    行内元素:A,B,跨度,IMG,输入,强,选择,标签,EM,按钮,字幕:区域
    块级元素:DIV,UL,LI,DL,DT,DD,P,H1-H6,BLOCKQUOTE
    空元素:即没有内容的HTML元素,例如:BR,间,小时,链接,输入,IMG

     17.简述一下SRC与HREF的区别?

    HREF是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

    SRC是指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置;在请求的SRC资源时会将其指向的资源下载并应用到文档内,例如JS脚本,IMG图片和帧等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载,编译,执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签。这也是为什么将JS脚本放在底部而不是头部。

     18.什么是CSS Hack?

    由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。  这个时候我们就需要针对不同的浏览器去写不同的CSS让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果

    hack:本意:修改,引申为对软件的二次修改   css hack的意思是浏览器兼容

     19.简述同步和异步的区别

    的英文同步阻塞模式异步的英文非阻塞模式。
    同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
    异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

     20.px和EM的区别

    px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易.em 的值不是固定的,并且em会继承父级元素的字体大小
    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em = 16px。那么12px = 0.75em,10px = 0.625em

     21.什么叫优雅降级和渐进增强?

    渐进增强渐进增强:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果,交互等改进和追加功能达到更好的用户体验

    优雅降级优雅降级:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

    区别:

    一个。降级优雅英文的从复杂的现状开始,并试图减少用户体验的供给

    增强湾渐进则的英文从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

    C.降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带 

     22.Javascript中被叫和主叫方的作用?

    被叫方:是返回一个对函数的引用,该函数调用了当前函数;

    来电显示:返回正在被执行的函数

     23.统计字符串中字母个数或统计最多字母数。

    var str = "aaaabbbccccddfgh";
    var obj  = {};
    for(var i=0;i<str.length;i++){
        var v = str.charAt(i);
        if(obj[v] && obj[v].value == v){
            obj[v].count = ++ obj[v].count;
        }else{
            obj[v] = {};
            obj[v].count = 1;
            obj[v].value = v;
        }
    }
    for(key in obj){
        document.write(obj[key].value +'='+obj[key].count+'&nbsp;'); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
    }  

     

     24.如何理解闭包?

    闭包是指可以访问另一个函数作用域变量的函数,一般是定义在外层函数中的内层函数。

    “闭包就是跨作用域访问变量。” 

    【“闭包就是一个引用了父环境的对象,并且从父环境中返回到更高层的环境中的一个对象。”如何理解?

    我们换个说法:如果一个函数引用了父环境中的对象,并且在这个函数中把这个对象返回到了更高层的环境中,那么,这个函数就是闭包。

    还是看上面的例子:

    的getName函数中引用了用户(父)环境中的对象(变量名),并且在函数中把名称变量返回到了全局环境(更高层的环境)中,因此,的getName就是闭包。

    为什么需要闭包?

    局部变量无法共享和长久的保存,而全局变量可能造成变量污染,所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

    特点

    • 占用更多内存
    • 不容易被释放

    何时使用?

    变量既想反复使用,又想避免全局污染

    如何使用?

    1. 定义外层函数,封装被保护的局部变量。
    2. 定义内层函数,执行对外部函数变量的操作。
    3. 外层函数返回内层函数的对象,并且外层函数被调用,结果保存在一个全局的变量中。

    详情:https//www.cnblogs.com/wx1993/p/7717717.html

     25.跨域请求资源的方法有哪些?

    跨域:

    由于浏览器同源策略,凡是发送请求的URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域。

    (1),porxy代理

    定义和用法:proxy代理用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。

    实现方法:通过nginx的代理;

    (2),CORS【跨源资源共享】

    定义和用法:是现代浏览器支持跨域资源请求的一种最常用的方式。

    使用方法:一般需要后端人员在处理请求数据的时候,添加允许跨域的相关操作

    (3),jsonp

    定义和用法:通过动态插入一个脚本标签浏览器对脚本的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下)。

    特点:通过情况下,通过动态创建的脚本来读取他域的动态资源,获取的数据一般为JSON格式。

    缺点:

      如图1所示,这种方式无法发送交请求(这里)

      2,另外要确定JSONP的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定。

     26.谈谈垃圾回收机制方式及内存管理?

    JavaScript的垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以回收垃圾会器固按照定的时间间隔周期性的执行

    使用不再变量的就是也。生命周期结束的变量,只当然可能的英文局部变量全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在,而在这个过程中会为局部变量在栈或堆上分配相应的空间,以存储它们的值,然后在函数中使用这些变量,直至函数结束,而闭包中由于内部函数的原因,外部函数并不能算是结束。

    标记清除:

      定义和用法:当变量进入环境时,将变量标记 “进入环境”,当变量离开环境时,标记为: “离开环境” 某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

      到目前为止,IE,火狐,歌剧,铬,Safari浏览器的JS实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

    引用计数:

      定义和用法:引用计数是跟踪记录每个值被引用的次数。

      基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。

     内存管理

    1,什么时候触发垃圾回收?

    垃圾回收器周期性运行,如果分配的内存非常多,那么回收工作也会很艰巨,确定垃圾回收时间间隔就变成了一个值得思考的问题

    IE6的垃圾回收是根据内存分配量运行的,当环境中的变量,对象,字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态,严重影响浏览器性能

    IE7中,垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整,开始回收工作。

    2,合理的GC方案:(1),遍历所有可访问的对象; (2),回收已不可访问的对象。

    3,GC缺陷:(1),停止响应其他操作;

    4,GC优化策略:

    (1),分代回收(Generation GC);

    区分临时与持久对象,通过多回收临时对象,少回收持久对象来减少GC遍历对象的时间,

    (2),增量GC

    “每次处理一点,下次再处理一点,如此类推”

    这种方案,虽然耗时短,但中断较多,带来了上下文切换频繁的问题。

    因为每种方案都其适用场景和缺点,因此在实际应用中,会根据实际情况选择方案。

     27.开发过程中遇到的内存泄露情况,如何解决的?

    1,定义和用法:

    内存泄露英文的指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束 .C#和Java的的等语言采用了自动垃圾回收方法管理内存,几乎不会发生内存泄露。我们知道,浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有错误,会产生内存泄露。

    2,内存泄露的几种情况:

    (1),当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。

    实例如下:

    <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            document.getElementById("myDiv").innerHTML = "Processing...";
        }
    </script>

    解决如下:

    <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
        btn.onclick = null;
           document.getElementById("myDiv").innerHTML = "Processing...";
        }
    </script>
    

    (2),由于是函数内定义函数,并且内部函数 - 事件回调的引用外暴了,形成了闭包闭包可以维持函数内局部变量,使其得不到释放。

    实例如下:

    function bindEvent(){
        var obj=document.createElement("XXX");
        obj.onclick=function(){
            //Even if it's a empty function
        }
    }

    解决方法如下:

    function bindEvent(){
        var obj=document.createElement("XXX");
        obj.onclick=function(){
            //Even if it's a empty function
        }
        obj=null;
    }
    

    function bindEvent(){
    
        var obj=document.createElement("XXX");
    
        obj.onclick=handleclick();
    },
    function handleclick(){
    
             //Even if it's a empty function
    
        }

     

    28.什么是web标准?

        WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为 (Behavior)。

        对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

     29.XHTML与HTML有什么区别?

     XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定

        标签不能重叠,可以嵌套

        标签与属性都要小写

        标签都要有始有终,要么以</p>形式结束,要么以<br />形式结束

        每个属性都要有属性值,并且属性值要在双引号中

        别用nameid

     30.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

    ( 1 ) DOCTYPE声明是指HTML文档开头处的一行或两行代码,它描述使用哪个DTD(文档类型定义),由此知道要使用HTML的哪个版本。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。

    DTD是一组机器可读的规则,它们定义XML或 HTML的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施

    (2)严格(标准)模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在混杂(兼容)模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

     31.HTML5为什么只需要写<!DOCTYOE HTML>,作用是什么?

    HTML5 不基于 SGML,所以不需要引用 DTD,因此没有声明DTD;

    作用:<!DOCTYPE>声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。(浏览器获知文档类型);

     32.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    (1)HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加:

     ①绘画 canvas;

     ②用于媒介回放的 video 和 audio 元素;

     ③本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;

     ④语意化更好的内容元素,比如 article、footer、header、nav、section;

     ⑤表单控件,calendar、date、time、email、url、search;

     ⑥新的技术webworker, websocket, Geolocation;

    (2)移除的元素:

          纯表现的元素:basefont,big,center,font, s,strike,tt,u;

          对可用性产生负面影响的元素:frame,frameset,noframes;

    (3)支持HTML5新标签:

         ①IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。

     ②当然也可以直接使用成熟的框架,比如html5shiv;可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行:

    <!--if lt IE 9]>
             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

     

    (4)如何区分HTML5: DOCTYPE声明\新增的结构元素\功能元素

     33.label的作用是什么?是怎么用的?

    label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

    (1)

    <label for="Name">Number:</label>

    <input type=textname="userName" id="Name"/>

    (2)

    <label>Date:<input type="text" name="B"/></label>

     34.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

    (1)有两种, IE 盒子模型、W3C 盒子模型;

    (2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);

    (3)区  别: IE的content部分把 border 和 padding计算了进去;

     35.Get和Post的区别?数据怎样获取?

    (1)GET请求提交的数据在地址栏能看到,POST看不到,get安全性非常低,post安全性较高。

    (2)GET请求把请求数据追加在请求URI后面,以?开头;POST请求把请求数据追加在请求主体中

    (3)HTTP协议规定:请求消息起始行总长度不能超过1024字节;请求主体长度没有限制。GET请求提交的数据或是汉字一般也就几十个,不超过2kb。post传送的数据量较大,一般被默认为不受限制.

    (4)语义不同:get是从服务器上获取数据,post是向服务器传送数据。

    展开全文
  • web前端笔试试题(答案)

    万次阅读 多人点赞 2019-04-08 15:19:44
    一、填空(每空1分,共70分) 1、JS中的数据类型有哪些__string,number,undefined,null,boolean,Object Array,Function,;(3分) 2、JS中强制类型转换为number类型的方法有:parseInt()、parseFloat()、number()...
  • 02web前端笔试题

    2018-10-16 21:12:00
    又参加了几场web前端的宣讲会,复习了一下,感觉有点用处吧,至少没有前几天一脸懵逼!希望接下来,越来越好,加油!!! 对啦,如果下面有错的地方,欢迎指出,谢谢~ 1、什么是跨域?跨域资源请求的方式有哪些? ...
  • 2019年最新web前端笔试题

    千次阅读 多人点赞 2019-03-19 19:13:42
    1.编写js代码实现冒泡排序 2.编写js代码实现数组去重(考虑性能) 3.编写css代码实现div水平垂直居中 4.编写js代码实现在一个数组中删除另一个数组存在的值 var arr = [1, 2, 3, 4, '1', 0, 1, 2, 'a', 'b'];...
  • 01web前端笔试试题

    2018-10-12 18:38:23
    ## 参加了几场前端的面试,发现很多笔试题都是靠记忆的!嗯,没错,一定是这样的!现在分享给大家,希望大家都能顺利的找到工作! 1、css中的position各个值的含义: position有static、relative、absolute、fixed...
  • 2015校招某度WEB前端笔试题

    千次阅读 2014-10-12 21:17:51
    今天参加了某度的WEB前端笔试,一共八道,贴出来分享讨论一下
  • 前端的面试总结,很多知识点都在这了。挺全的,准备面试的时候可以看看

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,100
精华内容 2,840
关键字:

web前端笔试题