资讯专栏INFORMATION COLUMN

整理下《前端江湖面试》对自己有益的题目。

QLQ / 1394人阅读

摘要:面试题目汇总前言近期在找工作,也在读前端面试江湖这本书,书中整理了很多基础的面试题目,在书中也发现了一些错误。好记性不如烂笔头,于是整理下对自己有益的题目,都是一些较为基础的题目后期还会更新。,返回一个数组,成员为匹配的字符串。

面试题目汇总 前言

近期在找工作,也在读 前端面试江湖 这本书,书中整理了很多基础的面试题目,在书中也发现了一些错误。
好记性不如烂笔头,于是整理下对自己有益的题目,都是一些较为基础的题目,后期还会更新。时时刻刻勉励自己,注重基础。
现在在找工作,初中级前端,如有哪位热心的仁兄公司在招前端,希望@我一下,目标广州,前端路很长,希望一起努力向前。

js初级之操作字符串

截取字符串 var a = "www.qdjhu.com中的qdjhu"。

考察知识点,substr()第一个参数为起始位置,第二个参数为截取的长度,注意第一个参数为负数则从末尾往前找,第二个参数为负数则返回空字符串,此方法不会修改原字符串,只是查找并返回查找的结果,与slice()方法不同的是,slice()方法第二个参数为结束位置,slice()的第一个参数如果大于第二个参数则返回空字符串。
a.substr(4,5)或者a.slice(4,9)

判断字符串是否是这样组成的,第一个必须是字母,后面的可以使字母,数字,下划线,总长度为5-20。

考察知识点,正则。[a-zA-Z]是匹配所有字母,w表示匹配任意字母,数字,下划线。{n}代表重复几次,{n,m}代表重复至少n次,至多m次。
var a = /^[a-zA-Z]{1}w{4,19}/

给定一个字符串 "IamWangZhiJun",要求查找里面的字符串Wang。

考查知识点,对String对象的操作,indexOf()方法表示查找一个字符串在另一个字符串中的位置,返回一个整数,字符串匹配开始的位置。

          var a ="IamWangZhiJun"
          var b ="Wang"
          var c =a.indexOf(b) //3
          var d = a.substr(c,b.length) 

如何实现一个删除字符串左边为空白字符的方法。

知识点1,replace(),第一个参数为匹配模式(正则),第二个参数为替换的内容。

知识点2,量词符和贪婪模式,?表示0次或者1次{0,1},*表示0次或者多次{0,},+表示1次或者多次{1,}。默认情况下匹配贪婪模式。

        function leftTrim(str){
        return str.replace(/^s*/,"")
        };
        var a = leftTrim("   abc")//abc

JavaScript 的typeof 都返回那些数据类型。

知识点,js的6种数据基本类型。underfined,String,Number,Object,function,boolean 。

请定义一个函数,实现字符串的反转。

知识点,主要是把字符串从末尾开始的每一个元素截取后,在重新组成一个新字符串,用到的方法charAt(), 返回指定位置的字符,注意是从0开始。

      function reverStr(str){
      var temStr = "";
      for(var i = str.length-1:i>=0:i—-){
      temStr+=str.charAt(i)}
        }
         returun temStr;
      }  

7. 字符串的操作主要有那些。
 * 查找类型
      *   indexOf(),返回匹配开始的位置。
      *   search(),返回匹配的第一个位置。
      *   match(),返回一个数组,成员为匹配的字符串。
      *   length(),返回字符串的长度
    
 * 截取,拼接,替换类
      *    slice(),从原字符串中取回字符串并返回,第一个参数为起始位置,第二个参数为结束位置。
      *    substr(),从原字符串中取回字符串并返回,第一个参数是子字符串的开始位置,第二个参数是子字符串的长度。
      *    concat(),方法用于连接两个字符串,返回一个新字符串,不改变原字符串。
      *    replace(),第一个参数为被替换的内容,第二个参数为要替换的内容,一般只匹配一个。
      *    charAt()方法返回指定位置的字符,参数是从0开始编号的位置。
      *    trim()
 *    转换类
      * split(),第一个参数为起始位置 第二个参数为限定放回数组的成员数,注意,第一个参数如果为空,则返回数组的成员是原字符串的每一个字符。此方法会将字符串装换为数组。

