コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル JavaScript オブジェクトのプロパティをリストする JavaScript プログラムを作成する

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

Aug 09, 2021 pm 03:06 PM
javascript

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!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 === 'function' || type === 'object' && !!obj;

    }

    console.log(_keys({red: "#FF0000", green: "#00FF00", white: "#FFFFFF"}));

 

</script>

</body>

</html>

ログイン後にコピー

結果は次のとおりです:

1

["red","green","white"]

ログイン後にコピー

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

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

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

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

1

2

3

newelement1，要添加到数组的第一个元素。

newelement2，要添加到数组的第二个元素。

newelementX，可添加多个元素。

ログイン後にコピー

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

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
もっと見る

ホットツール Tags

コード&IT
オーディオ
仕事
マーケティング
AI検出器
チャットボット
デザイン&アート

人気の記事

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
もっと見る

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7281
9
Java チュートリアル
1622
14
CakePHP チュートリアル
1341
46
Laravel チュートリアル
1258
25
PHP チュートリアル
1205
29
もっと見る
Related knowledge
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを簡単に取得する方法

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

JavaScriptでinsertBeforeを使用する方法

See all articles