WEB前端面试题汇总整理01

1.JS找字符串中出现最多的字符

比如说:求字符串’nininihaoa’中现身次数最多字符

方法一:

var str = "nininihaoa";
    var o = {};
    for (var i = 0, length = str.length; i < length; i++) {
        var char = str.charAt(i);
        if (o[char]) {
            o[char]++;  //次数加1
        } else {
            o[char] = 1;    //若第一次出现,次数记为1
        }
    }
    console.log(o);   //输出的是完整的对象,记录着每一个字符及其出现的次数
    //遍历对象,找到出现次数最多的字符的次数
    var max = 0;
    for (var key in o) {
        if (max < o[key]) {
            max = o[key];   //max始终储存次数最大的那个
        }
    }
    for (var key in o) {
        if (o[key] == max) {
            //console.log(key);
            console.log("最多的字符是" + key);
            console.log("出现的次数是" + max);
        }
    } 

结果如图所示:

Ajax 1

主意贰,当然还足以行使reduce方法来贯彻:

var arrString = 'abcdaabc';

arrString.split('').reduce(function(res, cur) {
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
}, {})

想详细精晓reduce()方法,能够参见:《JS进阶篇–JS数组reduce()方法详解及高等技艺

 

贰.JS兑现九九乘法表

 

jQuery达成格局:

var sum=0;
var wite;
for (var i = 1; i < 10; i++){
        var div=$('<div class="class'+i+'"></div>');
        $("body").append(div);
        for(var j = i; j > 0; j--){
                sum = j * i;
                wite = (j+"X"+i+"="+sum);

                div.prepend($(''+wite+''));
        }

} 

落实结果如图所示:

Ajax 2

原生js完毕情势:
css代码:

html,body,ul,li {
    padding: 0; 
    margin: 0; 
    border: 0; 
}
ul { 
    width: 900px;
    overflow: hidden;
    margin-top: 4px;
    font-size: 12px; 
    line-height: 36px;
}
li { 
    float: left; 
    width: 90px; 
    margin: 0 4px; 
    display: inline-block; 
    text-align: center; 
    border: 1px solid #333; 
    background:yellowgreen; 
}

js代码:

for(var i = 1; i <= 9; i++){
    var myUl = document.createElement('ul');
    for(var j = 1; j <= i; j++){
        var myLi = document.createElement('li');
        var myText = document.createTextNode(j + " × " + i + " = " + i*j);
        myLi.appendChild(myText);
        myUl.appendChild(myLi);
    }
    document.getElementsByTagName('body')[0].appendChild(myUl);
}

原生js达成效益如图所示:

Ajax 3

三.前端面试:这几道前端面试题很绕吗?做对了几道?

第一题

var fun = function(){
    this.name = 'peter';
    return {
    name: 'jack'
    };
}

var p = new fun();
//请问p.name是:

第二题

var fun = function(){
    this.name = 'peter';

    return 'jack';    
    }

var p = new fun();
//请问p.name是:

第三题

var fun = function(){}

