JavaScript オブジェクトのプロパティをリストする JavaScript プログラムを作成する

藏色散人
リリース: 2021-08-09 15:06:27
オリジナル
2818 人が閲覧しました

前回の記事「jsを使って簡単に三角形の面積を求める」ではJavaScriptを使って三角形の面積を求める方法を紹介しました。見てください ~ 今日この記事では、JavaScript オブジェクトのプロパティを一覧表示する JavaScript プログラムの書き方を紹介します。

JavaScript オブジェクトのプロパティをリストする方法を詳しく紹介します:

最初に HTML サンプル ファイルを作成します;

次に、コードを直接入力します:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function _keys(obj)
    {
        if (!isObject(obj)) return [];
        if (Object.keys) return Object.keys(obj);
        var keys = [];
        for (var key in obj) if (_.has(obj, key)) keys.push(key);
        return keys;
    }
    function isObject(obj)
    {
        var type = typeof obj;
        return type === &#39;function&#39; || type === &#39;object&#39; && !!obj;
    }
    console.log(_keys({red: "#FF0000", green: "#00FF00", white: "#FFFFFF"}));

</script>
</body>
</html>
ログイン後にコピー

結果は次のとおりです:

["red","green","white"]
ログイン後にコピー

上記のコードでは、関数メソッドを理解する必要があります:

1. Object.keys() メソッドは、指定されたオブジェクトの自己列挙可能なプロパティで構成される配列を返します。配列内のプロパティ名の順序は、オブジェクトが通常に走査されたときに返される順序と一致します。構文は "Object.keys(obj)" の場合、パラメータ obj は、列挙されたプロパティが返されるオブジェクトを表します。戻り値は、指定されたオブジェクトのすべての列挙可能なプロパティを表す文字列配列です。

2. Push() メソッドは、配列の末尾に 1 つ以上の要素を追加し、新しい長さを返すことができます。構文は、「arrayObject.push(newelement1,newelement2,....)」です。 ,newelementX )"; 戻り値は、指定された値を配列に追加した後の新しい長さです。

パラメータは次のように表現されます。

newelement1,要添加到数组的第一个元素。
newelement2,要添加到数组的第二个元素。
newelementX,可添加多个元素。
ログイン後にコピー

push() メソッドは、arrayObject の末尾にパラメータを順番に追加できます。新しい配列を作成するのではなく、arrayObject を直接変更します。 Push() メソッドと Pop() メソッドは、配列によって提供される first-in-last-pop 関数を使用します。

注: JavaScript は、console.log() をブラウザーのコンソールに書き込むことでデータを「表示」できます。

最後に、「JavaScript 基本チュートリアル 」をお勧めします~皆さんもぜひ学んでください~

以上がJavaScript オブジェクトのプロパティをリストする JavaScript プログラムを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート