One place for hosting & domains

      の使用方法

      JavaScript の配列項目から反復するための .map() の使用方法


      はじめに

      古典的な forloop からforEach()メソッドまで、JavaScript のデータセットから反復するためにさまざまなテクニックとメソッドを使用します。最も一般的なメソッドの1つは、.map() メソッドです。.map() は、親配列内の各項目に特定の関数を呼び出すことから配列を作成します。配列の呼び出しだけを変化させる非変異メソッドに反するものとして、.map( ) は新しい配列を作成する非変異メソッドです。

      このメソッドには、配列で作業するときに多くの用途がある場合があります。このチュートリアルでは、JavaScript の .map() の 4 つの注目に値する使用を見てみましょう。配列要素の呼び出し、文字列を配列に変換、ライブラリのレンダリングリスト、配列オブジェクトの再フォーマットを行います。

      前提条件

      このチュートリアルではコーディングは必要ありませんが、例とともに次のものに興味がある場合、Node.js REPL またはブラウザ開発者ツールを使用することもできます。

      ステップ 1 — 配列内の各項目の関数を呼び出す

      .map() はコールバック関数を引数の 1 つとして受け入れ、その関数の重要なパラメータは関数によって処理される項目の現在の値です。これは必要なパラメータです。このパラメータにより、配列内の各項目を変更し、新しい関数を作成できます。

      次に例を示します。

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      この出力はコンソールにログインします。

      Output

      [ 4, 6, 8, 10, 70 ]

      これにより、さらに簡素化できます。

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      同様の出力はコンソールにログインします。

      Output

      [ 4, 6, 8, 10, 70 ]

      sweetArray.map(makeSweeter) のようなコードがあなたのコードを少し読みやすくします。

      ステップ 2 — 文字列を配列に変換

      .map() は配列プロトタイプに属することが知られています。このステップでは、文字列を使用して配列に変換します。ここでは文字列の機能のメソッドを開発しません。むしろ、特別な.call() メソッドを使用します。

      JavaScript のすべてはオブジェクトであり、メソッドはこうしたオブジェクトに付随する関数です。.call() により、別のオブジェクトのコンテキストを使用できます。したがって、配列の .map() のコンテキストを文字列にコピーします。

      .call() は、使用するコンテキストの引数と元の関数の引用のパラメータを渡すことができます。

      次に例を示します。

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      この出力はコンソールにログインします。

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      ここでは、文字列の .map() のコンテキストを使用して、.map() が予期する関数の引数を渡しています。

      この関数は、文字列の .split() メソッドのようなもので、配列に戻す前に各文字列の文字が変更できるだけです。

      ステップ 3 — JavaScript ライブラリのレンダリングリスト

      React のような JavaScript ライブラリは、リストの項目をレンダリングするために .map() を使用します。しかし、.map() メソッドは JSX 構文に含まれるため、これは JSX 構文を必要とします。

      React コンポーネントの例は次のとおりです。

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      これは、React のステートレスなコンポーネントであり、リストにより div をレンダリングします。各リスト項目は、最初に作成された名前の配列を繰り返すため、.map() を使用してレンダリングされます。このコンポーネントは、rootID を使用して DOM 要素の ReactDOM を使用します。

      ステップ 4 — 配列オブジェクトの再フォーマット

      .map() は、配列のオブジェクトを反復するために使用し、従来の配列に似た方法で、各オブジェクトの内容を変更し新しい配列を戻します。この変更は、コールバック関数で戻されるものに基づいて行われます。

      次に例を示します。

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      この出力はコンソールにログインします。

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      ここでは、ブラケットとドット表記を使用して、配列の各オブジェクトを修正します。このユースケースは、フロントエンドアプリケーションで保存または解析する前に、受信したデータを処理または縮約するために使用できます。

      まとめ

      このチュートリアルでは、JavaScript の .map() メソッドの 4 つの使用を見てきました。他のメソッドと組み合わせて、.map() の機能は拡張できます。詳しくは、JavaScript: 反復メソッドの記事にある配列メソッドの使用方法を参照してください。



      Source link

      JSON.parse() および JSON.stringify() の使用方法


      はじめに

      すべての最新ブラウザで使用可能なJSON オブジェクトには、JSON 形式のコンテンツを処理するための便利なメソッドであるparsestringifyの 2 種類があります。JSON.parse() は、JSON 文字列を取得し、JavaScriptオブジェクトに変換します。JSON.stringify() は、JavaScriptオブジェクトを取得し、JSON 文字列に変換します。

      次に例を示します。

      const myObj = {
        name: 'Skip',
        age: 2,
        favoriteFood: 'Steak'
      };
      
      const myObjStr = JSON.stringify(myObj);
      
      console.log(myObjStr);
      // "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
      
      console.log(JSON.parse(myObjStr));
      // Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
      

      また、メソッドは通常オブジェクトで使用されますが、配列でも使用できます。

      const myArr = ['bacon', 'lettuce', 'tomatoes'];
      
      const myArrStr = JSON.stringify(myArr);
      
      console.log(myArrStr);
      // "["shark","fish","dolphin"]"
      
      console.log(JSON.parse(myArrStr));
      // ["shark","fish","dolphin"]
      

      JSON.parse()

      JSON.parse() は、値が返される前にオブジェクト値を変換できる2つ目の引数として、関数を指定することができます。この時、parse メソッドの返されたオブジェクトでは、オブジェクトの値が大文字に変換されます。

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user);
      
      JSON.parse(userStr, (key, value) => {
        if (typeof value === 'string') {
          return value.toUpperCase();
        }
        return value;
      });
      

      注: JSON では末尾のカンマは無効なため、渡された文字列の末尾にカンマがある場合、JSON.parse() は、エラーを表示します。

      JSON.stringify()

      JSON.stringify() は、2つの追加引数を指定することができます。1つ目はreplacer関数で、2 つ目は文字列または数値を、返された文字列のスペース(インデント)として使用します。

      replacer 関数を使用すると、 undefined として返された値が結果の文字列から除外されるため、値をフィルターで除外できます。

      const user = {
        id: 229,
        name: 'Sammy',
        email: 'Sammy@domain.com'
      };
      
      function replacer(key, value) {
        console.log(typeof value);
        if (key === 'email') {
          return undefined;
        }
        return value;
      }
      
      const userStr = JSON.stringify(user, replacer);
      // "{"id":229,"name":"Sammy"}"
      

      そして、スペース引数が渡された例を示します。

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user, null, '...');
      // "{
      // ..."name": "Sammy",
      // ..."email": "Sammy@domain.com",
      // ..."plan": "Pro"
      // }"
      

      まとめ

      このチュートリアルでは、JSON.parse()JSON.stringify() メソッドの使用方法を見てきました。JavaScript でJSON を使用する方法について詳しく知りたい場合は、JavaScript でJSON を使用する方法のチュートリアルをご覧ください。

      JavaScript でのコーディングの詳細については、JavaScript でのコーディング方法シリーズを参照するか、JavaScriptのトピックページで演習とプログラミングプロジェクトをご覧ください。



      Source link