fun.prototype = {
    info : {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';

//请问a.info.name和b.info.name分别是:

第四题

var fun = function(){
    this.info = {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';
//请问a.info.name和b.info.name分别是:

第五题

var fun = function(){}

fun.prototype = {    
    name : 'peter',    
    age : 25    
}

var a = new fun();
var b = new fun();

a.name = 'jack';
b.name = 'tom';
//请问a.name和b.name分别是:

第六题

var fun = function(){
    this.info = {
    name : 'peter',
    age : 25
    }
}

fun.prototype = {
    info : {
    name : 'peter',
    age : 25
    }
}

var a = new fun();
var b = new fun();

a.info.name = 'jack';
b.info.name = 'tom';
//请问a.info.name和b.info.name分别是:

 

解答:

1,2题考查的是构造函数的再次来到值的标题。

各样函数都有重回值,假使选择了return语句,则返回return后跟的值,假若未有动用return,则暗中同意再次来到undefined.
专门的,假诺这些函数是构造函数,则暗中同意重临this对象,倘诺构造函数Nelly用了return语句,并且return后跟的是3个对象,则这一个构造函数重返的是那个指标,不然重临this.
所以1题中的p = {name: 'jack'},而2题中的p = {name: 'peter'}.

三, 4, 五, 六题都以观望prototype的知识。

三.五个都输出tom。首先你要明白原型形式的实践流程:

1.先查找构造函数实例里的属性或方法,如果有,就立即返回。
2.如果构造函数的实例没有,就去它的原型对象里找,如果有,就立即返回

4 .a.info.name 为jackb.info.nametom。原因小编想你从第二题已经得出去了。

5.a.name输出jack,b.name输出tom。原因笔者想你从第一题已经得出去了。

6.a.info.name 为jackb.info.nametom。原因作者想你从第1题已经得出来了。

留意:第1题
a.info.name这段代码,首先去做客了实例对象自作者是或不是有info那么些指标,发现未有就去原型上查找了,发现原型上有,所以地点共享了获得的值都以Tom;第4题是有分其他,a.name实例自个儿未有,给当下a这么些实例对象奉行赋值操作,未有去访问原型上的name。就一定于第3题先走访了原型上的info对象,第5题未有访问进度,只是在实例上增多了name属性值。

四.透过演示搞懂JS闭包

例1

function sayHello(name) 
{
 var text = 'Hello ' + name;
 var sayAlert = function() { console.log(text); }
 sayAlert();
}
sayHello("Bob") // 输出"Hello Bob"

在sayHello()函数中定义并调用了sayAlert()函数;sayAlert()作为内层函数,能够访问外层函数sayHello()中的text变量。

例2

function sayHello2(name) 
{
 var text = 'Hello ' + name; // 局部变量
 var sayAlert = function() { console.log(text); }
 return sayAlert;
}

var say2 = sayHello2("Jane");
say2(); // 输出"Hello Jane"

例3

function buildList(list) {
 var result = [];
 for(var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push( 
        function() {
            console.log(item + ' ' + list[i]);
        } 
     );
 }
 return result;
}

var fnlist = buildList([1,2,3]);
for (var j = 0; j < fnlist.length; j++) {
    fnlist[j](); 
}

获得的结果:接二连三输出三个”item三 undefined”
浅析:通过试行buildList函数,重回了3个result,那么这些result存放的是一个匿名函数。不过这八个匿名函数其实正是多个闭包,因为它可以访问到父函数的有的变量。所以闭包内的保留的i是最终的值为三.所以list[3]毫无疑问是undefined.
item变量值为item3.

改成如下代码:

function buildList(list) {
 var result = [];
 for(var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push( 
        (function(i) {
            console.log(item + ' ' + list[i]);
        })(i)
     );
 }
 return result;
}

var fnlist = buildList([1,2,3]);

赢得的结果:

item1 1
item2 2
item3 3

释疑:那儿即便传递了1个数组进去,不过回到的是多少个自推行的函数。

例4

function newClosure(someNum, someRef) 
{
 var anArray = [1,2,3];
 var num = someNum;
 var ref = someRef;
 return function(x) 
 {
 num += x;
 anArray.push(num);
 console.log('num: ' + num + "; " + 'anArray ' + anArray.toString() + "; " + 'ref.someVar ' + ref.someVar);
 }
}
closure1 = newClosure(40, {someVar: "closure 1"}); 
closure2 = newClosure(1000, {someVar: "closure 2"}); 
closure1(5); // 打印"num: 45; anArray 1,2,3,45; ref.someVar closure 1"
closure2(-10); // 打印"num: 990; anArray 1,2,3,990; ref.someVar closure 2"

历次调用newClosure()都会创制独立的闭包,它们的片段变量num与ref的值并不相同样。

例5

function sayAlice() 
{
 var sayAlert = function() { console.log(alice); }
 var alice = 'Hello Alice';
 return sayAlert;
}

var sayAlice2 = sayAlice();
sayAlice2(); // 输出"Hello Alice"

alice变量在sayAlert函数之后定义,那绝非影响代码实践。因为重返函数sayIris二所针对的闭包会蕴涵sayIris()函数中的全部片段变量,那本来包涵了alice变量,因而能够平常打字与印刷”Hello
Alice”。

例6

function setupSomeGlobals() {
 var num = 666;
 gAlertNumber = function() { console.log(num); }
 gIncreaseNumber = function() { num++; }
 gSetNumber = function(x) { num = x; }
}
setupSomeGlobals();
gAlertNumber(); // 输出666
gIncreaseNumber();
gAlertNumber(); // 输出667
gSetNumber(5);
gAlertNumber(); // 输出5

分解:首先gAlertNumber,gIncreaseNumber,gSetNumber是七个全局变量,并且其三个值都是匿名函数,不过那四个匿名函数本人都以闭包。他们操作的num都以保存在内部存款和储蓄器中的同贰个num,所有会得出地方的结果。

五.JS重复出口三个加以的字符串

如下:

再一次输出两个加以的字符串(str先是个参数)n 次
num第二个参数),假使第一个参数num不是正数的时候,再次来到空字符串。

function repeatStringNumTimes(str, num) {
  return str;
}
repeatStringNumTimes("abc", 3);

提供测试意况:

repeatStringNumTimes("*", 3) //应该返回 "***".
repeatStringNumTimes("abc", 3) //应该返回 "abcabcabc".
repeatStringNumTimes("abc", 4) //应该返回 "abcabcabcabc".
repeatStringNumTimes("abc", 1) //应该返回 "abc".
repeatStringNumTimes("*", 8) //应该返回 "********".
repeatStringNumTimes("abc", -2) //应该返回 "".

解题思路

自己将介绍二种方法:

  1. 使用 `while` 循环
  2. 行使递归
  3. Ajax,使用ES6 `repeat()`

方法1:通过 `while` 循环重复输出多少个字符串

function repeatStringNumTimes(string, times) {
  var repeatedString = "";
  while (times > 0) {
    repeatedString += string;
    times--;
  }
  return repeatedString;
}
repeatStringNumTimes("abc", 3);

可是那里还足以有多少个变种:

对于老前端来说,首先1个恐怕会将字符串拼接,修改为
数组join()拼接字符串,例如:

function repeatStringNumTimes(string, times) {
  var repeatedArr = []; //
  while (times > 0) {
    repeatedArr.push(string);
    times--;
  }
  return repeatedArr.join("");
}
repeatStringNumTimes("abc", 3)

重重老前端都有用数组join()拼接字符串的“情怀”,因为很早此前普及以为数组join()拼接字符串比字符串+东拼西凑速度要快得多。可是今后不一定,例如,V8下+拼接字符串,要比数组join()拼接字符串快。作者用那多个艺术测试了三万次重复输出,只相差了几飞秒。

另一个变种能够用 for 循环:

function repeatStringNumTimes(string, times) {
  var repeatedString = "";
  for(var i = 0; i < times ;i++) {
    repeatedString += string;
  }
  return repeatedString;
}
repeatStringNumTimes("abc", 3)

情势2:通过标准推断和递归重复输出三个字符串

递归是一种通过重复地调用函数本身,直到它到达达结果得了的迭代操作的本事。为了使其健康办事,必须总结递归的一对至关心着重要天性。

function repeatStringNumTimes(string, times) {
  if(times < 0) 
    return "";
  if(times === 1) 
    return string;
  else 
    return string + repeatStringNumTimes(string, times - 1);
}
repeatStringNumTimes("abc", 3);

方法3:使用ES6 `repeat()` 方法重复输出二个字符串

那么些消除方案相比较新潮,您将动用 String.prototype.repeat() 方法:

repeat()
方法构造并回到三个新字符串,该字符串包罗被接连在协同的钦定数量的字符串的别本。
这么些主意有贰个参数 count 表示重复次数,介于0和正无穷大之间的平头 :
[0, +∞)
。表示在新布局的字符串中重新了有些遍原字符串。重复次数不能够为负数。重复次数必须低于
infinity,且长度不会胜出最长的字符串。

function repeatStringNumTimes(string, times) {
  if (times > 0)
    return string.repeat(times);
  else
    return "";
}
repeatStringNumTimes("abc", 3);

您可以行使三元表达式作为 if/else 语句的急迅格局,如下所示:

function repeatStringNumTimes(string, times) {
  return times > 0 ? string.repeat(times) : "";
}
repeatStringNumTimes("abc", 3);

转发地址:http://www.css88.com/archives/7045

陆.函数注明相关

var x=1,
    y=0,
    z=0;
function add(n){
    n=n+1;
}
y=add(x);
z=x+y;
console.log("y1:"+y);
console.log("z1:"+z);

function add(n){
    n=n+3;
}
y=add(x);
z=x+y;
console.log("y2:"+y);
console.log("z2:"+z);

求y,z的值。

结果为:

y1:undefined
z1:NaN
y2:undefined
z2:NaN

变迁一下:

var x=1,
    y=0,
    z=0;
function add(n){
    return n=n+1;
}
y=add(x);
z=x+y;
console.log("y1:"+y);
console.log("z1:"+z);

function add(n){
   return n=n+3;
}
y=add(x);
z=x+y;
console.log("y2:"+y);
console.log("z2:"+z);

求y,z的值

答案:

y1:4
z1:5
y2:4
z2:5

柒.功能域范围(Scope)

观念以下代码:

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

控制台(console)会打字与印刷出什么样?

答案
上述代码会打字与印刷出5
本条题指标骗局正是,在当下奉行函数表明式(IIFE)中,有七个命名,不过当中变量是经过重大词var来声称的。那就意味着a是以此函数的壹些变量。与此相反,b是在全局意义域下的。

其一难点另三个骗局便是,在函数中她从没动用”严格模式
(‘use strict’;)。假使 严厉形式开启,那么代码就会报出未捕获引用错误(Uncaught ReferenceError):b未有定义。记住,严峻格局须求您在急需采纳全局变量时,分明地引用该变量。因而,你须要像下边这么写:

(function(){
    'use strict'
    var a = window.b = 5;
})();
console.log(b);

再看如下贰个例证:

var a = 6;
setTimeout(function () {
    alert(a);
    a = 666;
}, 1000);
a = 66;

结果:66

8.创建 “原生(native)” 方法

在 String 对象上定义三个 repeatify 函数。那一个函数接受四个平头参数,来威名昭著字符串须要再行三次。那么些函数供给字符串重复钦定的次数。举个例子:

console.log('hello'.repeatify(3));

相应打字与印刷出hellohellohello.

答案:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';

   for (var i = 0; i < times; i++) {
      str += this;
   }

   return str;
};

在此间,另一个关键点是,看你什么幸免重写可能早就定义了的主意。那可以通过在概念自个儿的秘技此前,检查实验方法是或不是曾经存在。

String.prototype.repeatify = String.prototype.repeatify || function(times){
    /*code here*/
};

当您供给为旧浏览器落成向后分外的函数时,这一本事十一分得力。

玖.变量升官(Hoisting)

实行以下代码的结果是怎么着?为啥?

function test() {
   console.log(a);
   console.log(foo());

   var a = 1;
   function foo() {
      return 2;
   }
}

test();

答案:

那段代码的进行结果是undefined 和 2

本条结果的原委是,变量和函数都被升高(hoisted) 到了函数体的顶部。由此,当打印变量a时,它虽存在于函数体(因为a早就被声称),但照旧是undefined。换言之,上边的代码等同于上面包车型地铁代码:

function test() {
   var a;
   function foo() {
      return 2;
   }

   console.log(a);
   console.log(foo());

   a = 1;
}

test();

再看如下代码:

(function() {
   console.log(typeof foo); 
   console.log(typeof bar); 

   var foo = 'hello',
       bar = function() {
           return 'world';
       };

   function foo() {
       return 'hello';
   }

}());

结果:

function
undefined

十. 在javascript中,this是什么行事的

以下代码的结果是什么样?请表明你的答案。

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

答案:

那段代码打字与印刷结果是:Aurelio De Rosa 和 John Doe 。原因是,JavaScript中第一字this所引用的是函数上下文,取决于函数是什么样调用的,而不是怎么被定义的。

在首先个console.log()getFullname()是作为obj.prop指标的函数被调用。因而,当前的上下文指代后者,并且函数重返那一个指标的fullname属性。相反,当getFullname()被赋值给test变量时,当前的上下文是全局对象window,那是因为test被隐式地看成全局对象的性质。基于那或多或少,函数重临windowfullname,在本例中即为第三行代码设置的。

11.call() 和 apply()

修复前3个主题素材,让最后3个console.log() 打字与印刷输出Aurelio De Rosa.

答案:

那一个主题材料得以经过行使call()或者apply()措施强制调换上下文环境。

console.log(test.call(obj.prop));

12.闭包(Closures)

设想下边包车型大巴代码:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + i);
   });
}

