一部のWebフロントエンド面の質問の概要

最近、出て行くので、私に適切な質問を印象づけるものを記録し、いくつかの企業にインタビュー:

ES5下CONST機能を実現する(オブジェクトおよびアレイは、CONST理由の定義の変更かどうかを尋ね)

var const_=function (varName,value){
    window.varName=value;
    Object.defineProperty(window,varName,{
        enumerable:false,
        configurable:false,
        get:function(){
            return value;
        },
        set:function(data){
            if(data!==value){
                throw new TypeError('不允许修改');
            }else{
                return value;
            }
        }   
    })
}
const_('a',20);
a=30;//报错

VUEは、双方向データバインディングを達成する方法である(実際には、上記の問題は、知識の点です)

上記方法は、更新が必要であるかどうかを決定するためにタイムリーにデータを変更する際、モニタにセット目的を達成する取得し、同じです。すべてのコンソールVUEデータが印刷される理由はほぼ同じ、ゲッターとセッター特定のコードが書かれていませんされてもいます

純粋な機能と反応することに関する

Baiduのできる標準的な純粋な関数定義は、私の理解である:私はどのようなデータ、安定した泥棒を見るものを私に示して、純粋な成分(または機能性成分)が、純粋な関数である反応して、唾を吐く、または輝き何を食べるために何。減速中の別の例は、Reduxの作用によって提供されるデータを処理する責任純関数です。文書はかつて、特に純粋な機能に取りつかれて反応することを言っ反応します。

データ変換についての質問(質問のこのタイプは、気持ちがより重要なポイントである、両社を尋ねました)

これは実際にこの種の問題は、非常に良いではない答えを感じるとき、私はインタビューしなかっ年前にことを期待していなかったです。考え方は、ああバースト

私は2社目、それの例を挙げてみましょう:

あなたは、バックデータに戻る:[{:2000、月:1、日:11、誕生:200年}]、誕生月の数、およびこのフォーマットの割合は年間で毎年計算され、缶ビューショーで

假设初始数据是:
arr: [
        {year:2000,month:1,day:11,birth:200},
        {year:2000,month:1,day:11,birth:20},
        {year:2010,month:2,day:22,birth:100},
        {year:2000,month:1,day:11,birth:200},
        {year:2012,month:3,day:11,birth:200},
        {year:2004,month:4,day:11,birth:200},
        {year:2013,month:10,day:11,birth:200},
        {year:2017,month:7,day:11,birth:200},
        {year:2019,month:7,day:11,birth:200},
        {year:2018,month:8,day:11,birth:200},
        {year:2005,month:12,day:11,birth:200},
        {year:2005,month:11,day:11,birth:200},
        {year:2004,month:1,day:11,birth:200},
        {year:2000,month:10,day:11,birth:200},
        {year:2016,month:11,day:11,birth:200},
      ];
// 不使用lodash
let years=arr.map(item=>item.year);
let yearsUnique=[...new Set(years)];
let yearMonths=yearsUnique.map(item=>{
    var monthArr=[];
    var yeartotal=0;
    arr.map(citem=>{
      if(citem.year==item){
        yeartotal+=citem.birth;
        if(monthArr.length<=0){
          monthArr.push({month:citem.month,birth:citem.birth});
        }else{
          monthArr.forEach((mitem,index)=>{
            if(mitem.month==citem.month){
              monthArr[index].birth=citem.birth+mitem.birth;
            }else{
              monthArr.push({month:citem.month,birth:citem.birth});
            }
          })
        }
          
      }
    })
    monthArr.forEach(item=>{
      item.precent=(Math.round((item.birth/yeartotal)*100))+'%'
    })
    return {year:item,month:monthArr,yearBirth:yeartotal};
})
// 最终结果
[
    { 
        "year": 2000, 
        "month": [ 
                    { "month": 1, "birth": 420, "precent": "68%" }, 
                    { "month": 10, "birth": 200, "precent": "32%" } 
                 ], 
        "yearBirth": 620 
    },
    { 
        "year": 2010, 
        "month": [ 
                    { "month": 2, "birth": 100, "precent": "100%" }
                 ], 
        "yearBirth": 100 
    },
    .
    .
    .
]
// 使用lodash
const yearsMonths=arr.map(item=>{
      return {year:item.year,month:item.month}
    });
const yearsMonthsUnique=_.uniqWith(yearsMonths,_.isEqual);

