1. flex實(shí)現(xiàn)骰子5點(diǎn)布局

簡(jiǎn)單的思路：
1.flex布局橫向排列，flex-flow:wrap 可以折行
2.通過(guò)給第一個(gè)點(diǎn)設(shè)置右邊距把第二個(gè)點(diǎn)頂?shù)阶钣覀?cè)
3.通過(guò)給中間點(diǎn)設(shè)置左右邊距居中
4.給第4個(gè)點(diǎn)設(shè)置右邊距把第5個(gè)點(diǎn)頂?shù)接疫?br> 5.容器設(shè)置align-content:space-between; 上下位置調(diào)整

         <style>
            .shaizi {
                width: 100px;
                height: 100px;
                display: flex;
                flex-flow: row wrap;
                background: black;
                padding: 15px;
                border-radius: 10px;
                align-content: space-between;
            }

            .item {
                width: 20px;
                height: 20px;
                background: white;
                border-radius: 100%;
                display: inline-block;
                margin-right: 60px;
            }

            .no-margin {
                margin-right: 0;
            }

            .center {
                margin: 0 40px;
            }
        </style>
        <div class="shaizi">
            <div class="item"></div>
            <div class="item no-margin"></div>
            <div class="item center"></div>
            <div class="item"></div>
            <div class="item no-margin"></div>
        </div>

效果圖：

image.png

2. 說(shuō)下js中繼承

//方式一 構(gòu)造函數(shù)繼承
//缺點(diǎn)：只實(shí)現(xiàn)部分繼承，原型中的屬性和方法沒(méi)有繼承過(guò)來(lái)
//優(yōu)點(diǎn)：在初始化子類時(shí)，可以給父類構(gòu)造傳遞參數(shù)
function Parent(name){
    this.name=name;
}
//Parent.prototype.say = function(){
   // console.log("hello");
//}
function Child(name){
    Parent.call(this,name);
}

var a = new Child("zsl");
console.log(a.name); //zsl

//方式二 原型鏈繼承
//缺點(diǎn) 1. 是改變對(duì)象的引用屬性，其他對(duì)象也跟著一起改變；
//缺點(diǎn) 2. 是在創(chuàng)建子類的實(shí)例中不能向父類構(gòu)造傳遞參數(shù)；
function Parent(){
    this.name="zhang";
    this.arr=[1,2,3];
}
function Child(age){
    this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var a = new Child(18);
var b = new Child(18);
a.arr.push(4);
console.log(a.arr); //[1,2,3,4]
console.log(b.arr); //[1,2,3,4]

//方式三 組合繼承
//優(yōu)點(diǎn)：避免了原型鏈繼承和構(gòu)造函數(shù)繼承的缺點(diǎn)
//缺點(diǎn)：創(chuàng)建對(duì)象時(shí)會(huì)執(zhí)行2次父類的構(gòu)造方法
function Parent(){
    this.name="zhang";
    this.arr=[1,2,3];
}
function Child(age){
    Parent.call(this);
    this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var a = new Child(18);
var b = new Child(18);
a.arr.push(4);
console.log(a.arr); //[1,2,3]
console.log(b.arr); //[1,2,3,4]

//方式四 寄生組合式繼承(最優(yōu)方式)
//優(yōu)點(diǎn)：避免了實(shí)例化對(duì)象，執(zhí)行2次父類構(gòu)造
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}

function extend(child,parent){
    var copyObj = object(parent.prototype);
    copyObj.constructor = child;
    child.prototype = copyObj;
}
function Parent(){
    this.name="zhang";
    this.arr=[1,2,3];
}
function Child(age){
    Parent.call(this);
    this.age = age;
}
extend(Child,Parent);

// 最優(yōu)方式的另一個(gè)種寫(xiě)法好理解些
       function Person(name, age) {
            this.name = name,
            this.age = age
        }
        Person.prototype.setAge = function () {
            console.log("111")
        }
        function Student(name, age, price) {
            Person.call(this, name, age)
            this.price = price
            this.setScore = function () {}
        }
        Student.prototype = Object.create(Person.prototype)//核心代碼
        Student.prototype.constructor = Student//核心代碼
        var s1 = new Student('Tom', 20, 15000)
        console.log(s1 instanceof Student, s1 instanceof Person) // true true
        console.log(s1.constructor) //Student
        console.log(s1)

3. 以下代碼運(yùn)行的結(jié)果是輸出（）

var a=b=1;
(function(){
  var a=b=2;
})();
console.log(a,b);
// 解析
// 賦值是從右到左，所以var a=b=2;相當(dāng)于 b=2;var a=b; 
// b沒(méi)有var在非嚴(yán)格模式默認(rèn)是全局變量，a有var修飾是局部變量
// console是在全局環(huán)境中，只能訪問(wèn)到全局變量，所以結(jié)果是a=1 b=2

4. 運(yùn)行的結(jié)果在控制臺(tái)輸出什么？

if([] instanceof Object){
    console.log(typeof null);
}else{
    console.log(typeof undefined);
}
// 輸出 object

javascript的數(shù)據(jù)類型有：
string 、number 、boolean、object、undefined （null也是object類型）
這里注意：
typeof undefined --> undefined
typeof null --> object

5. 以下程序輸出什么？

function say(word){
    let word = "hello";
    console.log(word);
}
say("hi lili");
//報(bào)錯(cuò) Uncaught SyntaxError: Identifier 'word' has already been declared

6.請(qǐng)選擇正確的輸出（）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log(i);
    },0);
}
// 5 5 5 5 5 
//分析這個(gè)問(wèn)題前我們先看下這段代碼
<script>
setTimeout(
    console.log("11");
,0);
console.log("22");
</script>
//正常輸入 0 1 2 3 4
for(var i=0;i<5;i++){
    (function(i){
        setTimeout(function(){
          console.log(i);
        },0);
    })(i);
}

