前端笔试题

第一题

<script>
      var a = 10;
      function test() {
            a = 100;
            console.log(a);      //100
            console.log(this.a)  //10
            var a;
            console.log(a)       //100
      }      
      test()     

      // 解题思路 ：  变量提升   函数调用模式的this指向window 
</script>

第二题

<script>
      for(var i=1; i<10; i++){
            setTimeout(function(){
                  console.log(i)
            },1000)
      }
      // 输出9遍 10 



      for(let i=1; i<10; i++){
            setTimeout(function(){
                  console.log(i)
            },1000)
      }
      // 输出 1，2，3，4，5，6，7，8，9
</script>

第三题

<script>
      // 输出结果？
       var arr = [1,3,4,5,65,6]
       arr.forEach( i=>{
             console.log(i);
             if(i==5){
                  return 
             }
       })
      //  输出结果 1,3,4,5,65,6   
</script>

第四题

      什么是MVVM，常用的MVVM框架有哪些？

      M 表示model 模型 data中的内容   页面中所需的数据

      V 表示view  视图 模板中内容     html+css 静态页面

      vM 表示viewModel 视图模型，建立连接，实现双向绑定

      模型数据改变，视图自动更新；视图数据改名，模型数据自动更新

      vue react angular

 

      什么是MVC？

      M  model  模型

      V  view   视图

      C  controller  控制器  需要手动操作大量的DOM，数据是单向传送的

第五题

<script>
// 已知有以下数组，请将数组随机乱序
  let arr = [1,2,3,4,5]

// 方法一
  let newArr=[]
  for(let i = 0; i < Infinity; i++){
        if(newArr.length==5){// 如果 newArr 和 arr原始数组的长度一样，跳出循环
            break
        }
        let index = Math.floor( Math.random() * arr.length )   //随机获取数组下标
        newArr.push(arr[index])   // 将随机出来的元素添加到newArr中 
        arr.splice(index,1)       //删除添加过的元素 
  }
  console.log(newArr)

</script>

<script>
// 已知有以下数组，请将数组随机乱序
  let arr = [1,2,3,4,5]

// 方法二
  let newArr=[]
  for(let i = 0; i < arr.length; i++){
        let index = Math.floor( Math.random() * arr.length )   //随机获取数组下标
        newArr.push(arr[index])   // 将随机出来的元素添加到newArr中 
        arr.splice(index,1)       //删除添加过的元素 
  }
  var result = new Set( [ ...arr , ...newArr ] )
  console.log([...result])

</script>

第六题

      npm init 和 npm install vue 区别？ 如何安装指定版本的js模块？
      npm init 是初始化项目，使用后会多出一个 package.json 的文件
      npm install vue 是安装vue
      使用 @ 可以指定版本 比如： npm i  jquery@3.0.0 

      全局安装？
      npm install xxx -g  //模块将被下载安装到【全局目录】中

      本地安装？
      npm install xxx //则是将模块下载到当前命令行所在目录

      信息写入？（安装的同时，将信息写入package.json中项目路径中）
      npm install xxx --save
      npm install xxx --save-dev  
      
      --save 将依赖包名称添加到 package.json 文件 dependencies 键下  (发布后依赖的东西)
      --save-dev 则添加到 package.json 文件 devDependencies 键下    (开房时候依赖的东西)

      --save 是你发布之后还依赖的东西
      --save-dev 是你开发时候依赖的东西

第七题

如何实现单页面同时适应  pc 和 移动端设备 ？

      @media 媒体查询
      /* 当屏幕小于等于100px的时候背景色为红色 */
@media screen and (max- 100px) {
    .example {background: red;}
}

/* 当屏幕在 200px -- 300px 的时候背景色为绿色 */
@media  screen and (min- 200px) and (max- 300px) {
    .example {background: green;}
}

 或者使用bootstrap中的媒体查询

第八题

vue中如何防止卡白屏？

原因？ vue项目完成后一打包，js都放到了一起，由于js太庞大，加载变慢出现白屏（app.js太大）

