JavaScriptの配列の反復処理にfor..in文を使うとインデックスが文字列型になる

Posted on 2019年5月19日 11:49 by amyu

気づいたら元号が変わってました。アウトプットが大事と書かれている本を読んでインプットしながら、アウトプットしない日々を送っています。

先日、仕事で配列の探索をしようと、下記のような処理をしました(実際にはもう少し複雑です)。

var arr = ['りんご','バナナ','みかん'];
var pos = -1;
for(var i in arr){
    if(arr[i] === 'バナナ'){
        pos = i;
        break;
    }
}
if(pos === 1){
    console.log('バナナは2つ目です');
}else if(pos === -1){
    console.log('バナナはみつかりませんでした');
}

var arr = ['りんご','バナナ','みかん'];

var pos = -1;

for(var i in arr){

if(arr[i] === 'バナナ'){

pos = i;

break;

}

if(pos === 1){

console.log('バナナは2つ目です');

}else if(pos === -1){

console.log('バナナはみつかりませんでした');

}

やっていることは単純に、配列からある’バナナ’という文字列が入っているインデックスを取得し、インデックスが1だった場合に、コンソールに’バナナは2つ目です’と出力しているだけです(これぐらいならArray.prototype.indexOf() – JavaScript | MDNを使えよと思われそうですが、実際にはもう少しループの中で複雑なことをしていました)。

一見、普通に’バナナは2つ目です’と出力されるような気がしますが、何も出力されません。見つからなかったら、’バナナはみつかりませんでした’と出力されるはずですが、それすらでてきません。

おかしいなぁ。と思って試しに、「i === 1」を「i == 1」としてみると、なんと’バナナは2つ目です’と出力されました。もしかしてと思って、最後に「console.log(typeof pos)」といれると、stringと出力されました。

配列のインデックスを「arr[‘0’]」というように、数値の文字列型で取得できるのは知ってたのですが、for..inを配列で使うと、インデックスは文字列型になってしまうことは知りませんでした。まあ、確かにfor..inはあくまでオブジェクトのプロパティ名が代入される処理ですしね。

MDNを見ると、「注: for…in はインデックスの順序が重要となる配列の繰り返しには使うぺきではありません。」と書かれてました(参考：for…in – JavaScript | MDN)。普通のforループかforEachを使うのがよさそうです。

ただ、forループだといちいちlengthの指定が必要だし、forEachだと途中で抜けれなくて無駄な処理が多くなりそうなので、for…inにしました。ですが、もう少し調べてみると、Array.prototype.some()を使うと自分のやりたいことはできそうだと発覚。

var arr = ['りんご','バナナ','みかん'];
var pos = -1;
arr.some(function(val, index){
console.log(val);
    if(val === 'バナナ'){
        pos = index;
        return true;
    }
})
if(pos === 1){
    console.log('バナナは2つ目です');
}else if(pos === -1){
    console.log('バナナはみつかりませんでした');
}

var arr = ['りんご','バナナ','みかん'];

var pos = -1;

arr.some(function(val, index){

console.log(val);

if(val === 'バナナ'){

pos = index;

return true;

}

})

if(pos === 1){

console.log('バナナは2つ目です');

}else if(pos === -1){

console.log('バナナはみつかりませんでした');

}

Array.prototype.some()ってあまり使う機会ないと思って使ったことなかったんですけど、こういう使い方もあるなら結構いろいろ使いどころありそうです。

jquery.ajaxに代わる、Fetch APIについて

Posted on 2018年6月10日 00:02 by amyu

返信

Pocket

最近のJavaScriptでは、jQueryに依存しない書き方が増えてきたようです。ただ、確かにセレクターなら、document.querySelectorAllメソッドを使えばいいだけなんですが、個人的にjQueryで便利なところは、ajaxだと思ってるんです。いちいち、XMLHttpRequestがどうちゃらこうちゃらとか書きたくないし、だいいち覚えられない。だから自分は、jQueryからはなかなか離れられないだろうし、離れたとしてもAjaxようの共通関数は実装することになるんだろうなぁ。と思っていたら、最近になってFetch APIなんてものを知りました。

最近のWeb技術界隈は追えていないと思ったらこんなものが。というわけで、調べて使ってみました。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Fetch APIテスト</title>
</head>
<body>
    <form id="frm">
        <label>2倍にする数値:<input type="number" id="num"></label><br>
        <label>ハッシュ化する文字列:<input type="text" id="str"></label><br>
        <input type="button" value="Fetch APIテスト" id="btn"><br>
        結果：<output style="border:1px solid black;" id="output"></output>
    </form>
    <script>
        document.getElementById('btn').addEventListener('click', function(){
            let num = document.getElementById('num').value;
            let str = document.getElementById('str').value;

            fetch('return_json.php', {
                method : 'POST',
                body : JSON.stringify({"num":num, "str":str})
            }).then(function(response){
                console.dir(response);
                return response.json();
            }).then(function(data){
                console.dir(data);
                document.getElementById('output').innerHTML = JSON.stringify(data);
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Fetch APIテスト</title>

</head>

<body>

<label>2倍にする数値:<input type="number" id="num"></label><br>

<label>ハッシュ化する文字列:<input type="text" id="str"></label><br>

結果：<output style="border:1px solid black;" id="output"></output>

</form>

document.getElementById('btn').addEventListener('click', function(){

let num = document.getElementById('num').value;

let str = document.getElementById('str').value;

fetch('return_json.php', {

method : 'POST',

body : JSON.stringify({"num":num, "str":str})

}).then(function(response){

console.dir(response);

return response.json();

}).then(function(data){

console.dir(data);

document.getElementById('output').innerHTML = JSON.stringify(data);

});

</script>

</body>

</html>

PHP

<?php
$params = json_decode(file_get_contents('php://input'), true);
$num = intval($params["num"]) * 2;
$sha256 = hash_hmac('sha256', $params["str"], False);
$ret = array('num' => $num, 'sha256' => $sha256);
echo (json_encode($ret));
?>

<?php

$params = json_decode(file_get_contents('php://input'), true);

$num = intval($params["num"]) * 2;

$sha256 = hash_hmac('sha256', $params["str"], False);

$ret = array('num' => $num, 'sha256' => $sha256);

echo (json_encode($ret));

サンプル：Document

やってることは、サーバーに数値と文字列をPOSTで渡すと、数値を2倍、文字列をSHA-256でハッシュ化した結果をJSON形式で返すというもの。例えば、数値を123、文字列をabcとすると下記のようになりました。

確かに数値は2倍になって、文字列はハッシュ化して返ってきました。ちょっとよく分からなかったのが、最初にResponseオブジェクトからどういう形式で値を取得するかという指定が必要なこと。これがPromiseオブジェクトで返ってくるので、いちいちthenを二回書かなきゃいけないという。response.json()で返ってくる値がPromiseオブジェクトじゃなくて、JSONオブジェクト(多重表現)になってるほうが直感的でわかりやすい気がするのだけど、多分、こうなってるメリットはあるんだろうと思う。このへんは多分、自分がPromiseについてよく分かってないから疑問に思ってるのだと思うので、もう少しこのへんも勉強していこうと思う。

ところで最初、fetchのbody部分を「body: new FormData(document.getElementById(‘frm’))」と指定しようと思ったのですが、それだといまいちメリットがないなと思ったら、JSONで渡せることを知ったのでそうしました。PHP側で『json_decode(file_get_contents(‘php://input’), true);』とすればいいそうです。初めて知りました。JSONのまま渡せるなら、便利ですね。これからはそうしようかな。

画面内に入ったり出たりした時の処理を行う「Intersection Observer」について

Posted on 2018年3月11日 11:55 by amyu

返信

Pocket

先日、超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)という本を読んで知ったのですが、最近のWebブラウザのJavaScriptには、「Intersection Observer」というAPIがあるらしく、このAPIを使うことで画面内に入ったか(もしくは画面外に出たか)どうかを判定できるそうです。

便利そうなので、試しに使ってみました。画面に四角い要素を100個並べて、画面に入ったり出たりすることで背景色が変わるサンプルです。試しに、今まで知ってはいたけど使ったことがないCSSアニメーションや、ES6から実装されたletやconstやアロー関数も使っています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Intesection Observeテスト</title>
    <link rel="stylesheet" href="intersectionObserve.css">
    <script src="intersectionObserve.js" defer></script>
</head>
<body>
    <div id="main"></div>    
</body>
</html>

<!DOCTYPE html>

<head>

<title>Intesection Observeテスト</title>

</head>

<body>

</body>

</html>

CSS

#main > div{
    float:left;
    width:100px;
    height:100px;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#4169e1;
    text-align:center;
    line-height:100px;
    color:white;
    transition: background 1s linear, color 1s linear; /* 1秒書けて背景色と文字色を変化 */
}
/* 画面内に入った時用のクラス */
#main > div.in{
    background-color:orange;
    color:black;
}

#main > div{

float:left;

width:100px;

height:100px;

margin-right:10px;

margin-bottom:10px;

background-color:#4169e1;

text-align:center;

line-height:100px;

color:white;

transition: background 1s linear, color 1s linear; /* 1秒書けて背景色と文字色を変化 */

}

/* 画面内に入った時用のクラス */

#main > div.in{

background-color:orange;

color:black;

}

JavaScript

const main = document.getElementById('main');

//Intersection Observerの使用
const observer = new IntersectionObserver(entries => {
    console.log(entries);
    for(const entry of entries){
        const item = entry.target;
        //要素に入ってるか、入ってないかの特定
        if(entry.intersectionRatio > 0){ //要素内
            item.classList.add('in');
        }else{ //要素外
            item.classList.remove('in');
        }
    }
})

//要素作成
for(let i = 0; i < 100; i++){
    const newDiv = document.createElement('div');
    newDiv.innerHTML = i;
    main.appendChild(newDiv);
    observer.observe(newDiv);
}

const main = document.getElementById('main');

//Intersection Observerの使用

const observer = new IntersectionObserver(entries => {

console.log(entries);

for(const entry of entries){

const item = entry.target;

//要素に入ってるか、入ってないかの特定

if(entry.intersectionRatio > 0){ //要素内

item.classList.add('in');

}else{ //要素外

item.classList.remove('in');

}

})

//要素作成

for(let i = 0; i < 100; i++){

const newDiv = document.createElement('div');

newDiv.innerHTML = i;

main.appendChild(newDiv);

observer.observe(newDiv);

}

サンプル：Intesection Observeテスト

スクロールしたり画面サイズを変更したりすることで、四角い要素が画面内に入ると、背景色が1秒かけて青からオレンジに変わると思います(IE以外の最新ブラウザ対応)。

ただ、すばやくスクロールしているとたまにうまく動作しないことがあるみたいです。あまりアテにしすぎるのもよくないのかも(自分がよく分かってない可能性もおおいにあります)。

なお、IntersectionObserverの第2引数にはどの要素の交差を判定するか(なければブラウザのビューポート)のrootと、ルート回りの余白を指定できるrootMargin、それと可視性がどれぐらい入ってるか出ているかでコールバックを実行するthresholdというオプションがあるそうです。
参考：Intersection Observer API – Web API インターフェイス | MDN

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

posted with amazlet at 18.03.11

佐藤歩泉水翔吾
技術評論社
売り上げランキング: 11,340

Amazon.co.jpで詳細を見る

JavaScriptで日時の加減算を行う

Posted on 2016年11月6日 23:09 by amyu

Pocket

またもや、改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までから。

JavaScriptの日時処理は少し面倒だという印象があります。上で紹介した本を読んでも、ES2015でもそれは変わってないらしく、例えばフォーマットによる日時を付与した関数なんてものも用意されてないらしいです。

その点ではMoment.jsというライブラリ(参考：Moment.jsを使う – Qiita)がよさげではあるのですが、今回は素のJavaScriptを使った加減算について。

というのもやり方は簡単で、DateオブジェクトのgetXxxxxメソッドとsetXxxxxメソッドを使えばいいだけだそう。実は、本をよむまで、getとつくメソッドがあるのは知ってたけど、setとつくメソッドがあるのは知らなかった。

使い方としては以下。

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット
console.log(day.toLocaleString()); //=> 2016/11/6 22:30:00
day.setMonth( day.getMonth() + 1); // 1ヶ月後に変更
console.log(day.toLocaleString()); //=> 2016/12/6 22:30:00
day.setDate( day.getDate() - 7); // 7日前に変更
console.log(day.toLocaleString()); //=> 2016/11/29 22:30:00

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット

console.log(day.toLocaleString()); //=> 2016/11/6 22:30:00

day.setMonth( day.getMonth() + 1); // 1ヶ月後に変更

console.log(day.toLocaleString()); //=> 2016/12/6 22:30:00

day.setDate( day.getDate() - 7); // 7日前に変更

console.log(day.toLocaleString()); //=> 2016/11/29 22:30:00

見て分かるように、月をまたいでもちゃんと計算される(それにしてもなぜ、月だけ0始まりにしたのだろうか。最初間違えて、『new Date(2016,11,6,22,30);』として12月6日になって混乱した)。

これを応用したら、指定の日付の月末日を取得することができる。

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット
day.setMonth( day.getMonth() + 1); // 1ヶ月後に変更
day.setDate(0); // 0日目(前月の最終日)をセット
console.log(day.toLocaleString()); // 2016/11/30 22:30:00

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット

day.setMonth( day.getMonth() + 1); // 1ヶ月後に変更

day.setDate(0); // 0日目(前月の最終日)をセット

console.log(day.toLocaleString()); // 2016/11/30 22:30:00

ちなみに、setXxxxメソッドの戻り値は、Dateオブジェクトではなくて1970 年 1 月 1 日 00:00:00 からのミリ秒数。Dateオブジェクトだったらメソッドチェーンが利用できたので少し面倒。まあ、目的は変更後の日付を返すのではなく、自分自身の日付を変更するということだから仕方ないか。

まあ、やろうと思えば下記のようにできなくはない。

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット
day = new Date(new Date(day.setMonth(day.getMonth()+1)).setDate(0)); // 1ヶ月後に変更したうえでその返り値のDateオブジェクトを取得し、さらにその月の0日目を取得したうえで、その返り値のDateオブジェクトを作成する
console.log(day.toLocaleString()); //=> 2016/11/30 22:30:00

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット

day = new Date(new Date(day.setMonth(day.getMonth()+1)).setDate(0)); // 1ヶ月後に変更したうえでその返り値のDateオブジェクトを取得し、さらにその月の0日目を取得したうえで、その返り値のDateオブジェクトを作成する

console.log(day.toLocaleString()); //=> 2016/11/30 22:30:00

いや、これはメソッドチェーンとは言わないか。

というよりよくよく考えたら、Dateオブジェクトを新しく生成すればいいだけでした(調べて気づいた)。

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット
day = new Date( day.getFullYear(), day.getMonth() + 1, 0, day.getHours(), day.getMinutes() );
console.log(day.toLocaleString()); //=> 2016/11/30 22:30:00

day = new Date(2016,10,6,22,30); // 2016年11月6日22時30分をセット

day = new Date( day.getFullYear(), day.getMonth() + 1, 0, day.getHours(), day.getMinutes() );

console.log(day.toLocaleString()); //=> 2016/11/30 22:30:00

なお、日付通しの計算については、getTimeメソッドを利用して数値化したうえで、1単位をミリ秒数で表した数で割らなきゃいけないそうです。

var dat1 = new Date(2016,11,6,12,34,56); // 2016年11月6日12時34分56秒をセット
var dat2 = new Date(2001,0,1,0,0,0); // 2001年1月1日0時0分0秒をセット
var diffDays = (dat1.getTime() - dat2.getTime()) / (1000 * 60 * 60 * 24);
console.log('21世紀になってから' + ~~diffDays + '日がたちました');
    //=> '21世紀になってから5818日がたちました'
var diffSeconds = (dat1.getTime() - dat2.getTime()) / (1000);
console.log('21世紀になってから' + ~~diffSeconds + '秒がたちました');
    //=> '21世紀になってから502720496秒がたちました'

var dat1 = new Date(2016,11,6,12,34,56); // 2016年11月6日12時34分56秒をセット

var dat2 = new Date(2001,0,1,0,0,0); // 2001年1月1日0時0分0秒をセット

var diffDays = (dat1.getTime() - dat2.getTime()) / (1000 * 60 * 60 * 24);

console.log('21世紀になってから' + ~~diffDays + '日がたちました');

//=> '21世紀になってから5818日がたちました'

var diffSeconds = (dat1.getTime() - dat2.getTime()) / (1000);

console.log('21世紀になってから' + ~~diffSeconds + '秒がたちました');

//=> '21世紀になってから502720496秒がたちました'

なんで標準でこれぐらいの計算が簡単にできるメソッドが用意されていないのだろうか……。ES2015では追加されるんじゃないかと期待していたのだけど……。

JavaScriptで、できるかぎり小数演算の誤差を少なくする方法

Posted on 2016年10月29日 23:51 by amyu

Pocket

JavaScriptにかぎらず、プログラミングでの小数を含む演算では誤差が発生してしまうことがよくあります。例えば、『0.2+0.1』という単純な足し算すら、『0.30000000000000004』という結果になってしまいます(Chromeで確認した場合)。その対応方法が改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までに書いてあったのでメモしておきます。

対応方法といっても単純なことで、ようは小数をいったん小数の長さ分の10の累乗を掛けて整数にしてから演算し、それから10の累乗分した数を割って正しい値を取得するというもの。最後の10の累乗で割るときに誤差が発生してしまうのではないかと思いそうですが、割られる方の数が整数であれば誤差は発生しないようです(例えば、『12.35/10』の結果は『1.2349999999999999』となるけど、『1235/1000』の結果は『1.235』となる)。

というわけで、小数の演算に対応した関数を書いてみました。

// 小数対応の足し算
function decimalAddition(a, b){
    if(!isFinite(a) || !isFinite(b)){
        throw "数値を指定してください";
    }
    // 指数表記は未対応
    if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){
        throw "指数表記は未対応です";
    }

    var aArr = a.toString().split('.'), bArr = b.toString().split('.');
    var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;
    var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;
    var longDecimalPart = (aDecimalPart > bDecimalPart) ? aDecimalPart : bDecimalPart;
    // 小数部を整数にしたうえで演算する
    var transCalcNumber = (a * Math.pow(10, longDecimalPart)) + (b * Math.pow(10, longDecimalPart));

    return transCalcNumber / Math.pow(10, longDecimalPart);
}
// 小数対応の引き算
function decimalSubstract(a, b){
    if(!isFinite(a) || !isFinite(b)){
        throw "数値を指定してください";
    }
    // 指数表記は未対応
    if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){
        throw "指数表記は未対応です";
    }

    var aArr = a.toString().split('.'), bArr = b.toString().split('.');
    var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;
    var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;
    var longDecimalPart = (aDecimalPart > bDecimalPart) ? aDecimalPart : bDecimalPart;
    // 小数部を整数にしたうえで演算する
    var transCalcNumber = (a * Math.pow(10, longDecimalPart)) - (b * Math.pow(10, longDecimalPart));

    return transCalcNumber / Math.pow(10, longDecimalPart);
}
// 小数対応の掛け算
function decimalMultiplication(a, b){
    if(!isFinite(a) || !isFinite(b)){
        throw "数値を指定してください";
    }
    // 指数表記は未対応
    if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){
        throw "指数表記は未対応です";
    }

    var aArr = a.toString().split('.'), bArr = b.toString().split('.');
    var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;
    var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;
    // 小数部を整数にしたうえで演算する
    var transCalcNumber = (a * Math.pow(10, aDecimalPart)) * (b * Math.pow(10, bDecimalPart));
    // 正しい値になるように除算する数を求める 
    var lastCalcNumber = Math.pow(10, aDecimalPart + bDecimalPart);

    return transCalcNumber / lastCalcNumber;
}
// 小数対応の割り算
function decimalDivision(a, b){
    if(!isFinite(a) || !isFinite(b)){
        throw "数値を指定してください";
    }
    // 指数表記は未対応
    if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){
        throw "指数表記は未対応です";
    }

    var aArr = a.toString().split('.'), bArr = b.toString().split('.');
    var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;
    var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;
    var longDecimalPart = (aDecimalPart > bDecimalPart) ? aDecimalPart : bDecimalPart;

    // 小数部が長いほうにあわせて整数にしたうえで割り算を行う
    return (a * Math.pow(10, longDecimalPart)) / (b * Math.pow(10, longDecimalPart));
}

// 小数対応の足し算

function decimalAddition(a, b){

if(!isFinite(a) || !isFinite(b)){

throw "数値を指定してください";

}

// 指数表記は未対応

if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){

throw "指数表記は未対応です";

}

var aArr = a.toString().split('.'), bArr = b.toString().split('.');

var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;

var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;

var longDecimalPart = (aDecimalPart > bDecimalPart) ? aDecimalPart : bDecimalPart;

// 小数部を整数にしたうえで演算する

var transCalcNumber = (a * Math.pow(10, longDecimalPart)) + (b * Math.pow(10, longDecimalPart));

return transCalcNumber / Math.pow(10, longDecimalPart);

}