借问,就算用户点击第二个和第多少个开关的时候,调控台分别打字与印刷的结果是何等?为何?

答案:

一回打字与印刷都以nodes.length的值。

这正是说修复上题的难点,使得点击第二个按键时输出0,点击第叁个开关时输出1,就那样类推。

有各样办法能够缓解这几个难题,下边重要运用二种办法化解那么些标题。

第一个缓解方案使用即时实行函数表达式(IIFE)再次创下立一个闭包,从而获得所愿意的i的值。实现此办法的代码如下:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', (function(i) {
      return function() {
         console.log('You clicked element #' + i);
      }
   })(i));
}

另一个化解方案不行使IIFE,而是将函数移到循环的外围。那种艺术由下边包车型地铁代码完结:

function handlerWrapper(i) {
   return function() {
      console.log('You clicked element #' + i);
   }
}

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', handlerWrapper(i));
}

代码片段一:

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function(){
       return this.name;
    };
   }
  };
alert(object.getNameFunc()());

结果:The Window

代码片段贰:

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    var that = this;
    return function(){
      return that.name;
    };
  }
};

alert(object.getNameFunc()()); 

结果:My Object

小说地址:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

 

一3.数据类型难题

 

思索如下代码:

 

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

 

答案:

 

object
object
object
undefined

 