for(let i=0;i<5;i++){
  setTimeout(function(){
    console.log(i);
  },0);
}

你會(huì)發(fā)現(xiàn)雖然setTimeout在前面立即執(zhí)行，但輸入的結(jié)果仍然是：22 11
那么為什么會(huì)先輸出22呢？
因?yàn)槎〞r(shí)器都會(huì)被放在一個(gè)隊(duì)列的數(shù)據(jù)結(jié)構(gòu)中(先進(jìn)先出)
只有上下文的可執(zhí)行代碼都執(zhí)行完畢了，才會(huì)執(zhí)行隊(duì)列中的定時(shí)器。

這樣我們就知道了，上面for循環(huán)中，先循環(huán)完5次后（這時(shí)i已經(jīng)為5），才會(huì)執(zhí)行定時(shí)器的代碼。所以輸出5個(gè)5。

7. 怎樣快速去判斷一個(gè)數(shù)據(jù)類型

我們熟悉的有2中方法：typeof和instanceof
這倆種方法不夠快速，因?yàn)槟阈枰粩嘣?，才能最終確定什么類型。下面這種方法最快速：
Object.prototype.toString.call()
比如：

let o = {name:"zhang"};
let arr = [1,2,3];
let type1 = Object.prototype.toString.call(o);
let type2 = Object.prototype.toString.call(arr);
console.log(type1);
console.log(type2);
//[Object Object]
//[Object Array]

8. Vue 雙向綁定原理

參考：https://juejin.im/entry/5923973da22b9d005893805a

9. 問(wèn)輸出結(jié)果是啥

123 instanceof Number  //false
new Number(123)  instanceof Number  //true
Number(123) instanceof Number  //false
//instanceof 只能判斷對(duì)象、數(shù)組等的對(duì)象類型，不能判斷基本數(shù)據(jù)類型

10. js實(shí)現(xiàn)二分法查找，并說(shuō)出時(shí)間復(fù)雜度

//二分查找數(shù)組必須有序
        function binarySearch(key,arr) {
            if (arr.length<1) return -1;
            let start = 0;
            let end = arr.length-1;
            while (start<=end) {
                let middle = Math.floor((start+end)/2);
                if (key<arr[middle]) {
                    end = middle -1;
                }else if(key>arr[middle]){
                    start = middle +1;
                }else{
                    return middle;
                }
            }
            return -1;
        }

這里說(shuō)下時(shí)間復(fù)雜度和空間復(fù)雜度的概念和算法：
時(shí)間復(fù)雜度：方法運(yùn)行時(shí)占用的時(shí)間
空間復(fù)雜度：方法運(yùn)行時(shí)占用的內(nèi)存

常用的時(shí)間復(fù)雜度記法為大O記法：T(n) = O( f(n) )
f(n) 是一個(gè)函數(shù)，表示隨著問(wèn)題規(guī)模n的增大，執(zhí)行時(shí)間的增長(zhǎng)率。

O(n)：

比如求1到n之間數(shù)的和：

let sum=0;
for(let i=1;i<=n;i++){
    sum+=i;
}

顯然循環(huán)內(nèi)語(yǔ)句執(zhí)行了n了，也就說(shuō)這個(gè)方法的運(yùn)行次數(shù)和問(wèn)題規(guī)模n成正比，n大運(yùn)行時(shí)間長(zhǎng)，n小運(yùn)行時(shí)間短。所以這個(gè)方法的時(shí)間復(fù)雜度為O(n)。

O(1)

那么還有一種算法，求1到n之間數(shù)的和：

1+2+3+...(n-2)+(n-1)+n
//收尾相加
n/2(n+1)

這種方法也問(wèn)題規(guī)模n沒(méi)有關(guān)系，無(wú)論n是多少，只需要執(zhí)行n/2(n+1)這一句代碼就能得出結(jié)果，所以這個(gè)算法問(wèn)題規(guī)模沒(méi)有關(guān)系的，我們都就說(shuō)他的時(shí)間復(fù)雜度為O(1)。

O(n2)

for(let i=0;i<n;i++){
    for(let j=0;j<n;j++){
        //時(shí)間復(fù)雜度為O(1)的程序
    }
}

到這里需要說(shuō)下推導(dǎo)大O階的定律：

• 用常數(shù)1取代運(yùn)行時(shí)間中所有的加法常數(shù)
• 在修改后的運(yùn)行次數(shù)函數(shù)中，只保留最高階項(xiàng)
• 如果最高階項(xiàng)存在且不是1，則去除與這個(gè)項(xiàng)目相乘的常數(shù)

時(shí)間復(fù)雜度.jpg

到這里我們出一個(gè)考察題，看看掌握的怎么樣：

for(let i=0;i<n;i++){
    for(let j=i;j<n;j++){
        //時(shí)間復(fù)雜度O(1)的程序
    }
}

里面for循環(huán)一次執(zhí)行次數(shù)的順序是：
n+(n-1)+(n-2)+....+2+1
也就是n/2(n+1)，取高階為n2/2，去除相乘的常數(shù)后就是n2,
所以這個(gè)方法的時(shí)間復(fù)雜度也是O(n2)

那接下來(lái)我們回過(guò)頭看看二分法查找的時(shí)間復(fù)雜度：
其實(shí)主要看while循環(huán)的次數(shù)，比如數(shù)組長(zhǎng)度n，一次后是n/2，while執(zhí)行2次后剩的遍歷區(qū)間長(zhǎng)度就是n/22，假設(shè)x次后找到，就是n/2? >=1 ，即令 n/2? =1，x= log?n，所以二分法的時(shí)間復(fù)雜度是O(logn)。

11. 輸出的順序

setTimeout(
  function(){
      console.log("11");
  }
);

console.log("22");

Promise.resolve().then(function(){
    console.log("33");
});
// 22  33 11

注意：
Promise.resolve()返回一個(gè)Promise新的實(shí)例，這個(gè)方法中的參數(shù)有4中類型：thenable,promise對(duì)象，不具有then方法的對(duì)象或者不是對(duì)象，空參數(shù)。
立即resolve的promise對(duì)象是在本輪事件結(jié)束時(shí)執(zhí)行，而setTimeout是在下一輪事件開(kāi)始時(shí)執(zhí)行

12. 深拷貝淺拷貝的區(qū)別，并分別用js實(shí)現(xiàn)

let obj = {
    name:"zhang",
    age:18,
    score:[88,80,90]
}

淺拷貝：拷貝上面obj對(duì)象，會(huì)重新生成一個(gè)一樣對(duì)象，但是淺拷貝只能拷貝表層數(shù)據(jù)，不能拷貝對(duì)象的屬性是對(duì)象或數(shù)組的。也就是說(shuō)新對(duì)象的score屬性，指向的還是原來(lái)對(duì)象score屬性數(shù)組的地址。所以修改淺拷貝的對(duì)象可能會(huì)影響原來(lái)的對(duì)象。
深拷貝：完全的復(fù)制一份，生成的新對(duì)象和原來(lái)的對(duì)象互不影響。

//淺拷貝
function shallowCopy(obj){
    let c = {};
    for(let i in obj){
        c[i] = obj[i];
    }
    return c;
}
//深拷貝(遞歸調(diào)用)
function deepCopy(obj,c){
    let c = c || {};
    for(let i in obj){
        if(typeof obj[i] ==="object "){
            c[i] = (obj[i]===Array)?[]:{};
            deepCopy(obj[i],c[i]);
        }else{
            c[i] = obj[i];
        }
    }
    return c;
}

13. flex實(shí)現(xiàn)下面的布局

image.png

<style>
        .parent {
            display: flex;
            width: 300px;
            height: 200px;
            border: 1px solid green;
            justify-content: space-between;
        }

        .size {
            width: 50px;
            height: 50px;
            background: red;
        }

        .two {
            align-self: center;
        }

        .three {
            align-self: flex-end;
        }
