前端面试题

一、数组去重方法

1、双层循环，外层循环元素内层循环时比较值

2、利用splice直接在原数组进行操作，双层循环，外层循环元素内层循环时比较值值相同则删去，删除元素后，数组长度也减一；

  优点：简单易懂，缺点：占用内存高，速度慢

3、利用对象的属性不能相同的特点进行去重

4、数组递归去重

5、利用indexOf以及forEach

6、利用ES6的set，set数据结构类似于数组，其成员的值都是唯一的

Array.prototype.distinct = function (){
      var arr = this,
      result = [],
      len = arr.length;
      arr.forEach(function(v,i,arr){
      var bool = arr.indexOf(v,i+1);
          if(bool === -1){
               result.push(v);
           }
        }
     })
return result;
};
var a = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
var b = a.distinct()
console.log(b.toString())

二、link和@import的区别

1.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)

link引入的样式权重大于@import引入的样式。

 三、js延迟加载的方法

1.使用setTimeout延迟方法的加载时间

function A(){
    $.post("路径/lord/login",{name:username,pwd:password},function(){
        alert("hello");
    });
}
$(function(){
    setTimeout('A()',1000)
})

 

2.让js最后加载

 

四、什么是闭包？有什么特性？举个简单例子

闭包的实质是一个函数，是一个用于返回局部变量值的函数，因为在全局中，受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。由于闭包时，变量的值都保存到内存中，会导致页面加载时内存消耗很大，IE会导致内在泄露，因此尽量少用或用时要及时删除变量。

通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

特性：封闭性、持久性

优点：减少全局变量、减少传递函数的参数量、封装、

缺点：会占有内存资源，过多的使用会导致内存溢出等

var result = foo(1)(2);
alert(result);//输出 3
function foo(a){
    return function(b){
        return a+b;
    }
}

五、什么是use strict ?使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行

设立"严格模式"的目的，主要有以下几个：

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

2. 消除代码运行的一些不安全之处，保证代码运行的安全；

3. 提高编译器效率，增加运行速度；

4. 为未来新版本的Javascript做好铺垫。

注：经过测试 IE6,7,8,9 均不支持严格模式。

缺点：

现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

 reverse() 方法用于颠倒数组中元素的顺序

六、什么盒子模型？

每个盒子都有：边界、边框、填充、内容四个属性

内容(content)、填充(padding)、边框(border)、边界(margin)

七、typeof返回哪些数据类型？

 

• Object 对象或者null返回的是object
• number
• function
• boolean
• underfind 未定义
• string

八、doctype作用，有多少种doctype文档类型？

DOCTYPE是document type(文档类型的）的简写。用来说明你用的是XHTML获HTML是什么版本

一共有三种

1.过渡的：是一种很不严格的文档类型定义；写法是这样的："http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.严格的：一种严格的文档类型定义，不允许使用任何表现层的标示和属性，："http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.框架的：一种针对于框架的，当页面上有框架的时候就要使用这个文档类型定义："http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

九、null和undefind的区别？

undefined则表示未定义

null是为空

1.event.stopPropagation()方法，这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

2.event.preventDefault()方法，这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false  ，这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

 

shift:从集合中把第一个元素删除，并返回这个元素的值。

unshift: 在集合开头添加一个或更多元素，并返回新的长度

push:在集合中添加元素，并返回新的长度

pop:从集合中把最后一个元素删除，并返回这个元素的值

 

十、3种强制类型转换和2种隐式类型转换

3种强制类型转换：String()，Boolean()，Number()；

2种隐式类型：+和-

十一、判断是否为数据的方法

1、使用Instanceof检测对象类型是否为数组

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

2、使用对象原型中的constructor构造器属性检测是否为数组

function isArray(arr){
    return typeof arr == 'object' && arr.constructor == Array;
}

3、【第三种方法】

使用最新的Array对象的isArray()方法判断，但是存在兼容性问题，IE9或以上版本。

Array.isArray([2,3]);

4、【第四种方法】最完美的方法

使用原型对象的toString()方法实现，该方法可获取对象的隐藏属性class名字，

function isArray(arr){
    return Object.prototype.toString.call(arr) == '[object Array]';
}

js中字符截取函数有常用的三个slice()、substring()、substr()

slice()
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串.

substring()
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.

substr()
第一个参数代表开始位置,第二个参数代表截取的长度

 

PS：字符串都从0开始计起