14.事变循环

 

上面代码运营结果是哪些?请解释。

 

function printing() {
   console.log(1);
   setTimeout(function() { console.log(2); }, 1000);
   setTimeout(function() { console.log(3); }, 0);
   console.log(4);
}
printing();

 

答案:

 

1
4
3
2

 

想精通怎么输出顺序是那般的,你必要弄领会setTimeout()做了何等,以及浏览器的事件循环规律。浏览器有二个风浪循环用于检查事件队列,处理延迟的事件。UI事件(例如,点击,滚动等),Ajax回调,以及提须求setTimeout()setInterval()的回调都会相继被事件循环处理。由此,当调用setTimeout()函数时,固然延迟的年华被设置为0,提供的回调也会被排队。回调会呆在队列中,直到钦点的时刻用完后,引擎开首试行动作(若是它在近来不执行此外的动作)。因而,固然setTimeout()回调被推迟0微秒,它依然会被排队,并且直到函数中其余非延迟的说话被施行完了随后,才会执行。

 

壹5.算法题目

 

写一个isPrime()函数,当其为质数时再次回到true,不然重返false

 

答案:

 

自己觉着这是面试中最常见的主题材料之1。但是,即使这么些标题常常出现并且也异常的粗略,不过从被面试人提供的答案中能很好地见到被面试人的数学和算法水平。

 