</style>

<div class="parent">
    <div class="size"></div>
    <div class="two size"></div>
    <div class="three size"></div>
</div>

14. 獲取頁(yè)面元素寬高和位置

<div id="div"></div>
var node = document.getElementById("div");

//只能獲取行內(nèi)樣式的寬高，并且無(wú)論標(biāo)準(zhǔn)還是ie盒模型，只取height屬性的值
var h = node.style.height; 

//只使用于ie瀏覽器
var h = node.currentStyle.height; 

//都使用 但也是只取height值
var h = window.getComputedStyle(node).height;

// content+padding
var h = node.clientHeight;

// content + padding +border
var h = node.offsetHeight;

// content + padding + border
var h = node.getBoundingClientRect().height;

//獲取位置就用
node.getBoundingClientRect().left
node.getBoundingClientRect().top
node.getBoundingClientRect().bottom
node.getBoundingClientRect().right
//注意：這些值是從boder開(kāi)始算起的

15. 下面代碼輸出什么（原型鏈知識(shí)）

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '+ p.a); // p.a: undefined
console.log('p.b: '+ p.b); // p.b: b


//Object.prototype.aa = "aa";
Function.prototype.aa = "bb";
function fn() {}
console.log("zhang=" + fn.aa);  //bb

Object.prototype.aa = "aa";
//Function.prototype.aa = "bb";
function fn() {}
console.log("zhang=" + fn.aa);  //aa

Object.prototype.aa = "aa";
Function.prototype.aa = "bb";
function fn() {}
console.log("zhang=" + fn.aa);  //bb

16. 什么是閉包，手寫(xiě)一個(gè)閉包，說(shuō)其作用

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。

function closure(){
  var temp = 'zhang';
  function inner(){
    console.log(temp);
  }
  return inner;
}

作用：可以實(shí)現(xiàn)在函數(shù)外部訪問(wèn)函數(shù)內(nèi)部變量

17.Dom0級(jí)事件和Dom2級(jí)事件的區(qū)別，以及Dom事件和IE事件的區(qū)別

Dom0級(jí)事件有倆種綁定方式：

<div id="div" onclick="down()">點(diǎn)我</div>
或者
var div = document.getElementById("div");
div.onclick = function(){
  //處理
}
//刪除事件
div.onclick =null;

Dom2級(jí)事件的綁定方式：

div.addEventListener('click',function(){
    //處理
},false);
//刪除事件
//匿名函數(shù)的方式無(wú)效
div.removeEventListener('click',function(){
  //處理
},false);
//這種方式有效
div.removeEventListener('click',handler,false);
var handler = function(){
  //處理事件
}

Dom0和Dom2最主要區(qū)別：給一個(gè)元素注冊(cè)同一類的多個(gè)Dom0級(jí)事件，會(huì)覆蓋前面的事件，只有最后注冊(cè)的有效。而同樣注冊(cè)多個(gè)Dom2級(jí)事件會(huì)都有效，并按注冊(cè)順序執(zhí)行。
Dom0和Dom2可以同時(shí)注冊(cè)到一個(gè)元素，執(zhí)行順序按注冊(cè)順序。

Dom事件和IE事件的區(qū)別：Dom事件流的順序是先捕獲再冒泡，而IE事件只有冒泡，沒(méi)有捕獲。
注冊(cè)事件的方式也不同：

// 注意事件類型onclick不是click
div.attachEvent('onclick',function(){
  //處理事件
});

//解除事件綁定
div.detachEvent('onclick',function(){
});

注意：IE事件和Dom2級(jí)事件一樣，可以給一個(gè)元素注冊(cè)多個(gè)同類型的事件，但是Dom2執(zhí)行順序是按注冊(cè)順序，而IE的執(zhí)行順序和注冊(cè)順序相反。

div.attachEvent('onclick',function(){
    console.log("ie事件1");
});
div.attachEvent('onclick',function(){
    console.log("ie事件2");
});
//ie事件2
//ie事件1

注意：Dom事件執(zhí)行的作用域是其所屬元素的作用域，而IE事件執(zhí)行的作用域是全局作用域。

div.addEventListener('click',function(){
    //這里this是div所屬作用域環(huán)境
},false);

div.attachEvent('onclick',function(){
    //這里this是全局作用域，即window環(huán)境
    console.log(this==window); //true
});

18. Vue父子組件和兄弟組件之間通信

https://segmentfault.com/a/1190000020053344?from=groupmessage&isappinstalled=0