8. 有一个字符串 abcd-ef-ghi,请用js把它处理成ghi&ed&abcd。
  * 知识点,字符串和数组之间的装换。
        var a ="abcd-ef-ghi";
        var b = a.split("-");
        var result = b.reverse().join("&")
        ```

请编写代码拓展JavaScript中string对象,让其有一个方法删除字符串中所有英文句号"."。

 
String.prototype.killPoint = function(){
return this.replace(/^./g,"");
 }

将字符串"wang zhi j un"中由空格分割的每个单词首字母大小写。

  function str(words) {
     words = words.split(" ");
     for(var i = 0;i

JS初级之变量,DOM,循环语句

JS如何检测变量是一个string类型?请写出函数实现。

      function isString(str){
      if(typeof(str) === "string" || str.constructor === String){
         return true;
         }else{
          return false;
          }
      }
      var str = "hello world"

这里需要注意的是也要判断这个值的数据类型。

请说明javaScript中的nodeName,nodeVaule,nodeType的区别

*   nodeName 表示节点的名称
    *   元素节点的nodeName是标签名称
    *   属性节点的nodeName是属性名称
    *   文本节点的nodeName是#text
    *   文档节点的nodeName是#document
*   nodeVaule 表示文本内容
    *   对于文本节点,nodeVaule属性包含文本
    *   对于属性节点,nodeValue属性包含属性值
*   nodeType 属性返回节点的类型,常用的如下
    *   元素类型对应的节点类型为1
    *   属性类型对应的节点类型为2
    *   文本属性对应的节点类型为3
    

下列代码执行后,结果是什么

        
        for(i=0,j=0;i<6,j<10;i++,j++){
        var k =i+j
        }
        alert(k) //18
        for(i=0,j=0;i<10,j<6;i++,j++){
        var k =i+j
        }
        alert(k) //10

知识点,在for语句中条件用逗号隔开,就相当于“并且”。

var t =(4,5,6),console.log(t) //6,这里也说明逗号表达式返回的结果是由最后一个表达式决定的。

统计从1-400之间的自然对数中含有多少个1?

 
      var count = 0;
      for(var i=0;i<=400;i++){
       for(var j=0;j<=i.toString().length;j++){
         if(i.toString()[j]=="1"){
          count++}
        }
      }
      alert(count)

js中基本数据类型有哪些?本地对象,内置对象,宿主对象有那些?

基本数据类型

string,boolean,number,null,undefined,object。

本地对象(常用)

Object,Function,String,Number,Boolean,Data,Array,RegExp。

内置对象

简单的说,内置对象是本地对象的一种,其中包含2种对象,Math,Global(isNaN,parseInt,parseFloat)

宿主对象
所有BOM,DOM都是宿主对象
其中BOM常用对象有

localtion

navigation

screen

history

JS中级之函数

编写一个函数,参数为一个元素,返回指定元素的第一个元素,函数越简单越好

   
    function getFirst(el){
    var nodes = el.children;
    return nodes.length!=0?nodes[0]:null;
    }

简述JavaScript中this的理解。

this代表函数执行的时候,自动生成一个内部对象,在函数内使用

this指的是调用函数的那个对象

一下讨论this的四种用法

纯粹的函数调用,说明此时this代表全局对象。

var x = 1;
     function test(){
     this.x = 0;//这里等同于x = 0;已改写
     }
     test();//window.test()
     alert(x);//0

作为对象方法的调用,说明此时this指向这个的上级对象。

       function test(){
       alert(this.x);
       }
       var o = {};
       o.x=1;
       o.m = test;
       o.m()//1

 

作为构造函数的调用,说明此时this是指向新对象,不是全局对象!!!

      var x = 2;
      function test(){
      this.x = 1;
       }
      var o = new test();
      alert(o.x)//1
      alert(x)//2
    

apply调用

 
      var x = 0;
      function test(){
      alert(this.x)}
      var o = {};
      o.x = 1;
      o.m = test;
      o.m.apply()//0,当参数为空的时候,默认调用全局
      o.m.apply(o)//1

什么是闭包?闭包的特性?对页面有什么影响?好处和坏处?请写出一个闭包的简单实例?

闭包就是能够读取其他函数内部变量的函数。

闭包特性

闭包外层是一个函数

闭包内层也是一个函数

闭包会return内部函数

闭包返回的函数内部不能有return

执行闭包后,闭包内部的变量会缓存

闭包只有被执行的时候才会调用

好处和坏处

方便上下文调用

加强封装性

坏处 浪费内存

实例

       function a(){
         var i = 0;
         function b(){
           console.log(++i)
           // i=null 解决内存泄漏 
         }
         return b;
       } 
       var c = a();//执行a函数
       c()//执行b函数,也就是执行闭包,结果为1
       c()//2
       …
       

IE和Firefox处理兼容。

绑定事件监听

 function addEvent(elem,eventName,handler){
 if(elem.attachEvent){
    elem.attachEvent("on"+eventName,handler)
    }else if{
    elem.addEventListener(eventName,handler,false)}
    }else{
    elem["on"+eventName]
    }
            
     function removeEvent(elem,eventName,handler){
     if(elem.detachEvent){
     elem.detachEvent("on"+eventName,handler)
     }else if{
     elem.removeEventListener(eventName,handler,false)
     }else{
      elem["on"+eventName]
        }      
    }

获取到event对象

function getEvent(e){
return e ? e : windowm.event;
}
function getTarget(e){
return e.target||e.srcElement
}
//阻止默认和冒泡
function prevent(e){
if(e.prevent){
e.preventDefault();
}else{
e.returnValue = false
}
                }
                function stop(e){
                if(e.stopPropagation){
                e.stopPropagation();
                }else{
e.cancelBubble()}
               }

将$(".red").attr("sth",4)装换成Js实现

知识点,得到的是数组,要遍历。

var a = document.getElementsByClassName("red"); 
for(var i =0;i

}

6. 作用域问题

var a = {n:1};
var b =a;
a.x=a={n:2};//a.x={n:2};a={n:2}
console.log(a.x);//undefined
console.log(b.x);//{n:2}

 理解,首先 `var a = {n:1}` a这里指向一个对象,`var b =a ` 则是将b也指
 向这个对象,第三行代码,实际是已经不共享对象了,a已经改写了,而b.x里面则添
 加了x = {n:2},故有上结果。
7. Boolean对象和Boolean值
 

var x = new Boolean(false);
if (x) {
alert("hi");
}
var y = Boolean(0);
if (y) {
alert("hello");
}
//alert("hi"),undefined

8.什么是跨域?跨域的几种实现方法?
 * 跨域是通过js在不同域进行数据传输或者通信,当端口号,协议,域名 不同的情况下,使用ajax是拿不到数据的。
 * 解决方法
 * 使用window.name进行跨域,
    a.html页面,比如说域名是www.abc.com/a.html;这里需要注意的是 数据只能是字符串形式。
  
 
  ```
   b.html页面,比如说www.baidu.com/b.html
 
  ```
  
  
  
  
  ```