首先,
因为JavaScript不一样于C只怕Java,由此你不能够相信传递来的数据类型。假若面试官未有分明地告诉您,你应当了解她是否供给做输入检查,依然不开始展览检查间接写函数。严苛上说,应该对函数的输入举办自作者批评。

 

其次点要记住:负数不是质数。一样的,一和0也不是,因而,首先测试这个数字。其余,2是质数中绝无仅有的偶数。完全没有需要用二个循环来验证4,陆,8。再则,假使2个数字不可能被2整除,那么它不可能被4,陆,八等整除。由此,你的循环必须跳过那个数字。若是您测试输入偶数,你的算法将慢二倍(你测试双倍数字)。能够选取其它部分更明智的优化手段,笔者那边运用的是适用于超越11分之5动静的。例如,固然贰个数字不可能被5整除,它也不会被5的翻番整除。所以,大可不必检验十,一伍,20之类。

 

最后一点,你不供给检查比输入数字的开药方还要大的数字。小编倍感人们会遗漏掉那或多或少,并且也不会因为此而收获衰颓的报告。但是,展现出那1方面包车型大巴学问会给您额外加分。

 

明天您富有了那几个题指标背景知识,上面是总括以上全部思量的化解方案:

 

function isPrime(number) {
   // If your browser doesn't support the method Number.isInteger of ECMAScript 6,
   // you can implement your own pretty easily
   if (typeof number !== 'number' || !Number.isInteger(number)) {
      // Alternatively you can throw an error.
      return false;
   }
   if (number < 2) {
      return false;
   }

   if (number === 2) {
      return true;
   } else if (number % 2 === 0) {
      return false;
   }
   var squareRoot = Math.sqrt(number); //平方根,比如Math.sqrt(9)为3
   for(var i = 3; i <= squareRoot; i += 2) {
      if (number % i === 0) {
         return false;
      }
   }
   return true;
}

 

