記錄一些前端面試題

時間 2019-11-07

標籤記錄一些端面試題简体版

原文原文鏈接

寫一段腳本，實現：當頁面上任意一個連接被點擊的時候，alert出這個連接在頁面上的順序號，如第一個連接則alert(1),依次類推。

var links = document.getElementsByTagName('a');
console.log(links);
for (var i = 0; i < links.length; i++) {
    links[i].onclick = (function (i) {
        return function () {
            alert(i)
        }
    })(i)
}
//or
var links = document.getElementsByTagName('a');
console.log(links);
for (let i = 0; i < links.length; i++) {
    links[i].onclick = function (i) {
        alert(i)
    }
}

建立」內置」方法：給String對象定義一個repeatify方法，該方法接收一個整數參數，做爲字符串重複的次數，最後返回重複指定次數的字符串。

String.prototype.repeatify = function (num) {
    var str = "";
    for (var i = 0; i < num; i++) {
        str += this;
    }
    return str;
}
console.log("laoxie".repeatify(4))

完成一個函數，接受數組做爲參數，數組元素爲整數或者數組，數組元素包含整數或數組，函數返回扁平化後的數組，如：[1,[2,[[3,4],5],6]] = > [1,2,3,4,5,6]。

var arr = [1, [2, 3, [4, 5, [6]]], 7];
var newArr = [];

function getNewArr(arr) {
    for (var i = 0; i < arr.length; i++) {
        if (typeof arr[i] == "number") {
            newArr.push(arr[i])
        } else {
            getNewArr(arr[i])
        }
    }
}
getNewArr(arr)

假設現有一篇文章 var content = 「…大量文字」，文章觸及到一些敏感詞[「wscat」，「yao」，「eno」，「6.1」]等，如何在文章中發現這些敏感詞，並將背景置爲紅色或改變字體顏色標識出來。

var str = "6.1號，這是愉快的兒童節，我清晰地記得，愚蠢的yao牽着可愛的eno...";
var keyword = ["老謝", "老藍", "千鋒", "6.1"];
for (var i = 0; i < keyword.length; i++) {
    str = str.split(keyword[i]);
    str = str.join("<span style='color:red'>" + keyword[i] + "</span>")
    console.log(str)
}
document.getElementById('str').innerHTML = str;

不能使用定時器，實現5s刷新一次頁面

定時自動刷新，content表示刷新間隔，單位爲秒s，下面代碼表示頁面每隔三秒刷新一次javascript

<meta http-equiv="refresh" content="3">

這種方法實現頁面刷新有點投機取巧，這個標籤做用是定時跳轉，content第一個參數表示間隔時間，單位爲秒，第二個參數表示目標網址，可是若是把第二個參數設爲#，就會實現頁面刷新css

<meta http-equiv="refresh" content="3;url=#">

event.currentTarget和event.target的不一樣

能夠發現，因爲事件捕獲和事件冒泡的存在，不少時候註冊的事件監聽者event.currentTarget並非事件的觸發者event.target，大部分時候事件多是由子元素觸發的，可是在捕獲、冒泡的過程當中被父級元素的事件監聽器獲取到了，註冊監聽事件的父級元素就是這種狀況下event.currentTarget，而事件觸發者也就是子元素就是event.targethtml

<head>
    <meta charset="utf-8">
    <title>菜鳥教程(runoob.com)</title>
</head>
<body>
    <p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
    <button id="myBtn">點我</button>
    <p id="demo"></p>
    <script>
        var btn = document.getElementById("myBtn");
        btn.addEventListener("click", function displayDate1(e) {
            console.log('按鈕註冊點擊事件');
            console.log("e.currentTarget", e.currentTarget);
            console.log("e.target", e.target);
            console.log("this", this)
        });
        document.body.addEventListener("click", function displayDate1(e) {
            console.log('body註冊點擊事件');
            console.log("e.currentTarget", e.currentTarget);
            console.log("e.target", e.target);
            console.log("this", this)
        });
    </script>
</body>
</html>

css加載會阻塞DOM樹渲染嗎？

不會java

css加載不會阻塞DOM樹的解析
css加載會阻塞DOM樹的渲染
css加載會阻塞後面js語句的執行

這可能也是瀏覽器的一種優化機制。由於你加載css的時候，可能會修改下面DOM節點的樣式，若是css加載不阻塞DOM樹渲染的話，那麼當css加載完以後，DOM樹可能又得從新重繪或者回流了，這就形成了一些沒有必要的損耗。因此我乾脆就先把DOM樹的結構先解析完，把能夠作的工做作完，而後等你css加載完以後，在根據最終的樣式來渲染DOM樹，這種作法性能方面確實會比較好一點，摘自css加載會形成阻塞嗎？node

