让渡居凉经

这是在拉钩上面投的一家公司,早上九点左右收到面试约请,注册了一个网站,然后最先做题,前端的问题没有细问,对照注重编程逻辑。下面放一下面试题

  1.从事前端开发多久了(这个问题没什么好说的,凭据自己现实情况答就可以了)

  2.对原生js感受若何

      问题剖析:现实上希望你回覆出,在框架横行的时代,原生js有哪些优瑕玷

    回覆如下:

      优点: 性能高——由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽轻量级的脚本语言,运行效果和处置相对对照快。

          针对性强——代码完全由自己的营业决议,不会发生多余的代码

      瑕玷: 安全性差——由于JavaScript在客户端运行,可能被黑客行使

          兼容性差、扩展能力低——在差别浏览器中的处置效果可能差别,代码抽象的条理较低。

    固然并不是说原生开发怎么怎么欠好,使用原生js可以磨炼基本功,对于博主这种前端小白来说再适合不过了。再说了万物皆可原生( ̄_, ̄ )

  3.git merge和git rebase的区别

      这个是考git下令,没什么好说的,直接上谜底,此外博主找到了一篇总结git知识点的文章,有兴趣的可以看看(https://www.cnblogs.com/codingdevops/p/11447815.html)

    回覆如下:      

        git merge:将两个分支,合并提交为一个新提交,而且新提交有2个parent。
        git rebase:会作废分支中的每个提交,并把他们暂且存放,然后把当前分支更新到最新的origin分支,最后再把所有提交应用到分支上。

  4.若何找到在特定提交中已更改的文件列表

      问题剖析:一最先我以为是在问我现实开发场景中若何处置这个问题,厥后一想似乎纰谬,再一看似乎也是git方面的知识点,由于博主在公司主要都是用SVN,git有所遗忘了,以是那瞬间很尬QAQ

    回覆如下:

      方案1:git diff-tree -r {hash},给定提交哈希值,这个下令将列出在该提交中更改或添加的所有文件。-r 标志会让下令列出各个文件,而不是仅将它们折叠到根目录名称中。

      方案2:输出还将包罗一些分外信息,可以通过以下两个标志轻松去掉:git diff-tree -no-commit-id -name-only -r {hash},这里 -no-commit-id 将克制提交哈希值泛起在输出中,而 -name-only 只会打印文件名而不是它们的路径。

  5.若何恢复已经推送并公然的提交的历程

    问题剖析:照样在考git的知识点,话不多说,上谜底

     回覆如下:

      方案1:在新提交中删除或修复错误文件,并将其推送到远程存储库。这是修复错误最自然的方式。对文件举行需要的更改后,将其提交到远程存储库,使用下令:git commit -m“commit message”      

      方案2:建立一个新的提交,撤消在错误提交中所做的所有更改,使用下令:git revert

  6.以下代码输出什么

for (var i = 0; i < 3; i++) {
  setTimeout(function() { alert(i); }, 1000 + i);
}

    问题剖析:代码中是一个for循环内里有一个setTimeout函数,每隔(1000+i)ms输出i。首先要注重的是setTimeout是一个异步函数,每隔(1000+i)ms往义务行列里添加一个义务,只有当主线上的义务所有执行完,才会执行。以是当for循环这个主线执行完成之后i的值是3,于是应该输出的是3次3。

线程与同步异步

    提问:若是这里的var变成了let,效果又是什么?

    回覆:for循环头部的let不仅将i绑定到for循环块中, 它也将其重新绑定到for循环体的每一次迭代中,确保上一次迭代竣事的值重新被赋值。 setTimeout内里的function()属于一个新的域, 通过 var 界说的变量是无法传入到这个函数执行域中的, 而通过使用 let 来声明块变量,这时刻变量就能作用于这个块, 以是 function就能使用 i 这个变量,以是效果是输出0,1,2

  7.以下代码输出什么

(function() {
  var a = b = 5;
})();
console.log(a);
console.log(b);

    问题剖析:var a = b = 5;可以拆分为b=3;var a=b;原因是js是具有右连系性的,也就是从右边往左边赋值。拆分完成后,问题中的函数是一个立刻执行函数,在函数中b被赋值为5,注重!b是一个全局变量(下面会注释)。然后a是立刻执行函数内里的变量,当函数执行完时a被释放,在外部打印的时刻就会报错:a is undefined,而b会打印出5。

    弥补:为什么b是全局变量?由于在函数中使用var关键字举行显式声明的变量是做为局部变量,在全局范围内声明的变量为全局变量;而没有用var关键字,使用直接赋值方式声明的是全局变量(全局工具属性)。

    还不懂的小伙伴可以看一下这个网址(https://www.jb51.net/article/155045.htm),注释的很详细

 

  8.最近的较小值

    让函数NearestSmallerValues(arr)获取存储在arr中的整数数组,并为列表中的每个元素搜索所有先前值,以查找小于当前元素的最近元素,并从这些数字建立一个新列表。若是在某个较小位置之前没有元素,请输入-1。

    例如:若是arr为[ 5、2、8、3、9、12 ],则最接近的较小值列表为[-1,-1、2、2、3、9]。逻辑如下:对于5,没有较小的先前值,因此到目前为止的列表为[-1]。对于2,也没有较小的先前值,因此列表现在为[-1,-1]。对于8,最接近的较小值为2,因此列表现在为[-1,-1、2]。对于3,最近的较小值也是2,因此列表现在为[-1,-1、2、2]。这继续发生上面的谜底。您的程序应使用此最终列表,并以空格分开的字符串形式返回元素:-1 -1 2 2 3 9

    例子:输入:[5、3、1、9、7、3、4、1]  输出:-1 -1 -1 -1 1 1 3 1

       输入:[2,4,5,1,7]      输出:-1 2 4 -1 1

    解题思绪: 数组中的第一个数前面一定没有比他小的数,以是第一个值直接给-1。然后从第二个数最先遍历数组,查找小于当前元素的最近元素,则直接早年元素向前查找,找到的第一个小于当前元素的就是相符要求的。

    我的代码(若是有更好的解法请列位指教)

function NearestSmallerValues(arr) { 
  var temp;  //标志变量,用于确认是否找到相符条件的元素
  var list=[];
  list.push(-1);
  for(var i=1;i<arr.length;i++){
	for(var j=i-1;j>=0;j--){  //从当前元素向前查找,一直找到数组第一个元素
	    if(arr[j]<=arr[i]){   //找到小于当前元素的数字,就把数字添加进list,而且跳出当前循环
	        list.push(arr[j])
                break;
	    }
         if(j==0){temp= true}    //判断j是否0,是则代表到数组第一个元素也没有找到,将标志变量置为true
            
       }
       if(temp){            //若是没找到就添加-1,而且把标志变量置为false
         list.push(-1)
         temp =false
       }
    
  }
  str=list.join(' ')
  return str; 

}      

  9.分词

    让函数WordSplit(strArr)读取存储在strArr中的字符串数组,该数组将包罗2个元素:第一个元素将是一个字符序列,第二个元素将是一个由逗号分开的长字符串,按字母顺序排列,示意随便长度的字典。例如:strArr可以是:[“ hellocat”,“ apple,bat,cat,再见,hello,黄色,为什么”]。您的目的是确定输入中的第一个元素是否可以分为两个词,其中两个词都存在于第二个输入中提供的字典中。在此示例中,第一个元素可以分为两个词:hello和cat由于这两个词都在字典中。您的程序应返回字典中存在的两个单词,并用逗号分开。因此,对于上面的示例,您的程序应返回hello,cat。只有一种准确的方式将字符的第一个元素分成两个单词。若是无法将字符串分成字典中存在的两个单词,则不可能返回该字符串。第一个元素自己永远不会在字典中作为真实单词存在。

    例子: 输入:[“ baseball”,“ a,all,b,ball,bas,base,cat,code,d,e,quit,z”]  输出:base,ball
        输入:[“ abcgefd”,“ a,ab,abc,abcg,b,c,dog,e,efd,zzzz”]      输出:abcg,efd

    这个题我用了一个很笨的设施去做,然后失败了(没脸贴代码),暂时没有对照好的解决设施,后面想出来之后会贴到这里,希望有思绪的大神能指点一下

  10.通配符  

    让函数Wildcards(str)读取str ,其中将包罗两个由空格分开的字符串。第一个字符串将由以下字符集组成:+,*,$和{N},这是可选的。加号(+)示意单个字母字符,($)字符示意1-9之间的数字,星号(*)示意长度为3的相同字符的序列,除非后面跟{N}示意在序列中应该泛起若干个字符,其中N至少应为1。您的目的是确定第二个字符串是否与输入中第一个字符串的模式完全匹配。例如:if str是“ ++ * {5} jtggggg”,那么在这种情况下,第二个字符串与模式匹配,因此您的程序应返回字符串true。若是第二个字符串与模式不匹配,则程序应返回字符串false。

    例子:  输入:“ +++++ * abcdehhhhhh”  输出:false
         输入:“ $ ** + * {2} 9mmmrrrkbb”  输出:true

    (没脸贴代码),求指点

  11.反映电话簿

    我们提供了一些简朴的React模板代码。您的目的是在顶部建立一个简朴的表单,该表单允许用户输入名字,姓氏和电话号码,而且应该有一个提交按钮。按下提交按钮后,该信息应与之前输入的所有信息一起显示在下面的列表中(自动按姓氏排序)。这样,应用程序可以用作简朴的电话簿。使用一些基本的CSS样式在表中显示所有信息。

    问题剖析:考察react中父子组件通讯方式,由于我对react不是稀奇熟悉,以是选择了子-父-子 props的方式,固然另有React Context、redux也可以实现,我就不举例了

import React from 'react';
import ReactDOM from 'react-dom';

const style = {
  table: {
    borderCollapse: 'collapse'
  },
  tableCell: {
    border: '1px solid gray',
    margin: 0,
    padding: '5px 10px',
    width: 'max-content',
    minWidth: '150px'
  },
  form: {
    container: {
      padding: '20px',
      border: '1px solid #F0F8FF',
      borderRadius: '15px',
      width: 'max-content',
      marginBottom: '40px'
    },
    inputs: {
      marginBottom: '5px'
    },
    submitBtn: {
      marginTop: '10px',
      padding: '10px 15px',
      border:'none',
      backgroundColor: 'lightseagreen',
      fontSize: '14px',
      borderRadius: '5px'
    }
  }
}

function PhoneBookForm({ addEntryToPhoneBook }) {
  return (
    <form onSubmit={e => { e.preventDefault() }} style={style.form.container}>
      <label>First name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userFirstname'
        name='userFirstname' 
        type='text'
      />
      <br/>
      <label>Last name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userLastname'
        name='userLastname' 
        type='text' 
      />
      <br />
      <label>Phone:</label>
      <br />
      <input
        style={style.form.inputs}
        className='userPhone' 
        name='userPhone' 
        type='text'
      />
      <br/>
      <input 
        style={style.form.submitBtn} 
        className='submitButton'
        type='submit' 
        value='Add User' 
      />
    </form>
  )
}

function InformationTable(props) {
  return (
    <table style={style.table} className='informationTable'>
      <thead> 
        <tr>
          <th style={style.tableCell}>First name</th>
          <th style={style.tableCell}>Last name</th>
          <th style={style.tableCell}>Phone</th>
        </tr>
      </thead> 
    </table>
  );
}

function Application(props) {
  return (
    <section>
      <PhoneBookForm />
      <InformationTable />
    </section>
  );
}

ReactDOM.render(
  <Application />,
  document.getElementById('root')
);

  12.总结

    以上面试题暴露出的问题:算法部门较为微弱、关于react组件多种通讯方式不熟、git下令生疏。继续加油叭!!

原创文章,作者:dddof新闻网,如若转载,请注明出处:https://www.dddof.com/archives/7816.html