ECMAScript 面试（一）

目录

1.介绍一下数据类型

2.选项卡的标签栏，如何知道选择了第几个？

3.3 种强制类型转换， 2 种隐式类型转换?

4.实现 var a=(5).plus(3).minus(6);

5.实现输出 document对象 所有成员的名称和类型

6.动态生成一个table

7.传统事件绑定 和 W3C标准事件绑定 的区别？（如何在HTML中添加事件？三种方法？）

8.事件委托是什么？阻止事件冒泡和默认事件？本地对象，内置对象和宿主对象？

9.函数绑定方法区别（改变this指向）

10.var a=b=c=d=5是什么意思?如果接下来再写一句,d=9,a,b,c的值会变化吗?

11.var n=(1,2,3,4,5)，n的值是多少? 闭包？内存泄漏？

12.如何知道一个变量的数据类型? onload/ready？

13.var str=true+11+null+9+undefined+"zhuanbang"+false+null+9+[],str的值? 添加 删除 替换 插入到某个接点的方法？

14.循环遍历、数组去重、自增自减、dom操作？

15.return/break 有什么区别、指定格式日期输出？

16.返回一个范围的随机整数、变量提升？

17.alert(Number("08"));输出的结果？BOM 四个对象?

18.JS延迟加载？

19.Jsonp 原理？为什么不是真正的 Ajax？

20.写一个从 0-59 依次循环的计时器 / 倒计时？解析 URL成一个对象？

21.优化 web性能的方法？HTTP 协议中，GET 和 POST 有什么区别？

22.介绍一下 JSON 吧？SQL注入？XSS攻击？

23.哪些情况会导致内存泄漏？

24.什么是"use strict"？使用它的好处和坏处分别是什么？

25.如何获取UA？eval()是什么？

26.HTTP 状态消息 200 302 304 403 404 500 分别表示什么？

27.什么是 window对象？什么是 document对象？

28.["1", "2", "3"].map(parseInt) 答案是多少？实现对页面某个节点的拖曳？实现千位分隔符?

29.原型，原型链？

30.模块化开发？

31.深浅拷贝

---

1.介绍一下数据类型

• 基本数据类型 ：String、Number、Boolean 、Null、Undefined ;
• 引用数据类型：Object;
• 不同类型的数据储存原理：
• 栈：原始数据类型（Undefined，Null，Boolean，Number、String）
• 堆：引用数据类型（对象、数组和函数）
• 栈(stack)：简单数据段，占据空间小、大小固定，被频繁使用
• 堆(heap)：对象，占据空间大、大小不固定，引用数据类型在栈中存储了指针，指向堆中该实体的起始地址
• null==undefined // true; undefined 派生自 null
• null===undefined // false; null空指针，undefined无指针
• NaN 表示不是一个数，但是它本身是 Number类型
• NaN 和 NaN 不相等，isNaN()：判断一个数是不是一个数
• 在验证 null 时，一定要使用　=== ，因为 == 无法分别 null 和 undefined

1. 变量被声明了，但没有赋值时，就等于 undefined
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined
3. 对象没有赋值的属性，该属性的值为 undefined
4. 函数没有返回值时，默认返回 undefined

• null是一个表示”无”的对象，转为数值时为0
• undefined是一个表示”无”的原始值，转为数值时为NaN

2.选项卡的标签栏，如何知道选择了第几个？

• 添加自定义属性，点击的时候获取自定义属性值

3.3 种强制类型转换， 2 种隐式类型转换?

• 强制（parseInt —— parseFloat —— Number()）
• 隐式（==）—— 1=="1" —— null==undefined
• split()：字符串分割为数组
  join()：数组转换为字符串
  eval()：可计算某个字符串，并执行其中的的 JavaScript 代码
  confirm：询问框，返回值是 true 或者 false

4.实现 var a=(5).plus(3).minus(6);

• 这些都不是数字类型有的方法，需要向数值的原型上写方法：
• Number.prototype.plus = function (n) { return this + n; }
• Number.prototype.minus = function (n) { return this - n; }
• var a = (5).plus(3).minus(6);
• console.log(a); // 2 

5.实现输出 document对象 所有成员的名称和类型

• for(key in document){ document.write( key + ':' + document[key] + '<br/>');}
• key：属性 / document[key]：属性值

6.动态生成一个table

<div id='table'></div>
<script>
  var row; // 行
  var cell; // 单元格
  for (var i = 0; i < 10; i++) {
    row = document.createElement('tr'); // 在 for循环中动态创建行
    document.getElementById('table').appendChild(row); // 追加行元素
    for (var j = 0; j < 5; j++) {
      cell = document.createElement('td'); // 在 for循环中动态创建单元格
      cell.innerText = '内容';
      row.appendChild(cell);
    }}
</script>

7.传统事件绑定 和 W3C标准事件绑定 的区别？（如何在HTML中添加事件？三种方法？）

1. div1.οnclick=function(){}; // js添加
   <button οnmοuseοver=”fun()”></button> // 标签添加，记得()
   传统事件绑定：给同一个元素绑定多次相同类型事件，会覆盖
   不支持 DOM事件流：事件捕获→目标元素→事件冒泡
2. addEventListener(“click”,function(){},true);// 此时的事件就是在事件冒泡阶段执行
   W3C标准事件绑定：给同一个元素绑定多次相同类型事件，会依次触发
   支持 DOM事件流：事件捕获→目标元素→事件冒泡
   事件绑定传参不需要 on前缀
3. IE9以前：attachEvent("onclick")/detachEvent，事件绑定传参需要 on前缀
   只支持事件冒泡，不支持事件捕获

8.事件委托是什么？阻止事件冒泡和默认事件？本地对象，内置对象和宿主对象？

• 利用事件冒泡原理，让自己所触发的事件，被父元素代替执行
• e. stopPropagation();// 标准浏览器
  e.preventDefault();// 标准浏览器
  event.cancelBubble=true;// ie9之前
• 本地对象为 array obj 等，可以 new 实例化 
  内置对象为 Math 等，不可以实例化的
  宿主为 浏览器自带的 document,window ......

9.函数绑定方法区别（改变this指向）

• arguments 是伪数组，伪数组 转换为 数组 常用 call() 和 apply() 和 Array.from()【ES6】
• let aArg = Array.prototype.slice.apply(arguments, [0, 3]);
• call()、apply()、bind() ：用来重定义 this指向

1. obj.myFun.call(db,'成都','上海')；　
2. obj.myFun.apply(db,['成都','上海']);     
3. obj.myFun.bind(db,'成都','上海')();       

• bind()：返回一个 新的函数，必须 调用它 才会被执行
• apply()：最多 2个参数，第一个参数是 this指向对象，第二个参数是 数组类型
• call()：不止两个参数，第一个参数是 this指向对象，后面参数个数不限

10.var a=b=c=d=5是什么意思?如果接下来再写一句,d=9,a,b,c的值会变化吗?

• 初始化给 a、b、c、d 赋值都为5，改变 d后，a、b、c 值不变
• a、b、c、d 是 值类型 变量，各自的值存在 自己的栈 当中，当 d变化了，其他栈中的值不变
• 栈：存储值类型数据（一级缓存）
• 堆：存储引用类型数据，在 栈中 存 指向该堆内存地址的句柄（二级缓存）
• var a=b=c=d=[1,2,3,4,5] 是什么意思？如果接下来写一句 d[5]=9; a,b,c,的值会发生变化吗？改变的是对应堆中的值
• 发生变化，a、b、c、d 值都改为 [1,2,3,4,5,9]
• a、b、c、d 是 引用类型 变量，各自的值存在 堆 当中，栈中存的是指向堆的地址，初始化时 a、b、c、d 在各自的栈中指向的堆是同一个，该堆保存着[1,2,3,4,5]，当改变了堆中的值，其他对象的值都跟着改变

• var a=b=c=d=[1,2,3,4,5] 是什么意思？如果接下来写一句 d=[9]; a,b,c,的值会发生变化吗？将 d 栈中的指针地址改变了

• 不改变，因为数组是保存在堆中的，此处相当于将 d的栈 存储的堆地址 从 [1,2,3,4,5] 改成了 [9] 的堆，而其他变量的栈栈存储堆地址仍然没有改变，[9]是新数组，相当于重新开辟了堆空间，跟原来的没关系