// 小数対応の引き算

function decimalSubstract(a, b){

if(!isFinite(a) || !isFinite(b)){

throw "数値を指定してください";

}

// 指数表記は未対応

if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){

throw "指数表記は未対応です";

}

var aArr = a.toString().split('.'), bArr = b.toString().split('.');

var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;

var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;

var longDecimalPart = (aDecimalPart > bDecimalPart) ? aDecimalPart : bDecimalPart;

// 小数部を整数にしたうえで演算する

var transCalcNumber = (a * Math.pow(10, longDecimalPart)) - (b * Math.pow(10, longDecimalPart));

return transCalcNumber / Math.pow(10, longDecimalPart);

}

// 小数対応の掛け算

function decimalMultiplication(a, b){

if(!isFinite(a) || !isFinite(b)){

throw "数値を指定してください";

}

// 指数表記は未対応

if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){

throw "指数表記は未対応です";

}

var aArr = a.toString().split('.'), bArr = b.toString().split('.');

var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;

var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;

// 小数部を整数にしたうえで演算する

var transCalcNumber = (a * Math.pow(10, aDecimalPart)) * (b * Math.pow(10, bDecimalPart));

// 正しい値になるように除算する数を求める

var lastCalcNumber = Math.pow(10, aDecimalPart + bDecimalPart);

