今日の第一条実習面接のまとめ

9259 ワード
javascript
1、配列の平坦化を実現する
配列の平準化とは、一つの多次元配列を一次元配列に変えることです.
[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]
(1)toString&splitまたはjion&split
配列のtoStringメソッドを呼び出して、配列を文字列に変えてから、splitで分割して配列に還元します.
   function flatten(Ary){
        var midAry=Ary.toString();
        // var midAry=Ary.join(",");
        var result=midAry.split(",");
        return result;
    }
修正:ここでresultの結果は［1］、「2」、「3」、「4」、「5」であり、文字列を数字に変換します.
 function flatten(arr){
       // var midAry=Ary.toString();
        // var midAry=Ary.join(",");
      //  var result=midAry.split(",");
	 
     return arr.toString().split(',').map(function(item) {
        return Number(item);
    }) 
	 
}
(2)再帰
再帰的に各項目を巡回して、もし配列のためならば引き続き遍歴して、さもなくばconcat
function flatten1(Ary){
var result=[];
for (var i=0;i
mapを使った方が簡潔です.
function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}
(3)ES 6の新特性、拡張演算子
function flatten2(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
2、三段レイアウトを実現し、中間適応、左右両側固定
自分の実現:
 .container{
        position:relative;
        width:100%;
        }
        .left{
        width:100px;
        background:red;
        float:left;
        }
        .main{
         width:100%;
         padding:0 100px;
         background:green;
        }
        .right{
         width:100px;
         background:red;
        position:absolute;
        right:0;
        top:0;
        }
htmlコードセグメント

    
left 

    
main 

    
 right
3、そういえばvar、let、constの違い
変数を宣言する3つの方法
概念の違い
繰り返し宣言
スコープ問題
変数の昇格問題
var
var グローバル変数を宣言
変数を宣言するために使用します.同じ変数の後ろにある上書きを繰り返します.
作用域外で使用できます.
varが申明する変数の作用域がアップします.
let
let:ブロックレベル変数、すなわちローカル変数を宣言します. 
変数を宣言するために、letは同じスコープの下で同じ変数を説明できません.
宣言された地域は作用域を形成し、作用域外はアクセスできない.
letが申明した変数のスコープはアップしません.
コンサート
const:定数を宣言するために使用され、ブロックレベルの作用領域も有し、ブロックレベルを宣言することができる.
定数を宣言するために使用されますが、constで説明されている変数は初期化されても変更できません.
コスプレは現在のスコープにしか使えません.
constが表明した役割エリアはアップされません.
4、css実現円、台形
円:
 #circle{
        width:100px;
        height:100px;
        border-radius:50px;
        background:#ccc;
        }
楕円形:border-radiusは、水平と垂直半径を単独で指定できます.この二つの値を一つの(/)で区切ればいいです.もう一つの特性は、長さの値を受け入れることができます.パーセンテージも受けられます.二つの特性が結合すれば、適応できます.
.ellipse{
width: 200px;
height: 100px;
background-color: red;
border-radius:50%;
}
台形:
 .tx1{
      float:left;
      width:0px;
     height:0px;
     border-width: 50px;
   border-style: solid;
   border-color:   transparent  blue  blue transparent;
    }
     .tx2{
    width:100px;
    height:100px;
    background:#ccc;
    float:left;

    }
     .tx3{
      float:left;
      width:0px;
     height:0px;
     border-width: 50px;
   border-style: solid;
border-color: transparent transparent blue blue;
    }
  htmlコード

5、清除子元素的内容，还要清除其事件，一般用什么

如果仅仅删除父元素下面的子元素，使用removeChild。但是可能为子元素绑定了事件，所以不能只删除元素，而让绑定的时间继续占用内存

btn1.onclick = function(){}
btn1.onclick =null;

这样就是在解除事件绑定。

如果是用addEventListener给元素绑定的事件，那么可以用removeEventListener来解除事件绑定。

6、一般怎么实现响应式布局

(1)先介绍几种其他布局的概念

静态布局：设计固定样式，如果要适配移动端，则单独再设计一套样式

弹性布局：css3引入的一种布局方式（用来替代之前的float浮动布局）

flex-flow: 应用到需要布局的元素的父元素上，先指定元素为flex布局，display:flex;

fllex-flow是 flex-direction和 flex-wrap的简写形式

flex-direction

定义了弹性项目在弹性容器中的放置方向，（默认行内方向、从左到右）

row初始值，还有row-reverse || column || column-reverse
flex-wrap

指定项目是否在必要的时候换行，默认不换行

arap初始值，还有    wrap || wrap-reverse

 
.top ul{
display:flex;
flex-direction: row;
flex-wrap:nowrap;
}
適応レイアウト:それぞれ異なる画面解像度でレイアウトを定義する
フローレイアウト:ページ要素の幅を調整します.
応答式レイアウト:各種のスタイル技術を使って、スクリーンの変化とPC端末の移動に従って変化を実現し、ページレイアウトは相応の調整を行います.
(2)応答式レイアウトのステップ実現
ヘッドコードを一つ追加する必要があります.
メディアクエリによってスタイルを設定します.メディアクエリ@mediaはフォントだけでなく、画像を設定することもできます.
@media screen and ( min-width:750px){}
幅は固定値ではなく、パーセンテージで指定します.
フロートレイアウトはflexを使用します.
画像処理:height:atot;画像の元の幅の比率を保証するために、画像が歪んでいないようにします.
.m-home img{
max-width:100%;
height:auto;
}
7、jsonpの原理を話してください.あなたはクロスドメインに会ったことがありますか?どうやって解決しますか?jsonp以外に他の方法がありますか?                                                                                                                                                                                                                                                                                  (1)jsonの原理
 ajax要求は同源戦略の影響を受けて、ドメイン間要求を許可しないで、scriptタグsrc属性の中のリンクはドメインをまたぐjsスクリプトにアクセスできます.この特性を利用して、サーバーはJSON形式のデータに戻らないで、ある関数を呼び出すためのjsコードを返して、srcで呼び出して、クロスドメインを実現しました.                                    (2)Jsonpの具体的な実現
例えば異なるソースのドメインにアクセスします.www.practice-zhao.com
直接scriptタグを追加して、ラベルのsrcは別のドメインwwww.practice-zhao.comの下のremote.jsスクリプトを指します.

    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
ここでドメインをまたぐremote.jsスクリプトを び しました.remote.jsコードは の りです.
jsonhandle({
    "age" : 15,
    "name": "John",
})
 ダイナミックなscriptタグを し、Srcはドメインをまたぐスクリプトを し、js をcalbackパラメータとして します.

    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }


    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });
   ここではScriptタグを動的に追加し、Srcはドメインをまたぐphpスクリプトを指し、上記のjs関数名をcalbackパラメータとして入力します.
