js常用知识点

1：this指向

   （1）this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。
   （2）普通的函数调用，函数被谁调用，this就是谁。
   （3）构造函数的话，如果不用new操作符而直接调用，那即this指向window。用					    new操作符生成对象实例后，this就指向了新生成的对象。
   （4） 匿名函数或不处于任何对象中的函数指向window 。
   （5）如果是call、apply、bind等，指定的this是谁（第一个参数是谁），就是谁。

2：什么是闭包，闭包的优点缺点

     闭包的概念：闭包就是能读取其他函数内部变量的函数（在我看来闭包就是要么把一个function当成参数传入，要么就是把一个function当成返参retur弄出去）。
    优点：
    避免全局变量的污染
    希望一个变量长期存储在内存中（缓存变量）
    缺点：
    内存泄露（消耗）
    常驻内存，增加内存使用量
    解决方案：
    在退出函数之前，将不使用的局部变量全部删除。

3：car let const的区别

    1:let 的用法类似于 var，但是 let 只在所在的代码块内有效，所以我们一般使用 let 替代 var。而 const 用来声明常量。
    2:var 命令经常会发生变量提升现象，按照一般逻辑，变量应该在声明之后使用才对。为了纠正这个现象，ES6 规定 let 和 const  命令不发生变量提升，使用 let 和 const 命令声明变量之前，该变量是不可用的。主要是为了减少运行时错误，防止变量声明前就使用这个 变量，从而导致意料之外的行为。
    3:暂时性死区:如果在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
    4:let 和 const 命令声明的变量不允许重复声明
    5:由于 const 声明的是只读的常量，一旦声明，就必须立即初始化，声明之后值不能改变（对象的值是可以改变属性的，毕竟对象是地址引用类型的变量，只要指向的地址没有发生改变，也就不会报错）

4：数组常用的方法

 let Array = [1,2,3,4,5.19,20,34,12,224]

      // pop 删除数组尾部元素
      Array.pop() //[1, 2, 3, 4, 5.19, 20, 34, 12]会改变原数组
      
    // push 向数组尾部添加一个或多个元素
    //Array.push(16,7,8) //[1, 2, 3, 4, 5.19, 20, 34, 12, 224, 16, 7, 8]会改变原数组

    // shift 删除数组头部元素 
    //Array.shift() //[2, 3, 4, 5.19, 20, 34, 12, 224] 会改变原数组

    // unshift() 向数组头部添加一个或多个元素
    //Array.unshift(2,5,6,9)//[2, 5, 6, 9, 1, 2, 3, 4, 5.19, 20, 34, 12, 224] 会改变原数组

    // indexOf() 查找某个元素在数组的位置，有就返回下边，没有就返回-1
    // console.log(Array.indexOf(2)) //1 不会改变原数组
    //console.log(Array.indexOf(100)) //-1
    // join() 将数组以指定方式转化成字符串，默认是逗号分隔
    //console.log(Array.join()) //1,2,3,4,5.19,20,34,12,224 不会改变原数组
   //console.log(Array.join('-')) //1-2-3-4-5.19-20-34-12-224

    //concat() 将一个或多个数组拼接成一个新数组返回
    //let array2 = []
    //console.log(array2.concat(Array,[2,2,3,4])) // [1, 2, 3, 4, 5.19, 20, 34, 12, 224, 2, 2, 3, 4] 不会改变原数组

    // forEach 遍历数组
    // Array.forEach((item,e) => {
    //     console.log(item) //元素
    //     console.log(e) //下标
    // });

    // map() 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
    //let array3  = Array.map(item=> item*10)
    //console.log(array3) // [10, 20, 30, 40, 51.900000000000006, 200, 340, 120, 2240]

    //reverse()将数组中的元素颠倒排序
   // Array.reverse() //[224, 12, 34, 20, 5.19, 4, 3, 2, 1]

    // sort() 数组的元素进行排序，并返回数组
    //Array.sort() // [1, 12, 2, 20, 224, 3, 34, 4, 5.19]

    console.log(Array)     

