前端知识点总结（JavaScript篇）

Posted lingxiangli

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端知识点总结（JavaScript篇）相关的知识，希望对你有一定的参考价值。

  1. 同源策略及跨域请求的方法和原理（比较JSONP和document.domain的不同及优劣，以及HTML5的跨域方案）
  2. JavaScript数据类型
  3. JavaScript字符串转化
  4. JSONP原理及优缺点
  5. XMLHttpRequest
  6. 事件委托
  7. 前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法）
  8. session
  9. Cookie
  10. seaJS的用法及原理，依赖加载的原理、初始化、实现等
  11. this问题
  12. 模块化原理（作用域）
  13. JavaScript动画算法
  14. 拖拽的实现
  15. JavaScript原型链及JavaScript如何实现继承、类的
  16. 闭包及闭包的用处，以及闭包可能造成的不良后果。
  17. 常见算法的JS实现（如快排、冒泡等）
  18. 事件冒泡和事件捕获
  19. 浏览器检测（能力检测、怪癖检测等）
  20. JavaScript代码测试
  21. call与apply的作用及不同
  22. bind的用法，以及如何实现bind的函数和需要注意的点
  23. 变量名提升
  24. == 与 ===
  25. "use strict"作用
  26. AJAX请求的细节和原理
  27. 函数柯里化（Currying）
  28. NodeJS健壮性方面的实践（子进程等）
  29. NodeJS能否用利用多核实现在计算性能上的劣势等
  30. jQuery链式调用的原理
  31. ES6及jQuery新引进的Promise有什么用处、Promise的原理
  32. NodeJS的优缺点及使用场景
  33. JS中random的概率问题
  34. 客户端存储及他们的异同（例如：cookie, sessionStorage和localStorage等）
  35. AngularJS的文件管理及打包（包括模板打包及请求、JS的打包和请求等）
  36. AngularJS的JS模块管理及实践
  37. 在你的Angular App页面里随意加一个JS文件，会有什么影响
  38. AngularJS directive及自己如何定义directive
  39. AngularJS双向绑定的原理及实现
  40. 你如何测试你的JS代码
  41. DOM1DOM2DOM3都有什么不同
  42. XSS
  43. 常用数组方法和数组算法（如数组去重、求交集、并集等）
  44. js数组去重复项
  45. js中的垃圾回收机制
  46. 常见的JS设计模式
  47. js获取服务器精准时间（客户端如何与服务器时间同步）
  48. 什么是js中的类数组对象
  49. Node中exports和module.exports的区别
  50. 异步编程的了解
  51. Grunt和Gulp的区别
  52. AngularJS中servicefactoryprovider的区别
  53. JavaScript中异步编程的几种方式
  54. Nodejs开发踩过的坑
  55. AngularJS中依赖注入的理解
  56. JS中判断是否为数组
  57. Nodejs内存溢出
  58. 关于BFC和hasLayout
  59. 统计页面中使用最多的三个标签
  60. JS内存泄露及解决方法
  61. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别
  62. 判断两个对象的相等
  63. 选取两个数的最大公约数
  64. Node模块是如何寻址的
  65. ES6新增的特性
  66. escape(), decodeURIComponent(), decodeURI之间的区别是什么？
  67. CSRF？

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  1. 同源策略及跨域请求的方法和原理（比较JSONP和document.domain的不同及优劣，以及HTML5的跨域方案）
    答案：同源策略是客户端脚本（尤其是javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源指的是：同协议，同域名和同端口。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
    浏览器的同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但头疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。

    document.domain：只要将同一域下不同子域的document.domain设置为共同的父域，则这个时候我们就可以访问对应window的各种属性和方法了。例如：www.example.com父域下的www.lib.example.com和www.hr.example.com两个子域，将对应页面的document.domain设为example.com即可。缺点：只能在一级域名相同时才能运用。

    JSONP：原理是动态添加一个script标签，而script标签的src属性是没有跨域的限制的。jquery中还提供了一个$.getJSON(url,arg,callback(data))用来进行jsonp访问。缺点：只支持get不支持post；只支持http请求这种情况，不能解决不同域两个页面之间如何进行JavaScript调用的问题；JSONP请求失败时不返回http状态码。

    CORS（跨域资源共享）：HTML5引入的新的跨域的方法，不过需要在请求头和相应头设置相应的Access-Control-属性。缺点：兼容性问题，适合一些新的浏览器。

    参考:
    说说JSON和JSONP
    js中几种实用的跨域方法原理详解
    The Same Origin Policy: JSONP vs The document.domain Property
    HTTP访问控制(CORS)

  2. JavaScript数据类型
    答案： JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。

  3. JavaScript字符串转化
    答案：熟悉基本的字符串操作函数，参考
    JavaScript中常见的字符串操作函数及用法

  4. JSONP原理及优缺点
    答案：具体JSONP的原理可参考1，说白了就是插入一个script标签，其src指向跨域接口，返回对应的callback(data)，其中data是json格式，callback是页面已存在的function。
    优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
    缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

  5. XMLHttpRequest
    答案：轻松掌握XMLHttpRequest对象

  6. 事件委托
    答案：使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

  7. 前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法
    答案：
    使用AMDCommonJSES Harmony编写模块化的JavaScript
    RequireJS中文网

    SeaJS对模块的态度是懒执行,SeaJS只会在真正需要使用(依赖)模块时才执行该模块；而RequireJS对模块的态度是预执行；会先尽早地执行(依赖)模块, 相当于所有的require都被提前了, 而且模块执行的顺序也不一定
    SeaJS和RequireJS最大的不同，其中AMD和CMD的区别可以看玉伯在知乎上的回答

  8. session

  9. Cookie
    答案：8与9的知识可以参考：参考1和参考2

    常见的cookie操作包括创建cookie、添加cookie、删除cookie等，相应函数参考：

    //添加（daysToLive大于0）cookie/删除（daysToLive为0）cookie