解决？

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

使用路由懒加载，可以将js分别打包到不同的文件中。

使用骨架屏(vant)

　01  配置打包工具，将组件分别打包到不同的js代码块中

　　　　biuld/weabpack.base.conf.js

　　　　　　　　output:{

　　　　　　　　　　chunkFilename:"[   ]"　　　//为了懒加载新增，配置后webpack将打包出多个js文件　　

  　　　　　　　　}

　　　　02  当路由请求到该组件时，才动态加载组件的内容

　　　　　　 引入组件时要改为

　　　　　　import index from './'xxx  改为    const index=()=>import （'./xxx'）  仅定义函数  不执行

　　　　　　当用户在vue中请求当前组件对应的路由地址时，由vue-router自动调用加载函数

第九题

简单描述一下前端优化的理解？

css放顶部，js放底部

精灵图，字体图标

压缩代码

前端你的优化在于减少DOM的操作和减少页面的重排重绘

第十题

call和apply的区别是什么？哪个性能更好一点？

call传参是一个一个传入  fn.call( obj , 10,20,30)

apply传参要用数组的形式[ ]   fn.apply( obj , [10,20,30] )

传参多的时候，call的性能要比apply稍好些。所以call的性能要优于apply，所以在开发时候，使用call，如果传入的参数是数组，可以使用...展开用算符传参  fn.call( obj , ...arry )

  

第十一题

代码性能测试 console.time('a')   console.timeEnd('a')

测试代码运行时间可以使用 console.time和console.timeEnd 来测试一段代码运行的时间 （火狐浏览器可以使用console.profile进行测试）

 

<script>

// 测试代码运行时间可以使用 console.time和console.timeEnd 来测试一段代码运行的时间
console.time('A')
for( let i=1 ; i<100; i++){

}
console.timeEnd('A')

// 输出结果：    A: 0.007080078125ms
     
</script>

第十二题

 实现 (5).add(3).minus(2) ,使其结果输出为6  

      如何实现 实例调取方法？  如何实现链式写法？

      想实现实例调取方法，只需要将方法 放到  当前实例所属类的原型上（比如数字实例要放到 Number上）

      想实现链式写法，就让当前方法执行完的返回结果还是当前这个类的实例，这样就可以继续调用其他方法了

<script>
/*
      arr.push()  arr数组之所以可以调用数组方法， 是因为 arr是Array的实例，可以调用Array.prototype 原型上的方法。push就是Array的方法

      jq源码中：给原型上添加方法
      ['add','minus'].forEach( elem=>{
            Number.prototype[elem] = eval(elem)
      })
*/


      //   5   +   3    -  2       =   6
// 实现 (5).add(3).minus(2) ,使其结果输出为6  
(function(){

      function check(n) {
            n = Number(n)
            return isNaN(n) ? 0 : n ; // 如果是NAN返回0 否则返回n
      }

      // 每一个方法执行完，都要返回Number这个类的实例，这样才可以继续调用Number类原型中的方法（链式写法）
      function add(n=0){
            n = check(n)
            return this + n;   //this指向5 ; 
      }

      function minus(n=0){
            n = check(n)
            return this - n;
      }

      Number.prototype.add=add;  //将add函数添加到原型中
      Number.prototype.minus=minus;//将minus函数添加到原型中

}());
console.log(  (5).add(3).minus(2) ) //  6

  
</script>

十三题

什么是回调函数：把一个函数B作为实参传递给另外一个函数A；函数A在执行的时候，可以把传递进来的函数B去执行（执行N次数）

function each(arr,callBack) {
      for( let i= 0; i < arr.length; i++){
            let item = arr[i];
            index = i;
            callBack( item , index )
      }
}
each( [1,2,3,4], function( item, index) { } )

十四题

      箭头函数和普通函数的区别是什么？ 构造函数可以使用new生成实例，那么箭头函数可以吗？为什么？
