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で線形グラデーションを実装するためのコードの詳細な説明

推薦する

SpringBoot プロジェクトの Docker 環境を実行するときに発生する無限再起動問題の詳細な説明

もしかしたら私の考え方が間違っていたのかもしれないし、問題の説明が少し乱雑だったのかもしれないが、こ...

TypeScript ジェネリックを簡単に説明する方法

目次概要ジェネリック医薬品とはビルドシステムジェネリック医薬品の一般的な理解ジェネリッククラスジェネ...

Dockerでデータディレクトリを移行する方法

目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...

Dockerfile ビルド中に発生する「/bin/sh: pip: コマンドが見つかりません」という問題の解決方法

記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...

5つのCSSスクロール天井実装方法の比較(パフォーマンス向上版)

改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...

RGBA の「a」は何を意味するのでしょうか? CSS RGBA カラー ガイド

RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

JavaScript Three.js でテキストを作成する最初の経験

目次効果テキストの作成を開始するまずフォントローダーを作成するフォントライブラリを読み込むテキストジ...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...

CSS3を使用してヘッダーアニメーション効果を作成する

Netease Kanyouxi公式サイト(http://kanyouxi.163.com/)(棚...

autoconfを使用してMakefileを生成し、プロジェクトをコンパイルする手順

序文Linux では、コンパイルとリンクには Makefile を使用する必要がありますが、適切な ...

docker ベースで Prometheus+Grafana を構築する手順の詳細説明

1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...

Linux に MySQL 8.0.19 をインストールするための詳細な手順と問題解決方法

最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...