let res=yearsMonthsUnique.map(item=>{
    var yeartotal=0;
    var monthTotal=0;
    arr.map(citem=>{
      if(item.year==citem.year){
        yeartotal+=citem.birth;
        if(item.month==citem.month){
          monthTotal+=citem.birth;
        }
      }
    })
    return {year:item.year,month:item.month,yearBirth:yeartotal,monthBirth:monthTotal};
})
res.sort(function(prev,next){
    if(prev.year===next.year){
      return prev.month-next.month;
    }else{
      return prev.year-next.year;
    }
})
// 最终结果(percent 再map一遍即可)
[
    { "year": 2000, "month": 1, "yearBirth": 620, "monthBirth": 420 }
    { "year": 2000, "month": 10, "yearBirth": 620, "monthBirth": 200 }
    { "year": 2004, "month": 1, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2004, "month": 4, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2005, "month": 11, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2005, "month": 12, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2010, "month": 2, "yearBirth": 100, "monthBirth": 100 }
    { "year": 2012, "month": 3, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2013, "month": 10, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2016, "month": 11, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2017, "month": 7, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2018, "month": 8, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2019, "month": 7, "yearBirth": 200, "monthBirth": 200 }
]

正直に言うと、これらのデータ変換の問題は時々本当に泥棒の周りに感じ、脳を燃やしています

閉鎖について

それはまた、問題である:F()= ''; F( '')()= ''; F( '')( 'B')()= 'AB'、F( '')( ' B ')(' C ')()=' ABC「·····と同様の機能を実現します

function ff(s){
	var str='';
	function f(params){
        if(params){
			str+=params;
            return arguments.callee;
        }else{
            return str;
        }
    }
	return f(s);
}
ff('a')('b')('c')()//'abc'

// 这个主要是考察对闭包的理解

2019年8月23日

ブラウザのキャッシュ

あなたがページをご覧いただくか、GETリクエストを送信するときに再びによりするとき、ブラウザは、現在の出力の内容を覚えているだろうことを、ブラウザのキャッシュと同じURLの訪問の時、ブラウザはメカニズムをキャッシュ応じてキャッシュされたコピーの応答を使用するかどうかを決定します。あなたは再び同じURLを介してアクセス可能なページを訪問したときにページの内容は、ブラウザがキャッシュされたコピーを使用する場合たとえば、出力は変化しません。

方法のいくつかのブラウザのキャッシュをクリアします。

ページの内容各訪問ではなく、キャッシュされたコピーを使用するのでは、ページをリロードしますので、1セットのメタタグ

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

2.送信get要求、設定することにより、要求に応じてデータを取得します

$.ajax({
   url:'请求路径',
   dataType:'json',
   type:'get',//默认值即为get
   data:{},
   beforeSend :function(xmlHttp){ 
    xmlHttp.setRequestHeader("If-Modified-Since","0"); 
    xmlHttp.setRequestHeader("Cache-Control","no-cache");
   },
   success:function(response){
     
   }
 });

URLがキャッシュされたコピーを使用しないように、同じでない場合3.リクエストが送信されるたびに、異なるURLクエリパラメータが続きます。例えば、乱数要求パスを追加した後、タイムスタンプ等。

 

これらの高次成分見高次成分を、反応

高次成分を受信すると、パラメータとしての成分である、すなわち、既存のコンポーネントを拡張またはそうでなければ変更、最終的なコンポーネントを返します。高次成分の実装は、主に2つである:1プロパティ・ブローカー、その再描画2逆遺伝の受信構成要素を覆う小道具を変更することによって、それらの小道具によって受信継承によって構成要素を変更し、方法

 方法のReduxのは、高レベルのコンポーネントを接続することで、反応ルータは、高次成分にも使用されます

違いは、純粋な成分と共通の構成要素を反応させます

 変更がない場合は、その後、レンダリングshouldUpdateComponent独自の方法を達成するための純粋な成分、比較的浅い小道具や状態にはならないだろう。

通常のコンポーネントは、手動でshouldUpdateComponentを実装する必要があります

違いと変化のライフサイクルの対応するバージョンに反応

 再帰と非再帰的な階乗が達成されました

 関連する使用法のinstanceof

 ページのURLの入力をレンダリングするためにブラウザから何が起こりました

 なぜブラウザクロスドメインリクエストをブロックします

 JSON.stringifyを(使用せずに)複雑なオブジェクトが文字列達成される変換

 二つは、2つの配列の合併後の桁の数を返す関数を実装するためにアレイを命じ

 「厳格な使用」;

関数A(){
    this.x = 1。
    console.log(この);
}
関数B(FN){
    FN()。
}

新しいA();

();

B(A)。

差出力は何ですか

 console.log( '1');

setTimeout(関数(){

    console.log( '2');

}、0);

Promise.resolve()。次に、(関数(){

    console.log( '3');

})

console.log( '4');

出力はどのような順序で?

 

連続更新。

公開された47元の記事 ウォン称賛38 ビュー60000 +

おすすめ

転載: blog.csdn.net/qq8241994/article/details/98638279