箭头函数和普通函数的区别？
      01 箭头函数语法上比普通函数更简洁
      02 箭头函数没有自己的this，它里面的this继承函数所处上下文中的this（箭头函数中的this与外层函数的this一致）
         箭头函数中的this，使用call/apply等任何方式都无法改变this的指向（都和外层函数this一致）
      03 箭头函数中没有 arguments(类数组)
      04 箭头函数不能被new执行（普通函数 可以写成构造函数格式），为什么？因为箭头函数中没有this，箭头函数没有prototype
         箭头函数时没有this，也没有prototype,也没有arguments

十五题

      console.log(a) //undefined
      var a = 12;
      function fn () {
            console.log(a); // 12
             a = 13;
      }
      fn();
      console.log(a); //13

十六题 

axios和ajax的区别？

　　　　axios是基于promise的专门发送ajax请求的函数库，通过promise实现对ajax的封装。自动转换JSON数据

              ajax是针对mvc的编程，不符合mvvm模式的开发

$.ajax({
            url: '/getUsers',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })

<script>


axios.get("url",{

  params:{

    请求参数: 参数值

  }

}).then(function(返回结果result){

  result.data    //才是服务器返回的结果

})


// 比如: 用id查询一个商品
//http://localhost:3000/products/getById?lid=5  ->

//  { lid:5, title: macbook, subtitle: 优惠酬宾, ... } <-

axios.get("/products/getById",{

  params:{

    lid:5

  }

})

.then(function(result){

  var product=result.data;

})

</script>

十七题 

js事件机制？  

　　　　捕获   目标触发   冒泡

十八题

浏览器的缓存问题？

当浏览器请求一个网站的时候，会加载各种各样的资源，比如HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。

这些被浏览器保存的文件就被称为缓存。（不是指Cookie或者Localstorage）。

解决方法  ： 

ctrl + f5：强制刷新

遇到图片缓存问题，可以在请求的url路径后加 ?new Date()

十八题

js如何区分数组和对象？

<script>

console.log( {}.constructor  ) // Object
console.log( [].constructor  ) // Array



console.log(  {} instanceof Array   ) //false
console.log(  [] instanceof Array   ) // true



console.log(  Array.isArray({})   ) //false
console.log(  Array.isArray([])  ) // true

console.log(  toString.call( {} )  )    //[object Object]
console.log(  toString.call( [] )  )   //[object Array]

</script>

十九题

<script>
      var User = {
            count : 1,
            getCount : function () {
                  return this.count
            }
        }
        console.log(User.getCount())  //  1
        var func = User.getCount;
        console.log( func() )   // undefined
</script>

二十题

      for ( var i = 1; i <= 3; i++){
            setTimeout (function () {
                  console.log(i) // 三个 4
            },0)
      }

二十一题

<script>
      var name = 'jack';
      function change () {
            alert(name);    //undefinded
            var name = 'lily'
            alert(name)     // lily
      }
      change();
</script>

二十二题

javascrip是如何继承的？

　　　　原型链继承方式  或者 借用构造函数（使用call/apply）

 

      http状态码403表示的含义？ 

      A Bad gateway

      B Bad Request  请求参数不对

      C Unauthorized 

      D Forbidden   //403 禁止请求

 

• 200 - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 404 - 请求的资源（网页等）不存在
• 500 - 内部服务器错误

二十三题

<script>
      setTimeout(() => {
            console.log('setTimeout')
      }, 0);     
      let p1 = new Promise( (resolve)=>{
            console.log('promise1')
            resolve('promise2')
      } )
      p1.then( (res)=>{
            console.log(res)
      })
      console.log(1)
      // 打印结果是？
      //  promise1  1 promise2 setTimeout
</script>

二十四题

vue中二级联动怎么做？

使用嵌套路由

router-view     vue-router的配置，使用children[ ]