return transCalcNumber / lastCalcNumber;

}

// 小数対応の割り算

function decimalDivision(a, b){

if(!isFinite(a) || !isFinite(b)){

throw "数値を指定してください";

}

// 指数表記は未対応

if( (a.toString().indexOf('e') != -1) || (b.toString().indexOf('e') != -1) ){

throw "指数表記は未対応です";

}

var aArr = a.toString().split('.'), bArr = b.toString().split('.');

var aDecimalPart = (aArr.length === 2) ? aArr[1].length : 0;

var bDecimalPart = (bArr.length === 2) ? bArr[1].length : 0;

var longDecimalPart = (aDecimalPart > bDecimalPart) ? aDecimalPart : bDecimalPart;

// 小数部が長いほうにあわせて整数にしたうえで割り算を行う

return (a * Math.pow(10, longDecimalPart)) / (b * Math.pow(10, longDecimalPart));

}

足し算、引き算、掛け算、割り算の４つの関数がありますが、上半分はすべて同じです。本来ならこの部分は共通化しておいたほうがいいでしょうね。エラー処理は余計だったかもしれません(この処理がなくても、どのみち例外エラーが発生するのだし、throwで返すのではなく、0やnullを返すとかでもいいかも)。

エラー処理はまず引数が数値かどうかチェックし、その後に指数表記かどうかを調べています。

