整理前端面试题(四) : JavaScript题目

1. 普通事件和事件绑定有什么区别

• 普通事件
  • 给html元素添加特定的属性
  • 采用<div onclick="doSomeThing()">点我</div>
  • 采用document.querySelector('div').onclick = function(){}
  • 普通事件只能为同一个元素添加单个事件, 后面的事件会覆盖掉前面的事件
• 事件绑定
  • 使用addEventListener()添加事件
  • 采用事件绑定可以为其添加多个事件, 其事件的执行顺序是从最先添加的事件开始依次执行

---

2. addEventListener()和attachEvent()的区别

• addEventListener()是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法
• addEventListener()支持事件冒泡和事件捕获; 而attachEvent()只支持事件冒泡
• addEventListener()的第一个参数中,事件类型不需要添加on; attachEvent()需要添加'on'
• 如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行, attachEvent()会按照事件绑定的顺序倒序执行.

---

3. 闭包是什么?有什么特性?

(1) 闭包: 在函数运行时形成的封闭的区间闭包.(另外一种说法是,闭包是能够访问其他函数内部变量的函数. 个人不赞同这个说法.)

(2) 特性:

• 在闭包内部的能够访问外部的变量, 但是外部的变量不能够直接访问到闭包内部的变量
• 在采用闭包实现私有作用域的时候, 因内存不被释放, 所有会一直占用内存.
• 可以使用闭包实现沙箱模式, 放置全局污染问题的出现.

---

4. 如何阻止事件冒泡和html标签的默认行为

(1) 阻止事件冒泡:

• IE8及以下: window.event.cancelBubble = true
• IE9及以上/Chorme/Firefox: event.stopPropagation()

(2) 阻止html标签的默认行为:

• IE8及以下: window.event.returnValue = false
• IE9及以上/Chorme/Firefox: event.preventDefault()

---

5. 编写一个数组去重的方法

方法1:采用数组的filter方法

function filterRepetition ( arr ) {
    return arr.filter(function ( item, index, array ){
        return array.indexOf( item ) === index;
    })
}

方法2:采用缓存的方法

function filterRepetition ( arr ) {
    var cache = {};
    var resultArr = [];
    for( var i = 0; i < arr.length; i++ ){
        if( cache[arr[i]] ) {
            continue;
        }else{
            cache[arr[i]] = true;
            resultArr.push( arr[i] );
        }
    }
    return resultArr;
}

更多方法可以参考文章: 《JavaScript数组过滤相同元素的6种方法》

---

6. 获取页面所有的checkbox

var resultArr= [];
var input = document.querySelectorAll('input');
for( var i = 0; i < input.length; i++ ) {
    if( input[i].type == 'checkbox' ) {
        resultArr.push( input[i] );
    }
}
//resultArr即中获取到了页面中的所有checkbox

---

7. 以下代码的输出结果

console.log( null == undefined );
console.log( null === undefined );
console.log( [] == false );

答案分别为: true, false, true

最后一个的原因,请参考: Empty arrays seem to equal true and false at the same time

---

8. 已知有字符串foo="get-element-by-id",写一个function将其转化成驼峰表示法"getElementById"

function getCamelCase ( str ) {
    var arr = str.split("-");
    var resultArr = [];
    for( var i = 0; i < arr.length; i++ ){
        if( i === 0 ) {
            resultArr.push( arr[i] ); 
        }else{
            resultArr.push( arr[i].charAt( 0 ).toUpperCase() + arr[i].slice( 1 ) );
        }
    }
    return resultArr.join('');
}

更多方法可以参考文章: 《整理前端面试题(三):驼峰命名法和短横线命名法的转换》

---

9. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

function getDate () {
   var date = new Date();
   var arr  = [ date.getFullYear(), date.getMonth() + 1, date.getDate() ];
   return arr.join('-')
}

---

10. 将字符串"<tr><td>{$id}</td><td>{$name}</td></tr>{$id}"中的{$id}替换成10，{$name}替换成"Tony" （使用正则表达式）

var str  = '<tr><td>{$id}</td><td>{$name}</td></tr>{$id}';
var newStr = str.replace( /{\$id}/g, 10 ).replace( /{\$name\}/g, 'Tony' );