二十五题

      // Object.keys(arr)  中放入数组，会以字符串的形式，返回所有数组的下标   输出的是[]格式
      var arr = ['z','h','y']
      console.log(  Object.keys(arr) )   //["0", "1", "2"]

      // Object.keys(arr)  中放入对象，会以字符串的形式，返回所有对象中的属性名  输出的是[]格式　　
      var obj = {
            name:'zh',
            age:18,
            money:9999999999
      }
      console.log(  Object.keys(obj) ) //["name", "age", "money"]

      // 输出对象中值大于2的key的数组
      var data = {a:1,b:2,c:3,d:4}    
      // ['a','b','c','d']
      var result = Object.keys(data).filter(function(k){
            return k!='a'&&k!='b'
      })
      console.log(result)
      // 期待输出 ['c' , 'd']

二十六题

<script>
      (function(){
            var a=b=5;  //  b=5;
      })();             //  var a = b;
      console.log(b) // 5
      console.log(a) // a is not defined
</script>

 二十七题

http与https，运营商注入问题

HTTP（超文本传输协议）被用于在Web浏览器和网站服务器之间，以明文方式传递信息，不提供任何方式的数据加密，因此使用HTTP协议传输隐私信息（如：银行卡号、密码等支付信息）非常不安全。 数据可以被劫持注入广告

HTTPS协议="SSL+HTTP协议"构建的可进行加密传输、身份认证的网络协议，是HTTP的安全版。

 

二十八题

浏览器渲染机制，渲染引擎以及js引擎

　　　　V8引擎是？  js引擎  负责执行js代码

　　　　渲染引擎？  负责执行 html  css  等代码

二十九题

      var  foo = 1;
      function bar () {
            if(!foo){  //变量提升   !undefined  
                  var foo = 10;
            }
            console.log(foo)  // 10
      }
      bar();

三十题

<script>
      var n = 0;
      function a () {
            var n = 10;
            function b () {
                  n++;
                  console.log(n);  
            }
            b();  // 11
            return b;
      }
      var c = a();
      c(); // 12
      console.log(n)   //  0
      // 输出 ：  11  12  0
</script>

三十一

<script>
      var a = 10,b=11,c=12;
      function fn (a) {
            a = 1;
            var b = 2;
            c = 3;
      }
      fn(10); // 传入实参 10 ，就相当于在函数中var a = 10
      console.log(a);//10
      console.log(b);//11
      console.log(c);//3
</script>

三十二题

<script>
      // in： 检测某一个属性是否属于这个对象(不管是私有属性还是公有属性)

// hasOwnProperty:检测某一个属性是否为对象的私有属性（只有私有的属性才可以）　　

      if(!('a' in window)){// window中 有没有 a
            var a = 1;
      }
      console.log(a)//undefined

      // 解题思路：  因为变量提升，var a 提升到最前边，全局中有了a，所以 'a' in window 是true
</script>

 三十三题

      var a = 9;
      function fn () {
            a = 0;
            return function (b) {
                  return b+a++;
            }
      }  
      var f = fn();
      console.log( f(5) )  // 5
      console.log( fn()(5) )  // 5
      console.log( f(5) )  // 6
      console.log( a ) // 2

 三十三题

      var arry = [1,2,3,4]; // arry = aaafff000 ([1,2,3,4]) 地址
      function fn (arry) {//aaafff000       arry = aaafff000
            arry[0]=0; // [0,2,3,4]
            arry=[0];  // [0] 创建了一个新地址 bbbfff000, arry=bbbfff000   引用值：[0]   
            arry[0]=100;  // bbbfff000[0]=100  , 引用值 ：[100]
            return arry   //  [100]
      }
      var res = fn(arry) //[100]
      console.log(arry)  // 输出 [0,2,3,4]
      console.log(res)   // 输出 [100]

三十三题

      function fn (i) {
            return function (n) {
                  console.log( n + (i++) );
            }
      }
      var f = fn(10);
      f(20);  //30
      fn(20)(40); // 60
      fn(30)(50); // 80
      f(30)       // 41

三十四题

<script>
      var i = 10;
      function fn () {
            return function (n) {
                  console.log( n + (++i) );
            }
      }
      var f = fn();
      f(20);     //31  
      fn()(20);  //32
      fn()(30);  //43
      f(30)      //44