JSONPはドメイン横断要求をリモートJSコードを実行するようになり、サービス端末はJSONフォーマットのデータに戻らず、JSONデータを着信パラメータの関数としてコードを実行するところに戻った.
jQueryはJSONPを使いやすい方法を提供しています.
$(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //  php    
            jsonpCallback: "jsonhandle",//        
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });
    dataTypeをjsonに設定すればいいです.
まとめ:JSONPは非公式転送プロトコルであり、このプロトコルの1つのポイントは、ユーザーがcalbackを渡すか、またはコールバックを定義する方法を開始するか、パラメータをサービス端末に渡すことであり、サービス先からデータを返すときに、このcalbackパラメータを関数として名来にJSONデータを包みます.クライアントは自分の関数をカスタマイズして、自動的にデータを返すことができます.JSONPは、POSTなどの他のタイプのHTTP要求をサポートしないGET要求のみをサポートしています.ドメインをまたぐHTTP要求だけをサポートしています.異なるドメインの二つのページの間でJavaScript呼び出しをどのように行うかを解決できません.JSONPの利点は、旧式のブラウザをサポートすることです.サービスから戻ったデータは標準のJsonデータではなく、calback小包のデータです.
(3)ドメインをまたぐ他の解決方法
    CORS前後端連携設定要求ヘッド、Access-Coontrol-Originなどのヘッダ情報
一般的なクロスドメイン要求:サービス端末のみAccess-Coontrol-Originを設定すればいいです.フロントエンドは設定する必要がありません.cookie要求を持つなら、前後の端に設置が必要です.
CORSは、近代的なブラウザがドメイン間のリソース要求をサポートする方法であり、フルネームは「ドメイン間のリソース共有」(Cross-orign resource shring)であり、XMLtpRequestを使用して要求を送信すると、ブラウザはこの要求がソースポリシーに合致しないことを発見し、要求ヘッダ:Origin、バックグラウンドは一連の処理を行う.要求を受け入れると決定された場合、応答ヘッダを返します.Access-Coontrol-Origin;ブラウザは、この応答ヘッダにオリジンの値が含まれているかどうかを判断します.ある場合は、ブラウザが応答を処理します.ブラウザを含まずに却下すると、応答データを得ることができます.CORSはJSONPの使用目的と同じですが、JSONPよりも強く、CORSはすべてのブラウザ要求タイプをサポートしています.負荷の要求データ量はより大きく、開放はより簡潔で、サービス端末は処理後のデータを直接に返すだけで、特別な処理は必要ありません.
 
サーバー側のCORSに対するサポートは、主にAccess-Coontrol-Allow-Originを設定することによって行われます.ブラウザが対応する設定を検出すると、Ajaxはドメインをまたぐアクセスを許可することができます.
 
HTML 5で新しく導入されたwindow.postMessageを使ってドメインを越えてデータを転送します.
window.postMessage(message,target Origin)  方法はhttml 5が新しく導入した特性で、他のwindowオブジェクトにメッセージを送信するために使用できます.このwindowオブジェクトは同じソースまたは異なるソースに属していても、現在はIE 8+、FireFox、Chrome、Operaなどのブラウザはwindow.postMessage方法をサポートしています.
2つのパラメータを受信
postMessageメソッドを呼び出すwindowオブジェクトは、メッセージを受信するためのウィンドウのオブジェクトを指します.
この方法の最初のパラメータメッセージは、送信するメッセージであり、タイプは文字列のみである.
第二のパラメータtarget Originは、メッセージを受信したwindowオブジェクトのドメインを限定するために使用され、ドメインを限定したくないなら、ワイルドカード*を使用することができます.  .
replace方法使用回顧
[JS]JavaScriptフレーム(1)jQuery