【直接收藏】前端JavaScript面试100问（终）

事件代理 也就是 事件委托

不是直接给标签添加事件 是给标签的父级添加事件 通过 事件对象 判断触发事件的标签对象是谁 执行不同的函数程序的语法形式

委托的优点

减少内存消耗
试想一下，若果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；

所以事件委托可以减少大量的内存消耗，节约效率。

动态绑定事件
比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件；

在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；

所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

控件
 
    setTimeout(() => {
       // 插入十万条数据
      const total = 100000
      // 一次插入 20 条，如果觉得性能不好就减少
      const once = 20
      // 渲染数据总共需要几次
     const loopCount = total / once
      let countOfRender = 0
      let ul = document.querySelector("ul");
      function add() {
      // 优化性能，插入不会造成回流
       const fragment = document.createDocumentFragment();
      for (let i = 0; i < once; i++) {
        const li = document.createElement("li");
        li.innerText = Math.floor(Math.random() * total);
        fragment.appendChild(li);
      }
     ul.appendChild(fragment);
     countOfRender += 1;
     loop();
  }
  function loop() {
      if (countOfRender < loopCount) {
       window.requestAnimationFrame(add);
   }
  }
  loop();
  }, 0);

JavaScript中变量的类型判断常常使用typeof运算符，但使用typeof时存在一个缺陷，就是判断引用类型存储值时，无论引用的是什么类型的对象，它都返回 object。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

1.instanceof运算符用法

var strObj = new String("字符串");
console.log(strObj instanceof String);// true


该段代码判断的是变量strObj是否为String对象的实例，strObj 是 String 对象的实例，因此是”true”。尽管不像 typeof 方法那样灵活，但是在 typeof 方法返回 “object” 的情况下，instanceof 方法就很有用。

// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();

console.log(foo instanceof Foo)


2.instanceof在继承关系中使用

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo(); //JavaScript 原型继承

var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true
foo作为构造函数Foo的实例，因为构造函数Foo原型继承了构造函数Aoo，因此返回true。该代码中是判断了一层继承关系中的父类，在多层继承关系中，instanceof 运算符同样适用。

3.instanceof运算符代码
function instance_of(L, R) { //L 表示左表达式，R 表示右表达式
var O = R.prototype; // 取 R 的显示原型
L = L.__proto__; // 取 L 的隐式原型
while (true) {
  if (L === null)
    return false;
  if (O === L) // 这里重点：当 O 严格等于 L 时，返回 true
    return true;
  L = L.__proto__;
}
}

function test() {
     let arr = [3, 2, 1]
     arr.forEach(async item => {
      const res = await fetch(item)
      console.log(res)
     })
     console.log('end')
    }
    
 function fetch(x) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(x)
  }, 500 * x)
 })
}


test()

3
2
1
end
结果现实与我开了个玩笑，打印顺序居然是

end
1
2
3
为什么？

while (index 

从上述代码中我们可以发现，forEach 只是简单的执行了下回调函数而已，并不会去处理异步的情况。并且你在 callback 中即使使用 break 也并不能结束遍历。


怎么解决？


一般来说解决的办法有2种,for...of和for循环。


使用 Promise.all 的方式行不行，答案是：不行

async function test() {
     let arr = [3, 2, 1]
     for (const item of arr) {
      const res = await fetch(item)
      console.log(res)
     }
     console.log('end')
    }

async function test() {
 let arr = [3, 2, 1]
 const iterator = arr[Symbol.iterator]()
 let res = iterator.next()
 while (!res.done) {
  const value = res.value
  const res1 = await fetch(value)
  console.log(res1)
  res = iterator.next()
 }
 console.log('end')
}

async function test() {
  let arr = [3, 2, 1]
  for (var i=0;i {
  setTimeout(() => {
   resolve(x)
  }, 500 * x)
 })
}


test()

async function test() {
  let arr = [3, 2, 1]
  var i=0;
  while(i!==arr.length){
    const res = await fetch(arr[i])
    console.log(res)
    i++;
  }
  console.log('end')
}


function fetch(x) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(x)
  }, 500 * x)
 })
}


test()

arr.myforeach(async v => {
    await fetch(v);
});