中间代码中用到了Number.isInteger(),该办法是ES陆形式,用来剖断三个值是或不是为整数。

 

例如:

 

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

 

必要注意的是,在JavaScript内部,整数和浮点数是同样的囤积方法,所以 style=”color: #c725四e; background-color: #f玖f2f四;”>25和 style=”color: #c725肆e; background-color: #f九f贰f四;”>25.0被视为同一个值。

16.记腾讯1遍倒霉的笔试面试经历(转)

JS考察

一、基本数据类型:undefined、null、String、Number、boolean。
②、有以下七个函数,定义多个目的使其兼具那三个函数属性。

function mobile(){
        return  'mobile';
    }
    function phone(){
        return 'phone';
    }
    var a = {};
    a.mobile = mobile();
    a.phone = phone();
    console.log(a);

叁、(侦查了目的变量和堆内部存款和储蓄器)

 var a = {n:10,m:20};
 var b = a;
 b.n = 30;
 console.log(a.n);
 console.log(b);

结果:

30
Object {n: 30, m: 20}

肆、(考查闭包)

var x = 20;
    var a = {
        x : 15,
        fn : function(){
            var x = 30;
            return function(){
                return this.x;
            };
        }
    };
    console.log(a.fn());
    console.log((a.fn())());
    console.log(a.fn()());
    console.log(a.fn()() == (a.fn())());
    console.log(a.fn().call(this));
    console.log(a.fn().call(a));

结果:

1)、function(){return this.x;}
2)、20
3)、20
4)、true
5)、20
6)、15

伍、(数组去重新项)

var arr = ['a','g','q','d','a','e','q'];
    Array.prototype.unique = function(){
        for(var i = 0; i < this.length; i++){
            for(var j = i+1; j < this.length; j++){
                if(this[i] == this[j]){
                    this.splice(j,1);
                }
            }
        }
        return this;
    };
    console.log(arr.unique());

此方法有通病,比如var arr =
[‘a’,’a’,’a’,’g’,’q’,’d’,’a’,’e’,’q’]; 那么获得的结果:[“a”, “a”, “g”, “q”,
“d”,
“e”]。知道原委吗?不知情请查看数组去重的法门《JS基础篇–JS达成数组去重方法总计

陆、编写贰个函数fn(Number
n),将数字转为大写输出,如输入1贰三,输出一百二十三

function fn(n){
        if(!/^([1-9]\d*)/.test(n)){
            return '非法数据';
        }
        var unit = '千百十亿千百十万千百十个';
        if(n.length > unit.length){
            return '数据过长';
        }
        var newStr = '';
        var nlength = n.length;
        unit = unit.substr(unit.length - nlength);
        for(var i = 0; i < nlength; i++){
            newStr += '零一二三四五六七八九'.charAt(n[i]) + unit.charAt(i);
        }
        newStr = newStr.substr(0,newStr.length-1);
        newStr = newStr.replace(/零(千|百|十)/g,'零').replace(/(零)+/g,'零').replace(/零(亿|万)/g,'$1');
        return newStr;
    }
    console.log(fn('205402002103'));