用H5 window.postMessage,可自行百度。

9.判断当前浏览器的类型

var useAgent = window.navigator.useAgent;

if(useAgent.indexOf("Chorme")){
  alert("是Chorme浏览器")
};
if(useAgent.indexOf("Safari")){
  alert("是Safari浏览器")
};
if(useAgent.indexOf("Firefox")){
  alert("是Firefox浏览器")
};
 主要涉及的知识点 是考察window对象下的navgator对象的useAgent属性,得到是字符串,返回最字符串进行操作。
HTML5,CSS3初级,中级面试题

CSS3新特性有哪些?请做说明。不少于5条

选择器类(稍微特别一点的)

* first-child
* last-child
* nth-child
* :cheecked

文字样式

@font-face

 
       @font-face{
       font-family:BorderWeb;
       src:url(BorderWeb.eot)
       }
       .border{
       font-family:"BorderWeb"
       }
    

text-overflow & white-space & word-warp

       
        .ellipsis{text-overflow:ellipsis; 
        overflow:hidden;
        white-space:nowrap; 
        width:200px; background:#ccc;}
 

text-decoration为文本添加下划线 默认值none

边框,背景 样式

圆角 border-radius,四个参数 从上左到下右 4个方位

渐变,

线性渐变.

linear-gradient(left,#333,#999)(默认是从上到下)

第一个参数为方位,可以是对角,如left to。也可以是角度,注意这里是顺时钟,如180deg就是从下到上

径向渐变.

radial-gradient(center,circle,yellow 10%,bule 30%)

阴影,box-shadow.反射,box-reflect

背景,background-clip

布局

flex布局

多列布局column,参数column-count,column-gap,column-rule

动画,过渡

  * transition
  * transform
  * animation

HTML有哪些新特性?

新增标签

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84940.html

相关文章

  • 整理前端江湖面试自己有益题目

    摘要:面试题目汇总前言近期在找工作,也在读前端面试江湖这本书,书中整理了很多基础的面试题目,在书中也发现了一些错误。好记性不如烂笔头,于是整理下对自己有益的题目,都是一些较为基础的题目后期还会更新。,返回一个数组,成员为匹配的字符串。 面试题目汇总 前言 近期在找工作,也在读 前端面试江湖 这本书,书中整理了很多基础的面试题目,在书中也发现了一些错误。好记性不如烂笔头,于是整理下对自己有益的...

    hikui 评论0 收藏0
  • 整理前端江湖面试自己有益题目

    摘要:面试题目汇总前言近期在找工作,也在读前端面试江湖这本书,书中整理了很多基础的面试题目,在书中也发现了一些错误。好记性不如烂笔头,于是整理下对自己有益的题目,都是一些较为基础的题目后期还会更新。,返回一个数组,成员为匹配的字符串。 面试题目汇总 前言 近期在找工作,也在读 前端面试江湖 这本书,书中整理了很多基础的面试题目,在书中也发现了一些错误。好记性不如烂笔头,于是整理下对自己有益的...

    Terry_Tai 评论0 收藏0
  • 2017-08-27 前端日报

    摘要:前端日报精选如何合理地设计的深入了解一个超快的引擎也称全面了解作用域源码分析二奇淫技巧总结整理下前端江湖面试对自己有益的题目。 2017-08-27 前端日报 精选 如何合理地设计Redux的State深入了解一个超快的 CSS 引擎: Quantum CSS (也称 Stylo) ★ Mozilla Hacks全面了解JS作用域Zepto源码分析(二)奇淫技巧总结整理下《前端江湖面试...

    itvincent 评论0 收藏0
  • 金三银四,2019大厂Android高级工程师面试整理

    摘要:原文地址游客前言金三银四,很多同学心里大概都准备着年后找工作或者跳槽。最近有很多同学都在交流群里求大厂面试题。 最近整理了一波面试题,包括安卓JAVA方面的,目前大厂还是以安卓源码,算法,以及数据结构为主,有一些中小型公司也会问到混合开发的知识,至于我为什么倾向于混合开发,我的一句话就是走上编程之路,将来你要学不仅仅是这些,丰富自己方能与世接轨,做好全栈的装备。 原文地址:游客kutd...

    tracymac7 评论0 收藏0

发表评论

0条评论

QLQ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<