</script>

    <!-- 解题思路： 匿名函数自调中的this  指向 window 
             方法调用中的this指向.前的对象 -->
<script>
      var num = 10;
      var obj = { num:20 }
      obj.fn = (function (num) {
            this.num = num * 3
            num++;
            return function (n) {
                  this.num += n
                  num++
                  console.log(num)
            }
      })(obj.num)
      var fn = obj.fn 
      fn(5);//22
      obj.fn(10);//23
      console.log(num,obj.num) //65   30
</script>

    <!-- 解题思路： 匿名函数自调中的this  指向 window 
             方法调用中的this指向.前的对象 -->
<script>
      var num = 10;
      var obj = { num:20 }
      obj.fn = (function (num) {
            num = this.num + 10;
            this.num = num + 10;
            return function () {
                  this.num += num
            }
      })(num)
      var fn = obj.fn 
      fn();
      obj.fn();
     console.log(num,obj.num) //50   40
</script>

 三十五题

      <!-- 解题思路：元素绑定事件，方法中的this是当前操作的元素
                    方法名前面是否有点，有点，点前面是谁this就是谁，没有.this是window（严格模式下是undefined）
                    构造函数执行，方法体中的this指向向new出来的对象
      -->
<script>
      var fullName = 'language';
      var obj = {
            fullName : 'javascript',
            prop:{
                  getFullName:function (){
                        return this.fullName
                  }
            }
      }
      console.log(obj.prop.getFullName()); //undefined
      var test = obj.prop.getFullName;
      console.log( test() ) //language

三十六题

      <!-- 解题思路：new做的四件事
                    创建一个新的对象
                    调用函数
                    改变this指向
                    返回一个新的对象
            查找规则：先从自己身上找，如果找不到再去原型上找     
      -->
<script>
      function fun () {
            this.a=0;
            this.b=function () {
                  alert(this.a)
            }
      }
      fun.prototype = {
            b:function (){
                  this.a = 20
                  alert(this.a)
            },
            c:function (){
                  this.a=30
                  alert(this.a)
            }
      }
      var my_fun = new fun();//新对象
      my_fun.b();//  alert 0
      my_fun.c();//  alert 30

</script>

　　　　

三十七题

<script>
      function Fn () {
            var n = 10;
            this.m = 20;
            this.aa = function () {
                  console.log(this.m)
            }
      }
      Fn.prototype.bb = function () {
            console.log( this.n )
      }
      var f1 = new Fn;
      Fn.prototype = {
            aa:function () {
                  console.log(this.m+10)
            }
      }
      var f2 = new Fn;
      console.log( f1.constructor )  // Fn
      console.log( f2.constructor )  // Object
      f1.bb()                        // undefined
      f1.aa()                        // 20
      // f2.bb()                        //报错
      f2.aa()                        //20
      f2.__proto__.aa()              //NaN
</script>

三十八题

      //依次遍历数组中的每一项，让每一项的值作为对象的属性名和属性值(属性值存什么都可以),每一次存储之前验证当前对象中是否已经存在这个属性了(in/hasOwnProperty/属性值不是undefined),
如果有这个属性了，说明当前项在数组中已经存在了，我们把当前项在原有数组中移除，如果不存在，存储到对象中即可
    var ary =  [1,1,1,1,1,2] 
      function unique (ary) {
            var obj = {};
            for ( var i = 0; i < ary.length; i++){
      /*
            优化：不使用splice删除（删除当前项，后面索引移动位置，如果后边有很多项，到性能消耗大）
            解决：把最后一项替换当前项，删除最后一项即可（会改变原有数组的排序）
      */ 
                  var item = ary[i]
                  if( obj.hasOwnProperty(item) ){//如果元素已经存在
                        ary[i] = ary[ary.length-1];// 当前项 =  最后一个元素
                        ary.pop()
                        i--
                        continue;
                  }
                  obj[item]=item;
            }
            obj = null ; //优化：obj没有之后手动释放一下，节约内存
            return ary
      }
    console.log( unique(ary) ) //[1, 2]

终极优化版