5：字符串常用的方法

      charAt():返回指定索引位置处的字符，它的功能实现类似于数组用中括号获取相应下标位置的数据
    concat():，返回一个两个或者两个以上的字符串拼接的字符串，并不影响原字符串
    indexOf():返回一个字符在字符串中首次出现的位置,接收两个参数，第一个是要索引的字符，必填参数，第二个是可选参数，就是索引位置，从什么地方开始索引查找必填字符。 
    lastIndexOf():返回一个字符在字符串中最后一次出现的位置,接收两个参数，第一个是要索引的字符，必填参数，第二个是可选参数，就是索引位置，从什么地方开始索引查找必填字符。 
    slice():slice提取字符串的片断，并把提取的字符串作为新的字符串返回出来
    split():使用指定的分隔符将一个字符串拆分为多个子字符串，并将其以数组形式返回
    substr(),substring():截取一个字符串的片段，并返回截取的字符串;substr和substring这两个方法不同的地方就在于参数二，
            substr的参数二是截取返回出来的这个字符串指定的长度，substring的参数二是截取返回这个字符串的结束点，并且不包含这个结束点。而它们的参数一，都是一样的功能，截取的起始位置。
    match():可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，并返回一个包含该搜索结果的数组
    replace():把一个目标字符串当中的文本，替换成自己需要的字符。replace接收两个参数，
              参数一是需要替换掉的字符或者一个正则的匹配规则，参数二，需要替换进去的字符，仔实际的原理当中，
              参数二，你可以换成一个回调函数
    search():在目标字符串中搜索与正则规则相匹配的字符，搜索到，则返回第一个匹配项在目标字符串当中的位置，没有搜索到则返回一个-1
    repeat():返回一个新的字符串对象，新字符串等于重复了指定次数的原始字符串。接收一个参数，就是指定重复的次数

6：前端性能优化的方案

    减少请求数量
    减小资源大小（图片大小）
    优化网络连接
    优化资源加载
    减少合并dom操作
    减少重绘回流

7：http的知识点常见状态码含义

    1**	信息。服务器收到请求，请继续执行请求
    2**	成功。请求被成功接收并处理
    3**	重定向。需要进一步操作来完成请求
    4**	客户端错误。无法完成请求，或请求包含语法错误
    5**	服务器错误。服务器在处理请求的过程中发成错误

8：解析url参数

    window.location.href（当前URL）
    结果如下：
    http://www.sxy.com:8080/index?id=123&username=sxy

    window.location.protocol（协议）
    输出：
    http:

    window.location.host（域名 + 端口）
   输出：
    www.sxy.com:8080

    window.location.hostname（域名）
   输出：
	www.sxy.com

    window.location.port（端口）
    输出：
    8080

    window.location.pathname（路径部分）
    输出：
    /index

    window.location.search（请求的参数）
    输出：
    ?id=123&username=sxy

9：异步同步

     1、进程同步：就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事
    2、异步的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者

10：typeof和instanceof的区别

  typeof是一个运算符，用于检测数据的类型，比如基本数据类型null、undefined、string、number、boolean、Symbol, 以及引用数据类型object、 function，但是对于正则表达式、日期、数组这些引用数据类型，它会全部识别为object；					  
  instanceof同样也是一个运算符，它就能很好识别数据具体是哪一种引用类型。它与isPrototypeOf的区别就是它是用来检测构造函数的原型是否存在于指定对象的原型链当中；而isPrototypeOf是用来检测调用此方法的对象是否存在于指定对象的原型链中，所以本质上就是检测目标不同。

11：什么是同源策略，跨域的常见解决方式

        同源策略是一项约定，是浏览器的行为，限制了从同一个源下的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
        所谓同源是指 协议+域名+端口 三者都相同，不满足这个条件即为非同源，即使两个不同域名指向同一IP地址。 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。 不同域之间相互请求资源，就算作跨域。

    同源策略限制的内容：
        Cookie、LocalStorage、IndexedDB 等存储性内容
        DOM 节点
        AJAX 请求发送后，响应结果被浏览器拦截（即请求发送了，服务器响应了）
    注意：有三个标签是允许跨域加载资源的：
        <img src=XXX>
        <link href=XXX>
        <script src=XXX>

    解决方法：
    1、 JSONP：利用<script>标签不受跨域限制，将回调函数名作为参数附带在请求中，服务器接受到请求后，进行特殊处理：
          把接收到的函数名和需要给它的数据拼接成一个字符串返回，客户端会调用相应声明的函数，对返回的数据进行处理。
          优缺点：简单兼容性好，解决主流浏览器跨域数据访问。缺点是仅支持GET方法，且需要服务器做支持才能实现。

    2、 nginx反向代理接口跨域
    跨域原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
    实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录  
  
    3：后台设置跨域许可 
    这种情况一般只适合前后端本地联调的时候，正式上面不能这么做，容易会被攻击

