前端笔试题

第一部分 HTML/CSS/JS

问题：CSS box-sizing值的区别是什么？

box-sizing有2种属性值：content-box和border-box,其中默认值为content-box。
content-box:指定高度和宽度时，此时 不包括padding和border。
border-box:指定高度和宽度时，此时包括padding和border。

问题：http协议的结构？

请求报文和响应报文都是由以下4部分组成

1.请求行

2.请求头

3.空行

4.消息主体

问题：script标签异步加载的方法？

加async属性

问题：JavaScript中 "" 和"="的差别？

==只比较值，===类型和值都要相等

问题：CSS position的值和差异？

1.relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

2.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

3.fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4.static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

问题：ES6或ECMAScript 2015有哪些新特性？

let关键字类似于var,但是他又和var有些不同，主要有两点，

避免了变量提升

只在块级作用域内起作用

问题：为 <button id="btn" class="btn">按钮</button> 绑定一个click时间，点击后弹框显示“click”

问题：JavaScript中 undefined 和 null 的区别是什么？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

问题：浏览器中实现数据存储的方式有哪些？

sessionStorage仅在当前浏览器窗口关闭或刷新前有效，需要持久保存的数据自然也就不可能使用sessionStorage；

localStorage保存数据始终有效，窗口或浏览器关闭也一直保存，因此可用作持久保存数据；

cookie只在开发人员设置的有效期时间之前一直有效，即使窗口或浏览器关闭。

问题：JavaScript中 ‘use strict’ 是干嘛用的？

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

严格模式下你不能使用未声明的变量。

问题：webscoket和AJAX的差异？

1.本质不同

Ajax,即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术；

WebSocket是HTML5一种新的协议，实现了浏览器与服务器全双工通信。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务端与客户端通过此TCP连接进行实时通信。

2.生命周期不同。

websocket建立的是长连接，在一个会话中一直保持连接；而ajax是短连接，数据发送和接受完成后就会断开连接。

3.适用范围不同

websocket一般用于前后端实时数据交互，而ajax前后端非实时数据交互。

4.发起人不同

Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。

5.用法不同

ajax：

$.ajax({

type:“post”,

url:“http://localhost:8080/target”,

data:“state = yes”,

dataType:“json”,

success:funciont(data){

}

});

websocket:

var monitor = new WebSocket(“ws://”+ip+path)

onOpen()、onMessage()、onClose()

问题：HTTPS相较HTTP有什么不同？

HTTPS比HTTP安全

问题：CSS实现垂直居中的方式有哪些？

margin: 0 auto; /*水平居中*/
//垂直居中
position: relative; /*脱离文档流*/
top: 50%; /*偏移*/

问题：JavaScript怎么判断一个变量值的类型？

typeof 变量名

问题：箭头函数和funtion声明的函数有什么差异？

his的指向：使用function定义的函数，this的指向随着调用环境的变化而变化，而箭头函数中的this指向是固定不变的，一直指向定义函数的环境。

问题：页面地址为http://www.peibosocial.cn/path/to/page.html发起AJAX请求使用POST获取来自https://api.peibosocial.cn/path/to/interface的接口数据，在服务端和客户端均未做处理的情况下，在现有的主流浏览器中请求会有什么表现？原因是什么？解决方案是什么？

会出现跨域的报错。原因就是域名不同导致跨域。前端通过jsonp解决跨域，或者反向代理解决跨域。后端通过添加跨域的配置类解决跨域问题。

问题：某DOM元素设置CSS will-change后会有什么表现，使用该属性有什么需要注意的事项？

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。

不要声明太多属性或为太多元素声明.

问题：CSS中em和rem的区别是什么？

em是相对于父元素(这个是错误的理解，只是因为css可能会继承父元素的情况下可以
这样理解)
rem是相对于根元素

问题：移动端设备屏幕很多都有了圆角/刘海/下巴，为了保证显示内容的可见性需要对容器设置哪些CSS的样式保证内容完全展示？

问题：JavaScript中数组的判断

function isArray(arr){
  if (arr instanceof Array) {
          return true;
  } else {
      return false;
  }
}

// test
isArray([]); // true
isArray({}); // false

问题：JavaScript 数组的增删插

var arr = [];

// 给arr连续插入 1，2，3，4，5， 结果= [1,2,3,4,5]

arr.push(1, 2, 3, 4, 5);

// 删除下标为2的元素，结果 = [1,2,4,5]

//删除索引为2，删除1个
arr.splice(2, 1);

// 获取数组最后2个元素 = [4,5]

var index = arr.slice(-2);

问题：用原生 JavaScript 生成一个指定长度的随机字符串

function randomStr(length){
  var chars="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var result='';
  for(i=0;i<length;i++){
      result+=chars[Math.floor(Math.random() * chars.length)];
  }
  // 请实现函数主体
  return result;
}

randomStr(10);

问题：请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。

<div id="example">
	<p class="title bigger">标题</p>
</div>

var oWrapper = document.createElement('div');
oWrapper.id = 'example';
var oChild = document.createElement('p');
oChild.className = 'title bigger';
var textNode = document.createTextNode('标题');
oChild.append(textNode);
oWrapper.append(oChild);

问题：从一个树状数据结构中，找出值最大的一个节点

// 入参格式参考：

const sourceTree = {
  id: "i1",
  value: 17,
  left: {
    id: "i3",
    value: 83,
    left: {
      id: "i4",
      value: 101
    },
    right: {
      id: "i9",
      value: 22
    }
  },
  right: {
    id: "i11",
    value: 26
  }
};

// 出参格式参考：

const maxNode = {
  id: "i4",
  value: 101
};

function findMaxNode(tree) {
    for (let key in tree) {
          if (tree[key] instanceof Object) {
            for (let a in tree[key]) {
              if (tree[key][a] instanceof Object) {
                for (let b in tree[key][a]) {
                  let vote = {};
                  if (b == "id") {
                    vote.id = tree[key][a][b];
                  } else {
                    vote.value = tree[key][a][b];
                  }
                  sz.push(vote);
                }
              } else {
                console.log(a + "---" + tree[key][a]);
                let vote = {};
                if (a == "id") {
                  vote.id = tree[key][a];
                } else {
                  vote.value = tree[key][a];
                }
                sz.push(vote);
              }
            }
          } else {
            console.log(key + "---" + tree[key]);
            let vote = {};
            if (key == "id") {
              vote.id = tree[key];
            } else {
              vote.value = tree[key];
            }
            sz.push(vote);
          }
        }
      }

findMaxNode(sourceTree);
      console.log(sz);
      sz2 = [];
      for (i = 1; i < sz.length; i = i + 2) {
        // console.log("haha");
        console.log(sz[i].value);
        sz2.push(sz[i].value);
      }
      console.log(Math.max(...sz2));
      console.log(sz2.indexOf(101));
      var sy = sz2.indexOf(Math.max(...sz2)) * 2 + 1;
      console.log(sy);
      console.log(sz[sy - 1]);
      console.log(sz[sy]);
      var hb = sz[sy - 1];
      hb["value"] = sz[sy].value;
      console.log(hb);// ==maxNode

问题： 数组去重

var arr1 = [1, 2, 2, 3, 3, 3, 3, 4, 4, 5];
var newArr = [];
function distinct(arr){
    // 函数主体
    for (var i = 0; i < arr1.length; i++) {
          if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
       }
    }
}
distinct(arr); // 输出[1,2,3,4,5]

问题： js中let/const/var有什么区别

const定义的变量不可以修改，而且必须初始化(就是必须赋值的意思)。

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

问题：canvas操作

请使用canvas绘制，画布尺寸为200px_200px，在画布中添加一个60 _ 60的黄色正方形 并在画布顶部添加一行黑色文字“canvas”

将canvas的内容输出图片设置到img元素上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #canvasId {
            background-color: red;
        }
    </style>
  </head>
  <body>
      <div>Canvas</div>
      <canvas id="canvasId" width="200" height="200"></canvas>
        <img id="imgId" src="" />
        <script>
            var c=document.getElementById("canvasId");
            var ctx=c.getContext("2d");
            ctx.fillStyle="yellow";
            ctx.fillRect(0,0,60,60);
            var cimg = function() {
                var imgSrc = document.getElementById("canvasId").toDataURL("image/png");
                document.getElementById("imgId").src = imgSrc;
                console.log(imgSrc);
            }	
            cimg();
        </script>
            
</html>

问题：请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

var url = "https://example.com/#/product/productHome?catalogCode=GC&tabKey=GOC&roleType=GOC"

function parseQueryString(url) {
        //定义一个对象，把解析出来的对象放进去
        var param = {};
        var str = url.split("?");
        str = str[1];
        str = str.split("&");
        for (i = 0; i < str.length; i++) {
          var obj = str[i].split("=");
          param[obj[0]] = obj[1];
        }
        return param;
      }

var paramObj = parseQueryString(url);
console.log(paramObj.catalogCode, paramObj.tabKey, paramObj.roleType);  // GC GOC GOC

问题：实现一个日程安排函数，可以不断地登记行程安排，但不允许时间上出现三重重叠

// *三重重叠的含义为：有某个日期，同时被三次登记覆盖到
// *不考虑不同月份，并且假定每个月都是 31 天

// const mySchedule = new Calendar();
// mySchedule.book(1, 10) true
// mySchedule.book(8, 14) true (8-10 双重重叠)
// mySchedule.book(22, 30) true
// mySchedule.book(2, 9) false (8-9 三重重叠)
// mySchedule.book(18，20) true