<script>
/*
       用对象键值对的方式来减少双for循环带来的循环次数过多，性能消耗
       对象键值对里解决数组塌陷问题
       删除数组元素，导致数组索引位移问题
       手动释放堆内存
       把方法扩展到内置类的原型上
*/

    var ary =  [1,1,2,2,3,4,5] 
    Array.prototype.my_unique = function my_unique () {
             var obj = {};
             for ( var i = 0; i<this.length; i++) {//this 指向方法.前的对象ary
                  var item = this[i]
                  obj.hasOwnProperty(item)?(this[i]=this[this.length-1],this.pop(),i--):obj[item]=item
             }        //判断对象obj中是否有item元素，如果有 让当前元素等于数组最后一个元素，删除最后一个元素
                      //                           如果没有   将这个元素添加到对象中
             this.sort((a,b)=>{return a-b})// 数组去重后 按升序排列
             obj = null;
    }
    ary.my_unique()
    console.log(ary) // [1, 2, 3, 4, 5]
</script>

三十九题 

   document.parentNode 和 document.parentnode 区别？

      document.parentNode 文档的父节点,文档已经是最外层了

      document.parentNode ---- null  , 有这个属性，值是null

      document.parentnode ---- undefined , 没有这个属性，未定义

三十九题

怎么规避多人开发函数重名的问题?

      闭包  组件化 模块化开发

 

 

四十题

 javaScript如何实现面向对象中的继承?

      原型继承

      call/apply继承

      class继承

 

 四十一题

(function(x){
      delete x
      alert(x)
})(5+1)
// 输出结果： 是 弹出 6

四十二题目

/*
实现一个$attr(name,vlaue)
属性为 name
值为value的元素集合
*/

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
<div name='AA' class="box clearfix"></div>
<div class="content box"></div>
<div name='BB'></div>
<div id="AA"></div>
<div class="box"></div>
<div name='BB'></div>
<div name='AA' class="box clearfix"></div>

<script>

let ary = $attr('name','box'); // 获取页面中所有name为box的元素

// 思路：获得页面中所有的标签，循环得到每一个标签 
function $attr(property,vlaue) {
      // 获取当前页面中所有的标签
      let elements = document.getElementsByTagName('*');
      elements = Array.from(elements)// 将elements变为数组
      console.log(elements instanceof Array)
      arr = [];
      [].forEach.call(elements,function(item){
            // 存储的是当前的元素property对应的属性值
            let itemValue = item.getAttribute(property)
            if(property==='class'){
                  // 样式类属性名要特殊的处理
            new RegExp("\b"+vlaue+"\b").test(itemValue)? arr.push(item):null;
            return
            }
            if(itemValue === vlaue){
                  arr.push(item)
            }
      })
      return arr

}

console.log($attr('name','AA') )


</script>  
</body>
</html>

四十三题

<script>
      let str = '你好，word哈哈哈aaa不错'
      reg = /[a-z]+/
      str=str.replace(reg,(item)=>{
            return ' ' + item + ' '
      }).trim()
      console.log(str);  // 你好， word 哈哈哈aaa不错
</script> 

四十四题目 

数组扁平化（可以通过es6的flat   或者  数组.toString()转为对象，再split（','）转回数组）

<script>
// 编写一个程序，将数组扁平化，并去除其中重复部分数据，最终得到一个升序且不重复的数组
let arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,14]]],10]
// 使用es6中提供的Array.prototype.flat 处理  将数组扁平化
arr=arr.flat(Infinity)
var result = new Set(arr)
result = [...result].sort((a,b)=>{return a-b})
console.log(result);

</script> 

 四十五题目

 

<script>

// 编写一个程序，将数组扁平化，并去除其中重复部分数据，最终得到一个升序且不重复的数组
let arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,14]]],10]
// 使用es6中提供的Array.prototype.flat 处理  将数组扁平化
arr=arr.toString().split(',').map((item)=>{
      return Number(item)
}).sort((a,b)=>{return a-b})
console.log(arr)

</script>