JavaScript計算の詳細
14621 ワード
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進数の整数として解析します.string
が0
で始まると、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つ目の可能性しかありません.
果たしてそうだろうか.
parseInt(string, radix)
関数を再定義します.var parseInt = function(string, radix) {
return string + "-" + radix;
};
["1", "2", "3"].map(parseInt);
出力結果:
["1-0", "2-1", "3-2"]
map
関数は、配列の値value
をparseInt
の最初のパラメータに渡し、配列のインデックスを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)
["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 = 9)
parseInt("11", 10); // (1*10+1 = 11)
parseInt("12", 11);
parseInt("13", 12);
parseInt("14", 13);
parseInt("15", 14);
parseInt("16", 15);
(全文完了)
文章は私の個人のブログから来ます:JavaScript Puzzzlers解読(一):どうして[“1”,“2”,“3”].map(parseInt)は[1,NaN,NaN]?