11.var n=(1,2,3,4,5)，n的值是多少? 闭包？内存泄漏？

• n的值是 5，n中保存最后一次赋值，考察逗号运算符
• 一个函数能够访问另一个函数内的变量，称作闭包
• 会导致内存泄漏，因为闭包函数引用另一函数的变量将永远不会释放，所以要及时释放闭包函数

 

• 内存泄漏：不再使用的对象仍然存在，未被垃圾及回收机制回收
• setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

 

• 如果两个函数互相引用，而不再被第三者引用，那么互相引用的两个对象就会被回收
• 如果a被b引用，b被a外的c引用，那a就不会被回收

12.如何知道一个变量的数据类型? onload/ready？

• 基本数据类型用 typeof 获取：console.log(typeof num);
• 复杂数据类型用 instanceof 获取（是否是Array、Date类的实例）：console.log(aNum instanceof Array);
• tepyof(null)返回：Object
• instanceof 用于判断一个变量是否某个对象的实例，判断某对象是否属于某类（person1 instanceof Person）
• object.prototype.toString.call()：除了 person1 instanceof Person，都可以检验

 

1. Document.onload ：在 HTML + CSS 加载完才执行 js
2. window.onload ：在 HTML + CSS + 图片等资源 加载完才执行 js
3. Document.ready ：原生js中无此方法，jQuery：$().ready(function)，DOM结构画完了就执行js

13.var str=true+11+null+9+undefined+"zhuanbang"+false+null+9+[],str的值? 添加 删除 替换 插入到某个接点的方法？

• 最终结果：NaNzhuanbangfalsenull9
• undefined类型 与 任意数类型 进行“+”运算，结果都是 NaN
• ’zhuanbang’是 String类型，NaN是 Number类型
• NaN/Boolean/Number 和字符串 进行"+"运算，会隐式调用 toString()方法 变成字符串 'NaN' 和 'false' 和 '9'
• 请使用 ===/!==来比较true/false或者数值

 

1. createElement() // 创建元素
2. obj.appendChild() // 添加
3. obj.insertBefore()// 原生js不提供 insertAfter(); 
4. obj.replaceChild()// 替换 
5. obj.removeChild()// 删除
6. getElementsBy....() //通过查找元素

 

• switch语句 必须带有 default分支

• for-in 循环中的变量 应该使用 let 或 const关键字 明确限定作用域，从而避免作用域污染

14.循环遍历、数组去重、自增自减、dom操作？

