前端关于JavaScript面试题（六）

76.JavaScript 数组元素添加、删除、排序等方法有哪些？

Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素

77.如何添加 html 元素的事件，有几种方法？请列举

a、直接在标签里使用onclick添加
b、在元素上通过 js 添加: obj.onclick = method
c、使用事件注册函数添加: obj.addEventListener(‘click’, method, false);

78.使用闭包实现点击每一列的时候 alert 其 index？

<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

var lis=document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    //自调用函数
    li.onclick = (function(index){
        return function(e){
            alert(index);
        };
    })(i);
}

79.列出 3 条以上 ff 和 IE 的脚本兼容问题

1、在 IE 下和火狐下事件冒泡不一样
//阻止冒泡的兼容性写法
function stopBubble(event){
    var e=arguments.callee.caller.arguments[0]||event;
    if(e&&e.stopPropagation){
        e.stopPropagation()
    }else if(window.event){
    	//ie
        window.event.cancelBubble=true;
    }
}


//阻止浏览器默认行为的兼容性写法
function stopDefault(event){
    var e=arguments.callee.caller.arguments[0]||event;
    //阻止默认浏览器动作(W3C)
    if(e&&e.preventDefault){
        e.preventDefault();
    }else{
        //IE中阻止函数默认动作的方式
        window.event.returnValue=false;      
    }
    return false;
}


2、IE 的写法： tbody=table.childNodes[0]
	在 FF 中，firefox 会在子节点中包含空白则第一个子节点为空白""， 而 ie 不会返回空白
	可以通过 if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件
if(document.all){ //ie 下
	document.getElementById("a3").click();
}
else{ //非 IE
	var evt = document.createEvent("MouseEvents");
	evt.initEvent("click", true, true);
	document.getElementById("a3").dispatchEvent(evt);
}