19.html自上向下加載遇到<script>標(biāo)簽會(huì)怎樣？

https://juejin.cn/post/6894629999215640583

<script src="a.js"></script>

普通script加載流程：

• document解析
• 遇到script標(biāo)簽，停document解析
• 請(qǐng)求a.js
• 執(zhí)行a.js中的腳本
• 繼續(xù)解析document

給script標(biāo)簽加上defer 或 async屬性后，script標(biāo)簽不會(huì)阻塞document的解析，這時(shí)所有帶defer 或 async的script標(biāo)簽都會(huì)并行下載。

defer

<script src="a.js"></script>
<script src="b.js"></script>

• 不阻止解析 document， 并行下載 a.js, b.js
• 下載完 a.js, b.js 不會(huì)立即執(zhí)行，仍繼續(xù)解析 document
• 按頁(yè)面的出現(xiàn)順序，同步腳本都執(zhí)行完，DomContentLoaded事件前，按順序執(zhí)行a.js b.js

async

<script src="a.js"></script>
<script src="b.js"></script>

• 有可能阻止解析 document， 并行下載 a.js, b.js
• 下載完后立即執(zhí)行，兩者執(zhí)行順序不一定，執(zhí)行時(shí)間不一定，可能在DomContentLoaded前，也可能在其后

20.@import 和 link引入外部樣式有什么區(qū)別？

首先，樣式有三種方式：行內(nèi)樣式、內(nèi)聯(lián)樣式、外聯(lián)樣式
他們的權(quán)重是：行內(nèi)樣式>內(nèi)聯(lián)樣式>外聯(lián)樣式

<link rel="stylesheet" type="text/css" href="./a.css">
<style type="text/css">
    @import url(b.css);
    .div{
        width:100px;
        height:100px;
        background:red;
    }
</style>

• @import是放在<style>標(biāo)簽內(nèi)部的，所以屬于內(nèi)聯(lián)樣式，而<link>是外聯(lián)樣式，所以他們的權(quán)重不一樣。
• @import樣放在<script>標(biāo)簽內(nèi)，所有樣式的頂部，不然不起作用
• <link>標(biāo)簽只能放在<head>標(biāo)簽中，不能放在其他地方
• <link>所以引用的樣式文件，只能有樣式代碼，而@import的外聯(lián)樣式文件中，還可以繼續(xù)使用@import引入其他文件。
• @import的url后面可以提供媒體描述符

@import url(a.css) all;
@import url(b.css) screen;
@import url(c.css) projection,print;

21. CSS選擇器權(quán)限問(wèn)題

!important > 行內(nèi)樣式(1000) > id(100) > 類(10) > 標(biāo)簽(1) >通配符 *（0）

<style>
    .div{
        background:red !important;
    }
</style>

<div style="background:blue"></div>
//顯示紅色

22.下面代碼輸出什么

try{
  console.log(1);
  setTimeout(()=>{
    console.log(2);
    throw new Error(3);
  },0);
}catch(e){
  console.log(e);
}
// 1 2
// Uncaught error 3

try catch是同步代碼，同步代碼執(zhí)行完畢輸出1。然后執(zhí)行異步代碼，輸出2，然后拋出異常，由于try catch已經(jīng)執(zhí)行完，所以不能捕獲到異常。

23.求倆個(gè)數(shù)組的交集

//ES6 寫(xiě)法 時(shí)間復(fù)雜度O(n2)
function insertSection(arr1, arr2) {
   var a = new Set(arr1);
   var b = new Set(arr2);
   return Array.from(a).filter(x => b.has(x));
}

如果時(shí)間復(fù)雜度為O(n)，怎么寫(xiě)？
注意：我們解決這類問(wèn)題的一個(gè)思路是，將時(shí)間復(fù)雜多為On的n次方，拆為n個(gè)復(fù)雜度為O(n)的算法，再讓這些算法串行執(zhí)行。

//時(shí)間復(fù)雜度 O(n)
function insertSection(arr1,arr2){
  //去重
  var a = new Set(arr1);
  var b = new Set(arr2);
  //合并
  var c = [...a,...b];
  //排序 這里是一個(gè)O(n)
  var d = c.sort();
  var e = [];
  var temp;
  for(let i=0;i<d.length-1;i++){
    if(d[i]==d[i+1] && d[i]!=temp){
        e.push(d[i]);
        temp = d[i];
    }
  }
  return e;
}

24."abc efg".replace()，輸入表達(dá)式，使得到的結(jié)果為"efg abc"