Array.prototype.myforeach = async function (fn, context = null) {
    let index = 0;
    let arr = this;
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    while (index 

src和href都是用在外部资源的引入上，比如图像，CSS文件，HTML文件，以及其他的web页面等等，服务器托管网那么src和href的区别都有哪些呢？

1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、 浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看， DOM事件 。








function hello(){
 alert("hello world!");
}

在 JS 代码中（即 script 标签内）绑定事件可以使 JS 代码与HTML标签分离，文档结构清晰，便于管理和开发。






document.getElementById("btn").onclick = function(){
 alert("hello world!");
}

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。


起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。


W3C规范


element.addEventListener(event, function, useCapture)
event : （必需）事件名，支持所有 DOM事件 。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
注：IE8以下不支持。






document.getElementById("btn1").addEventListener("click",hello);
function hello(){
 alert("hello world!");
}
IE标准




element.attachEvent(event, function)
event：（必需）事件类型。需加“on“，例如：onclick。
function：（必需）指定要事件触发时执行的函数。


document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
 alert("hello world!");
}

document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
 alert("hello world!");
}

  



var btn3 = document.getElementById("btn3");
btn3.onclick = function(){                  //动态绑定事件
 alert("hello 1");           //不执行
}
btn3.onclick = function(){
 alert("hello 2");           //执行
}




var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);      //添加事件监听器
btn4.addEventListener("click",hello2);


function hello1(){
 alert("hello 1");        //执行
}
function hello2(){
 alert("hello 2");        //执行 （顺序执行）
}

var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);




function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}

//绑定监听事件
function addEventHandler(target,type,fn){
 if(target.addEventListener){
 target.addEventListener(type,fn);
 }else{
 target.attachEvent("on"+type,fn);
 }
}


//移除监听事件
function removeEventHandler(target,type,fn){
 if(target.removeEventListener){
 target.removeEventListener(type,fn);
 }else{
 target.detachEvent("on"+type,fn);
 }
}

git 分支命名规范
为规范开发，保持代码提交记录以及 git 分支结构清晰，方便后续维护，现规范 git 的相关操作。

主要规范两点：

git 分支命名规范

git 提交记录规范

1. git 分支命名规范
  git 分支分为集成分支、功能分支和修复分支，分别命名为 develop、feature 和 hotfix，均为单数。不可使用 features、future、hotfixes、hotfixs 等错误名称。

master（主分支，永远是可用的稳定版本，不能直接在该分支上开发）
develop（开发主分支，所有新功能以这个分支来创建自己的开发分支，该分支只做只合并操作，不能直接在该分支上开发）
feature-xxx（功能开发分支，在develop上创建分支，以自己开发功能模块命名，功能测试正常后合并到develop分支）
feature-xxx-fix(功能bug修复分支，feature分支合并之后发现bug，在develop上创建分支修复，之后合并回develop分支。PS:feature分支在申请合并之后，未合并之前还是可以提交代码的，所以feature在合并之前还可以在原分支上继续修复bug)
hotfix-xxx（紧急bug修改分支，在master分支上创建，修复完成后合并到 master）
注意事项：

一个分支尽量开发一个功能模块，不要多个功能模块在一个分支上开发。
feature 分支在申请合并之前，最好是先 pull 一下 develop 主分支下来，看一下有没有冲突，如果有就先解决冲突后再申请合并。

{{$globals.ICP_SERIAL}}

