javascript 配列内で使用しているデータをカウントする
- 作成日 2021.01.26
- 更新日 2022.11.16
- javascript
- javascript
javascriptで、filterを使って、配列内で使用しているデータをカウントするサンプルコードを記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 107.0.5304.107
データをカウント
「filter」を使用して、配列内で使用しているデータを抽出後に「length」でカウントすることができます。ここでは「java」という値を使用している回数をカウントしてます。
const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];
console.log(arr.filter( function(x) { return x === 'java'} ).length); // 3
アロー関数で記述すると以下のようになります。
const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];
console.log(arr.filter(x => x === 'java').length); // 3
条件を複数
複数の条件を指定してカウントすることでもできます。
const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];
console.log(arr.filter(x => ( x === 'java' || x === 'react' )).length); // 5
サンプルコード
以下は、
「実行」ボタンをクリックすると、ランダムな5個の配列を生成して、指定した数字をカウントする
サンプルコードとなります。
※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<style>
.main {
margin: 0 auto;
margin-top: 100px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
hoge = () => {
// ランダムな5個の整数1桁の配列を生成
const arr = Array(5).fill().map(x => ~~(Math.random()*10));
// 生成した配列を表示
disp(arr, "txt1");
// 1をカウント
result.innerHTML = arr.filter(x => x === 1).length // document.getElementById('result');を省略
}
//フロントに表示する関数
disp = (arr, id) => {
let text = [];
// for ofを使用
for (let item of arr) {
text.push('<li class="list-group-item">' + item + '</li>');
}
//innerHTMLを使用して表示
document.getElementById(id).innerHTML = text.join('');
}
window.onload = () => {
// クリックイベントを登録
btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略
}
</script>
<body>
<div class="main container">
<h2><span class="badge bg-success">ランダムな配列</span></h2>
<ul id="txt1" class="list-group list-group-flush"></ul>
<h2><span id="result" class="badge bg-success">数字の1をカウント</span></h2>
<div class="row">
<button id="btn" type="button" class="btn btn-warning">
実行
</button>
</div>
</div>
</body>
</html>
カウントした結果が表示されていることが確認できます。
-
前の記事
PostgreSQL DBのindexの一覧を取得する 2021.01.26
-
次の記事
pgadmin 日本語化を行う 2021.01.26
コメントを書く