JavaScript 組み込みオブジェクトの概要

JavaScript 組み込みオブジェクトの概要

1. 組み込みオブジェクト

組み込みオブジェクトとは、JS 言語に付属するいくつかのオブジェクトを指します。これらのオブジェクトは開発者が使用するためのもので、一般的に使用される、または最も基本的で必要な機能 (プロパティとメソッド) を提供します。組み込みオブジェクトの最大の利点は、迅速な開発に役立つことです。 JavaScriptには、 MathDateArrayStringなど、複数の組み込みオブジェクトが用意されています。

2. 数学オブジェクト

Mathオブジェクトはコンストラクターではなく、数学定数と関数のプロパティとメソッドを持ちます。数学演算 (絶対値、整数の丸め、最大値など) では、Math のメンバーを使用できます。

1. Mathオブジェクトの使用

       Math.abs(x): xの絶対値を返します。Math.pow(x,y): xのy乗を返します。Math.sqrt(x): xの平方根を返します。Math.random(): 疑似乱数(0.0~1.0)を返します。
    
    Math.round(x): x を四捨五入した後の最も近い整数を返します。Math.floor(x): x 以下の最大の整数を返します。 (切り捨て)
    
    Math.ceil(x): この関数は、x 以上の最小の整数を返します (切り上げ)
    
    Math.max(): パラメータの最大値を返します。Math.min(): パラメータの最小値を返します。

注:上記のメソッドは括弧で囲む必要があります

以下のように表示されます。

console.log('Math.abs(-2)='+Math.abs(-2));
        console.log('Math.ceil(1.7)='+Math.ceil(1.7));
        console.log('Math.floor(1.7)='+Math.floor(1.7));
        console.log('Math.pow(2,3)='+Math.pow(2,3));
        console.log('Math.sqrt(3)='+Math.sqrt(3));
        console.log('Math.round(3.4)='+Math.round(3.4));
        console.log('Math.round(3.6)='+Math.round(3.6));
        console.log('Math.max(1,2)='+Math.max(1,2));
        console.log('Math.min(1,2)='+Math.min(1,2));

印刷結果は次のとおりです。

2. 指定された範囲内で乱数を生成する

1 から 10 までの乱数を生成する関数をカプセル化します。

コードは次のとおりです。

関数ランダム(最小値,最大値){
    Math.floor(Math.random()*(max-min+1))+min を返します。
}
(var i =1;i<=10;i++){
    console.log('+i+'番目の出力の結果は: '+random(1,10));
}

ランダムプリントアウトの結果は次のとおりです。

このうち、 minmax生成される乱数の範囲です。

3. 日付オブジェクト

  • DateオブジェクトはMathオブジェクトとは異なります。これはコンストラクターなので、使用する前にインスタンス化する必要があります。
  • Dateインスタンスは日付と時刻を処理するために使用されます

1. Date() メソッドの使用

現在の時刻を取得するには、以下をインスタンス化する必要があります。

var now = 新しい Date();
console.log(現在);

Date() コンストラクターのパラメーター:

  • 括弧内に時間がある場合は、パラメータ内の時間が返されます。たとえば、日付のフォーマット文字列が「2019-5-1」の場合、new Date('2019-5-1')またはnew Date('2019/5/1')と記述できます。
  • Date()がパラメータを書き込まない場合は、現在の時刻を返します。
  • Date() にパラメータを記述すると、括弧内に入力された時刻が返されます。

例えば:

       var date1 = 新しい日付()
        コンソールログ('date1='+date1);
        var date2 = 新しい日付(2021,11,08,20,51);
        コンソールログ('date2='+date2);
        date3 = 新しい日付('2021-11-08 20:54')
        コンソールログ('date3='+date3);

出力は次のようになります。

2. 日付オブジェクトの使用

get メソッドの使用:

例えば:

 var date1 = 新しい日付()
        コンソールログ('date1='+date1);
        console.log('今年は:' + date1.getFullYear() + 'year');
        console.log('今月は:' + date1.getMonth() + '月');
        console.log('今日は:' + date1.getDate() + 'number');
        console.log('現在は: '+date1.getHours()+'');
        console.log('現在は:' + date1.getMinutes() + '分');

結果は次のとおりです。

set メソッドの使用:

例えば:

 var date1 = 新しい日付()
        コンソールログ(日付1);
        date1.setFullYear(2020)
        コンソールログ(日付1);

印刷された結果は次のとおりです。

3. タイムスタンプを取得する

日付オブジェクトの valueof() または getTime() メソッドを通じて:

var date1 = 新しい Date();
コンソールにログ出力します。 
コンソールにログ出力します。 

数値型に変換するには、「+」演算子を使用します。

var date2 = +新しい日付();
コンソールログ(日付2); 

HTML5 の新しい Date.now() メソッドを使用します

コンソールにログ出力します。

4. 配列オブジェクト

1. 配列オブジェクトの作成

配列オブジェクトを作成するには 2 つの方法があります。

  • リテラルメソッド
  • 新しい配列()

2. 配列かどうか確認する

instanceof演算子は、オブジェクトが特定の型であるかどうかを判断できます。
Array.isArray()オブジェクトが配列であるかどうかを判断するために使用されます。isArray isArray()HTML5で提供されているメソッドです。

以下のように表示されます。

 var arr = [1,2,3,4];
        var obj = {};
        console.log(arr 配列のインスタンス);
        console.log(obj インスタンスの配列);
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

3. 配列要素の追加と削除の方法

注: push()unshift()メソッドの戻り値は新しい配列の長さですが、pop() メソッドと shift() メソッドは移動された配列要素を返します。

例えば:
配列 [1500, 1200, 2000, 2100, 1800] があります。配列内の 2000 を超える項目を削除し、残りの項目を新しい配列に配置する必要があります。コードは次のとおりです。

var arr = [1500、1200、2000、2100、1800];
        var newArr = [];
        for(var i=0;i<arr.length;i++){
            もしarr[i]<2000であれば
                新しいArr.push(arr[i]);
            }
        }
        コンソールにログ出力します。

