JS基础面试题一

1.typeof返回的值有哪些？

　　string, number, boolean, undefined, object, function, symbol

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

普通事件添加：(执行该代码只会alert 2)

var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}

View Code

事件绑定方式：(执行以下代码会先alert1再alert2)

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);

View Code

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，事件绑定的方式允许添加多个。addEventListener不兼容低版本IE

普通事件无法取消，addEventListener还支持事件冒泡+事件捕获

3.IE的attachEvent和Google的addEventListener的DOM事件流的区别

• 事件名称不同
• 函数参数不同
• 执行顺序不同
• this指向不同

attachEvent:

// IE只支持事件冒泡
let box = document.querySelector('.box')
function xxx(){console.log('box clicked...')}
box.attachEvent('onclick',xxx) // 事件类型加on前缀
// 执行顺序按照注册的顺序

View Code

addEventListener:

let box = document.querySelector('.box')
box.addEventListener('click',function(){
  console.log('box clicked...')
}, fasle)  
// 第一个参数：事件类型名称，不加on前缀
// 第三个参数：true捕获阶段调用事件处理方法；false冒泡阶段调用事件处理方法,默认false
// 执行顺序按照注册的顺序从后往前

View Code

4.常见兼容问题

• 事件对象：ev = ev || window.event
• 取消事件冒泡：(IE) cancelBubble=true,  (标准) stopPropagation()
• 取消默认行为：(IE) returnValue=false, (标准) preventDefault()
• 获取当前的目标元素：(IE)srcElement, (标准) target
• 事件绑定：(IE) attachEvent(), (标准) addEventListener()
• 获取文档宽度：document.documentElement.clientWidth || document.body.clientWidth

5.阻止事件冒泡和默认事件

• cancelBubble()只支持IE, return fasle， stopPropagation()
• returnValue=false, preventDefault()

6.创建，添加，删除，替换到, 查找某个节点的方法

• document.createElement(), document.createTextNode(), document.cloneNode()，document.createDocumentFragment()
• obj.appendChild()
• obj.insertBefore()
• obj.removeChild()
• obj.replaceChild()
• element.insertAdjacentHTML(position, text): 将指定的文本解析为HTML或XML，并将结果插入到DOM树的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。(position: boforebegin, afterbegin, beforeend, afterend)
• getElementsBytTagName(), getElementsByClassName(), getElementById(), getElementsByName()

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

• 本地对象：此类对象独立于宿主环境，由ECMA提供，每一种宿主环境都可以使用本地对象，JS中的本地对象：Object, Function, Array, Date, RegExp等
• 内置对象: 基本与本地对象类似，但是无需使用new + 构造函数创建，而是JS引擎初始化的时候就被创建了，比如Global, Math对象
• 宿主对象：ECMA仅是一套规范，也就是指定的一套编程规则,如果要发挥作用，必须要有平台或者说环境，这就是ECMA的宿主。浏览器中的宿主对象有BOM, DOM， 它们都属于window对象的子对象。

8.window.onload 和 document.ready的区别

window.onload是在dom文档树加载完和所有文件加载完之后执行的一个函数，document.ready原生中并没有这个方法，jq中有$().ready(function)， 在dom文档树加载完之后执行的一个函数(这里的文档树加载完，并不代表全部文件加载完)

$(document).ready要比window.onload先执行，window.onload只能执行一次，$(document).ready可以出现多次。

9.JS是一门什么样的语言，有哪些特点？

JS是一种直译式，解释性脚本语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。其解释器称为JS引擎，是浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JS兼容于ECMA标准，也称为ECMAScript。在绝大多数浏览器下都支持，可以在多种平台下运行。

10.如何判断某变量是否为数组类型？

• 判断其是否具有“数组性质”，如 slice()方法。可自己给该变量定义 slice 方法， 故有时会失效
• obj instanceof Array 在某些 IE 版本中不正确
• 在 ECMA Script5 中定义了新方法 Array.isArray(), 保证其兼 容性，最好的方法如下：
  

  if (typeof Array.isArray === 'undefined') {
      Array.isArray = function (arg) {
          return Object.prototype.toString.call(arg) === '[object Array]'
      };
  }

  View Code

11.JS的事件流模型

事件冒泡：事件由最具体的元素接受，然后逐级向上传播

事件捕获：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的。

DOM事件流：事件捕获->目标阶段->事件冒泡

12.为什么typeof null === 'object'

因为null是一个只有一个值的数据类型，这个值就是null, 表示空指针对象，所以用typeof检测会返回'object'

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

function change (str) {
  return str.replace(/\-[a-z]/g, (map) => {
    return map[1].toUpperCase()
  })
}

View Code

14.HTML转义，将<, >, &, "进行转义

function escapeHtml (str) {
  return str.replace(/[\<\>\&\"]/g, matches => {
    switch (matches) {
      case '<': return '&lt;'
      case '>': return '&gt;'
      case '&': return '&amp;'
      case '\"': return '&quot;'
    }
  })
}

View Code

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

当使用RegExp()构造函数的时候，不仅需要转义引号(即\"表示"），并且还需要双反斜杠(即\\表示一个\)。使用正则表达式字面量的效率更高。

邮箱正则：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/

16.清楚字符串前后空格(兼容)

function trim (str) {
  if (String.prototype.trim) {
    return str.trim()
  } else {
    return str.replace(/^\s+/, '').replace(/\s+$/, '')
  }
}

View Code

17.循环中异步输出结果跟循环变量相同

for(var i = 1; i <= 3; i++){
    setTimeout(function(){ // 改成立即执行函数
        console.log(i);
    }(i), 0); 
}

View Code

18.NaN与其他类型计算

NaN + '任意字符串' // 'NaNxxx'
NaN + null // NaN
NaN + undifined // NaN
NaN + true/false // NaN
NaN + [] // NaN
// NaN + 任意可以转变为数字类型的值为NaN
NaN + { a: 1 } // "NaN[object Object]"

View Code

19.JavaScript中callee和caller的作用？

caller返回一个函数的调用，返回的是调用当前函数的函数；callee返回正在执行的函数本身的引用，它是arguments的一个属性。

caller:该属性只有在函数执行时有用，如果函数是由顶层调用的，则返回null

function test () {
  console.log('caller:', test.caller, 'callee:', arguments.callee)  // f()a, f()test
}

(function a () {
  test()
})()

View Code

callee: 该属性也是只有在函数执行时才有效，它有一个length属性，可以用来获得形参的个数，

 20.null

null表示一个空指针对象。

null除了跟undifined会==相等，跟其他任何类型都不相等

但是在做算术运算的时候，null会转成0

typeof null  // 'object'

null instanceof Object // false

Object.prototype.toString.call(null) // "[object Null]"