先來(lái)了解下String.prototype.replace(參數(shù)1，參數(shù)2)這個(gè)api
str.replace( regexp|substr, newSubStr|function )
這題我們用正則在解，所以先了解正則的幾個(gè)預(yù)定義模式：
^ 表示開(kāi)頭 $表示結(jié)尾 ()表示一組
\w : 匹配任意的字母、數(shù)字和下劃線，相當(dāng)于[A-Za-z0-9_]
\s : 匹配空格（包括換行符、制表符、空格符等,相當(dāng)于[ \t\r\n\v\f]
$n : 匹配成功的第n組內(nèi)容，n是從1開(kāi)始的自然數(shù)。

var reg = /(\w+)\s(\w+)/;
"abc efg".replace(reg,'$2 $1');
//efg abc

25. for、for...of、for...in、forEach、map、filter、every、some、reduce

var arr = [3,5,8];

• for 對(duì)數(shù)組遍歷，可以使用return break continue結(jié)束或進(jìn)行下一次循環(huán)；
• forEach是數(shù)組的方法，遍歷數(shù)組中的每一項(xiàng)數(shù)據(jù)，接受一個(gè)對(duì)每一項(xiàng)數(shù)據(jù)的回調(diào)函數(shù)，但是內(nèi)部不能用return break continue不起作用；

arr.forEach(function(item,index){
  console.log(item);
});
// 3 5 8

• for...in 遍歷數(shù)組的索引，對(duì)象的屬性

for(let i in arr){
  console.log(arr[i]); //遍歷數(shù)組索引
}
//3 5 8

var obj = {name:'zhang',age:18};
for(let i in obj){
  console.log(obj[i]); //遍歷對(duì)象屬性
}
//zhang 18

有一點(diǎn)需要注意，用for...in遍歷時(shí)，原型鏈上的所有屬性都會(huì)被遍歷，比如：

Array.prototype.other = [10,11];
for(let i in arr){
  console.log(arr[i]);
}
//3 5 8 [10,11]

Object.prototype.a = { sex: "man" };
var b = { name: "zhang", age: 18 };
for (let i in b) {
    console.log(b[i]);
}
//zhang 18 {sex:'man'}

那么我不想遍歷原型鏈上的屬性，怎么辦呢？
hasOwnProperty:只有實(shí)例的屬性可以遍歷，原型上的屬性不能遍歷到。

Array.prototype.other = [10,11];
for(let i in arr){
  if(arr.hasOwnProperty(i)){
    console.log(arr[i]);
  }
}
//3 5 8

• for...of ES6提出的，可以遍歷Array、String、Map、Set、arguments、dom集合，但是不能遍歷對(duì)象。

//遍歷數(shù)組
for(let i of arr){
  console.log(i);
}
//3 5 8

//遍歷字符串
var str = "zhang";
for (let i of str) {
   console.log(i);
}
//z h a n g

//遍歷Map

//遍歷Set

//遍歷Dom集合

//遍歷arguments

• map 根據(jù)傳入的函數(shù)，返回新的數(shù)組，原數(shù)組不變

var b = arr.map(x=>{
  return x*2;
});
console.log(b);
//[6,10,16]

• filter根據(jù)傳入的函數(shù)，篩選出符合規(guī)則的值，組成新數(shù)組，原數(shù)組不變

var arr = [3,5,8,10];
var b = arr.filter(x=>{
    return x>5;
});
console.log(b);
//[8,10]

• every是數(shù)組的方法，結(jié)果為boolean類型，每一項(xiàng)都滿足函數(shù)，返回true，只要有一項(xiàng)不滿足，就返回false

var arr =[3,5,8];
var result = arr.every(x=>{
  return x>2;
});
//true
var result = arr.every(x=>{
  return x>5;
});
//false

• some和every恰恰相反，數(shù)組中有一項(xiàng)滿足函數(shù)規(guī)則，就返回true，否則返回false

var arr = [3,5,8];
var result = arr.some(x=>{
  return x>5;
});
//true

var result = arr.some(x=>{
  return x>12;
});
//false

• reduce為數(shù)組中的每一項(xiàng)，執(zhí)行你提供的函數(shù)計(jì)算，最后返回一個(gè)結(jié)果值。
  arr.reduce(參數(shù)一，參數(shù)二);
  參數(shù)一：為自定義函數(shù)reducer，他接受4個(gè)參數(shù)，分別為sum(累加器)、item(當(dāng)前值)、index(當(dāng)前索引)、arr(原數(shù)組)；
  參數(shù)二：為累加器sum的初始值；

