みこむらめもむらむらむら

なんかHTML5とかJS勉強とかやりながらめもを綴るブログ

【JavaScript】基本データを扱うためのオブジェクト②

Mathオブジェクト

指数計算や平方根、対数関数など
数学に関わる演算機能を提供する
全て静的プロパティ/メソッドである
また、Mathオブジェクトはnew演算子
インスタンス化しようとすると実行エラーになる

基本

  • abs(num)
    • 絶対値
  • max(num1, num2)
    • num1、num2のうち、大きい方の値
  • min()
    • num1、num2のうち、小さい方の値
  • pow(base, p)
    • べき乗(値baseのp乗)
  • random()
    • 0~1未満の乱数
document.writeln(Math.abs(-15));  //15
document.writeln(Math.max(10, 15));  //15
document.writeln(Math.min(-15, 0));  //-15
document.writeln(Math.pow(2, 3));  //8(2の3乗)
document.writeln(Math.random());  //0.18159612262285718(結果は実行ごとに異なります)

切り上げ/切り捨て

  • ceil(num)
    • 小数点以下の切り上げ(num以上の最小の整数)
  • floor(num)
    • 小数点以下の切り捨て(num以下の最大の整数)
  • round(num)
    • 四捨五入
document.writeln(Math.ceil(1.58));  //2
document.writeln(Math.floor(1.58));  //1
document.writeln(Math.round(1.58));  //2
document.writeln(Math.ceil(-1.58));  //-1
document.writeln(Math.floor(-1.58));  //-2
document.writeln(Math.round(-1.58));  //-2

平方根

document.writeln(Math.SQRT1_2);  //0.7071067811865476
document.writeln(Math.SQRT2);  //1.4142135623730951
document.writeln(Math.sqrt(3));  //1.7320508075688772

三角関数

document.writeln(Math.PI);  //3.141592653589793
document.writeln(Math.cos(1));  //0.5403023058681398
document.writeln(Math.sin(1));  //0.8414709848078965
document.writeln(Math.tan(1));  //1.5574077246549023
document.writeln(Math.acos(1));  //0
document.writeln(Math.asin(1));  //1.5707963267948966
document.writeln(Math.atan(1));  //0.7853981633974483
document.writeln(Math.atan2(1, 1));  //0.7853981633974483
document.writeln(Math.cos(1));  //0.5403023058681398
document.writeln(Math.cos(1));  //0.5403023058681398

対数/指数関数

  • E
  • LN2
    • 2の自然対数
    • 読み取り専用
  • LN10
    • 10の自然対数
    • 読み取り専用
  • LOG2E
    • 2を底としたeの対数
    • 読み取り専用
  • LOG10E
    • 10を底としたeの対数
    • 読み取り専用
  • log(num)
    • 自然対数
  • exp(num)
    • 指数関数(eの累乗)
document.writeln(Math.E);  //2.718281828459045
document.writeln(Math.LN2);  //0.6931471805599453
document.writeln(Math.LN10);  //2.302585092994046
document.writeln(Math.LOG2E);  //1.4426950408889634
document.writeln(Math.LOG10E);  //0.4342944819032518
document.writeln(Math.log(Math.E));  //1
document.writeln(Math.exp(1));  //2.718281828459045

うむ、次!

Arrayオブジェクト

配列型の値を扱うためのオブジェクトで
配列に対する要素の追加/削除、結合、並び替えなどを
行うための機能を提供する

Arrayオブジェクトはリテラル表現を使って

var ary = ['佐藤', '田中', '鈴木'];

のように生成することもできるが
コンストラクタ経由で下記のように生成することもできる

var ary = new Array('佐藤', '田中', '鈴木');  //指定要素で配列を生成
var ary = new Array();  //空の配列を生成
var ary = new Array(10);  //指定サイズ(インデックスは0~9)で空の配列を生成

ただしコンストラクタを利用した構文は
意味的に曖昧になりやすいという問題がある

var ary = new Array(10);  //「長さが10の配列」なのか「10という要素を持つ配列」なのかわかりにくい
var ary = new Array(-10);  //「-10という要素を持つ配列」を生成するつもりが「長さが-10の配列」を生成しようとしてエラーになる

配列を生成するには極力
配列リテラルを利用すること

加工

  • concat(ary)
    • 指定配列を現在の配列に連結
  • join(del)
    • 配列内の要素を区切り文字delで連結
  • slice(start [,end])
    • start~end-1番目の要素を抜き出し
  • splice(start, cnt [,rep [,..]])
    • 配列内のstart+1~start+cnt+1番目の要素をrep,..で置き換え

追加/削除

  • pop()
    • 配列末尾の要素を取得し、削除
  • push(data)
    • 配列末尾に要素を追加
  • shift()
    • 配列先頭の要素を取得し、削除
  • unshift(data1 [,data2 ,..])
    • 配列先頭に指定要素を追加

並べ替え

  • reverse()
    • 逆順に並べ変え(反転)
  • sort([fnc])
    • 要素を昇順に並び変え

その他

  • length
    • 配列のサイズ
  • toString()
    • 「要素, 要素, ..」の形式で文字列に変換