CSS

一、考查了盒子模型
二、内联成分、块成分
3、css三的贝塞尔曲线(张鑫旭大神的表达
肆、弹性盒子flexbox

归纳调查

一、js跨域难点

算法侦查

壹、有3陆辆机动赛车和陆条跑道,未有计时器的前提下,最少用几遍交锋能够筛选出最快的叁辆赛车?

2、一面墙,单独工作时,A花1八小时砌好,B花二4小时,C花30钟头,现A, B,
C的逐条轮流砌,每人工作壹钟头换班,完工作时间,B总共干了有点小时?

A. 9小时
B. 8小时
C. 7小时
D. 6小时48分

答案:B,C

原因:

依据A,BC轮流砌,未有表达什么人先起来。

1/18 + 1/24 + 1/30 = 47/360;

共同达成7钟头:七*47/360 = 329/360,还差31/360;

如果A先砌:则B砌了7小时44分钟。

如果B先砌:则B砌了8小时。

如果C先砌:则B砌了7小时。

一七.语义化标签

1)tite与h1的区别

2)b与strong的区别

3)i与em的区别

PS:不要小看这么些题,五分之四人答不上来

 

title与h1的区别

概念:title是网址标题,h一是小说宗旨

意义:title回顾网址消息,能够一贯告知寻找引擎和用户那一个网址是有关怎么着核心和剧情的,是呈现在网页Tab栏里的;h一优良文章主题,面对用户,更优秀其视觉效果,指向页面主体消息,是浮今后网页中的。

b与strong的区别

概念:b(bold)是实业标签,用来给文字加粗,而strong是逻辑标签,成效是升高字符语气

分化:b标签只是加粗的体制,未有实际意义,常用来发布无重申或重大要味的粗体文字,比如文摘中的关键词、评测小说中的产品名称、小说的导言;
而strong表示标签内字符首要,用以重申,其暗许格式是加粗,可是足以由此CSS增加样式,使用其余样式重申。

提出:为了顺应CSS3的规范,b应尽量少用而改用strong

i与em的区别

概念:i(italic)是实体标签,用来使字符倾斜,而em(emphasis)是逻辑标签,效用是重申文本内容

区分:i标签只是斜体的样式,没有实际意义,常用来表明无重申或重轮廓味的斜体,比如生物学名、术语、外来语(比如「de
facto
」那样的丹麦语里常用的拉丁语短语);而em代表标签内字符主要,用以重申,其私下认可格式是斜体,可是足以由此CSS增多样式

提出:为了契合CSS三的正规化,i应尽量少用而改用em

 

下边扩充部分其余的竹签属性不同:

img中的alt与title属性

alt属性是在你的图形因为某种原因无法加载时在页面显示的提醒信息,它会一向出口在原本加载图片的地方

title属性是在你鼠标悬停在该图形上时显得八个小提醒,鼠标离开就平素不了,有点类似jQuery的hover

src与href的区别

概念:href钦赐互联网财富的地方树立链接或涉嫌,用在link和a等因素上。src将表面能源嵌入到当下标签所在地点,如img图片和js脚本等

分别:大家在可替换的因素上使用src,可是把href用于在事关的文书档案和表面能源之间确立三个关系。
浏览器解析src属性时,会半途而返别的财富的下载和处理,直至将该能源加载,编译,推行实现。
浏览器解析到href的时候会识别该链接内容,对其进展下载不会停下对脚下文书档案的拍卖

1八.风云绑定相关

add伊夫ntListener,第11个参数是用来表示事件是以事件冒泡照有趣的事件捕获那几个各位都掌握!不过他问的难题是:

大家给一个dom同时绑定四个点击事件,二个用捕获,1个用冒泡,你来讲下会实践两遍事件,然后会先实践冒泡依然捕获!!!