var arr = [3,5,8];
var b = arr.reduce(function(sum,item){
  return sum+item;
},0); //初始值為0
console.log(b);
//16 

var b = arr.reduce(function(sum,item){
  return sum+item;
},2); //初始值為2
console.log(b);
//18

26：for...in、Object.keys()、Object.getOwnPropertyNames()的區(qū)別

var parent = Object.create(Object.prototype, {
    a: {
        value: 1,
        writable: true,
        enumerable: true,
        configurable: true            
    }
});

var child = Object.create(parent, {
    b: {
        value: 2,
        writable: true,
        enumerable: true,
        configurable: true
    },
    c: {
        value: 3,
        writable: true,
        enumerable: false,
        configurable: true
    }
});

child繼承parent，child有倆個(gè)屬性，b和c，不是可枚舉的，c不可枚舉的。
現(xiàn)在我們用遍歷的方式打印child的屬性：

//for in 遍歷的是自身和原型的可枚舉屬性
for(let i in child){
  console.log(i);
}
// b a

for(let i in child){
  if(child.hasOwnProperty(i)){
    console.log(i);
  }
}
//b

//object.keys() 相當(dāng)于for...in + hasOwnProperty()形式
console.log(Object.keys(child)); //獲取自身可枚舉屬性，不包括原型
//b

//打印出自己的屬性，無(wú)論是否可枚舉
console.log(Object.getOwnPropertyNames(child));
//b c

27.說(shuō)下防抖和截流，以及怎樣實(shí)現(xiàn)

防抖：在n秒后執(zhí)行回調(diào)函數(shù)，如果在n秒內(nèi)再觸發(fā)事件，重新計(jì)算時(shí)間。

function dance(fn,delay){
  var timeId;
  return function (){
    clearTimeout(timeId);
    timeId = setTimeout(fn,delay);
  }
}

function callback(){
  console.log("網(wǎng)絡(luò)請(qǐng)求中……");
}

var preventDance = dance(callback,500);
var btn = document.getElementById("btn");
btn.onclick = preventDance;

//另一種寫(xiě)法
function debounce(fn,args){
  clearTimeout(fn.id);
  fn.id = setTimeout(()=>{
    fn(args);
  },800);
}

截流：顧名思義就是限流的意思，在規(guī)定的時(shí)間內(nèi)只能執(zhí)行一次回調(diào)函數(shù)

function throttle(fn,delay) {
            var timer;
            return function () {
                var _this = this;
                var args = arguments;
                if (timer) return;
                timer = setTimeout(() => {
                    fn.apply(_this,args);
                    timer = null;
                }, delay);
            }
        }

28.target 和 currentTarget的區(qū)別

<div id='A'>
  <div id='B'></div>
</div>

var a = document.getElementById('A');
a.addEventListener('click',function(e){
  console.log(e.target);
  console.log(e.currentTarget);
},false);

• 點(diǎn)擊A時(shí)輸出的是A元素 A元素
• 點(diǎn)擊B時(shí)輸出的是B元素 A元素

所以最終的結(jié)論是：target是點(diǎn)擊哪個(gè)元素，就代表誰(shuí)。而currentTarget是事件綁定的對(duì)象
http://www.itdecent.cn/p/ee83be054682

29.父元素寬高固定200px，里面是寬高未知的圖片，怎樣使圖片水平垂直居中

<div class="parent">
  <img class="child"  src="images/a.jpg"/>
</div>

image.png

.parent{
  position:relative;
  width:200px;
  height:200px;
  border:1px solid red;
}

 /* 方式一 flex */
.parent{
  position:relative;
  width:200px;
  height:200px;
  border:1px solid red;
 
  display:flex;
  justify-content:center;
  align-items:center;
}

