フロントエンド面接はもともとこんなに簡単だった(HTML、CSSとJavaScript編)

二.HTML、CSS、JS編

1.css 3アニメーションの特効がどのように実現されているかを理解しますか?2 .css 3の新しい特性はどれらがありますか?3.どんな特効を書いたことがありますか.4.配列のspliceメソッドはどのような問題に注意すべきですか?5.ドメイン間問題の解決方法6.let const varの違いは?7.データ型を解く方法8 .true&&0とtrue&&falseはそれぞれ何を返しますか?9.どのようにコピーしますか.10.js基本データ型と参照データ型はそれぞれどれらがありますか?11.htmlタグの意味化をどのように理解しますか?12.htmlにはどのような意味化ラベルがありますか?13.bfcとは何ですか.何の役に立つか.flexにはどんな属性がありますか?15.標準ボックスモデルと怪異ボックスモデルの違いは?16.jsのMapとSetの違いは何ですか?17.async awaitはどのように異常を処理しますか?18 .cssセレクタの優先度は?19.jsのイベントループメカニズムとは何ですか.20.301と302の違いは?

二.筆記試験のテーマ

1.次のコードの出力結果は?2.現在の月を取得する方法3.次のコードについてデータ型4を解く.idがfooの要素の最初のulの偶数の位置liに文字の色を赤色5に設定.jsは要素6をどのように取得するか.文字列bにおける文字列aの位置7を特定する.整数をバイナリに変換する方法
1.css 3アニメーションの特効がどのように実現されているかを理解しますか?
css 3アニメーションの特効の主な実現方法は2種類あります.
1.animation:アニメーション名durationで@keyframesなどのプロパティを設定2.transition:変更するプロパティduration linerなどのプロパティ設定の違い:前者はトリガーする必要はありません.アニメーションを定義して自動的に再生し、後者はイベントをトリガーする必要があります(jsを使用してアニメーションを柔軟に設定するにはtransitionを使用します).
2.css 3の新しい特性はどれらがありますか?
border-radius:フィレットボーダー属性background-color:背景色text-shadow:文字シャドウanimation:アニメーションtransition:遷移属性liner-gradient:グラデーションtransform:2 D効果など
3.どんな特効を書いたことがありますか.
平行移動:transform:translate X(200 px)/translate Y(200 px)/translate(200 px.200 px)回転:transfrom:rotateX(45 deg)/rotateY(30 deg)/rotateZ(45 deg)スケール:transform:scale(2,.5)傾斜:transform:skew(45 deg,45 deg)
4.配列のspliceメソッドはどのような問題に注意すべきですか?
splice(index,howmany,item 1,item 2,...)howmanyが0の場合、配列の増加に相当するhowmanyが0でない場合、配列の削除操作を行い、現在のindex位置の要素を削除し、spliceは直接元の配列を操作する
5.ドメイン間問題の解決方法
1.CORSクロスドメイン:HTTPタイプのクロスドメインをサポートし、バックエンドリクエストヘッダに「Access-Control-Allow-Origin」を設定ことでフロントエンドクロスドメインを実現する.JSONPドメイン間:Get要求タイプのドメイン間のみをサポートし、ステップ:1)scriptタグ2を追加することにより、src属性を設定する3)コールバック関数を実行する
6.let const varの違いは?
1.役割ドメインの違い:var定義の変数は一般的にグローバルな役割ドメインであり、letとconstはブロックレベルの役割ドメインであり、ある領域内でのみ作用する.宣言昇格:var定義の変数には宣言昇格があり、letとconstには3がありません.constは定数を定義し、定義すると値を付与し、変更できません.そうしないと、let定義の変数は値を再変更できます.
7.データ型を解く方法
1.typeof解:欠点:単純なデータ型のみを解く

typeof 2 // number
typeof [1, 2, 3] // object

2.instance of

var num = 5
var arr = [1, 2, 3]
num instanceof Array // false
arr instanceof Array // true

注意:配列instanceof Objectもtrue
3.constructor

var num = 3
num.constructor === String // false
num.constructor === Number // true

4.Object.prototype.toString.call()

var num = 3
var arr = [1, 2, 3]
Object.prototype.toString.call(num) // [object Number]
Object.prototype.toString.call(arr) // [object Array]

8 .true&&0とtrue&&falseはそれぞれ何を返しますか?

//     Number  ，       Number     
true && 0 // 0
true && false // false

9.どのようにコピーしますか.
JSONを使用します.parse(JSON.stringify())
10.js基本データ型と参照データ型はそれぞれどれらがありますか?
基本データ型:String,Number,Boolean,Undefind,Null,Symbol(es 6新規);特徴:値と値の間は互いに独立して、互いにデータ型を引用することに影響しません:Array、Object、Functionなど
11.htmlタグの意味化をどのように理解しますか?
1.内容に応じて適切なラベルを選択する.ブラウザの解析に有利である.SEO最適化に有利4.開発者の開発とメンテナンスに有利
12.htmlにはどのような意味化ラベルがありますか?