来吧,哪个人能说出去。。。。

1九.CSS接纳器难点

考查优先级难点,反正会出大多不三不肆的变形,比如将style标签写在body后与body前有哪些分别,比就像一dom应用两个class其应有怎么样展现,比如class
a定义颜色为blue,class
b定义颜色为red,同时选择到dom上,dom作何展现。。。

好呢各位去应对吧。。。。。

20.1段关于JS中this应用奇葩代码引发的合计

function DemoFunction(){
    this.init = function(){
        var func = (function(va){
        this.va = va;
        return function(){
            va += this.va;
            return va;
        }
        })(function(va1, va2){
            var va3 = va1 + va2; 
            return va1;
        }(1,2));
        console.log(func(20));

        this.func = func;

        console.log(this.func(100));
    }
}
var a = new DemoFunction();
a.init();

结果:

2
NAN

先是大家得有如下多少个概念:

详细解释此段代码

一、首先看德姆oFunction的构造函数

这是代码的根本,第三层代码能够减掉为如下:

function DemoFunction(){
    this.init = function(){
        //省略代码....
    }
}

意味着为德姆oFunction的实例提供init方法(评释:此处有误导成分,方法应尽量放在原型链接上,也便是prototype上。),对外公开的接口。

贰、在init方法中,再一次省略代码如下:

var func = (function(va){
    this.va = va;
    return function(){
        va += this.va;
        return va;
    }
})(/*省略代码...*/);

//省略代码....

地点代码介绍:

  • 先是定义了2个及时推行函数,并把此函数的试行结果赋值给func。

  • 急需专注及时实践函数中this.va=va那行代码,由于当时施行函数未有调用者,所以在进入可实行上下文时,this会被赋值为Global(浏览器中为window对象)。

  • 更亟待专注及时实行函数,再次回到的是二个匿名函数,也是一个闭包,在此间分明要专注三个难题:this是在进入可实践上下文时创立的。

3、在init方法中,注意如下代码:

var func = (function(va){
    this.va = va;
    return function(){
        va += this.va;
        return va;
    }
})(function(va1, va2){
    var va3 = va1 + va2;
    return va1;
}(1,2));
//省略代码....

va的实际参数是三个自实施匿名函数,这几个匿名函数接受了多个参数va一,va2,但只回去了va一。以此为据,那么能够规定va的值也就为1。接着就实施this.va=va那句代码,由于方今this为window,所以参数va的值被赋值到了window的多少个叫va的属性上。

4、在init方法中,加上输出语句:

var func = (function(va){
    this.va = va;
    return function(){
        va += this.va;
        return va;
    }
    })(function(va1, va2){
        var va3 = va1 + va2;
        return va1;
    }(1,2));

    console.log(func(20));

    this.func = func;
    console.log(this.func(100));
}

结果分析:

  • 首先个console.log输出的是func(20),那里一定要小心调用者是不曾具体内定的,此时暗中认可的就是Global(也正是widnow对象),因而输出为:2

  • 第一个console.log输出的是this.func(拾0),能够见到this.func与func是指向同3个函数的引用,但那时的调用者则钦赐为this,也便是日前指标的实例,因而输出为:NaN。原因:this(当前指标的实例)作为调用者,在func的函数中va
    +=
    this.va那句代码中的this是指向当前指标的实例,但当下目的的实例上是未有va属性的。可是va是有值的,当前值为二了。是因为闭包把va值存到内部存款和储蓄器中了。那么哪些让第四回获得的值也是二啊,结果很简短,如下:

    function DemoFunction(){

    this.va = 0;
    this.init = function(){
        var func = (function(va){
        this.va = va;
        return function(){
            va += this.va;
            return va;
        }
        })(function(va1, va2){
            var va3 = va1 + va2; 
            return va1;
        }(1,2));
        console.log(func(20));
    
        this.func = func;
    
        console.log(this.func(100));
    }
    

    }
    var a = new DemoFunction();
    a.init();

一连面试题稳步增进

 

相关文章