印刷された結果は次のとおりです。

4. 配列のソート

方法機能説明
逆行する()配列内の要素の位置を反転します。このメソッドは元の配列を変更し、新しい配列を返します。
選別()配列の要素をソートします。このメソッドは元の配列を変更し、新しい配列を返します。

例えば:

配列を反転します。

var arr = [1500、1200、2000、2100、1800];
        コンソールにログ出力します。
        コンソールにログ出力します。

配列をソートする:

var arr = [1500、1200、2000、2100、1800];
        コンソールにログ出力します。
        var newArr = arr.sort(関数(a,b){
            return ab; // 昇順 return ba; // 降順 })
        コンソールにログ出力します。

印刷された結果は次のとおりです。

5. 配列のインデックス方法

メソッド名例示する戻り値
インデックス()配列内の指定された要素の最初のインデックスを見つける存在する場合はインデックス番号を返し、存在しない場合は-1を返します。
最後のインデックス()配列の最後のインデックス存在する場合はインデックス番号を返し、存在しない場合は-1を返します。

例えば:

var arr = [1500, 1200, 2000,1500, 2100, 1500,1800];
        console.log('arr.indexOf(1500):' + arr.indexOf(1500));
        コンソールログ('arr.lastIndexOf(1500):'+arr.lastIndexOf(1500));

印刷された結果は次のとおりです。

アレイ重複排除の例:

配列 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] が与えられた場合、配列から重複する要素を削除する必要があります。
ケーススタディ:
目標:古い配列内の重複していない要素を選択して新しい配列に配置し、重複する要素を 1 つだけ保持して新しい配列に配置し、重複を削除します。
コア アルゴリズム:古い配列を走査し、古い配列の要素を使用して新しい配列を照会します。要素が新しい配列に表示されない場合は追加し、表示される場合は追加しません。

コードは次のとおりです。

 var arr = ['c', 'a', 'z', 'a','x', 'a', 'x', 'c', 'b'];
        var newArr = [];
        for(var i =0;i<arr.length;i++){
            (newArr.indexOf(arr[i]) === -1 の場合)
            {
                新しいArr.push(arr[i]);
            }    
        }
        コンソールにログ出力します。

印刷された結果は次のとおりです。

6. 配列から文字列への変換

メソッド名例示する戻り値
文字列を変換する()配列を文字列に変換し、各項目をカンマで区切ります。文字列を返します
join('区切り文字')メソッドは、配列内のすべての要素を文字列に変換するために使用されます。文字列を返します

例えば:

var arr = ['a', 'b', 'c'];
コンソールにログ出力します。
console.log(arr.toString()); // 出力: a,b,c
// join() を使用する
console.log(arr.join()); // 出力: a,b,c
console.log(arr.join('')); // 出力: abc
console.log(arr.join('-')); // 出力: abc

5. 文字列オブジェクト

1. 文字に応じて位置を返す

メソッド名例示する
インデックス()元の文字列内の指定されたコンテンツの位置を返します。見つからない場合は -1 を返します。開始位置はインデックス番号です。
最後のインデックス()後ろから前へ検索し、最初に一致するものだけを見つける

たとえば、文字列セット内の指定されたすべての要素の位置と出現回数を見つける必要があります。文字列は「Hello World, Hello JavaScript」です。

コードは次のとおりです。

var str = 'Hello World、Hello JavaScript';
コンソールログ(str);
var index = str.indexOf('o');
var 数値 = 0;
while (インデックス != -1) {
  console.log(index); // 順番に出力: 4、7、17
  インデックス = str.indexOf('o', インデックス + 1);
  数値++;
}
console.log('o の出現回数: ' + num); // o の出現回数: 3

印刷された結果は次のとおりです。

2. 位置によって文字を返す

例えば:

var str = 'Apple';
console.log(str.charAt(3)); // 出力: 1
console.log(str.charCodeAt(0)); // 出力: 65 (文字 A の ASCII コードは 65 です)
console.log(str[0]); // 出力: A

例えば、 charAt()メソッドを使用して、プログラムを通じて文字列内の最も一般的な文字と回数をカウントします。

var str = 'Apple';
// ステップ 1、各文字の出現回数をカウントします var o = {};
(var i = 0; i < str.length; i++) の場合 {
  var chars = str.charAt(i); // chars を使用して文字列内の各文字を保存します if (o[chars]) { // オブジェクトのプロパティを使用して要素の検索を容易にします o[chars]++;
  } そうでない場合 { o[chars] = 1; }
}
コンソールにログ出力します。 