$.ajax({ 
        async:false,
        type:"POST",
        url:"Venue.aspx?act=init",
        dataType:"html",
        success:function(result){  //function1()
            f1();
            f2();
         }
         failure:function (result) { 
            alert('我在弹'); 
        }
        }
function2();

$.ajax({ 
        async: true, //默认为 true
        type:"POST",
        url:"./xxx/xxx/a/b.html",
        dataType:"html",
        success:function(result){  //function1()
             f1();
             f2(); 
        }
        failure:function (result) { 
              alert('我弹'); 
        },
        }
function2();

var obj = {};
var arr = [];


obj[2] = 'a';
arr[2] = 'a';


console.log(obj[2]); // => a
console.log(arr[2]); // => a
console.log(obj.length); // => undefined
console.log(arr.length); // => 3

var fakeArray = {
    length: 3,
    "0": "first",
    "1": "second",
    "2": "third"
}
var arr = [1, 2, 3, 4]


// 真数组的方法来自Array.prototype
console.log(fakeArray instanceof Array) //false
console.log(arr instanceof Array) // true


Array.isArray(fakeArray) // false;
Array.isArray(arr) // true;


console.log(arr.__proto__ === Array.prototype) // true
console.log(fakeArray.__proto__ === Array.prototype) // false
console.log(fakeArray.__proto__ === Object.prototype) // true


arr.forEach(x => console.log(x)) // 1 2 3 4
fakeArray.forEach(x => console.log(x)) // fakeArray.forEach is not a function


Object.keys(fakeArray) //  ["0", "1", "2", "length"]

使用Array.prototype.slice.call();
var arr = Array.prototype.slice.call(arguments);


Array.prototype.forEach.call(arguments, function(v) {
  // 循环arguments对象
});


// push
// some
// every
// filter
// map
// ...




使用[].slice.call()
var fakeArray = {
    length: 3,
    "0": "first服务器托管网",
    "1": "second",
    "2": "third"
}
var arr = [].slice.call(fakeArray) 
console.log(arr) // ["first", "second", "third"]


使用ES6中的Array.from方法
var fakeArray = {
  length: 3,
    "0": "first",
    "1": "second",
    "2": "third"
  }
var arr = Array.from(fakeArray)
console.log(arr) // ["first", "second", "third"]


使用扩展运算符,也是ES6的语法
var fakeArray = document.querySelectorAll('div')
var newArr= [...fakeArray]
console.log(newArr.__proto__ === Array.prototype) // true




伪数组转换为真数组原理
Array.prototype.slice = function (start, end) {
  start = start || 0
  end = start || this.length
  const arr = []
  for (var i = start; i 

何为同源？
域名、协议、端口完全一致即为同源。


www.juejin.com 和juejin.com
不同源，因为域名不同


www.bilibili.tv和http://www.bilibili.com
不同源，因为域名不同


http://localhost:3000 和 http://localhost:3001
不同源,因为端口不同


qq.com 和https://qq.com
不同源，因为协议不同


www.pixiv.net 和 www.pixiv.net/manage/illu…
同源，因为域名，协议，端口都相同


何为策略？
策略主要限制js的能力
1.无法读取非同源的 cookie、Storage、indexDB的内容
2.无法读取非同源的DOM
3.无法发送非同源的AJAX，更加准确的说应该是发送了请求但被浏览器拦截了。
为什么会有同源策略？

为了保护用户数据安全

1.为了防止恶意网页可以获取其他网站的本地数据。
2.为了防止恶意网站iframe其他网站的时候，获取数据。
3.为了防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据。
跨域问题
前后端分离，和使用服务商数据时，导致前端页面地址和后端API不是同源的，例如前端地址为baidu.com,后端API为api.baidu.com。直接访问API会触发同源策略，所以需要想办法跨过去。
常见的跨域方法的原理
1.CORS
•CORS（跨域资源共享）使用专用的HTTP头，服务器（api.baidu.com）告诉浏览器，特定URL（baidu.com）的ajax请求可以直接使用，不会激活同源策略。
2.JSONP
•这个方案相当于黑魔法，因为js调用（实际上是所有拥有src属性的 、、）是不会经过同源策略，例如baidu.com引用了CDN的jquery。所以我通过调用js脚本的方式，从服务器上获取JSON数据绕过同源策略。
3.nginx反向代理
•当你访问baidu.com/api/login的时候，通过在baidu.com的nginx服务器会识别你是api下的资源，会自动代理到api.baidu.com/login，浏览器本身是不知道我实际上是访问的api.baidu.com的数据，和前端资源同源，所以也就不会触发浏览器的同源策略。

var arr=[5,2,10,8,0,4,7,11,9,1];
function array1(){
    var max,min;
    if(arr[0]min)
        {
            if(arr[i]>max)
            {   
                min=max;
                max=arr[i];
            }
            else  
                min=arr[i];
        }
    }
    alert(min);
}
array1();

var arr=[5,2,10,8,0,4,7,11,9,1];
function array2(){
    var temp,min;
    for(var i=0;iarr[i]){  
                temp= arr[i];
                arr[i] = arr[j];
                arr[j] = temp;
            }
        }
    }
    alert(arr[1]);
}
array2();

// 递归写法
Object.prototype.clone = function(){
    let o = this.constructor === Array ? [] : {};
    for(let e in this){
        o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
    }
    return o; 
}
let obj = {
    a : 1,
    b : {
        c: 2
    }
}
let obj2 = obj.clone();
console.log(obj2);// { a: 1, b: { c: 2, clone: [Function] }, clone: [Function] }

Object.prototype.clone = function(){
    let o = this.constructor === Array ? [] : {};
    for(let e in this){
        if(this.hasOwnProperty(e)){
            o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
        }
    }
    return o; 
}
let obj = {
    a : 1,
    b : {
        c: 2
    }
}
let obj2 = obj.clone();
console.log(obj2); // { a: 1, b: { c: 2 } }




也可以使用Object.keys()方式完成遍历操作


// 递归写法
Object.prototype.clone = function(){
    let o = this.constructor === Array ? [] : {};


    Object.keys(this).forEach(item => {
        o[item] = typeof this[item] === "object" ? this[item].clone() : this[item]
    })
    return o; 


}
let obj = {
    a : 1,
    b : {
        c: 2
    }
}
let obj2 = obj.clone();
console.log(obj2);// { a: 1, b: { c: 2 } }