function setcookie(name,value,daysToLive){

  var cookie = name + "=" + encodeURIComponent(value);

  if(typeof daysToLive === "number"){
     cookie += ";max-age=" + (daysToLive*60*60*24);
  }
  document.cookie = cookie;
}

//解析cookie,直接getcookie()[name]获取对应的name cookie

function getcookie(){
  var cookies = {};
  var all = document.cookie;
  if(all === ""){
     return false;
  }
  var list = all.split(";");
  for(var i=0;i < list.length; i++){
     var cookie = list[i];
     var p = cookie.indexOf("=");
     var name = cookie.substring(0,p);
     var value = cookie.substring(p+1);
     value = decodeURIComponent(value);
     cookies[name] = value;
  }
  return cookies;
}

//删除某个cookie
function deletecookie( name ) {
   document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
   //或者  document.cookie = name + '=; expires=' + (new Date(1970)).toGMTString();
 }

  10. seaJS的用法及原理，依赖加载的原理、初始化、实现等
    答案：模块化开发之sea.js实现原理总结，简言之就是要解决三个问题，分别为：
    1.模块加载（插入script标签来加载模块。你在页面看不到标签是因为模块被加载完后删除了对应的script标签）；
    2.模块依赖（按依赖顺序依赖）；
    3.命名冲突（封装一层define，所有的都成为了局部变量，并通过exports暴漏出去）。

  11. this问题
    答案：别再为了this发愁了------JS中的this机制

  12. 模块化原理（作用域）
    答案：其中seajs的原理参考第10题。大致原理都类似。

  13. JavaScript动画算法

  14. 拖拽的实现

  15. JavaScript原型链及JavaScript如何实现继承、类的
    答案：原型链：就是每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针（prototype），而实例则包含一个指向原型对象的内部指针（proto），通过将子构造函数的原型指向父构造函数的实例。
    参考：
    JS 面向对象之继承 -- 原型链
    js 基于原型的类实现详解

  16. 闭包及闭包的用处，以及闭包可能造成的不良后果
    答案：好处：能够实现封装和缓存等；坏处：就是消耗内存、不正当使用会造成内存溢出的问题。
    聊一下JS中的作用域scope和闭包closure
    javascript 闭包的好处及坏处

  17. 常见算法的JS实现（如快排、冒泡等）

    答案：常用排序算法之JavaScript实现。这里有一篇阮一峰老师写的，非常不错的快排算法，快速排序（Quicksort）的Javascript实现。
    和排序算法. 还有如《五大常用算法》等。

  18. 事件冒泡和事件捕获
    答案：W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targeting）、冒泡阶段（bubbling）。
    阻止事件传播的方法：ie下：window.event.cancelBubble = true; 其他浏览器:e.stopPropagation()。
    参考：
    事件冒泡和事件捕获

  19. 浏览器检测（能力检测、怪癖检测等）

  20. JavaScript代码测试
    答案：平时在测试方面做的比较少，一般用JSlint检查一些常见的错误。对于功能性的可能会使用基于karma+Jasmine测试框架来做。

  21. call与apply的作用及不同
    答案：作用是绑定this指针，设定函数中this的上下文环境。第二个参数不同，apply是类数组，而call是一些列参数。

  22. bind的用法，以及如何实现bind的函数和需要注意的点
    答案：bind的作用与call和apply相同，区别是call和apply是立即调用函数，而bind是返回了一个函数，需要调用的时候再执行。
    一个简单的bind函数实现如下：

    Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

    可参考：How is bind() different from call() & apply() in Javascript?

  23. 变量名提升
    答案：参考16中的博客及评论部分。

  24. == 与 ===
    答案：前者隐式类型转换，后者严格对比。

  25. "use strict"作用
    答案：作用是为了规范js代码，消除一些不合理、不严谨的地方；提高效率；为以后新版本js做铺垫。
    主要限制：
    1.全局变量显式声明；
    2.禁止使用with，不推荐使用eval；
    3.增强安全措施，比如禁止this关键字指向全局对象；
    4.禁止删除变量；
    5.显式报错；比如对只读属性赋值，对一个使用getter方法读取属性赋值，对禁止扩展的对象添加新属性；
    6.重名错误，对象不能有重名的属性，函数不能有重名的参数；
    7.禁止八进制表示法；
    8.argument对象的限制；比如禁止使用arguments.callee；
    9.函数必须声明在顶层；
    10.新增保留字：implements, interface, let, package, private, protected, public, static, yield

    Javascript 严格模式详解

  26. AJAX请求的细节和原理
    答案：原生的细节也需要重点研究，其实是jQuery ajax

  27. 函数柯里化（Currying）
    答案： 柯里化（Currying），是把接受多个参数的函数变换为接受单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
    作用:
    1.参数复用；在柯里化的外围函数中添加复用的参数即可。
    2.提前返回；参看“参考”中绑定事件的例子。
    3.延迟计算/运行；其实Function.prototype.bind的方法中延迟计算就是运用的柯里化。
    参考：
    JS中的柯里化(currying)

  28. NodeJS健壮性方面的实践（子进程等）

    答案：同29。

  29. NodeJS能否用利用多核实现在计算性能上的劣势等

    答案：《解读Nodejs多核处理模块cluster》

  30. jQuery链式调用的原理

  31. ES6及jQuery新引进的Promise有什么用处、Promise的原理

    答案：JavaScript Promise和JavaScript Promise Mini Book

  32. NodeJS的优缺点及使用场景

    答案：NodeJS优缺点及适用场景讨论

  33. JS中random的概率问题

  34. 客户端存储及他们的异同（例如：cookie, sessionStorage和localStorage等）
    共同点：都是保存在浏览器端，且同源的。
    区别：
    1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
    2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
    3.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，一般为5M左右。
    4.数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage始终有效（除非清除），窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
    5.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
    6.Web Storage 支持事件通知机制（storage事件），可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

  35. AngularJS的文件管理及打包（包括模板打包及请求、JS的打包和请求等）

  36. AngularJS的JS模块管理及实践

    答案：AngularJS —— 使用模块组织你的代码

  37. 在你的Angular App页面里随意加一个JS文件，会有什么影响

    答案：这个啥问题XX。

  38. AngularJS directive及自己如何定义directive

    答案：AngularJS之directive

  39. AngularJS双向绑定的原理及实现

    答案：AngularJS数据绑定及AngularJS的工作机制，参考《AngularJS up and running》第203页，十三章第一节。简单说检查数据有无更新，仅在以下事件发生时，即：XHR请求、页面加载、用户交互事件等。

  40. 你如何测试你的JS代码

    答案：平时在测试方面做的比较少，一般用JSlint检查一些常见的错误。对于功能性的可能会使用基于karma的Jasmine测试框架来做。

  41. DOM1DOM2DOM3都有什么不同

  42. XSS

    答案：1. 《浅谈javascript函数劫持》 2. 《xss零碎指南》

  43. 常用数组方法和数组算法（如数组去重、求交集、并集等）

    答案：javascript常用数组算法总结和Merge/flatten an Array of Arrays in JavaScript

  44. js数组去重复项

    答案：js数组去重复项的四种方法

  45. js中的垃圾回收机制

    答案：JavaScript垃圾回收机制

  46. 常见的JS设计模式

  47. js获取服务器精准时间（客户端如何与服务器时间同步）

    答案：思路：简而言之就是发送一个ajax请求，然后获取对应的HTTP Header中的time，由于时延等问题造成时间在JS客户端获取后当前时间已经不再是服务器此时的时间，然后用本地的时间减去获取的服务器的时间，这应该就是时间偏移量。再新建一个时间，加上此偏移量应该就是此时此刻服务器的时间。代码如下：

    var offset = 0;
