1. CSS 面接の質問

1.フロートをクリアする方法は何ですか?

なぜフロートをクリアするのですか？フローティングボックスは標準フロー外のため、親ボックスの高さを設定しないと下のボックスが立てられてしまいます。

追加のラベル方法 (最後のフローティングラベルの後に、新しいラベルを追加し、クリアを設定します: 両方; ) (非推奨)
親に overflow 属性を追加します (overflow:hidden を親要素に追加します) (非推奨)
after 疑似要素を使用してフロートをクリアします (推奨)

.clear:after{
    
     
	content:''; display:block; 
	overflow:hidden; 
	visibility:hidden; 
	clear:both;
}

前と後の疑似要素を使用してフロートをクリアする


```javascript
.clearfix:after,.clearfix:before{
    
    
	content: "";
	display: table;
}
.clearfix:after{
    
    
	clear: both;
}
.clearfix{
    
    
	*zoom: 1;
}

2. 位置のいくつかの属性の機能は何ですか?

位置の一般的な 4 つの属性値: 相対、絶対、固定、静的。通常、「左」、「上」、「右」、および「下」属性と組み合わせて使用されます。
(1) static: デフォルトの位置 (静的要素は、上、下、左、または右の宣言を無視します)。通常、一般的には使用されません。
(2) Relative: 位置が相対に設定されている要素の場合、オフセットの上、右、下、左の値はすべて元の位置からオフセットされます。相対的に移動された要素は、元の位置のスペースを占有していることに注意してください。
(3) absolute: 位置が絶対に設定されている要素は、それを含む要素に対して指定された座標に配置できます。親コンテナーが position 属性を設定し、position 属性の値が絶対または相対である場合、親コンテナーに従ってオフセットされることを意味します。親コンテナーが position プロパティを設定しない場合、オフセットは本体に基づきます。絶対属性が設定された要素は、標準フローでは使用されないことに注意してください。
(4) fixed: 位置が固定に設定されている要素は、ブラウザウィンドウに対して指定された座標に配置できます。ウィンドウがスクロールされているかどうかにかかわらず、要素はその位置にとどまります。それは常に体に基づいています。fixed 属性が設定された要素は、標準フローでは使用されないことに注意してください。

3. ページ上の複数の要素に同じ ID を設定すると、どのような問題が発生しますか?

jsでdom要素を取得する際、最初の要素しか取得できず、以降の要素が正常に取得できない原因となります。

4. レスとは？

Less は CSS 前処理言語です。less では、いくつかの変数と式を定義し、ネストされた構文を使用できます。less では、@ を使用して変数を定義します (@baseColor:pink)。後で、いくつかのコンパイルツール (less) を使用してコンパイルできます。ブラウザが直接認識できる css スタイルは少なくなります。less は開発段階で使用される単なる中間言語であり、less を使用する目的は、開発効率とコードの保守性を向上させることです。

5. Scssとは? (sass)

scss は css 前処理言語です。less では、いくつかの変数と式を定義し、ネストされた構文を使用できます。scss では、 $変数を定義します ($ baseColor:pink); 後で、いくつかのコンパイルツール (node-sass) を使用して、ブラウザが直接認識できる CSS スタイルにコンパイルすることができます。したがって、scss は開発段階で使用される単なる中間言語であり、scss を使用する目的は、開発効率とコードの保守性を向上させることです。

6. スタイラスとは? (.styl)

スタイラスは css 前処理言語です. スタイラスでは, いくつかの変数と式を定義でき, ネストされた構文を使用できます (スタイラスでは, インデントされた構文はネスト関係を示すために使用されます); 後でスタイラスを変換して CSS スタイルにコンパイルすることができますつまり、stylus は開発段階で使用される中間言語に過ぎず、stylus を使用する目的は、開発効率とコードの保守性を向上させることです。

7. 画面いっぱいに左中右のレイアウトを書きます. 左右のブロックは固定幅 200 で, 中央は自己適応です. 最初に中央のブロックをロードする必要があります. 構造を書き留めてください.そしてスタイル？

*{
    
    
padding: 0;
margin: 0;
}
html,body{
    
     heig
ht: 100%;
}
.center{
    
     heigh
t: 100%;
background: #1FA363; 
margin:0 200px;
}
.left{
    
    
position: absolute; 
width: 200px; 
height: 100%;
left: 0;
top: 0;
background: #DC4C3F;
}
.right{
    
    
position: absolute; 
width: 200px; 
height: 100%;
right: 0;
top: 0;
background: #FFCE44;
}

<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>

8. ページコードが要求されたリソースコードと一致しない場合はどうすればよいですか?

html のエンコーディングは gbk または gb2312 です。インポートされた js が utf-8 としてエンコードされている場合は、インポートする必要があります。同様に、ページが utf-8 でインポートされた js が gbk の場合は、charset="gbk" を追加する必要があります。

<script src="http://www.xxx.com/test.js" charset="utf-8"></script>

9. どのようなモバイル互換性の問題に遭遇しましたか?

ブラウザごとに最小フォントが異なり、10px のものもあれば 12px のものもあります。

解決策: フォントを設定するときは、12px より小さくしないでください。12px より小さくする必要がある場合は、transform:sacle() を使用してズームします。

モバイル端末のテキストは両端で揃えられており、text-align-last を使用すると ios で互換性の問題が発生します。

text-align-last: justify; の使用 Android では問題ありませんが、ios では整列されません。
解決策: 次のように、現在の要素の後に after 疑似クラスを追加し、現在の要素の行の高さを 0 に設定します。

span {
    
    
	text-align: justify;
	text-align-last: justify;
	line-height: 0px;
	&::after {
    
    
		content: "";
		width: 100%;
		display: inline-block;
	}
}

scrollTo(0,0)とscrollTop=0

Dom.scrollTo(0,0) は、バージョンの低い Apple 携帯電話ではサポートされておらず、このメソッドを使用するとエラーが報告されます。つまり、dom.scrollTop=0 を使えば普通に使えます。

position:absolute/fixed; を使用して、ページの下部にボタンを固定します. Android システムでは、入力メソッドが呼び出されると、ボタンが押し上げられます.

解決策: メディアクエリ @media screen と (max-width:400px){} を使用します。ページの高さが特定の値よりも小さい場合は、要素に上部の値を指定します。デフォルトのマージンとパディングは、ブラウザーによって異なります。解決策: *{マージン:0;パディング:0;}

クリックイベントの遅延問題。

モバイル端末でのクリックイベントには 300 ミリ秒の遅延があります。これは、ブラウザがダブルクリックの実行を待機しているためです。ただし、この遅延はユーザーエクスペリエンスの低下につながります。解決策: script タグを使用して fastclick ライブラリを導入し、遅延を取り除き、ズーム user-sable="no" を無効にします。

二、jsインタビューの質問.

1.プロトタイプオブジェクトとは？

各コンストラクターにはプロトタイプ属性があり、この属性の値は、コンストラクターのプロトタイプオブジェクトと呼ばれるオブジェクトです。通常、コンストラクターのメンバープロパティをプロトタイプオブジェクトプロトタイプにバインドすることをお勧めします。のプロパティは、デフォルトでインスタンスオブジェクトを介してアクセスできます。これにより、new キーワードを介してインスタンスオブジェクトが作成されるたびに、これらのメソッドがメモリ内で繰り返し作成されることがなくなります。

2. プロトタイプチェーンとは？

各コンストラクターにはプロトタイプ属性、つまりプロトタイプオブジェクトがあり、プロトタイプオブジェクトにはインスタンスオブジェクトの proto 属性を介してアクセスすることもできます; プロトタイプオブジェクトも本質的にオブジェクトであり、オブジェクトには独自のプロトタイプオブジェクトがあります。そして最終的にプロトタイプチェーンと呼ばれるチェーン構造を形成します。

3. コンストラクタとは?

コンストラクターの本質も関数ですが、この関数の最初の文字は通常、定義時に大文字にする必要があります; コンストラクターが呼び出されるときは、 new キーワードを介して呼び出される必要があります; 通常、コンストラクターを直接使用することはありません、しかし、コンストラクタを使用して作成するインスタンスオブジェクト、コンストラクタは js オブジェクト指向の重要な部分です。

3. 共通の遺産は何ですか?

プロトタイプチェーンの継承
コンストラクタの継承を借りる
コンポジションの継承
プロトタイプ継承
クラスは継承を実装します

extends と super による継承

寄生遺伝

4. これのポイントは何ですか?

これは、通常の関数ではウィンドウを指します
タイマーのこれはウィンドウを指します
アロー関数に this はありません。その this ポイントは外部環境に依存します。
イベント内のこれは、イベントの呼び出し元を指します
コンストラクターの this ポイントとプロトタイプオブジェクトの this は両方とも、新しいコンストラクターのインスタンスオブジェクトを指します。
自己実行関数内の this は window を指します

5. 再帰とは何ですか?

関数は内部的にそれ自体を呼び出し、この関数は再帰です。
利点: 構造が明確で読みやすい。
短所: 効率が低く、呼び出しスタックがオーバーフローする可能性があり、各関数呼び出しがメモリスタックにスペースを割り当て、各プロセスのスタック容量が制限されます。呼び出しレベルが多すぎると、スタック容量を超えて、スタックオーバーフロー。

6. パフォーマンスの最適化のために通常どのような方法を使用しますか?

リソースの読み込みに関して:

http リクエスト数の削減、コードのマージ (css、js のマージ)、スプライトの使用、http リクエストデータの量の削減、コードの圧縮 (css、js、html)、およびキャッシュの合理的な設定のための具体的なソリューション。
パッケージ化および圧縮されたオンラインコード
遅延読み込みを使用する
スプライトを使う
コンポーネントを動的にレンダリングする
CDN アクセラレーション

コードレベル:

グローバル変数の悪用を避け、スコープ検索を減らし (ローカル変数を使用できる場合はグローバル変数を宣言しないでください)、クロージャーを悪用しないでください。
DOM 操作を減らし、DOM 操作時に見つかった DOM オブジェクトをキャッシュし、検索の繰り返しを回避します。
一度に読み込まれる画像が多すぎてページがフリーズするのを避けるために、画像の遅延読み込みを使用します。js の読み込みによってページのレンダリングがブロックされるため、ページの下部にスクリプトタグを記述します。
Cookie はすべての http 要求に付随するため、大量の Cookie をローカルに書き込まないでください。

7.jsの実行メカニズムは？

js は、シングルスレッド、非同期、ノンブロッキングのイベントループ実行メカニズムです。
すべてのタスクは、同期タスク (同期) と非同期タスク (非同期) の 2 種類に分けることができます。

同期タスクとは、メインスレッドで実行するためにキューに入れられたタスクを指し、前のタスクが完了して初めて次のタスクを実行できます。
非同期タスクとは、メインスレッドには入らず、「タスクキュー」に入るタスクのことで、「タスクキュー」が非同期タスクを実行できることをメインスレッドに通知した場合にのみ、タスクはメインスレッドに入って実行されます。

8. lodash を知っていますか? lodash にはどのような共通 API がありますか?

Lodash は、一貫性のあるモジュール式の高性能 JavaScript ユーティリティライブラリです。

.cloneDeep ディープコピー
.reject は条件に基づいて要素を削除します
.drop(array,[n=1]) 関数: 配列の最初の n 個の要素を削除し、残りを返します

9. セットとマップとは?

set は es6 が提供する新しいデータ構造で、配列に似ていますが、そのメンバーの値は一意です。
Map は es6 が提供する新しいデータ構造です.オブジェクトに似ており、キーと値のペアのコレクションでもありますが、キーの範囲は文字列に限定されず、さまざまな種類の値をキーとして使用できます. つまり、オブジェクト構造は「文字列と値」の対応を提供し、マップ構造は「値と値」の対応を提供します。これは、ハッシュ構造のより完全な実装です。「キーと値のペア」のデータ構造が必要な場合は、オブジェクトより Map が適しています。

10. es6 の次のクラスについて簡単に説明してください。

es6 のクラスは、es5 のコンストラクターのシンタックスシュガーと見なすことができます。これにより、コンストラクターの記述が簡素化され、クラスの共通属性がコンストラクターに配置されます。

class キーワードを使用してクラスを作成しますが、クラス名の最初の文字を大文字で定義する習慣があります。
クラスにはコンストラクター関数があり、渡されたパラメーターを受け取り、同時にインスタンスオブジェクトを返すことができます。
コンストラクタ関数は、new がインスタンスを生成する限り、この関数を自動的に呼び出します. この関数クラスを記述しない場合、この関数も自動的に生成されます.
複数の関数メソッドをコンマで区切る必要はありません。
Generate instance new は省略できません。
文法的な仕様、作成されたクラスのクラス名の後に括弧を追加しない、生成されたインスタンスのクラス名の後に括弧を追加し、コンストラクターに関数を追加する必要はありません。
(1) 継承において、サブクラスをインスタンス化してメソッドを出力する場合は、まずサブクラスにこのメソッドがあるかどうかを確認し、ある場合はサブクラスを先に実行します。
(2) 継承において、サブクラスにそのようなメソッドがない場合は、親クラスにこのメソッドがあるかどうかを確認し、ある場合は親クラスのこのメソッドを実行します (近接原理)
。
(3) サブクラスが親クラスのメソッドを継承し、同時に自身のメソッドを内部に展開したい場合は、super を使用して親クラスのコンストラクターを呼び出します。クラス this の前に super を呼び出す必要があります。
this の指し方に常に注意してください. クラス内の共有プロパティとメソッドは this で使用する必要があります.
(1) コンストラクターの this は、新しいインスタンスオブジェクトを指します。
(2) 通常、カスタムメソッドは新しいインスタンスオブジェクトも指します。
(3) イベントをバインドした後、これはイベントをトリガーしたイベントソースを指します。
(4) ES6 にはクラスの変数昇格がないため、クラスを介してオブジェクトをインスタンス化する前に、クラスを定義する必要があります。

11. call、apply、bind の類似点と相違点は何ですか?

共通点：すべての人がこの方向を変えることができます。
違い: call と apply は関数を 1 回呼び出し、関数内の this ポインターを変更しますが、bind は関数を呼び出さず、関数内の this ポインターを変更できます。call と apply で渡されるパラメータが異なります. Call は 2 番目のパラメータから始まるパラメータリストが必要で、apply の 2 番目のパラメータは配列である必要があります.
適用シナリオ

call はしばしば継承を行います。

function fn(a,b,c){
    
    
        console.log(this,a+b+c); // this指向window
    }
    fn();
    fn.call(document,1,2,3);//call改变之后this指向document  
    //输出 #document 6   1,2,3是实参 结果相加为6

apply は配列に関連することが多く、たとえば、数学オブジェクトを使用して配列の最大値と最小値を実現します。

function fn(a,b,c){
    
    
        console.log(this,a+b+c); 
    }
    fn();
    fn.apply(document,[1,2,3]);

bind は関数を呼び出しませんが、それでも this ポイントを変更したい. たとえば、タイマー内の this ポイントを変更します。

function fn(a,b,c){
    
    
    console.log(this,a+b+c); //window
}
let ff = fn.bind('小明',1,2,3); //手动调用一下

12.配列操作に関連するメソッドを列挙する

push: 配列の末尾に要素を追加します。戻り値は配列の長さです
pop: 配列の最後の要素をポップし、戻り値はポップされた要素です
unshift: 配列の先頭に要素を挿入し、戻り値は配列の長さです
shift: 配列の最初の要素をポップし、戻り値はポップされた要素です
splice(index,len): 配列内の指定された要素を削除します
concat: 配列を連結します
reverse: 配列を反転します

13. 文字列操作に関連するメソッドを列挙する

substr(start,len)/substring(start,end): インターセプト文字列
slice: 配列または文字列からセクションをインターセプトします
indexOf/lastIndexOf: 文字が別の文字列に存在するかどうかを調べ、存在する場合はインデックスを返し、存在しない場合は -1 を返します; indexOf は前から後ろに検索します;
lastIndexOf: 後ろから前に検索することです
replace: 文字列固有の文字を置き換えます
toUpperCase: 文字列を大文字に変換します
toLowerCase: 文字列を小文字に変換します
charAt: 文字列内の指定されたインデックスにある文字を取得します

14. 3 つの必須の型変換と 2 つの暗黙の型変換の例を教えてください。

必須の変換: 文字列への変換 toString()、String()、数値への変換 Number()、parseInt()、parseFloat()。
暗黙の変換: ブール型に変換する Boolean() 暗黙的に結合された文字列、例 var str = "" + - / % ===

15. split()、slice()、splice()、join() をそれぞれ説明してください。

split は文字列を使用して別の文字列を切り取ることができ、戻り値は配列です
スライスは配列から一部をインターセプトできます (文字列オブジェクトにはスライスメソッドもあります)
splice(index,len) は、指定された配列要素を削除できます。
join は、特定のコネクタを使用して配列要素を文字列にスプライスできます

15. 事前解析とは何ですか?

JS コードが実行される前に、解析エンジンはコードの事前チェックを行い、主に変数と関数の宣言を改善し、変数と関数の宣言をコードの前に置きます。変数の宣言のみは昇格され、割り当ては昇格されません。

16. js を使用してバブルソートをカプセル化しますか?

function sortBubble(arr){
    
     
for(var i=0;i<arr.length;i++){
    
    
	for(var j=0;j<arr.lengthi;j++){
    
     if(arr[j]>arr[j+1]){
    
    
		var temp=arr[j]; 
		arr[j]=arr[j+1]; 
		arr[j+1]=temp;
		}
	}
}
return arr;

17. js を使用して、10000 以内のすべての素数の合計を見つけますか?

function getZs(num) {
    
    
	 var sum=0;
	for (var i = 2; i <= num; i++) {
    
    //4
		//假设所有的数都是质数
		var flag = true;
		//通过嵌套循环找到 i 除了 1 和本身以外所有可能出现的因子
		for (var j = 2; j < i; j++) {
    
    
			//判断 i 是否为质数
			if (i % j == 0) {
    
    //能进到当前的分支 说明不是质数
			flag = false;
		}
	}
		if (flag == true) {
    
     
			console.log(i); 
			sum+=i;
		}
	}
	return sum;
}

18. 2 次元配列は num の値に従って昇順にソートされていますか?

var list = [
{
    
    
id: 32, num: 5
},
{
    
    
id: 28, num: 12
},
{
    
    
id: 23, num: 9
}]

// 实现过程
list.sort(function(a,b){
    
     r
	eturn a.num-b.num;
})

19. Js の eval の機能は何ですか? 欠点は何ですか?

eval 関数の役割: 文字列を js コードとして実行できます。短所: 実行効率が比較的低く、安全ではありません。

20. DOM 要素の追加、削除、変更、クエリの API を列挙してください

DOM の作成: document.createElement();
DOM: document.getElementById(); document.getElementsByClassName(); document.getElementsByName(); document.querySelectorAll(); document.querySelector();
追加 DOM: parentDom.appendChild();
DOM を削除します。parentDom.removeChild()。

21. BOM で一般的に使用されるオブジェクトは何ですか?

location:
	location.href; 页面 url 地址
	location.hash; url 中#后的部分
	location.search; url 中?后的部分(查询字符串)
	location.reload(); 刷新页面; 
navigator:
	navigator.userAgent: 浏览器的 userAgent 信息
history:
	history.go(1);前进 1 步
	history.go(-1);后退 1 步;
	history.forward();前进
	history.back(); 后退
screen:
	screen.availWidth: 屏幕有效宽度
	screen.availHeight: 屏幕有效高度

22. ブラウザーの互換性に関する一般的な問題を挙げてください。

主流浏览器发送 ajax 使用 XMLHttpRequest 创建异步对象,
IE 浏览器时候用 XActive 创建异步对象;

主流浏览器注册事件
	addEventListener("eventType","handler","true|false"); 
	removeEventListner("eventType","handler","true|false");
IE 浏览器:
	注册事件:attachEvent( "eventType"，"handler") 
	移除事件:detachEvent("eventType"，"handler" ) 
	阻止事件冒泡:
	主流浏览器:event.stopPropagation()
	IE 浏览器:event.cancleBubble=true; 
获取事件源:
	主流浏览器: event.target
	IE 浏览器:event.srcElement

23. ajaxの仕組みをできるだけ詳しく説明してください

ステップ 1: オブジェクト var xhr=new XMLHttpRequest() を作成する
2 番目のステップ: リクエスト行 xhr.open('request method', request address); を設定します。
ステップ 3: リクエストを送信 Get メソッド xhr.send(null) を送信します。ポストリクエストの場合は、リクエストヘッダーを設定します。
ステップ 4: サーバーからの応答をリッスンします。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded ');
xhr.send("name=zs&age=18");
//第四步:监听服务端的响应
xhr.onreadystatechange=function(){
    
    
	if(xhr.status==200&&xhr.readyState==4){
    
    
		// 获取 json
		var json=xhr.responseText&&JSON.parse(xhr.responseText)
		// 获取 xml
		var xml=xhr.responseXML; 
		console.log(json,xml)
	}
}

24. 同期と非同期とは何ですか? また、どちらの実行方法が優れていますか?

同期とは、あるプログラムが実行された後に別のプログラムが実行されることを意味し、非同期とは、複数のプログラムが同時に実行されることを意味します.したがって、非同期ではブロッキング現象が発生せず、前のプログラムの実行が発生しないため、非同期効率が高くなります.後者のプログラムの実行に影響します。

25. RESTful API とは何ですか?

RESTful の核となる考え方は、HTTP リクエストメソッドを使用してリソースオブジェクトと連携し、サーバー側の特定のリソース (HTTP 動詞 + リソースオブジェクト) に対する操作を完了することです。たとえば、コマンド GET /articles の場合、GET は HTTP 動詞であり、/articles はリソースオブジェクトです。

补充说明:
动词通常就是五种 HTTP 方法，对应 CRUD 操作:
GET：读取（Read）
POST：新建（Create）
PUT：更新（Update）
PATCH：更新（Update），通常是部分更新
DELETE：删除（Delete）

26. async/await の使用法とシナリオについて話す

async は関数の宣言を変更するために使用されます. async で変更された関数は非同期関数になります. await は関数の呼び出しを変更するために使用されます. await で変更された関数は promise 非同期オブジェクトを返さなければなりません. await を使用して変更した後非同期オブジェクトは同期操作に変換されます。

27. アロー関数の機能と実用化シナリオは?

アロー関数は、関数内の this ポインターを関数の外部と一致させることができます; アロー関数が関数内の this ポインターを関数の外部と一致させ続けることができるのは、アロー関数内に this ポインターがないためです。 ajax コールバック関数で矢印関数を使用して、コールバック関数の This がイベントソースを指すようにすることができます。タイマーの 2 番目のパラメーターで矢印関数を使用して、グローバルウィンドウを指す関数内でこれを回避できます。

28. Promiseの理解について話す

Promise 自体はコードロジックを提供しません。これは、コールバック関数を使用して実装された従来の非同期操作を変換または最適化するのに役立ち、非同期操作をより洗練された方法で実装できるようにします。最も注目すべき機能の 1 つは、Promise が従来のコールバック地獄を解決できることです。コードレベルでは、Promise はコンストラクタを提供します. これを使用するときは、インスタンスオブジェクトを new で作成する必要があります. 実オブジェクトを作成するときは、無名関数を渡す必要があります. この無名関数には 2 つのパラメータ (resolve, reject) が必要です. resolve は関数の処理に成功し、失敗したハンドラーを拒否します。成功ハンドラーと失敗ハンドラーをいつトリガーするかは、特定のビジネスロジックによって決まります。resolve と reject は、Promise インスタンスオブジェクトが提供する then メソッドを介して渡す必要があります. Promise には al と race の 2 つの静的メソッドがあり、すべて一度に複数の Promise インスタンスを実行でき、戻り値は配列です. race は複数のインスタンスを実行することもできます一度にインスタンスを約束し、最初に実行されたインスタンスの実行結果が返されます。

29. ブレーク、コンティニュー、リターンの違いは何ですか?

break
(1) break は、ループ本体から飛び出すか、ループを完全に終了するために使用されます. それが入っているループを終了するだけでなく、その外側のループを終了することもできます.
(2) break はループ本体と switch 文でのみ使用できます。
(3) どのようなループであっても、ループ本体で break eak が発生すると、システムはループを完全に終了し、ループの後のコードの実行を開始します。
(4)switch文では、ある条件を満たした場合、この層のループ本体から飛び出します。
continue
(1) continue: このサイクルを中止して、次のサイクルを開始します。
(2) continue はループ全体を終了しません。
(3) continue はループ文でのみ使用できます。for ループ、while ループ、do...while ループで使用されます。
return
(1) return はメソッドを終了することです。ループ本体内で return ステートメントを実行すると、return ステートメントによってメソッドが終了し、ループが終了します。

30. const で宣言された変数が変更できないことをどのように理解していますか?

const 宣言の制限は、それが指す変数への参照にのみ適用されます。つまり、const 変数がオブジェクトを参照する場合、オブジェクト内のプロパティを変更しても const の制限に違反しません。
「ES6チュートリアル」は次のように書いています：constが実際に保証しているのは、変数の値を変更できないことではなく、変数が指すメモリアドレスに格納されているデータを変更できないことです。単純なタイプのデータ (数値、文字列、ブール値) の場合、値は変数が指すメモリアドレスに格納されるため、定数と同等です。ただし、複合型のデータ (主にオブジェクトと配列) の場合、変数が指すメモリアドレスは実際のデータへのポインターにすぎず、const はポインターが固定されていることを保証することしかできません (つまり、常に別の固定を指します)。 address) 、それが指すデータ構造がミュータブルかどうかは完全に制御不能です。したがって、オブジェクトを定数として宣言する場合は、十分に注意する必要があります。

3. ネットワーク

1. HTTP ステータスコードの意味は?

1xx は、HTTP 要求が受け入れられ、要求の処理を続行することを示します 2xx は、HTTP 要求が処理されたことを示します (200) 3xx は、
要求された 4xx はクライアントを示しますサーバー側でエラーが発生しました
(403 Forbidden, 404 Resource does not exist) 5xx はサーバー側でエラーが発生したことを意味します。

2.SEOとは？

SEO (検索エンジン最適化) 検索エンジンの最適化とは、検索エンジンにウェブページをクロールさせることです. 検索エンジンにウェブページをクロールさせるために, ウェブページのタイトルを合理的に設定するなど、コードを書くときにいくつかの作業を行うことができます ,キーワード (キーワード)、説明 (説明); 検索エンジンは、Web ページをクロールした後、最初に戻ってこれらの重要な情報を分析するためです。

3. プログレッシブエンハンスメントとグレースフルデグラデーションとは何ですか?

プログレッシブエンハンスメント: 低バージョンブラウザー向けのページを構築して最も基本的な機能を確保し、高度なブラウザー向けのエフェクトやインタラクションなどの機能を改善および追加して、より優れたユーザーエクスペリエンスを実現します。(すべてのブラウザーでサポートされている基本的な機能から始めて、最新のブラウザーでのみサポートされている機能を徐々に追加し、基本ブラウザーに害を及ぼさないスタイルや機能をページに追加します。ブラウザーがそれらをサポートしている場合、それらは自動的に表示され、機能します。 .)
グレースフルデグラデーション (グレースフルデグラデーション): 最初から完全な機能を構築し、下位バージョンのブラウザーと互換性を持たせます。(この Web サイトは最新のすべてのブラウザーで正常に動作します。ユーザーが古いブラウザーを使用している場合、コードはそれらが正しく動作することを確認します。IE 固有のボックスモデルレイアウトの問題により、IE Hack のさまざまなバージョンでは適切な劣化が行われ、追加されています。機能をサポートできないブラウザーの候補であるため、完全に失敗することなく、古いブラウザーで何らかの形でエクスペリエンスを低下させることができます。)

違い: グレースフルデグラデーションは、複雑な現状から始まり、ユーザーエクスペリエンスの提供を削減しようとします。一方、プログレッシブエンハンスメントは、非常に基本的な作業バージョンから始まり、将来の環境のニーズを満たすために拡張されます。

4. CDN アクセラレーションとは?

CDN (Content Delivery Network) の正式名称は Content Delivery Network で、事業者が提供する付加価値サービスであり、この高速化サービスをお金で利用できます。CDN は主に Web サイトの静的リソースを高速化するためのものです. CDN には全国に多くのノードサーバーがあります (すべての都市にノードサーバーがあります). CDN サービスを購入すると、CDN サーバーは Web サイトの静的リソースファイルをキャッシュします , 誰かが2回目のアクセスでは、サーバーはウェブサイトに必要な静的リソースを最も近いCDNノードサーバーから取得します.CDNサーバーのパフォーマンスは比較的高く、クライアントからの物理的な距離は比較的近いため、高速化を実現できます. . CDN サービスを有効にするには、コードを変更することなく、オペレータープロバイダーによって提供されるバックグラウンドで構成するだけで済みます (そのドメイン名の CDN サービスを有効にするように構成します)。

5. Web サイトの静的リソースを格納するために複数のドメイン名を使用する方が効果的なのはなぜですか?

ブラウザには静的リソースファイルの同時リクエスト数に制限があるため、リソースファイルが複数に保存されている場合、同じドメイン名で一度に複数のリソースファイルしかリクエストできません (ブラウザによって違いがあります)。異なるドメイン名以下は、ブラウザの制限を打破します; 次に、複数の静的リソースサーバーを有効にすると、メインサーバーへの負荷を軽減できます。

4. Vue インタビューの質問

1. モバイル端末でよくある問題は何ですか? どのように解決しましたか？

H5 ページウィンドウはデバイスの幅に合わせて自動的に調整され、ユーザーがページをズームすることは禁止されています。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimumscale=1.0,maximum-scale=1.0,user-scalable=no">

2. 画像の遅延読み込みの原理を教えてください実際の開発で使用されている画像の遅延読み込み用プラグインはどれですか?

img タグが画像をロードする際、src 属性が指すファイルをリクエストして画像をロードします. img タグ自体に src 属性がない場合、img タグはレンダリング時に画像をロードしません.画像が遅延ロードされる原則として、最初に img タグの src 属性をカスタム属性に一時的に変更し、ページがロードされた後に画像がロードされないようにすることです. img タグが配置されている領域が可視領域に入ると、画面の領域、カスタム属性、および対応する img タグの src 属性に動的に設定することで、ブラウザーは自動的に対応する画像リソースを要求するのを助け、いわゆる画像の遅延読み込みを実現します。画像の遅延読み込み用のプラグインは多数ありますが、そのほとんどは jquery.lazyload などの jquery に基づいています。もちろん、vue-lazyload などの画像の遅延読み込みを実装するプラグインも vue にあり、vue のコンポーネントライブラリには画像の遅延読み込み用のコンポーネントもあります。

3. モバイル端末のクリックイベントで何秒遅れますか?その原因と解決方法は?

モバイル端末のクリックイベントには 300ms の遅延があります. これはブラウザがダブルクリックズーム機能を保持するために発生するものです. 初期のブラウザには
ダブル2 回目のクリックを待ちます。ユーザーが 300 ミリ秒以内に 2 回目のクリックを行うと、ブラウザはズーム機能を実行します。300 ミリ秒以内に再度クリックがない場合は、クリックイベントとして扱われます。解決策: タッチイベントを使用します。クリックイベントをシミュレートする
; fastclick プラグインを使用して解決する; 静的ページズーム機能。

4. Js は非同期操作をどのように実装しますか?

Js はシングルスレッドですが、ブラウザーはマルチスレッドであり、js での非同期操作は基本的にブラウザーが提供するサブスレッドによって完了します。

5. MVC、MVVM、MVP の 3 つの設計パターンをそれぞれ紹介します。

MVC はバックエンド言語の設計パターンであり、主にコードの階層化を実現するためのもので、M (モデル) データモデルレイヤーは主にデータベースの操作を担当し、V (ビュー) ビューレイヤーは主にインターフェイスを担当します。フロントエンドの html 、 css 、および js として見なすことができるディスプレイ; ビューレイヤーとして機能する C (コントローラー) ビジネスコントロールレイヤーは、主に特定のビジネスロジックの制御を担当し、モデルのデータの引き渡しを担当します。データレイヤーをビューレイヤーに変換して表示します。
MVVM はフロントエンドの設計パターンです. Vue はこのパターンに基づいて設計され、MVC から進化しています. M (モデル) データ層は主にデータとメソッドの初期化を担当します. V (ビュー) ビュー層は次のように考えることができます. HTML と CSS はビューレイヤーの役割を果たし、VM (ビューモデル) ビューモデルレイヤーは、データレイヤーとビューレイヤーを接続し、データレイヤーのデータをビューレイヤーに渡して表示し、その動作を渡します。ビューレイヤーからデータレイヤーへ。
MVP もバックエンド MVC セットアップパターンから進化したもので、主に Android 開発で使用されます。M (モデル) データ層、V (ビュー) UI ロジック、P (プレゼンター) ビジネスロジック。

6. vue でコンポーネントをカプセル化する方法は?

最初に .vue のサフィックスを持つファイルを定義します. ファイルはまだ 3 つの部分で構成されています. テンプレートテンプレートパーツ, スクリプトロジックパーツ, スタイルスタイルパーツ. これらの 3 つのパーツは、コンポーネントのコア部分です.コンポーネントの必要性は? テンプレート部分に記述し、スタイル部分にどのような外観スタイルを記述し、スクリプト部分にどのような動作を記述する必要があるかを記述します。エクスポートするスクリプトセクションでは、必ず es6 モジュラーエクスポート構文 (export default{}) を使用してください。Then
use the es6 Modular import syntax to import where the component needs to be called. コンポーネントに必要なパラメーターは、呼び出しの一部で直接渡すことができます。主要なロジックは引き続きコンポーネント内で実行されます。

7. Vue ルーティングを使用する手順について教えてください。

ステップ 1: ルーティングモジュール vue-router をダウンロードします。
ステップ 2: ルーティングオブジェクトを作成します。
ステップ 3: ルーティングルールを構成します。
ステップ 4: ルーティングオブジェクトを vue インスタンスオブジェクトのメンバープロパティとして登録します。

8. MVVM についての理解を教えてください。

MVVMはM(モデルデータレイヤー)、V(ビュービューレイヤー)、VM(ビューモデル)ビューモデルレイヤーの3つの部分から構成されており、フレームワークの設計思想であり、vueはmvvmに基づいて設計されています。このうち、M（モデル）層はデータの初期化を担当し、V（ビュー）はページ表示のみを担当し、VM（ビューモデル）はビュー層とモデル層を接続し、データのデータを転送するために使用されますレイヤーをビューレイヤーに渡して表示し、ビューレイヤーを永続化するためにデータレイヤーに渡します。

9. Vue のライフサイクルは?

作成フェーズ: 1 回のみ実行されます。beforeCreate (いくつかのデータとメソッドの初期化操作を開始します。データ内のデータとメソッド内のメソッドはまだ使用できません)、作成済み (
データとメソッドの初期化が完了し、データ内のデータとメソッド内のメソッドを使用できます) .
ハング段階: beforeMount (仮想 DOM のレンダリングを開始)、マウント (仮想 DOM のレンダリングが完了、DOM は 1 回だけ操作可能)。
実行フェーズ: 複数回実行されます。beforeUpdate (data 内のデータが更新されようとしています。複数回実行されます)、updated (data 内のデータが更新されました。複数回実行されます)。
破壊段階: Destroy の前に 1 回だけ実行されます (vue インスタンスが破壊されようとしています。この時点では、データ内のデータとメソッド内のメソッドはまだ利用可能です)。破棄されました (vue インスタンスが破棄され、データ内のデータとメソッド内のメソッドが利用できなくなりました)。

10. Vue にはいくつのルーティングモードがありますか?

Vue には 2 つのルーティングモードがあります: ハッシュ、履歴; デフォルトはハッシュモードです; ルーティングオブジェクトの作成時にモード属性を使用してルーティングモードを切り替えることができます (const router=new Router({mode:'history'}))。

11. Vue ルートナビゲーションガードとその適用シナリオとは?

ルーティングガードは、ページがインターセプトなどのルーティングジャンプを実行するときに何らかの処理を行います. 次のルーティングナビゲーションガードは、vue-router で提供されます:

グローバルフロントガード

const router = new VueRouter({
    
     ... }) 
router.beforeEach((to, from, next) => {
    
    
// from 从里来
// to 到哪里去
// next 是否要放行
})

グローバルポストフック

router.afterEach((to, from) => {
    
    
// ...
})

Route Exclusive Guard: ルート宣言時、特定のルートに対するフック機能。

const router = new 
VueRouter({
    
     routes: [
	{
    
    
		path: '/foo', 
		component: Foo,
		beforeEnter: (to, from, next) => {
    
    
			// ...
		 }
	  }
	]
})

`$route` 12.とVue ルーティングモジュールの違いは何ですか`$router`?

1. $routeルーティングに関連するプロパティを格納します (例$route.params,$route.query): ;
2.$routerルーティングに関連するメソッドを格納します (例: $router.push(),$router.go()).

13. vue の v-for 命令のループ走査におけるキー属性の役割は何ですか?

Key 属性の役割は、後でページの部分的な更新を容易にするために、データ層とビュー層の間に 1 対 1 の対応を確立することです. データの一部が変更された場合、それに対応する DOM 要素のみが現在のデータが更新されます。

14. Vue と react の違いは何ですか?

Vue は双方向のデータバインディング (data <=> インターフェイス) を実装しています。
React は単一のデータフローのみを実装します (データレイヤー => インターフェイスレイヤー)。
Vue にはディレクティブが用意されていますが、React にはディレクティブの概念がありません。
Vue は補間式を使用してデータをレンダリングし、react は jsx を使用してデータをレンダリングします。

15. Vue でよく使用されるコマンドを一覧表示する

v-model: 双方向のデータバインディングを実現します。
v- bind: プロパティをバインドします。
v-on: 登録イベント。
v-html: ラベルコンテンツを設定します (コンテンツ html を許可します)。
v-text: ラベルの内容を設定します (html は使用できません)。
v-clack: 補間式のちらつきの問題を解決します。
v-for: 配列またはオブジェクトをループします。

16. Vue での補間式のちらつきの問題を解決するには?

補間式の代わりに v-html または v-text を使用します。
v-clack を使用して補間式のちらつきを解決します。最初のステップ: 属性セレクタ [v-clack]{display:none} を宣言します。2 番目のステップ: 補間式が存在するラベルに属性 v-clack を追加します。位置した。

17. Vueルーティングでアンカーポイントの値を変更してコンポーネントを切り替える方法は?

hashchange イベントをリッスンすると、詳細は次のようになります。

window.addEventListener('hashchange',function(){
    
    
   console.log('hash change');
});

18. Vue でルーティングルールを動的に追加する方法は?

router.addRoutes([{path:'',component:''}]) を使用します

ルート遅延読み込みとは? ルート遅延読み込みの利点は何ですか? ルート遅延読み込みを実装する方法は?

ルーティングの遅延読み込みとは、対応するルーティングコンポーネントを非同期的に読み込むことです (既定では、すべてのコンポーネントが読み込まれ、パッケージ化されます)。
ルートの遅延読み込みの利点: ページの読み込み速度、特にホームページの読み込み速度を向上させることができます (遅延読み込みを使用した後、ホームページを読み込むときに、他のページの対応するコンポーネントを読み込む必要がないため、必要に応じてロードします)。

import Vue from 'vue';
import Router from 'vue-router';
// 异步导入组件
// 异步加载方式一
const List = resolve => require(['@/components/list'], resolve);
// 异步加载方式二
const Detail = () => import(/* webpackChunkName: "group-master" */ 
'@/components/detail')

Vue.use(Router);
export default new Router({
    
    
// 路由规则
routes:[
	{
    
    path:'/list',component:List},
	{
    
    path:'/detail',component:Detail}
],
// 路由模式: 默认 hash, 可选值 hash(如#/index)|history(/index)
mode:'history'
});

19. Vue の組み込みコンポーネントは何ですか?

コンポーネント、スロット、遷移、遷移グループ、キープアライブ

 <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

<!--tansition 动画组件的使用-->
<transition>
	<div v-if="ok">toggled content</div>
</transition>

20. vue インスタンスにはどのようなプロパティがありますか?

vm.$data は、vm インスタンスオブジェクトデータ内のデータを取得できます。
vm.$props は、vm コンポーネントによって受信された props オブジェクトデータを取得できます。
vm.$el は、vm インスタンスオブジェクトのルート dom 要素を取得できます。
vm.$refs は、vm インスタンスの ref 属性で登録されたすべての dom 要素とコンポーネントインスタンスを取得できます。

21. Vue.use(プラグイン)の機能と使用上の注意点は?

Vue.use の役割は、Vue プラグインをインストールすることです。このメソッドは、new Vue() を呼び出す前に呼び出す必要があります。

22. vm.$nextTick(fn) の機能は何ですか?

dom が更新されるまで操作の実行を遅らせます。

<body>
<div id="app"><h1 ref="h1">{
    
    {
    
    title}}</h1></div>
</body>
<script>
	var vm = new 
	Vue({
    
     el: '#app', 
		data: {
    
    
			title: '这是一个标题'
		}
	created: function () {
    
    
		 this.$nextTick(() => {
    
    
			// 在 created 里直接操作 ref 会报错
			this.$refs.h1.innerHTML = '这是更新以后的标题';
		});
	}
})

23. vue での mixin の役割は何ですか?

Mixin は、Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法を提供します。mixin オブジェクトには、任意のコンポーネントオプションを含めることができます。コンポーネントが mixin を使用する場合、mixin のすべてのオプションがコンポーネント自体のオプションに「混合」されます。コンポーネントとミックスインに同じ名前のオプションが含まれている場合、それらのオプションは適切に「マージ」されます。たとえば、データオブジェクトは内部で再帰的にマージされ、競合が発生するとコンポーネントデータが優先されます。同じ名前のフック関数は 1 つの配列に結合されるため、すべてが呼び出されます。また、mixin オブジェクトのフックは、コンポーネント自体のフックの前に呼び出されます。

24. vue プラグインの開発方法は?

Vue.js プラグインは、インストールメソッドを公開する必要があります。このメソッドの最初のパラメーターは Vue コンストラクターで、2 番目のパラメーターはオプションのオプションオブジェクトです。

// 定义插件
const myPlugin={
    
     install:(Vue,options)=>{
    
    
	// 1. 添加全局方法或属性
	Vue.myGlobalMethod = function () {
    
    
	// 逻辑...
}
// 2. 添加全局指令
Vue.directive('my-directive', {
    
    
	bind (el, binding, vnode, oldVnode) {
    
    
	// 逻辑...
	}
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
    
    
	// 逻辑...
}
// 4. 注入组件选项(混入) 
Vue.mixin({
    
    
	created: function () {
    
    
	}
})
// 5. 注册全局组件
Vue.component('myCompent',{
    
     
	template:'<h1>loading...</h1>'
	});
}
}
export default myPlugin;
// 调用插件
Vue.use(myPlugin,{
    
    })

25. ssr とは? ssr の実装方法は?

ssr は Quanpin (サーバーサイドレンダリング)、中国語の意味、サーバーサイドレンダリング、つまりページレンダリングはサーバーサイドで完了するため、本番環境は nodeJS 環境をデプロイする必要があります。サーバーサイドレンダリングは nodeJS で行う必要があるため、Nuxt フレームワークを使用できますin vue サーバー側レンダリングを実装します。

26. 仮想 DOM とは何ですか? 仮想 DOM を使用する利点は何ですか?

仮想 dom は、js と実際の dom の間にキャッシュを追加することと同等であり、dom diff アルゴリズムを使用して不要な dom 操作を回避し、パフォーマンスを向上させます。JavaScript オブジェクト構造を使用して DOM ツリーの構造を表し、このツリーを使用して実際の DOM ツリーを構築し、それをドキュメントに挿入し、状態が変化したときに新しいオブジェクトツリーを再構築します。次に、新しいツリーと古いツリーを比較し、2 つのツリーの違いを記録し、記録された違いをステップ 1 で構築された実際の DOM ツリーに適用すると、ビューが更新されます。

27. モール内のショッピングカートはどのように実現されていますか?

モールのショッピングカートは、通常、Cookie や localStorage などのローカルストレージに書き込まれ、主に製品 ID、製品名、製品価格、製品数量、およびその他の情報 (もちろん、製品などの機密情報) を格納する配列形式の文字列に格納されます。価格は後で保存されますバックエンドがまだ優勢です。ここでの保存は、ページに表示するための便宜のためです)、互換性の問題を考慮したい場合は、Cookie に保存することをお勧めします (localStorage はサポートされていないため)互換性の問題を考慮しない場合は、localStorage のパフォーマンスを使用する方が良いでしょう. ショッピングカートは、ユーザーがログインしていないときに追加することも、ユーザーがログインした後に追加することもできます.これは完全に依存します.特定のビジネスシナリオについて。

28. フロントエンドプロジェクトとバックエンドプロジェクトのログインステータスを維持する方法は?

フロントエンドとバックエンドを分離するプロジェクトは、通常、トークンを使用してログインステータスを維持します。トークンは実際にはランダムな文字列です. ユーザーがログインページでアカウント番号とパスワードを入力すると, フロントエンドはバックエンドにアカウントパスワードを送信します. フロントエンドの後にフロントエンドに応答します.トークンを取得し、クライアント側で永続化する必要があります (通常、localStorage または sessionStorage に書き込まれ、SPA の場合は sessionStorage に格納され、MPA の場合は localStorage の中間に格納されます)、次のバックエンドデータインターフェースにリクエストを送信するときは、通常、トークンをバックエンドデータインターフェースに送信する必要があります。バックエンドデータインターフェースはトークンを検証し、正当である場合は通常どおりリクエストに応答します。正当な場合は、ユーザーがログインしていないことを通知します。フロントエンドは、ローカルストレージにトークンがあるかどうかによって、ユーザーがログインしているかどうかを判断します。

29. フロントエンドおよびバックエンドとは別に開発されたバックグラウンド管理システムは、一般的に権限管理をどのように実装しますか?

まず、特定の役割が持つ権限を事前に構成し、データベースに格納する必要があります。アカウントがログインすると、バックエンドデータインターフェイスはアカウントに対応する役割の権限リストを返す必要があり、フロントエンドは権限リストに従って管理システムのナビゲーションを動的にレンダリングする必要があります。の場合、バックエンドデータインターフェースは 2 番目のパーミッション検証も実行します (ロールが承認されていないデータインターフェースまたはページを要求すると、バックエンドデータインターフェースは正常に応答しません)。

30. Vue 開発で、何らかの理由でデータが更新された後にページレイヤーが同期的に更新されない場合、どのように対処すればよいですか?

vm.$forceUpdate() メソッドを呼び出して、ページを強制的に更新します。これにより、Vue インスタンスを強制的
に再レンダリングできます。

五、React面接の質問

1. React の diff アルゴリズムを簡単に紹介してください。

レベルに従ってツリー構造を分解し、同じレベルの要素のみを比較します。簡単に比較できるように、リスト構造の各ユニットに一意のキー属性を追加します。React will only match components of the same class (ここでのクラスはコンポーネントの名前を指します) for the merge operation. コンポーネントの setState メソッドが呼び出されると、React はそれをダーティとしてマークします。各イベントループの最後に、React は再描画するためにダーティとマークされたすべてのコンポーネントをチェックします。サブツリーの選択的レンダリング。開発者は、diff のパフォーマンスを向上させるために shouldComponentUpdate をオーバーライドできます。

// 创建对比函数
function updateChildren(vnode, newVnode) {
    
     
	var children = vnode.children || []
	var newChildren = newVnode.children || []
	children.forEach(function (childrenVnode, index) {
    
    
	// 首先拿到对应新的节点
	var newChildVnode = newChildren[index]
	// 判断节点是否相同
	if (childrenVnode.tag === newChildVnode.tag) {
    
    
		// 如果相同执行递归，深度对比节点
		updateChilren(childrenVnode, newChildVnode)
	} else {
    
    
		// 如果不同则将旧的节点替换成新的节点
		repleaseNode(childrenVnode, newChildVnode)
	}
})
}
// 节点替换函数
function repleaseNode(vnode, newVnode) 
{
    
     var elem = vnode.elem
var newEle = createElement(newVnode)
}

2. Redux とは?

Redux は、react だけでなく他のフレームワークでも使用できる状態管理ツールであり、フレームワーク自体がなくても使用できます。redux にはいくつかのコアコンポーネントがあります。

store データを格納するオブジェクトは createStore メソッドで作成する必要があります。
データを更新するためのアクションルールには属性状態が必要で、値は文字列でなければなりません。
データを更新するレデューサーの機能は、状態データとアクション更新ルールを渡す必要があります。反応で redux を使用する場合、使用手順を簡素化するために通常は react-redux が使用されます。

3. React にはどのような共通コンポーネントライブラリがありますか?

PC 側のコンポーネントライブラリ: element-ui (Ele.me によって開始されたフロントエンドコンポーネントライブラリ)、ant-design (Alibaba のフロントエンドコンポーネントライブラリ、ほぼ 3 つの主要なフレームワークをカバー); zent (PC 側のコンポーネントライブラリが開始された)陽山による）

4. React で DOM を操作するには?

domで操作したいタグにref属性を設定し、値が重複しないようにしておくと、後でjs部分でthis.refs.属性名タグの仮想domオブジェクトを取得できます。

5. 高次コンポーネント (HOC) とは何ですか?

関数の戻り値は高次関数と呼ばれる関数です. 同様に, コンポーネントの戻り値がまだコンポーネントである場合, それは高次コンポーネントと呼ばれます. redux で提供される接続は高次関数です. -注文コンポーネント。

6. React で setState を呼び出した後はどうなりますか?

コードで setState 関数を呼び出した後、React は受信パラメーターオブジェクトをコンポーネントの現在の状態とマージし、いわゆる調整プロセス (調整) をトリガーします。調整プロセスの後、React は比較的効率的な方法で新しい状態に従って React 要素ツリーを構築し、UI インターフェイス全体の再レンダリングを開始します。React が要素ツリーを取得した後、React は新しいツリーと古いツリーのノードの違いを自動的に計算し、違いに応じてインターフェイスの再レンダリングを最小限に抑えます。差分計算アルゴリズムでは、React はどの位置が変更され、どのように変更されるべきかを比較的正確に知ることができます。これにより、完全な再レンダリングではなく、オンデマンドの更新が保証されます。

7. React の state と props の違いは何ですか?

state は読み書き可能なコンポーネントのプライベートデータであり、props は通常は外部 (親コンポーネントなど) からの読み取り専用プロパティです。

8. React でコンポーネントを作成する方法はいくつありますか?

ステートレスコンポーネント (一般的には使用されません) である関数を使用してコンポーネントを作成します。
React.createClass(); クラスごとにコンポーネントを作成する (React.Component を継承する必要がある)、このメソッドは実際の開発で使用されます。

9. React のコンポーネントは、さまざまな役割に応じていくつかのタイプに分類できますか?

通常、コンポーネントはコンポーネントの役割によってUIコンポーネントとコンテナコンポーネントに分けられ、UIコンポーネントはUIのレンダリングを担当し、コンテナコンポーネントはデータとロジックの管理を担当し、両者はReact-Reduxが提供するconnectメソッドによって接続されます。 .

10. クラスコンポーネントと機能コンポーネントの違いは何ですか?

クラスコンポーネントを使用すると、コンポーネント独自の状態フックやライフサイクルフックなどの追加機能を使用できるようになるだけでなく、コンポーネントがストアに直接アクセスして状態を維持できるようになります (コンポーネントが props のみを受け取り、コンポーネント自体をページでは、A コンポーネントは「ステートレスコンポーネント」であり、純粋な関数を使用して作成できます。このようなコンポーネントは、ダムコンポーネントまたはプレゼンテーションコンポーネントとしても知られています。

11.reactのライフサイクル機能について教えてください。

初期化フェーズ: getDefaultProps: インスタンスのデフォルトプロパティを取得します getInitialState: 各インスタンスの初期化状態を取得します componentWillMount: コンポーネントをロードしてページにレンダリングしようとしています render: コンポーネントはここに仮想 DOM ノードを生成します componentDidMount: コンポーネントは実際にロードされます。
実行中の状態: componentWillReceiveProps: コンポーネントがプロパティを受信しようとしているときに呼び出す shouldComponentUpdate: コンポーネントが新しいプロパティまたは新しい状態を受信したとき (false を返すことができる、データを受信した後に更新しない、レンダリング呼び出しを防止する、後続の関数は実行を継続しません) componentWillUpdate: コンポーネントが更新されようとしているため、プロパティとステータスを変更できません render: コンポーネントが再描画されます componentDidUpdate: コンポーネントが更新されました。
破棄フェーズ: componentWillUnmount: コンポーネントが破棄されようとしています。

12. 反応パフォーマンスの最適化に使用できるライフサイクル関数は?

shouldComponentUpdate このメソッドは、レンダーメソッドを呼び出して dom を再描画する必要があるかどうかを判断するために使用されます。dom のレンダリングは非常にパフォーマンスを消費するため、より最適化された dom diff アルゴリズムを shouldComponentUpdate メソッドに記述できれば、パフォーマンスを大幅に改善できます。

13. React コンポーネントのどこで Ajax リクエストを行う必要がありますか?

React コンポーネントでは、ネットワークリクエストは componentDidMount で行う必要があります。このメソッドは、コンポーネントが初めて「マウント」される (DOM に追加される) ときに実行され、コンポーネントのライフサイクルで一度だけ実行されます。さらに重要なことは、コンポーネントがマウントされる前に Ajax リクエストが完了したことを保証できないことです。そうであれば、マウントされていないコンポーネントで setState を呼び出そうとすることになりますが、これは機能しません。componentDidMount でネットワークリクエストを行うと、コンポーネントを更新する準備ができていることが保証されます。

14.なぜカスタム反応コンポーネントの最初の文字を大文字にする必要があるのですか?

Babel が jsx コードをコンパイルすると、最初の文字が大文字の場合、react コンポーネントとしてコンパイルされて js オブジェクトにコンパイルされ、最初の文字が小文字の場合、通常の html タグと見なされてに解析されます。普通の弦。

15. setState が同期になるのはいつで、非同期になるのはいつですか?

ここでの「非同期」とは、非同期コードの実装を意味するのではなく、react が最初に変更を収集してから統合更新を実行することを意味します。setState は、ネイティブイベントと setTimeout の両方で同期的です。合成イベントとフック関数での非同期.. setState では、isBatchingUpdates によって直接更新するか後で更新するかを判断し、デフォルト値は false です。ただし、React はイベント処理関数を呼び出す前に batchedUpdates を呼び出すため、この関数は isBatchingUpdates を true に設定するため、react が制御するイベント処理プロセスは非同期 (バッチ更新) になります。

6. WeChat ミニプログラム開発?

1. WeChat ミニプログラムの主流の開発モデルはいくつありますか?

WeChat 公式: ネイティブモード;
サードパーティ企業: uni-app.

2. WeChat Mini Programs の開発プロセスを簡単に紹介しますか?

まず、アプレットの開発中に appid が必要なため、WeChat アプレットとして登録する必要があります; 次に、Tencent の公式開発者ツールをダウンロードします (開発者ツールは個人の WeChat でログインする必要があります)。開発ツールまたは WeChat アプリケーション内;アプリケーションを作成し、アプリケーションの appid を入力すると、アプレットのプロジェクト構造をすばやく生成できます。

3. WeChat ミニプログラムのライフサイクルを簡単に説明してください。

アプレットのライフサイクルは、アプリケーションのライフサイクルとページのライフサイクルに分けられます。
アプリケーションのライフサイクル:
onLaunch: アプリケーションが起動され、1 回だけ実行される;
onShow: アプリケーションがフォアグラウンドに切り替えられる;
onHide: アプリケーションがバックグラウンドモードに切り替えられる;
noError: 実行フェーズ中にエラーが発生した;
onPageNotFound: ページ見つからない
ページのライフサイクル:
onLoad: ページの読み込み開始、
onReady: ページの読み込み完了、
onShow: ページがフォーカス状態に移行、
onHide: ページがバックグラウンド状態に移行

7. Typescript と JavaScript の違いは何ですか?

1. Typescript にはどのようなデータ型がありますか?

number (数値)、string (文字型)、boolean (ブール値)、object (オブジェクト)、undefined (未定義)、null (空)、any (任意の型)、never、tuple、enumeration、array。

2. Typescript と JavaScript の違いは何ですか?

Typescript は javascript のスーパーセットです. es6 の実装であり、すべての es6 文法をサポートしています. Typescript は開発プロセス中に書かれた単なる中間言語です. ブラウザは Typescript を直接解析できません. Typescript はオンラインになった後に JavaScript に変換する必要があります.

8、コードバージョン管理ツール

1. git で一般的に使用されるコマンドは何ですか?

ウェアハウスの初期化: git init
ステージング領域の追加: git add file name
ローカルウェアハウスへの送信: git commit -m 'comment'
リモートウェアハウスへのプッシュ: git push ウェアハウスアドレスブランチ名
リモートウェアハウスコードのプル: git pull ウェア
ハウスのクローン: git clone ウェアハウスアドレスブランチを作成
: git ブランチブランチ名スイッチ
ブランチ: git チェックアウトブランチ名ブランチを表示
: git ブランチ
マージブランチ: git マージブランチ名ログを表示
: git ログ (git ログ --oneline)
すべてのログを表示: git reflog
バージョンロールバック: git リセット - -hard バージョン番号 (commit-id は
git log --oneline で取得できます)

2. git と svn の違いは何ですか?

Git は分散倉庫管理システムです. 誰もがローカルにローカル倉庫を持っています. SVN は集中倉庫管理システムです. 倉庫は 1 つだけです. 通常、svn ではサーバーが各ユーザーにアカウントとパスワードを割り当てる必要がありますが、git では ssh 公開鍵と秘密鍵のペアを使用してさまざまなプログラマーを区別します。

3. オンライン Git コードホスティングプラットフォームとは?

github(https://www.github.com)、
gitlab(https://www.gitlab.com)、
gitee(https://www.gitee.com)、
コーディング(https://coding.net)、
Tencent Cloud Developer Platform (https://dev.tencent.com)、
bitbucket (https://bitbucket.org/product/)

2023年面接の質問のまとめII