フォームは実際の配列に変換されます
最初に使用シナリオについて話しましょう。 JSでは、すべてのページの入力タグを取得したり、タイプボタンの要素を見つけたり、このボタンのクリックイベントを登録したりするなど、頻繁にDOMを操作する必要があります。これを行うことがあります。
var inputobjs = document.getElementsByTagname( 'input');
このように書くのに問題はありませんが、ES5のforeach方法など、ループの場合よりも多くの操作アレイの方法がはるかに優れていることを知っています。しかし、それは直接使用できますか?できない! DOMオブジェクトコレクションは本当に配列配列タイプではないため、直接使用するとエラーが発生します。
var inputobjs = document.getElementsByTagname( 'input'); inputobjs.foreach(); //inputobjs.foreachは関数ではありません
それにもかかわらず、私たちはそれを使用することができます。直接または間接的に使用することはできません。強力なJSオブジェクトのなりすまし関数を使用するだけです。
var inputobjs = document.getElementsByTagname( 'input'); console.info(inputobjs); // []長さ:0__Proto__:htmlcollectionConsole.info([]。slice.call(inputobjs)); // []長さ:0__Proto__:配列[0]
このようにして、実際の配列に変換した後、配列メソッドを自由に呼び出すことができます。この方法は確かに実現可能ですが、理解するのは簡単ではなく、「くるくる」ほどです。 ES6は、よりシンプルでより直接的な方法、フォームを提供します。これは非常に簡単に使用できます。
var inputobjs = document.getElementsByTagname( 'input'); console.info(inputobjs); // []長さ:0__Proto__:htmlcollectionConsole.info(array.from(inputobjs)); // []長さ:0__Proto__:配列[0]
結果は同じですが、より意味的に適切で理解しやすいです。使いやすいのですか?もちろん、これらでは十分ではありません。この方法を使用して、クラス配列のデータ型を配列に変換できるだけでなく、異なるタイプの効果は異なります。テストは次のとおりです。
let str = 'google'; console.log(array.from(str)); // ["g"、 "o"、 "o"、 "o"、 "g"、 "l"、 "e"] let num = 234; console.log(array.from(num)); // [] bol = false; console.log(array.from(bol)); let obj = {foo: 'foo'、bar: 'bar'}; console.log(array.from(obj)); // [] let superobj = {0: 'foo'、1: 'bar'、length:2}; console.log(array.from(superobj)); // ["foo"、 "bar"]このメソッドを異なるデータ型で呼び出す結果は次のとおりです。文字列といくつかの特別なオブジェクトをコンテンツを含む配列に変換できることは注目に値します。特別なオブジェクトは、数値キー値のペアに従ってコンテンツが配置され、長さの属性を持つオブジェクトを指します。この種のオブジェクトはループに使用できます。また、文字列はループを使用して各文字を取得することもできるため、1つの文に沸騰します。 forループを使用することができるフロートメソッドを使用すると、コンテンツが出力されることは空の配列ではありません。ここでは、jQueryを使用した友人が、セレクターを使用して要素を選択したときに返される構造に注意を払うことができることを思い出してください。実際、それは私たちの例の最後の構造です。詳細については、jQueryソースコード分析シリーズ記事を参照してください。
値を配列に変換します
アレイを作成するには2つの方法があります。1つはコンストラクターです。
ret arr = array(1,2,3);
もう1つは、最も一般的に使用される文字通りの作成です。
ret arr = [1,2,3];
Array.ofメソッドは実際には最初の方法の補足であり、使用法は次のとおりです。
console.log(array.of(1,2,3)); // [1,2,3]
建設方法と同じ効果があるように見えますが、なぜこの方法がまだ必要なのですか?理解するために次の例を見てください。
console.log(array()); // [] console.log(array(1)); // // [1,2]
この例では、パラメーターの数はその意味が異なります。パラメーターが1つしかない場合、パラメーターは長さで表される要素を表します。 1つのパラメーターを超える場合、混乱を引き起こします。ただし、そのパラメーターで表される要素は常に表されるため、Array.ofメソッドにこの問題はありません。
console.log(array.of()); // [] console.log(array.of(1)); // [1] CONSOLE.LOG(Array.of(1,2)); // [1,2]
copywithin array内部データの交換をコピーします
CopyWithinメソッドの主な機能は、配列の内部値を置き換えることです。このメソッドは、スタートコピー位置、エンドコピー位置、挿入位置を示す3つのパラメーターを受け入れます。例は次のとおりです。
[1、2、3、4、5] .copywithin(0、3)// [4、5、3、4、5] //ビット3にビット3にコピー0 [1、2、3、4、5] .copywithin(0、3、4)// 5] .copywithin(0、-2、-1)// [4、2、3、4、5] //ビット3をビット0 []。 2、3、4、5]); i32a.copywithin(0、2); // int32array [3、4、5、4、5] // typedArrayのコピーのないプラットフォームの場合//次の執筆方法は必要です[]。 2、3、4、5]
上記は、エディターが紹介したES6のアレイ拡張法です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!