実行した結果は下記のとおりです(『//=>』より右側が実行結果)。

// 足し算
console.log( 1+1.235 ); //=> 2.2350000000000003
console.log( decimalAddition(1, 1.235) ); //=> 2.235
console.log( 0.2+0.1 ); //=> 0.30000000000000004
console.log( decimalAddition(0.2, 0.1) ); //=> 0.3
// 引き算
console.log( 10-9.9999 );　//=> 0.00009999999999976694
console.log( decimalSubstract(10, 9.9999) ); //=> 0.0001
console.log( 9.9999-9 ); //=> 0.9999000000000002
console.log( decimalSubstract(9.9999, 9) ); //=> 0.9999
// 掛け算
console.log( 0.2*3 ); //=> 0.6000000000000001
console.log( decimalMultiplication(0.2, 3) ); //=> 0.6
console.log( 0.33*0.33 ); //=> 0.10890000000000001
console.log( decimalMultiplication(0.33, 0.33) ); //=> 0.1089
// 割り算
console.log( 10.89/100 ); //=> 0.10890000000000001
console.log( decimalDivision(10.89, 100) ); //=> 0.1089
console.log( 0.6/0.2 ); //=> 2.9999999999999996
console.log( decimalDivision(0.6, 0.2) ); //=> 3

// 足し算

console.log( 1+1.235 ); //=> 2.2350000000000003

console.log( decimalAddition(1, 1.235) ); //=> 2.235

console.log( 0.2+0.1 ); //=> 0.30000000000000004

console.log( decimalAddition(0.2, 0.1) ); //=> 0.3

// 引き算

console.log( 10-9.9999 );　//=> 0.00009999999999976694

console.log( decimalSubstract(10, 9.9999) ); //=> 0.0001

console.log( 9.9999-9 ); //=> 0.9999000000000002

console.log( decimalSubstract(9.9999, 9) ); //=> 0.9999

// 掛け算

console.log( 0.2*3 ); //=> 0.6000000000000001

console.log( decimalMultiplication(0.2, 3) ); //=> 0.6

console.log( 0.33*0.33 ); //=> 0.10890000000000001

console.log( decimalMultiplication(0.33, 0.33) ); //=> 0.1089

// 割り算

console.log( 10.89/100 ); //=> 0.10890000000000001

console.log( decimalDivision(10.89, 100) ); //=> 0.1089

console.log( 0.6/0.2 ); //=> 2.9999999999999996

console.log( decimalDivision(0.6, 0.2) ); //=> 3

ところで今回、小数って英語でなんていうんだけと思って調べて、英語でdecimalということを初めて知りました。decimalというと、10進数というイメージがあるのだけど、小数という意味もあったのかと。どっちの意味で使ってるか分かりづらいことってないのだろうか。

while(isプログラマ)

ころころ興味対象が変わるプログラマの技術ブログ(多分)

「JavaScript」カテゴリーアーカイブ

JavaScriptの配列の反復処理にfor..in文を使うとインデックスが文字列型になる

jquery.ajaxに代わる、Fetch APIについて

HTML

PHP

画面内に入ったり出たりした時の処理を行う「Intersection Observer」について

HTML

CSS

JavaScript

JavaScriptで日時の加減算を行う

JavaScriptで、できるかぎり小数演算の誤差を少なくする方法