// {
//   day: 1,
//   bookNum: 0,  
// }

// [[1, 10], [8, 14], [22, 30], [2, 9], [18, 20]]

function Calendar {
  // 填充主体
     //只能数组里面放数组去比较，数组里面有元素，又比回去了
      //   var szlist = [];
      //   var cdnum = 0;
     
      var szlist = [
        [1, 2],
        [1, 3],
        [4, 5],
        [1, 4],
      ];
      function tj() {
        // var sz = document.getElementById("sz").value;
        // console.log(sz);
        // var sz = sz.split(",");
        // szlist.push(sz);
        // console.log(sz);

        for (i = 0; i < szlist.length; i++) {
             a = 0;
          //   szlist.push(sz[i]);
          //   console.log(sz[i]);
          minStart1 = szlist[i][0];
          maxEnd1 = szlist[i][1];
          for (let t = 0; t < szlist.length; t++) {
            minStart2 = szlist[t][0];
            maxEnd2 = szlist[t][1];
            // console.log(i);
            // console.log(t);
            if (i !== t) {
              //   console.log(szlist[t]);
              maxStartArr = [minStart1, minStart2]; // 开始课时数组
              minEndArr = [maxEnd1, maxEnd2];
              if (maxStartArr[0] > minEndArr[1] || minEndArr[0] < maxEnd2[2]) {
                console.log("没有重叠");
              } else {
                a = a + 1;
                if (a == 3) {
                  alert("已经重叠了3次");
                }
              }
            }
          }
        }

        console.log(szlist);
      }
      tj();
    
}

 
    
     
  

问题： 写一段CSS给内容为box的div设置圆角矩形的边框

<div class="container">
  <div>this<div>
  <div class="text">is</div>
	<div>box</div>
</div>

<style>
  /* 请在此实现CSS的代码 */
     .container {
            border-radius:25px;
      }
    
</style>

第二部分 Vue

问题：父组件向子组件传递数据？

问题：子组件向父组件传递事件？

问题：v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏

不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

问题：<keep-alive></keep-alive> 的作用是什么？

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

问题：<component ref="a" /> ref的作用是什么？

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

问题：<input type="text" v-model.number="code" /> v-model和number分别有什么作用？

v-model绑定code数据

number的意思是如果输入的是数字返回的就是number类型

问题：nextTick函数的作用是什么？

回调函数，等待页面执行完成以后再调用

问题：vue组件中data为什么必须是一个函数？

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

问题：常用的事件绑定修饰符有哪些？

①.stop:阻止冒泡
–对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件
②.prevent:阻止默认行为
–对于如<a href=“www.baidu.com” @click.prevent=“linkMethod”>百度自带事件的,添加prevent事件后,href跳转路径将不会触发
③.self:仅绑定元素自身触发,防止事件冒泡
–对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响
④.once: 事件只触发一次(常用表单提交)
⑤.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度
⑥.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行
⑦.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

问题：vuex是什么？怎么使用？哪种功能场景使用它？

Vuex是vue框架中状态管理。

应用场景有：单页应用中，组件之间的数据状态。

问题：实现一个金额转中文大写显示的组件（transform.vue）

<template>
  <div class="view">
    <input type="text" v-model="fee" />
    <component :is="transform" :fee="fee" @error="handleError" />
  </div>
</template>

<script>
import transform from './transform';

export default {
  component: { transform },
  data() {
    return {
      fee: 0,
    };
  },
  methods: {
    handleError(val) {
            var sz = val;
            tmpnewchar = "";
            for (var i = 0; i < sz.length; i++) {
              console.log(sz[i]);
              switch (sz[i]) {
                case "0":
                  tmpnewchar = tmpnewchar + "零";
                  break;
                case "1":
                  tmpnewchar = tmpnewchar + "一";
                  break;
                case "2":
                  tmpnewchar = tmpnewchar + "二";
                  break;
                case "3":
                  tmpnewchar = tmpnewchar + "三";
                  break;
                case "4":
                  tmpnewchar = tmpnewchar + "四";
                  break;
                case "5":
                  tmpnewchar = tmpnewchar + "五";
                  break;
                case "6":
                  tmpnewchar = tmpnewchar + "六";
                  break;
                case "7":
                  tmpnewchar = tmpnewchar + "七";
                  break;
                case "8":
                  tmpnewchar = tmpnewchar + "八";
                  break;
                case "9":
                  tmpnewchar = tmpnewchar + "九";
                  break;
              }
            }
            console.log(tmpnewchar);
            console.log("haha");
            if (val == "1a") {
              alert("只能输入数字，你输入的内容是：" + this.fee);
            }
            val = tmpnewchar;
        if(val=='1a'){
            alert('只能输入数字，你输入的内容是：' + val);
        }
      
    }
  }
};
</script>

例如在input中输入“79310”，显示“七九三一零”；输入“1a”弹出警告框