JavaScript計算の詳細



JavaScript Puzzlers! Javascript界と呼ばれる専門の8級試験で、興味のあるjserは試してみることができます.試してみましたが、36問の問題は19問しか正解していません.正解率は53%で、まだ合格していません.
第1題は["1", "2", "3"].map(parseInt)の戻り値である.
> ["1", "2", "3"].map(parseInt)
[1, NaN, NaN]

Javascriptでは["1", "2", "3"].map(parseInt)がなぜ[1,2,3]ではなく[1,NaN,NaN]に戻ったのか.
まず、parseInt()個のmap()個の関数の使い方を振り返ってみましょう.
parseInt()関数
定義と使用法parseInt()関数は、文字列を解析し、整数を返します.
構文
parseInt(string, radix)

パラメータ
説明
string
必要です.解析する文字列.
radix
オプション.解析する数値の基数を表します.この値は2〜36の間である.このパラメータまたはその値が`0`であることを省略すると、数字は10に基づいて解析される.`"0 x"または`"0 X"で始まると、16を基数とします.このパラメータが2より小さいか36より大きい場合、`parseInt()は`NaN`を返します.
戻り値
解析後の数値を返します.
説明
パラメータradixの値が0であるか、またはパラメータが設定されていない場合、parseInt()は、stringに基づいて数値の基数を判断する.
例:
  • string"0x"で始まると、parseInt() stringの残りの部分を16進数の整数として解析します.
  • string0で始まると、ECMAScript v 3は、parseInt()の1つのインプリメンテーションが、その後の文字を8進数または16進数に解析することを可能にする.
  • stringが1~9の数字で始まると、parseInt()はそれを10進数の整数に解析します.

  • ヒントとコメント
    注記:文字列の最初の数値のみが返されます.
    注記:先頭と末尾のスペースは許可されています.
    ヒント:文字列の最初の文字が数字に変換できない場合、parseInt()NaNを返します.
    ≪インスタンス|Instance|emdw≫
    この例では、parseInt()を使用して、異なる文字列を解析します.
    parseInt("10");         //    10 (     )
    parseInt("19",10);      //    19 (   : 10+9)
    parseInt("11",2);       //    3 (   : 2+1)
    parseInt("17",8);       //    15 (   : 8+7)
    parseInt("1f",16);      //    31 (    : 16+15)
    parseInt("010");        //   :   10   8
    

    mapメソッド
    配列の各要素に対して定義されたコールバック関数を呼び出し、結果を含む配列を返します.
    array1.map(callbackfn[, thisArg])
    

    パラメータ
    定義#テイギ#
    array1
    必要です.配列オブジェクト.
    callbackfn
    必要です.**の最大3つのパラメータを受け入れる関数です.配列内の各要素について、`map`メソッドは`callbackfn`関数を1回呼び出します.
    thisArg
    オプション.`callbackfn`関数で、`this`キーワードを参照するオブジェクトです.`thisArg`を省略すると、`undefined`は`this`値として使用されます.
    戻り値
    各要素は、関連する元の配列要素のコールバック関数が値を返す新しい配列です.
    異常callbackfnパラメータが関数オブジェクトでない場合、TypeError異常が発生します.
    コメント
    配列内の各要素について、mapメソッドは、callbackfn関数を1回呼び出す(昇順インデックス順).配列に欠落している要素にコールバック関数を呼び出さない.
    配列オブジェクトに加えて、mapメソッドは、length属性を有し、数値的にインデックス化された属性名を有する任意のオブジェクトによって使用され得る.
    コールバック関数の構文
    コールバック関数の構文は次のとおりです.
    function callbackfn(value, index, array1)
    

    コールバック関数を宣言するには、最大3つのパラメータを使用します.
    コールバック関数のパラメータを次の表に示します.
    コールバックパラメータ
    定義#テイギ#
    value
    配列要素の値.
    index
    配列要素の数値インデックス.
    array1
    要素を含む配列オブジェクト.
    配列オブジェクトの変更
    配列オブジェクトはコールバック関数で変更できます.
    次の表では、mapメソッドの起動後に配列オブジェクトを変更した結果を説明します.
    `map`メソッド起動後の条件
    要素がコールバック関数に渡されるかどうか
    配列の元の長さに加えて要素を追加します.
    いいえ.
    配列に欠落している要素を埋めるために要素を追加します.
    はい、インデックスがコールバック関数に渡されていない場合.
    要素が変更されました.
    はい、要素がコールバック関数に渡されていない場合.
    配列から要素を削除します.
    いいえ、要素がコールバック関数に渡されない限り.

    次の例では、mapの方法の使用法を説明する.
    //       
    //       
    function AreaOfCircle(radius) { 
        var area = Math.PI * (radius * radius); 
        return area.toFixed(0); 
    } 
    
    //       ,      
    var radii = [10, 20, 30]; 
    
    //    radii    . 
    var areas = radii.map(AreaOfCircle); 
    
    document.write(areas); 
    
    //   : 
    // 314,1257,2827
    

    次の例では、thisArgキーワードを参照するオブジェクトを指定するthisパラメータの使用方法を説明する.
    //        object,   divisor     remainder   
    // remainder              。(    10    )
    var obj = { 
        divisor: 10, 
        remainder: function (value) { 
            return value % this.divisor; 
        } 
    } 
    
    //        4       
    var numbers = [6, 12, 25, 30]; 
    
    //   numbers           obj     remainder   。
    // map      2       ogj。 
    var result = numbers.map(obj.remainder, obj); 
    document.write(result); 
    
    //   : 
    // 6,2,5,0
    

    次の例では、コールバック関数としてJavaScriptメソッドを内蔵します.
    //             Math.sqrt(value) (    )
    var numbers = [9, 16]; 
    var result = numbers.map(Math.sqrt); 
    
    document.write(result); 
    //   : 3,4
    
    [9, 16].map(Math.sqrt)コールバック関数で、出力された結果は[3, 4]です.しかし、なぜ["1", "2", "3"].map(parseInt)[1,NaN,NaN]に戻ったのでしょうか.
    Webサイトのヒントは次のとおりです.
     
    what you actually get is [1, NaN, NaN] because parseInt takes two parameters (val, radix) and map passes 3 (element, index, array)
    简単に訳すと
      parseIntは2つのパラメータ(val, radix)を必要とし、mapは3つのパラメータ(element, index, array)を伝達する.」
    以上の説明から、parseInt(string, radix)をNaNに戻すには、2つのケースがあることがわかります.
  • の最初のパラメータは数値に変換できません.
  • の2番目のパラメータは2から36の間ではありません.

  • 私たちが入力したパラメータはすべて数字に変換できるので、2つ目の可能性しかありません.
    果たしてそうだろうか.parseInt(string, radix)関数を再定義します.
    var parseInt = function(string, radix) {
        return string + "-" + radix;
    };
    
    ["1", "2", "3"].map(parseInt);
    

    出力結果:
    ["1-0", "2-1", "3-2"]
    
    map関数は、配列の値valueparseIntの最初のパラメータに渡し、配列のインデックスを2番目のパラメータに渡します.3番目のパラメータは?パラメータを追加します
    var parseInt = function(string, radix, obj) {
        return string + "-" + radix + "-" + obj;
    };
    
    ["1", "2", "3"].map(parseInt);
    

    出力結果:
    ["1-0-1,2,3", "2-1-1,2,3", "3-2-1,2,3"]
    

    パラメータを追加し続けます.
    var parseInt = function(string, radix, obj, other) {
        return string + "-" + radix + "-" + obj + "-" + other;
    };
    
    ["1", "2", "3"].map(parseInt);
    

    出力結果:
    ["1-0-1,2,3-undefined", "2-1-1,2,3-undefined", "3-2-1,2,3-undefined"]
    

    4番目のパラメータはundefinedであり、mapが確かにparseIntで3つのパラメータを伝達しているのを見た.著者が書いたように
    (element, index, array)
    
  • 配列の値
  • 配列のインデックス
  • 配列
  • UPDATE原文勘誤:(米粽粽注意ありがとう)
    ["1", "2", "3"].map(parseInt)
    

    対応すべきは次のとおりです.
    [parseInt("1", 0), parseInt("2", 1), parseInt("3", 2)]
    
    parseInt("3", 2)の2番目のパラメータは2-36の間に境界があり、NaNを返すのは文字列"3"に合法的なバイナリ数がないため、NaNです.
    実験を続けることもできます
    > ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"].map(parseInt)
    [1, NaN, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    

    2番目のパラメータが1である場合のみNaNを返し、他の場合は1を返します.
    > ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"].map(parseInt)
    [1, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 9, 11, 13, 15, 17, 19, 21]
    

    簡単に列挙します.
    parseInt("1", 0);    //     1
    parseInt("2", 1);    //         2-36   
    parseInt("3", 2);    //     NaN
    parseInt("4", 3);    //    
    parseInt("5", 4);
    parseInt("6", 5);
    parseInt("7", 6);
    parseInt("8", 7);
    parseInt("9", 8);
    parseInt("10", 9);   //     (1*9+0 = 9parseInt("11", 10);  //     (1*10+1 = 11parseInt("12", 11);
    parseInt("13", 12);
    parseInt("14", 13);
    parseInt("15", 14);
    parseInt("16", 15);
    

    (全文完了)
    文章は私の個人のブログから来ます:JavaScript Puzzzlers解読(一):どうして[“1”,“2”,“3”].map(parseInt)は[1,NaN,NaN]?