印刷結果は次のとおりです。

3. 文字列操作メソッド

var str = 'HelloWorld';
str.concat('!'); // 文字列の末尾の文字を連結します。結果: HelloWorld!
str.slice(1, 3); // 位置1から位置3までのコンテンツを抽出します。結果: el
str.substring(5); // 位置5から末尾までの内容を抽出します。結果: World
str.substring(5, 7); // 位置5から位置7までのコンテンツをインターセプトします。結果: Wo
str.substr(5); // 位置5から文字列の末尾までの内容をインターセプトします。結果: World
str.toLowerCase(); // 文字列を小文字に変換します。結果: helloworld
str.toUpperCase(); // 文字列を大文字に変換します。結果: HELLOWORLD
str.split('l'); // "l" を使用して文字列を分割します。結果: ["He", "", "oWor", "d"]
str.replace('World', '!'); // 文字列を置換、結果: "Hello!"

4. split() メソッド

split()メソッドは文字列を分割するために使用されます。文字列を配列に分割できます。セグメンテーションが完了すると、新しい配列が返されます。
例えば:

var str = 'a,b,c,d';
コンソールログ(str);
console.log(str.split(',')); // 配列 [a, b, c, d] を返します

JavaScript組み込みオブジェクトに関するこの記事はこれで終わりです。JavaScript 組み込みオブジェクトに関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 組み込みオブジェクトに関するJavascriptの基礎
  • JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します
  • JavaScript における一般的な組み込みオブジェクトの使用法の分析
  • JavaScript 組み込みオブジェクトの計算、グローバル関数、使用例の分析
  • JavaScriptの組み込みオブジェクトの詳細な説明
  • js でよく使われる組み込みメソッドとオブジェクトについての簡単な説明
  • JavaScriptの単一組み込みオブジェクトに関する詳細な理解
  • JavaScript組み込みオブジェクト操作の詳細な説明
  • JSP 組み込みオブジェクトとメソッドの詳細な紹介
  • JavaScript 組み込みオブジェクトのプロパティとメソッドのコレクション
  • 組み込みオブジェクトの使用方法 JavaScript オブジェクトの Math
  • JavaScript の組み込みオブジェクトの概要

<<:  優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

>>:  CSS3で線形グラデーションを実装するためのコードの詳細な説明

推薦する

HTML の順序なしリストタグと順序付きリストタグの使用例

1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...

Linux で rc.local ファイルがない場合の完璧なソリューション

新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...

MySQL Binlog ログの読み取り時によくある 3 つのエラー

1. mysqlbinlog: [エラー] 不明な変数 'default-character...

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...

MySQL での utf8mb4 照合の例

MySQL における一般的な utf8mb4 ソート規則は次のとおりです。 utf8mb4_0900...

入力テキストボックスの長さをコンテンツに応じて変更する方法

初め:コードをコピーコードは次のとおりです。 <input type="text&q...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

MySQLの重複排除操作を極限まで最適化する方法

目次1. インデックスと変数の賢い使用1. インデックスなしの比較テスト2. created_tim...

docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...

Mysqlは日付範囲の抽出方法を指定します

データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...

ウェブテーブルフレームを作成するためのヒント

<br />Web テーブル フレームを作成するためのヒント。 ------------...

uniapp 要素ノードスタイルの動的変更の詳細な説明

目次1. スタイル属性をバインドして変更するhtml:対応するjs:達成された効果:次に、refを使...