defer和async的區別

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

沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。git

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

有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。github

<script defer src="myscript.js"></script>

有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。defer和async的區別segmentfault

遍歷一個某一元素下的全部子元素(包括子元素的子元素)的方法，打印出全部子元素的ID

假設要遍歷document.body數組

var allNodes = [];
function getChildNode(node) {
    //先找到子結點
    var nodeList = node.childNodes;
    for (var i = 0; i < nodeList.length; i++) {
        //childNode獲取到到的節點包含了各類類型的節點
        //可是咱們只須要元素節點  經過nodeType去判斷當前的這個節點是否是元素節點
        var childNode = nodeList[i];
        //判斷是不是元素結點
        if (childNode.nodeType == 1) {
            console.log(childNode.id);
            allNodes.push[childNode];
            //childNode.style.border = "1px solid red";
            getChildNode(childNode);
        }
    }
}
getChildNode(document.body);
//getChildNode("某元素");

f(1)=1, f(1)(2)=2, f(1)(2)(3)=6, 設置一個函數輸出一下的值

難點:打印和相加計算，會分別調用toString或valueOf函數，因此咱們重寫temp的toString和valueOf方法，返回a的值，這裏測試的時候發現只要改寫toString就能夠了瀏覽器

function add(a) {
    var temp = function (b) {
        return add(a + b);
    }
    temp.valueOf = temp.toString = function () {
        return a;
    };
    return temp;
}
console.log(add(1)(2));
alert(add(1)(2)(3));

簡單講，在對對象（廣義的，包括函數對象）進行+ - * / == > < >= <=運算時，會依次嘗試調用私有toString私有valueOf原型toString原型valueOf，直到遇到返回基本類型（如數字或字符串）中止，這裏能夠參考實現語法的功能：var a = add(1)(2)(3); //6沒看懂別人的代碼

var temp = function () {
    var a = 1 + 2;//這裏執行了加法因此會執行temp.toString方法
    return temp;
};
temp.toString = function () {
    return "wscats";
};
console.log(temp());

從圖片能夠看出來，當改寫了toString後，既返回了函數，還打印出告終果
<img width="223" alt="2018-11-21 3 36 34" src="https://user-images.githubuse...;>

實現下面的函數 new Test("test").firstSleep(3).sleep(5).eat("dinner")

具體能夠參考鏈式調用

function Test(name) {
    this.task = [];
    let fn = () => {
        console.log(name);
        this.next();
    }
    this.task.push(fn);
    setTimeout(() => {
        this.next();
    }, 0)
    return this;
}

Test.prototype.firstSleep = function (timer) {
    console.time("firstSleep")
    let that = this;
    let fn = () => {
        setTimeout(() => {
            console.timeEnd("firstSleep");
            that.next();
        }, timer * 1000)
    }
    this.task.unshift(fn);
    return this;
}

Test.prototype.sleep = function (timer) {
    console.time("sleep")
    let that = this;
    let fn = () => {
        setTimeout(() => {
            console.timeEnd("sleep");
            that.next();
        }, timer * 1000)
    }
    this.task.push(fn);
    return this;
}

Test.prototype.eat = function (dinner) {
    let that = this;
    let fn = () => {
        console.log(dinner);
        that.next();
    }
    this.task.push(fn);
    return this;
}

Test.prototype.next = function (dinner) {
    let fn = this.task.shift();
    fn && fn()
}

new Test("test").firstSleep(3).sleep(5).eat("dinner")

如何優化 if...else語句

決策樹和衛語句

const a = 3;  
//bad:
if (a === 1) {
    console.log('a > 1');
}
if (a === 2) {
    console.log('a > 2');
}
if (a === 3) {
    console.log('a > 3');
}
if (a === 4) {
    console.log('a > 4');
}
// good:
switch(a) {
    case 1:
        console.log('a = 1');
    case 2:
        console.log('a = 2');
    case 3:
        console.log('a = 3');
    defaut:
        console.log('blablabla');
}
const judgeMap = {
    1: () => { console.log('a = 1') },
    2: () => { console.log('a = 2') },
    3: () => { console.log('a = 3') },
    4: () => { console.log('a = 4') }
}
judgeMap[a]();

三元表達式

const strength = (password.length > 7) ? 'Strong' : 'Weak';

position:sticky

不用JS狀況寫滑動到頭部固定，參考殺了個回馬槍，仍是說說position:sticky吧

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。