• 数组去重：var result = []; array.forEach(function(item) {if (result.indexOf(item) === -1) { result.push(item);

 

• 希望获取到页面中所有的 checkbox 怎么做？
  var domList = document.getElementsByTagName(‘input’)
  var checkBoxList = [];
  遍历→if (domListxxx.type == ‘checkbox’)
  checkBoxList.push(domList...);

 

• var a=10; b=20; c=4; ++b+c+a++ // 35

 

• 设置一个已知 ID 的 DIV 的 html 内容为 xxxx，字体颜色设置为黑色
  var dom = document.getElementById(“ID”);
  dom.innerHTML = “xxxx
  dom.style.color = “#000”

15.return/break 有什么区别、指定格式日期输出？

• 执行 break跳出 switch循环，不用 break 会发生击穿现象，继续执行下一个case
• 执行 return跳出方法，不用 return 函数没有返回值 ( undefined)

 

• document.write 只能重绘整个页面；innerHTML 可以重绘页面的一部分
• 输出今天的日期，以 YYYY-MM-DD 的方式
  var d = new Date();
  var year = d.getFullYear();
  var month = d.getMonth() + 1;
  month = month < 10 ? '0' + month : month;
  var day = d.getDate();
  day = day < 10 ? '0' + day : day;
  alert(year+'-'+month+'-'+day)

16.返回一个范围的随机整数、变量提升？

• Math.floor(x) 返回小于等于 参数x 的最大整数，对数字进行下舍入，如 Math.floor(-1.01) 结果为 -2
• Math.random() 获取 0~1 之间的随机数
• function fn (max, min) { return Math.floor(Math.random() * (max - min + 1)) + min;}

 

• 变量提升：var foo = 1; function(){ console.log(foo); var foo = 2; console.log(foo); }
• 答案：输出 undefined 和 2。上面代码相当于：var foo = 1; function(){ var foo; console.log(foo); //undefined foo = 2; console.log(foo); // 2; }
• 把两个数组合并，并删除第二个元素：var cArray = array1.concat(bArray);cArray.splice(1,1);

17.alert(Number("08"));输出的结果？BOM 四个对象?

• 八进制字面值的第一位必须是0，然后是数字0-7，如果字面值超出范围，前导0将被忽略，故输出结果为8
• const attr = item.getAttribute('name');
• window：最顶层对象，其他 BOM对象 都是 window对象 的属性
document location（浏览器当前URL信息） screen history navigator（浏览器本身信息）
• window.location.search 返回：get请求参数
window.location.hash 返回：#锚点
window.location.reload()：刷新当前页面
• window对象常用方法：alert，confirm，prompt，open，close

18.JS延迟加载？

• <script src="script.js"></script>
  没有 defer 或 async，浏览器先加载 js文件，完成后再加载 剩余文档
• <script async src="script.js"></script>
  有 async，浏览器会并行加载 js文件 和剩余文档
• <script defer src="myscript.js"></script>
  有 defer，浏览器会并行加载 js文件 和剩余文档，但执行时，js文件一定在剩余文档之后

19.Jsonp 原理？为什么不是真正的 Ajax？

• Jsonp动态创建 script 标签，回调函数，解决跨域问题
• Ajax 是页面无刷新请求数据操作，通过 XmlHttpRequest 向服务器发异步请求 json 和 xml 数据

 

• outerHTML 其实就是 innerHTML 再加上本身

20.写一个从 0-59 依次循环的计时器 / 倒计时？解析 URL成一个对象？

var flag = 0;
function timer () {
  flag++;
  if (flag > 59) {
    flag = 0;
    return;  }
  console.log(flag);
}
setInterval(timer, 1000);

function parseQueryString(url){
    var urlKey = url.split("?")[1] // 获取参数字符串
    var objKeyValue ={} // 声明一个空对象，存储url 参数、参数值
    if(urlKey){ // 如果存在 url参数
        var urlObj = urlKey.split("&") // 把参数字符串&分割为数组
        for(var i = 0; i<urlObj.length;i++){ // 遍历该数组
            objKeyValue[urlObj[i].split("=")[0]] = urlObj[i].split("=")[1]
	    // 空对象键名：参数字符串=的前半部分
	    // 空对象键值：参数字符串=的后半部分
        }
        return objKeyValue
    }else{
        return "暂无参数"
    }
}

 

21.优化 web性能的方法？HTTP 协议中，GET 和 POST 有什么区别？

• 减少http请求
• 将外部的js文件放到底部
• 相关资源进行压缩合并（考虑gulp构建模块）
• 设置缓存

 

• get 传送的数据长度有限制，post 没有 
• get 通过url传递，在浏览器地址栏可见，post 是在报文中传递
• get一般用于简单查询，post一般用于表单提交

22.介绍一下 JSON 吧？SQL注入？XSS攻击？

• JSON(JavaScript Object Notation) ：数据交换格式
• JSON 是 JavaScript 的子集，易于读写，传输占用带宽小，键名键值都带双引号
• JSON对象包含两个方法:：

1. 解析 JSON对象 的 parse() 方法
2. 将 JSON对象 转换为 JSON字符串 的 stringify() 方法

 

• SQL注入：应用程序对用户输入的数据，没有判断，或者过滤不严，导致攻击者可以在应用程序定义好的sql语句后追加非法sql语句，进行非法操作
• XSS攻击：跨站脚本攻击：向web页面中注入恶意代码，用户浏览时执行，导致cookies等被盗用
  防御方式：对输入的url参数进行过滤，对输出进行编码，对cookies进行加密措施

23.哪些情况会导致内存泄漏？

• 内存泄漏是指：分配给对象的内存不能被重新分配，即使对象已经不被使用；对象不被使用后，对象仍然存在
• 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量；如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的（两个对象互相引用），那么该对象的内存即可回收
• 内存泄漏的情况：

1. setTimeout 的第一个参数 使用字符串 而非 函数 的话，会引发内存泄漏
2. 闭包，内部变量保持对外部变量的引用，页面重载前断开所有事件处理器
3. 控制台日志

24.什么是"use strict"？使用它的好处和坏处分别是什么？

• 严格模式：消除 JS不合理的语法，比如变量必须声明，提高了效率
• IE6,7,8,9 均不支持严格模式，JS文件会被压缩，严格模式的声明被压缩到文件中间，失去效果，浪费字节
• 严格模式和混杂模式的区别：

1. 严格模式 又称 标准模式，是指浏览器按照 W3C 标准解析代码
2. 混杂模式 又称 怪异模式或兼容模式，是指浏览器用自己的方式解析代码
3. HTML5 没有严格和混杂之分；只存在严格模式，那么许多旧网站必然受到影响；只存在混杂模式，那么每个浏览器都有自己的解析模式，过于混乱

25.如何获取UA？eval()是什么？

• 获取用户浏览器/代理设备（UA = navigator.userAgent），属于BOM，考察对 navigator 的理解 
• eval()：把字符串 解析成 JS代码，并运行，应该避免使用，浪费性能（解析+执行），不安全
• Webkit 是浏览器引擎，包括 html渲染 和 js解析功能

26.HTTP 状态消息 200 302 304 403 404 500 分别表示什么？

1. 200：请求成功发送
2. 302：重定向，暂时性转移
3. 304：服务器不返回资源，客户端从 缓存 中获取资源
4. 403：服务器理解了请求，但拒绝执行
5. 404：所需要的资源没有在服务器上找到
6. 500：服务器端发生错误

• array.map( callback , thisArray)

27.什么是 window对象？什么是 document对象？

• window 对象表示 浏览器中打开的窗口，document 是 window 的一个对象属性
• 所有的 全局函数和对象 都属于Window对象 的属性和方法：

1. 例如，可以只写 document，而不必写 window.document
2. 同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()

28.["1", "2", "3"].map(parseInt) 答案是多少？实现对页面某个节点的拖曳？实现千位分隔符?

• map() 方法创建一个新数组，其结果是，该数组中的 每个元素调用函数后 返回的结果
• parseInt 需要两个参数 (val, index) ，但 map 传了 3 个 (element, index, array)
• 

 

• 节点绑定 mousedown, mousemove, mouseup 事件
• mousedown 事件触发后，开始拖拽
• mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置
• mouseup 时，拖拽结束

 

• 数字转换为字符串，字符串转换为数组，数组翻转，遍历数组，每三位加一个,拼接字符串，拼接完成后再次翻转数组，最后转换数据类型

29.原型，原型链？

• 每个对象都有一个内部属性 prototype，称之为原型
• 原型的值可以是对象，也可以是null，如果值是对象，则这个对象也一定有自己的原型，这就是原型链
• 访问对象的原型，可以使用：Object.getPrototypeOf()方法，或者__proto__属性
• 原型 向上查找 的过程属于原型链，可以向上查找，不能向下查找，尽头是 null
• 原型链的作用：实现继承，根节点可以说是Object.prototype，也可以说是null
• hasOwnProperty()方法：返回布尔值，指出一个对象是否具有指定名称的属性，无法检查该对象的原型链中是否具有该属性，object.hasOwnProperty(proName) ←←有一个函数，执行时对象查找时，永远不会去查找原型

30.模块化开发？

• 浏览器端 requirejs，seajs；
• 服务器端 nodejs
• ES6模块化（ES6 参考链接：http://es6.ruanyifeng.com/）
• webpack打包
• gulp前端构建工具
• ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现
• babel转码器：可以将 ES6 代码转为 ES5 代码

31.深浅拷贝

• 实现函数 clone()，对 5 种数据类型（Number、String、Object、Array、Boolean）进行值复制

function clone(Obj) { 
    var buf; 
    if (Obj instanceof Array) { 
        buf = []; // 创建一个空的数组 
        var i = Obj.length; 
        while (i--) { 
            buf[i] = clone(Obj[i]); }
        return buf; 
    }else if (Obj instanceof Object){ 
        buf = {}; // 创建一个空对象 
        for (var k in Obj) { 
            // 为这个对象添加新的属性 
            buf[k] = clone(Obj[k]); }
        return buf; 
    }else{ 
        //普通变量直接赋值 
        return Obj; }}