12：cookie 和localstorage和 sessionstorage的区别，各自的用途

    Cookie的优缺点
    优点：
    可以方便的控制Cookie生命周期。
    持久性数据(Persistent data)。
    可以设置作用域。

    缺点：
    Cookie数量和长度受限制，数量部分不同的浏览器不一样，长度是不能超过4KB，否则会被截掉。
    浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销，浪费带宽(尤其是在移动开发环境下)。
    Cookie是以单字符串的形式保存在客户端的，所以利用原生js不利于操作。
    Cookie更容易受到安全攻击。

    localStorage的优缺点
    优点：
    以键值对的形式进行存储，存储的是原始值，浏览器提供了更易操作的api。
    更大的存储空间，相同域最多可以存储5MB。
    不会在每个HTTP请求中被携带。
    遵循同源政策，保存数据会相对来说安全些。
    缺点：
    不能直接控制生命周期，需要自己利用js进行封装之后才能操作。
    如果服务端需要客户端的存储信息，你需要手动添加它。

    sessionStorage的优缺点
    sessionStorage基本上和localStorage是相同的，同属于Web Storage，返回的也都是一个Storage对象。
    区别在于sessionStorage在关闭浏览器或者是当前标签页（有的人说关闭tab不清空，但是规范上有写，sessionStorage 
    是基于browsing context来呈现的）时，存储的数据都会被清空掉。 

    应用场景：
    Cookie因为它的实现特点，所以更多的是保存让服务端可以获得的数据，保存用户的个人的用户信息，让服务端知道当前用户是谁，
    如保存sessionId。而localStorage则是用来服务客户端的，可以保存主题设置，用户配置的一些信息。
    sessionStorage更多的是像对localStorage的一个补充，可以用来保存页面的会话信息。

13： git常用命令

    git init //初始化本地git环境
    git clone XXX//克隆一份代码到本地仓库
    git pull //把远程库的代码更新到工作台
    git pull --rebase origin master //强制把远程库的代码跟新到当前分支上面
    git fetch //把远程库的代码更新到本地库
    git add . //把本地的修改加到stage中
    git commit -m 'comments here' //把stage中的修改提交到本地库
    git push //把本地库的修改提交到远程库中
    git branch -r/-a //查看远程分支/全部分支
    git checkout master/branch //切换到某个分支
    git checkout -b test //新建test分支
    git checkout -d test //删除test分支
    git merge master //假设当前在test分支上面，把master分支上的修改同步到test分支上
    git merge tool //调用merge工具
    git stash //把未完成的修改缓存到栈容器中
    git stash list //查看所有的缓存
    git stash pop //恢复本地分支到缓存状态
    git blame someFile //查看某个文件的每一行的修改记录（）谁在什么时候修改的）
    git status //查看当前分支有哪些修改
    git log //查看当前分支上面的日志信息
    git diff //查看当前没有add的内容
    git diff --cache //查看已经add但是没有commit的内容
    git diff HEAD //上面两个内容的合并
    git reset --hard HEAD //撤销本地修改
    echo $HOME //查看git config的HOME路径
    export $HOME=/c/gitconfig //配置git config的HOME路径 

14：document.onload和document.ready两个事件的区别

 document.ready：表示文档结构已经加载完成（不包含图片等非文字媒体文件）
document.onload：指示页面包含图片等文件在内的所有元素都加载完成。

15： 两等和三等有什么区别？

首先，== equality 等同，=== identity 恒等。
==：两边值类型不同的时候，要先进行类型转换，再比较。
===：不做类型转换，类型不同的一定不等。

16： 什么是事件代理/事件委托

事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候， 可以非常方便的提高程序性能，减小内存空间。

17：什么是事件冒泡？什么是事件捕获？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

18：如何阻止冒泡？

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。

19：如何阻止默认事件？

	w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false，
	兼容写法：
    function stopDefault( e ) { 
        //阻止默认浏览器动作(W3C) 
        if ( e && e.preventDefault ) {
           e.preventDefault(); 
        } else {
          //IE中阻止函数器默认动作的方式
         window.event.returnValue = false; 
        }
    } 

20：箭头函数和普通函数有什么区别，箭头函数可以当做构造函数吗？

    1:箭头函数不可以当做构造函数，不能使用new
     2:箭头函数不绑定arguments,取而代之用rest参数…解决
     3:箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值
     4:箭头函数没有原型属性