<header></header>
<footer></footer>
<nav></nav>
<section></section>
<aside></aside>
<section></section>

13.bfcとは何ですか.何の役に立つ?
bfcはブロックレベルのフォーマットコンテキストであり、ページ内のレンダリング領域であり、独自のレンダリング規則があり、そのサブ要素がどのように位置決めするかを決定し、要素間の相対位置関係がBFC:1をトリガすることも決定する.displayはnoneではありません.2.positionはstaticとrelativeではない.overflowはvisible 4ではない.floatはnoneの役割ではありません:フローティングをクリアし、marginの重複問題を解決し、2つのバーのレイアウトに適応するなど
14.flexにはどのような属性がありますか?
display:flexエラストマーボックスflex-direction:エラストマーボックス方向flex-wrapを設定する:flexを改行するかどうか:親要素の余剰スペースに満ちているjustify-content:flex-start/flex-end align-item:flex-start/flex-end flex-shrinkなど
15.標準ボックスモデルと怪異ボックスモデルの違いは?
計算要素の幅の異なる標準ボックスモデル:左右margin+左右border+左右padding+width怪異ボックスモデル:左右margin+width(左右borderと左右paddingを含む)
16.jsのMapとSetの違いは何ですか?
Mapはオブジェクトに似ており、主にkey-valueキー値ペアを格納するために使用されます.get()、set()、has()、clear()、delete()などの方法があります.

var map = new Map()
map.set('js', 'vue') // Map(1) {"js" => "vue"}

Setは配列に類似しており、任意のタイプの一意の値を格納できます.すなわち、集合に保存されている要素は重複を許可せず、配列の再利用に使用できます.

var arr = [1, 3, 5, 1, 2, 4, 3]
new Set(arr) // Set(5) {1, 3, 5, 2, 4}

17.async awaitはどのように異常を処理しますか?
asyncとawaitはpromiseに基づいてカプセル化された非同期要求asyncは常にpromiseオブジェクトawaitが常にpromiseが戻ってきた状態を受信するawaitがresolved状態のpromiseを受信するとcatchの有無にかかわらず直接結果が得られるawaitがrejected状態のpromiseを受信するとcatchが異常をキャプチャし、異常結果を返す
18 .cssセレクタの優先度は?
!important>行内スタイル(1000)>idセレクタ(100)>classセレクタ(10)=擬似クラスセレクタ>ラベルセレクタ(1)>ワイルドカードセレクタ
注:ワイルドカードセレクタには重みがありません
19.jsのイベントループメカニズムとは何ですか.
jsは単一スレッドで、主線✖️メッセージキューからメッセージを取り出し、メッセージを実行することしかできません.メッセージキューが空の場合、プライマリ・スレッドは、メッセージ・キューが空でないまで待機し、メッセージを読み取り、メッセージを実行します.これがjsのイベント・ループ・メカニズムです.
20.301と302の違いは?
301は永続リダイレクトであり、リソースは他のアドレス302に永続的に転送され、一時的に他の位置に転送される

筆記試験の部分

1.次のコードの出力結果は

function aa () {
    return {
         test: 1
     }
 } 
 console.log(aa())  // object

解析:関数aaが{test:1}オブジェクトを返すためtypeof解のオブジェクトタイプはobject
2.現在の月の取得方法

new Date().getMonth() + 1

解析:getMonth月は0から始まるので、1つ追加する必要があります.
3.次のコードについてデータ型を解く

 let arr = [1, 2, 3, 4]
 console.log(typeof arr) // object

解析:typeofは単純なデータ型のみを解き、配列は参照型でobjectのみを解く
4.idがfooの要素の最初のulの偶数の位置liに文字の色を赤色に設定する

  <div id="foo">
        <p>    </p>
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
            <li>dd</li>
            <li>ee</li>
        </ul>
        <p>    </p>
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
        </ul>
    </div>

答え:主にcssセレクタを考察する

 <style>
     #foo ul:nth-child(2) li:nth-child(even) {
        color: red
     }
  </style>

5.js要素の取得方法

 <div id="foo"></div>
 
A: document.getElementById("foo")
B: document.getElementById("#foo")
C: document.getElementsByTagName("div")

答え:B,C
6.文字列aの文字列bにおける位置を特定する

let a = 'hello'
let b = 'hello world'
console.log(b.indexOf(a))

文字列のindexOfメソッドを考察し、最初から、ある要素の下付き
7.整数を2進数に変換する方法

let num = 4
console.log(num.toString(2)) // 100

注意:parseInt(str,radix)は、文字列タイプの値を整数に変換します.