4、事件注册
if (isIE){
   window.attachEvent("onload", init);
}else{
   window.addEventListener("load", function(){})

5、ajax对象的获取
   IE： ActiveXObject
   其他浏览器：XMLHttpRequest

6、firstElement等返回结果不一样

80.在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：有数组的部分特性，比如length、下标索引等，但是无法像数组一样调用数组的方法。
典型伪数组有：函数的argument参数、getElementsByTagName、document.childNodes返回的dom集合、jquery对象等等。

虽然伪数组不可以直接调用真正数组的方法，但是我们可以使用 Array.prototype.slice.call(fakeArray)来间接调用真正数组的方法。

81.正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么不同？匹配邮箱的正则表达式？

1.当使用 RegExp()构造函数的时候，需要转义符号（比如即\”表示”）
2.var reg=// 使用正则表达字面量的效率更高。

\d  数字
\w  数字、字母、下划线
\s   空白字符
\b  单词边界
n+  至少1个
n?  0个或1个
n*  0个或多个
[a-z]  a到z
[^a-z] 非a-z

邮箱正则： ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

82.jQuery 的 slideUp 动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

先 stop(true,true)后 slideUp()
stop("是否清空动画队列",“是否来到动画结束的状态”)

83.javascript 的本地对象，内置对象和宿主对象

1.本地对象为独立于宿主环境的 ECMAScript 提供的对象，包括 Array Object RegExp 等可以 new 实例化的对象
2.内置对象为 Gload，Math 等不可以实例化的(他们也是本地对象，内置对象是本地对象的一个子集)
3.宿主对象为所有的非本地对象，所有的 BOM 和 DOM 对象都是宿主对象，如浏览器自带的document,window 等对象

84.请说出三种减低页面加载时间的方法

1、压缩 css、js 文件
2、合并 js、css 文件，减少 http 请求
3、外部 js、css 文件放在最底下
4、减少 dom 操作，尽可能用变量替代不必要的 dom 操作

85.Javascript 作用域链?

JavaScript有全局作用域和函数作用域，没有块作用域(es6中使用let声明的变量有块级作用域)，函数的嵌套形成不同层次的作用域，嵌套的层次形成作用域链。

作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了。层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错

function f1() {
	//1级作用域
    var num = 123;
    function f2() {
    	//2级作用域
        console.log( num );
    }
    f2();
}
//0级作用域
var num = 456;
f1();

86.javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持

链接：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

全局变量显式声明
静态绑定
禁止使用 with 语句
eval 中定义的变量都是局部变量
禁止 this 关键字指向全局对象
禁止在函数内部遍历调用栈
严格模式下无法删除变量。只有 configurable 设置为 true 的对象属性，才能被删除
正常模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，
将报错。
严格模式下，对一个使用 getter 方法读取的属性进行赋值，会报错。
严格模式下，对禁止扩展的对象添加新属性，会报错。
严格模式下，删除一个不可删除的属性，会报错。
正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，
这属于语法错误。
正常模式下，如果函数有多个重名的参数，可以用 arguments[i]读取。严格模式下，这属于
语法错误。
正常模式下，整数的第一位如果是 0，表示这是八进制数，比如 0100 等于十进制的 64。严
格模式禁止这种表示法，整数第一位为 0，将报错。
不允许对 arguments 赋值
arguments 不再追踪参数的变化
禁止使用 arguments.callee
严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的
代码块内声明函数
严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。


严格模式的一些主要优点包括：
- 使调试更加容易。那些被忽略或默默失败了的代码错误，会产生错误或抛出异常，因此尽早提醒你代码中的问题，你才能更快地指引到它们的源代码。(实时显示错误代码，方便调试)
- 防止意外的全局变量。如果没有严格模式，将值分配给一个未声明的变量会自动创建该名称的全局变量。这是JavaScript中最常见的错误之一。在严格模式下，这样做的话会抛出错误。(如果一个变量在没声明就赋值，这个变量会自动变成全局变量，防止意外)
- 消除 this 强制。如果没有严格模式，引用null或未定义的值到 this 值会自动强制到全局变量。这可能会导致许多令人头痛的问题和让人恨不得拔自己头发的bug。在严格模式下，引用 null或未定义的 this 值会抛出错误。
- 不允许重复的属性名称或参数值。当检测到对象（例如，var object = {foo: "bar", foo: "baz"};）中重复命名的属性，或检测到函数中（例如，function foo(val1, val2, val1){}）重复命名的参数时，严格模式会抛出错误，因此捕捉几乎可以肯定是代码中的bug可以避免浪费大量的跟踪时间。(避免重复命名，变量，参数，等)
- 使eval() 更安全。在严格模式和非严格模式下，eval() 的行为方式有所不同。最显而易见的是，在严格模式下，变量和声明在 eval() 语句内部的函数不会在包含范围内创建（它们会在非严格模式下的包含范围中被创建，这也是一个常见的问题源）。(eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。)
- 在 delete使用无效时抛出错误。delete操作符（用于从对象中删除属性）不能用在对象不可配置的属性上。当试图删除一个不可配置的属性时，非严格代码将默默地失败，而严格模式将在这样的情况下抛出异常。

87.Javascript 中，有一个函数，执行对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

88.js模块化规范

#requirejs  AMD前台模块化规范
1、引入模块
require([dependencies],function(){});
    - 第一个参数是一个数组,表示所依赖的模块
- 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用.
- 加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

2、定义模块
define(id?,dependencies?,factory);
    - id: 定义中模块的名字;可选；
    - 	如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字.
    - 依赖dependencies：是一个当前模块依赖的,已被模块定义的模块标识的数组字面量
    - 工厂方法factory,模块初始化要执行的函数或对象.如果为函数,它应该只被执行一次.
    - 	如果是对象,此对象应该为模块的输出值.
    - 默认情况下文件名即为模块名


#seajs   CMD前台模块化规范
//声明模块
define(id?,d?,factory)
- id : 因为CMD推崇一个文件一个模块,所以经常就用文件名作为模块id
- d : CMD推崇依赖就近,所以一般不在define的参数中写依赖
- factory :函数   function(require,exports,module)
        require 是一个方法,用来获取其他模块提供的接口
        exports 是一个对象,用来向外提供模块接口
        module 是一个对象,上面存储了与当前模块相关联的一些属性和方法


//使用模块
seajs.use('mymodel.js',function(mymodel){
});


#commonjs   后台模块化规范
//1.模块的引入
const modu = require(‘./b.js’)

//2.模块的导出
//导出单个成员
exports.foo = “变量”
exports.add = function(){}

//导出多个成员
module.exports = {
}


#ES6模块化规范
//1.导出
//导出单个成员
export let name = 'leo';
export let age= 30;
let name= 'leo';
let age= 30;
let kk = "abc"
//导出多个成员
export {name, age};
//导出默认成员
export default kk;

//2.引入
import kk,{name,age} from 'a.js'

89.gulp、grunt、webpack

gulp、grunt、webpack都是前端自动化构建工具。gulp 和 grunt 非常类似，gulp强调的是前端开发的工作流程，核心都是基于一个个的任务(task)进行项目构建，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程

Webpack与Gulp、Grunt没有什么可比性，它把项目看成一个整体，是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。webpack is a module bundle