/* 方式二 position + transform */
.child{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

 /* 方式三：table-cell */
.parent{
  position:relative;
  width:200px;
  height:200px;
  border:1px solid red;
 
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

/* 方式四  */
/* 注意：position:absolute 和 float:left都會(huì)隱式將元素的display轉(zhuǎn)化
為display:inline-block */
.child{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
}

/* 方式五 grid */
.parent {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
 }

30.響應(yīng)式布局中，子元素的寬度是父元素寬度的80%，怎樣使子元素的寬高比是2:1 (css實(shí)現(xiàn))

<div class="parent">
  <div class="child"></div>
</div>

.parent{
  width:100%;
  border:1px solid red;
}
/* 方法一 */
.child{
  width:80vw;
  height:40vw;
}
/* 方式二 */
.child{
  width:80%;
  height:0;
  padding-bottom:40%;
}
/* padding 在使用百分比時(shí)，相對(duì)的是父元素的寬度 */

31.上下高度固定，中間自適應(yīng)

<div class='wrapper'>
  <div class="top"></div>
  <div class="center"></div>
  <div class="bottom"></div>
</div>

/* 方式一: 上下固定，中間超出內(nèi)容滾動(dòng) */
.wrapper>div{
  position:absolute;
}
.top{
  top:0;
  height:100px;
  width:100%;
}
.center{
  top:100px;
  bottom:100px;
  width:100%;
  overflow:auto;
}
.bottom{
  bottom:0;
  height:100px;
  width:100%;
}

/* 方式二： grid 上下固定，中間超出部分會(huì)將footer擠出屏幕外 */
html,body{
  width:100%;
  heigth:100%;
}
.wrapper{
  display:grid;
  height:100%;
  grid-template-rows:100px auto 100px;
}

/* 方式三：flex */
.wrapper{
  display:flex;
  flex-direction:column;
}
.top{
  height:100px;
  flex:0 0 auto;
}
.center{
  flex:1 1 auto;
}
.bottom{
  height:100px;
  flex: 0 0 auto;
}

/* 方式四：table */
html,body{
  width:100%;
  height:100%;
}
.wrapper{
  height:100%;
  display:table:
}
.wrapper > div{
  display:table-row;
}
.top, .bottom{
  height:100px;
}
/*table-row 中必須有內(nèi)容，否則不顯示*/

32.輸出結(jié)果是什么？

  var x = 1;
  var kit = {
     x: 2,
     buf: {
       x: 3,
       fac() {
         return this.x;
        },
        til: () => {
          return this.x;
        }
      }
   };
   var foo = kit.buf.fac;
   console.log(foo());
   console.log(kit.buf.fac());
   console.log(kit.buf.til());
//1 3 1

注意：這道題主要考察this指向問(wèn)題，箭頭函數(shù)是綁定外側(cè)this，也就是指向window的，還有setTimeout和setInterval里面的this也是指向外層window。

var x = 5;
setTimeout(function() {
    var x = 3;
    console.log(this.x); 
}, 1000);
// 5

33. 輸出結(jié)果是什么，為什么

  var k =1;
  function fac(){
    k =10;
    return;
    function k(){}
  }
  fac();
  console.log(k);
  // 1

此題主要理解函數(shù)的變量提升，執(zhí)行fac時(shí)相當(dāng)于這樣：

function fac(){
  var k = function (){}
  k =10;
  return;
}

所以k改變的是局部變量，所以打印出來(lái)當(dāng)然還是1。

34.各種小算法

add(2)(3) //5

function add(num){
  var sum = num;
  return function (x){
    sum +=x;
    return sum;
  }
}

add(2)(3)(4)(5)(6) //20

function add(num){
  var sum=num,index=1;
  var temp = function (x){
    index++;
    sum += x;
    if(index==5){
      return sum;
    }else{
      return temp;
    }
  }
  return temp;
}

add(2)(3)返回add()函數(shù)，只有不傳參數(shù)時(shí)返回值，比如add(2)(3)() //輸出5

function add(num){
  var sum;
  if(arguments.length==0){
    return 0;
  }else{
    sum =num;
  }
  var temp = function (x){
    if(arguments.length==0){
      return sum;
    }else{
      sum += x;
      return temp;
    }
  }
  return temp;
}

34、說(shuō)下BFC

https://segmentfault.com/a/1190000041226085

35. call() apply() bind()區(qū)別

https://wangdoc.com/javascript/oop/this.html

36. js new操作符做了哪些操作？

1. 堆內(nèi)存中新創(chuàng)建一個(gè)對(duì)象
2. 新對(duì)象的隱式原型proto指向構(gòu)造函數(shù)的原型
3. 構(gòu)造函數(shù)中的this指向這個(gè)新對(duì)象
4. 執(zhí)行構(gòu)造函數(shù)，為新對(duì)象添加屬性
5. 判斷構(gòu)造函數(shù)返回的對(duì)象是否為空，不為空返回該對(duì)象；如果為空，返回新對(duì)象。

//為什么會(huì)有第5步的判斷
function Person(override) {
    this.name = "zsl";
    if (override) {
         return {
            bar:"bar"
          }
    }
}

var p = new Person();
console.log(p);  // Person {name: 'zsl'}
console.log(p instanceof Person); // true
var p1 = new Person(true);
console.log(p1); // {bar: 'bar'}
console.log(p1 instanceof Person); // false

vue 無(wú)限循環(huán)列表，要加一個(gè)key

computed 和 watch區(qū)別