var ary1 = ['Sanada', 'Kawata', 'Inoue', 'Mihara', 'Nogami'];
var ary2 = ['Hoshino', 'Kamimura', 'Takemura', 'Okayama'];

document.writeln(ary1.concat(ary2));
//Sanada,Kawata,Inoue,Mihara,Nogami,Hoshino,Kamimura,Takemura,Okayama
document.writeln(ary1.join('/'));
//Sanada/Kawata/Inoue/Mihara/Nogami
document.writeln(ary1.slice(1));
//Kawata,Inoue,Mihara,Nogami
document.writeln(ary1.slice(1, 3));
//Kawata,Inoue
document.writeln(ary1.splice(0, 3, 'Inokoshi', 'Miura', 'Nagai'));
//Sanada,Kawata,Inoue(置き換え対象の要素を取得)
document.writeln(ary1);
//Inokoshi,Miura,Nagai,Mihara,Nogami(置き換え後の配列)

document.writeln(ary1.pop());
//Nogami(削除した要素)
document.writeln(ary1);
//Inokoshi,Miura,Nagai,Mihara(削除後の配列)
document.writeln(ary1.push('Yamada'));
//5(追加後の要素数)
document.writeln(ary1);
//Inokoshi,Miura,Nagai,Mihara,Yamada(追加後の配列)
document.writeln(ary1.shift());
//Inokoshi(削除した要素)
document.writeln(ary1);
//Miura,Nagai,Mihara(削除後の配列)
document.writeln(ary1.unshift('Komura', 'Ayase'));
//6(追加後の要素数※だだしIEではundefined)
document.writeln(ary1);
//Komura,Ayase,Miura,Nagai,Mihara,Yamada(追加後の配列)

document.writeln(ary1.reverse());
//Yamada,Mihara,Nagai,Miura,Ayase,Komura(反転後の配列)
document.writeln(ary1);
//Yamada,Mihara,Nagai,Miura,Ayase,Komura(反転後の配列)
document.writeln(ary1.sort());
//Ayase,Komura,Mihara,Miura,Nagai,Yamada(ソート後の配列)
document.writeln(ary1);
//Ayase,Komura,Mihara,Miura,Nagai,Yamada(ソート後の配列)

document.writeln(ary1.length);
//6
document.writeln(ary1.toString());
//Ayase,Komura,Mihara,Miura,Nagai,Yamada

うむうむはあく!

下記、Arrayオブジェクトのメンバで注意すべきこと

多くのメソッドはもとの配列に影響を及ぼす
  • Arrayオブジェクトのメソッドは、concatやslice、join、toStringといったメソッドを除くと、操作対象となるオリジナルの配列に影響を及ぼす
  • 特に、reverse/sortなどのメソッドは、戻り値としても並べ替えの後の結果を返しますが、元の配列もソートされているので注意
配列の中身はtoStringメソッドで確認する
  • toStringメソッドは配列内の要素をカンマで連結した文字列を返す
  • 配列の中身を確認するには、toStringメソッドを使うと便利
  • ちなみにdocument.writelnメソッドなど表示系のメソッドでは、配列オブジェクトを直接渡すことで内部的にtoStringメソッドが呼び出されるため、明示的にtoStringメソッドを呼び出す必要がない
  • これはあれか、さっきの例の最後に記述した処理は「.toString()」なしでもいいということか
sortメソッドにはユーザ定義関数も指定可能
  • sortメソッドでは、引数としてユーザ定義関数を指定し、デフォルトでは処理できないようなソート処理を独自に実装することも可能
  • ただし、ユーザ定義関数は最低限、以下の規則にのっとっている必要がある
    • 引数は2つ
    • 第1引数が第2引数より小さい場合は負数、大きい場合は正数を返す
  • たとえば、sortメソッドはデフォルトで数字も文字列としてソート処理するが、これを「数値としてソート処理したい」という場合には以下のように記述する
    • ここでは(匿名)関数を使用しているため、コードの解説は割愛する
var ary = [5, 25, 10];
document.writeln(ary.sort());  //10,25,5(文字列としてソート)
document.writeln(ary.sort(
  fonction(x, y){return x - y;}
));  //5,10,25(数値としてソート)




うむ、最後にちょっとまとめ

基本データを扱うためのオブジェクト

  • Stringオブジェクト
    • 文字列型(string)の値を扱うためのラッパーオブジェクトで文字列の抽出や加工、検索などを行うための機能を提供する
  • Numberオブジェクト
    • 数値型(number)の値を扱うためのラッパーオブジェクトで数値の整形を行うための機能を提供するとともに無限大/無限小、数値型の最大値/最小値などの特別な値を表すための読み取り専用プロパティ(定数)を公開している
  • Mathオブジェクト
    • 指数計算や平方根、対数関数など数学に関わる演算機能を提供する
    • 全て静的プロパティ/メソッドである
    • また、Mathオブジェクトはnew演算子インスタンス化しようとすると実行エラーになる
  • Arrayオブジェクト
    • 配列型の値を扱うためのオブジェクトで配列に対する要素の追加/削除、結合、並び替えなどを行うための機能を提供する

それぞれ生成する場合は基本的にリテラル表現を使用する



うむうむ、はあく!