function calcOffset() {
    var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    xmlhttp.open("GET", "http://stackoverflow.com/", false);
    xmlhttp.send();

    var dateStr = xmlhttp.getResponseHeader('Date');
    var serverTimeMillisGMT = Date.parse(new Date(Date.parse(dateStr)).toUTCString());
    var localMillisUTC = Date.parse(new Date().toUTCString());
    offset = serverTimeMillisGMT -  localMillisUTC;  
}
function getServerTime() {
    var date = new Date();
    date.setTime(date.getTime() + offset);
    return date;
}

    或者是：

    var start = (new Date()).getTime();

var serverTime;//服务器时间

$.ajax({
  url:"XXXX",
success: function(data,statusText,res){
        var delay = (new Date()).getTime() - start;
        serverTime = new Date(res.getResponseHeader('Date')).getTime() + delay;
        console.log(new Date(serverTime));//标准时间
        console.log((new Date(serverTime)).toTimeString());//转换为时间字符串
        console.log(serverTime);//服务器时间毫秒数
    }
}）

  48. 什么是js中的类数组对象

    答案：1、它们都有一个合法的 length 属性(0 到 2**32 - 1 之间的正整数)。2、length 属性的值大于它们的最大索引(index)。

  49. Node中exports和module.exports的区别

    答案：exports 和 module.exports 的区别

  50. 异步编程的了解

    答案：

  51. Grunt和Gulp的区别

    答案：Gulp vs Grunt

  52. AngularJS中servicefactoryprovider的区别

    答案:讲的非常不错，可以看看。Differences Between Providers In AngularJS和stackoverflow上的回答Service vs provider vs factory。如果英文看的不爽，这里有一篇中文的，还不错那伤不起的provider们啊。

  53. JavaScript中异步编程的几种方式

    答案：参加阮一峰前辈写的Javascript异步编程的4种方法，简单说就是1回调函数2事件监听3发布/订阅4promise

  54. Nodejs开发踩过的坑

    答案：那些年，在nodejs上踩过的坑

  55. AngularJS中依赖注入的理解

    答案：Understanding Dependency Injection

  56. JS中判断是否为数组

    答案：isArray/typeof/instanceof,还有toString方法返回的字符串（数组返回‘[Object Array]‘）。

  57. Nodejs内存溢出

    答案：如何自己检查NodeJS的代码是否存在内存泄漏

  58. 关于BFC和hasLayout

    答案：关于Block Formatting Context－－BFC和IE的hasLayout

  59. 统计页面中使用最多的三个标签

    答案：思路大致是首先获取页面中所有用到的标签数组，然后依次遍历，将用到的标签放置新的hash表里，每次检测到相同标签对应的key的value值加1.最后转为数组，排序，取前三个。实现方法如下：

    function findTags(){
    var allTags = document.getElementsByTagName("*"),
        hash = {};

    for(var i = 0, j = allTags.length; i < j; i++){
        var temp = allTags[i].tagName;
        if(hash[temp]){
            hash[temp]++;
        }else{
            hash[temp] = 1;
        }
    }

    var sortable = [];
    for (var i in hash){
       sortable.push([i, hash[i]]);
     }
    sortable.sort(function(a, b) {return b[1] - a[1]});

    return sortable.splice(0,3);
 }

  60. JS内存泄露及解决方法

    答案：JS内存泄露及解决方法

  61. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

    答案：在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

  62. 判断两个对象的相等

    答案: How to determine equality for two JavaScript objects?

  63. 选取两个数的最大公约数

    答案：JS how to find the greatest common divisor

  64. Node模块是如何寻址的

    答案：《NodeJS深入浅出》模块开发那一章有详解。

  65. ES6新增的特性

    答案：

  66. escape(), decodeURIComponent(), decodeURI之间的区别是什么？
    答案：
    • 传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。
    • 进行url跳转时可以整体使用encodeURI
    • js使用数据时可以使用escape
    • escape对0-255以外的unicode值进行编码时输出%u****格式，其它情况下escape，encodeURI，encodeURIComponent编码结果相同。
      另外：
    • escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
    • encodeURI不编码字符有82个：!，#，$，&，‘，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
    • encodeURIComponent不编码字符有71个：!， ‘，(，)，*，-，.，_，~，0-9，a-z，A-Z

  67. CSRF？
    答案：浅谈CSRF攻击方式

以上是关于前端知识点总结（JavaScript篇）的主要内容，如果未能解决你的问题，请参考以下文章

前端知识总结系列第03篇

前端知识总结系列第02篇

前端知识总结系列第02篇

前端知识总结系列第03篇

前端知识总结系列第02篇

前端知识总结系列第03篇