一些面試題總結

1.請用原生代碼實現選取目標元素全部知足條件的父級元素。

描述：如選出id爲target的全部含有類名爲father的上級元素

思路：使用遞歸實現，可是儘可能不要建立額外的全局變量

代碼：

var a=document.getElementById("this");
        function getParent(dom){
            var d=dom.parentNode;
            var arr=[];
            if(d){
                if(d.className=="target"){
                    arr.push(d);
                }
                if(d.parentNode){
                    return arr.concat(getParent(d));
                }else{
                    return arr;
                }
            }else{
                return arr;
            }
        }
        console.log(getParent(a));

 

2.使用深度優先的原則遍歷一棵樹

描述：其實就是採用遞歸去遍歷一個json串，如代碼中結構的數據所示

輸出：

 

var tree={
            leaf1:{
                leaf2:"value2"
            },
            leaf4:{
                leaf6:{
                    leaf7:{
                        leaf8:"value8",
                        leaf10:"value10"
                    },
                    leaf9:"value9"
                }
            },
            leaf3:"value3"
        };

function ergodicTree(tree,arr){
            arr=arr||[];
            for(var item in tree){
                var i=tree[item];
                var brr=[];
                brr.push(item);
                if(typeof i=="object"){
                    ergodicTree(i,arr.concat(brr));
                }else{
                    brr.push(i);
                    console.log(arr.concat(brr));
                }
            }
        }

 3.用js實現快速排序

function quick(arr){
    var left=[];
    var right=[];
    if(arr.length<=1){return arr;}
    var index=Math.floor(arr.length/2);
    var mid=arr.splice(index,1)[0];
    for(var i=0;i<arr.length;i++){
       if(arr[i]>mid){
          right.push(arr[i]);
       }else{
          left.push(arr[i]);
       }
    }
    return quick(left).concat([mid],quick(right));
}

 4.簡述Object.getOwnPropertyNames / Object.keys 及 for...in 的區別

getOwnPrppertyNames 可以列舉出當前object的所有非原型屬性，包括可枚舉的和不可枚舉的。

keys 只能列舉出object的非原型可枚舉屬性

for...in 能遍歷object的所有可枚舉屬性

5.簡述for...in 和 for...of的異同

相同點：兩者都是有遍歷、迭代的功能

不一樣點： 1.當兩者遍歷相同類型的數據時，for...in 遍歷時的參數是數據的key，而for...of是數據的value

             2.for...in 能夠遍歷object、map、set、array等， 而 for...of 只能遍歷map set array等可迭代變量

6.react中子組件如何更新父組件的state

在子組件中調用父組件中定義的函數，這個函數經過props傳到子組件中

7.vue中，如何封裝一個組件，在不適用template的前提下，輸出一下dom結構：<component-a><component-b foo="bar"/></component-a>?

很簡單，使用vue的render createElement 函數

Vue.component('component-b',{
    props:{
        foo:{
            type:String,
            required:true
        }
    },
    render(h){
        return h('div',['組件B',this.$props.foo])
    }
});

Vue.component('component-a',{
    render(h){
        return h('div',['組件A',h('component-b',{
            props:{
                foo:'bar'
            }
        })]);
    }
})

export default {
    name:'tcm',
    render(h){
        return h('div',[h('component-a')]);
    }
}

8.在SPA項目中如何實現動態模塊依賴？

分別以vue和react +webpack 爲例：

vue:  在vue的單文件中不須要額外的plugin或loader配置，直接使用以下方式便可動態加載模塊及組件

       

// 加載js模塊
import('./asyncMod').then(res=>{
     console.log(res.default);
     res.default();
});


// 加載組件

const Layout = () => import('./page/layout');

 

react: react中的配置比較複雜，babel7 環境下須要 安裝 @babel/plugin-syntax-dynamic-import  插件

其中加載異步模塊與vue是同樣的

而異步加載組件則須要進一步封裝一個高階組件

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    componentDidMount() {
        // const { default: component } = await importComponent();
        let _this=this;
        importComponent().then(res=>{
            _this.setState({
                component: res.default
            });
        })
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

使用時調用高階組件便可：

const Layout = asyncComponent(()=>import('./page/layout'));

 

9.content-type/content-encoding/transfer-encoding分別是什麼含義？分別有哪些值？

content-type： 體頭部用於指示資源的MIME類型 。 常見的值爲  text/html; charset=utf-8  等等

transfer-encoding: 消息首部指明瞭將http請求實體安全傳遞給用戶所採用的編碼形式。  值爲： chunked  gzip  deflate  identity  compress

                           詳細參考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Transfer-Encoding

content-encoding: 是一個實體消息首部，用於對特定媒體類型的數據進行壓縮。當這個首部出現的時候，它的值表示消息主體進行了何種方式的內容編碼轉換。這個消息首部用來告知客戶端應該怎樣解碼才能獲取在 Content-Type 中標示的媒體類型內容

                           值爲： gzip br deflate  identity  compress

                           詳細參考： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Encoding

 

10. 編寫一個函數，計算n個數字的和，n>=0,要求：不能使用循環，必須使用尾遞歸，算法複雜度爲O(n).

function sum(num,total){
   if(!total){
       total = 0;
   }
   total += num;
   if(num<=0){
       return total;
   } else {
       return sum(num-1,total);
   }
}

 

11. 實現js深拷貝，要求：a.不能使用循環數組下標作數組拷貝。b.不能拷貝對象原型鏈上的屬性

注： 這個問題提的有點傻逼，不循環數組下標還要深拷貝，對象數組怎麼辦？這他孃的怎麼深拷貝？（這裏默認不採用 JSON.parse 和 JSON.stringify）

function judgeType(s){
    if(s==null){
        return 'null';
    }
    let str = Object.prototype.toString.call(s);
    let reg = /\[\w+\s(\w+)\]/;
    var ss = str.match(reg)[1];
    return ss.toLowerCase();
}


function copyArray(arr){
    let aa = [];
    arr.forEach(e=>{
        switch(judgeType(e)){
            case 'array':
                aa.push(copyArray(e));
                break;
            case 'object':
                aa.push(copyObject(e));
                break;
            default:
                aa.push(e);
        }
    });
    return aa;
}

function copyObject(obj){
    let keys = Object.getOwnPropertyNames(obj);
    let oo = {};
    keys.forEach(e=>{
        let val = obj[e];
        switch(judgeType(val)){
            case 'array':
                oo[e] = copyArray(val);
                break;
            case 'object':
                oo[e] = copyObject(val);
                break;
            default:
                oo[e] = val;
        }
    });
    return oo;
}