1. ホーム /
  2. JavaScript

JavaScript

  • 2023.02.06

【JavaScript】Array.prototype.concatメソッドとArray.prototype.reduce()メソッド

concatメソッドは、自分自身の配列と引数として渡された要素を連結して、新しいコピー配列を生成する。もし引数として渡された要素が配列なら、そこに含まれる要素がそれぞれ新しく作られた配列に追加される。
concatメソッドとスプレット構文(Spread syntax)とreduceメソッドを使うと2次元配列を1次元配列に変換できる。
簡単に2次元配列を1次元配列に変換可能なことに驚いたわ。

concatenate (他)《コ》[文字などを]連結させる
concatenation (名)(U)連続,連結
spread (自)広がる (他)を広げる

続きを読む
  • 2023.02.03

【JavaScript】Array.prototype.reduce()

Array.prototype.reduce()はややこしいな。

簡単な使い方
reduceメソッドで配列の中の数値をすべて足して合計値を求める。
reduceメソッドで配列の中の文字列をすべて連結した文字列を作る。
初期値に関しては、空の配列を初期値なしで実行するとエラーになったり、予期せぬ実行結果になったりする可能性があるため、初期値は設定した方がいい。
配列の中の文字列を連結したいならjoinメソッド使った方が記述内容も少なくて分かりやすいな。

reduce (他)を減らす

配列の中の数値を全部合計する処理にreduceメソッド使えるな。
しかし、なんでreduceという名前なんだ？「減らす」という意味だよな。

続きを読む
  • 2023.02.03

【JavaScript】Array.prototype.map()

Array.prototype.map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、
その結果からなる新しい配列を生成する。
mapメソッドで返された配列を使用しない場合はmapメソッドを使用すべきではない。

続きを読む
  • 2023.02.02

【JavaScript】正規表現の肯定先(後)読みと否定先(後)読み

正規表現の肯定先(後)読みと否定先(後)読みは^(先頭)、$(末尾)、\b(単語の境界)同様に「位置へのマッチ」である。
この「位置へのマッチ」はアンカーと呼ばれる。
長さ0の文字列にマッチすると考えて、ゼロ幅アサーション(zero-length assertion)やゼロ幅マッチ(zero-length match)とも呼ばれる。

assertion(名)《コ》アサーション◆プログラムの形式検証における成立条件

続きを読む
  • 2023.01.29

【JavaScript】スプレッド構文とmapを使ってみる

配列namesに格納した文字列の中で最長の文字列を求める
Math.maxとmapメソッドとスプレット構文を使用したが、このときmapメソッドにより新しく生成された配列は使用されないため、forEachを使用する方が良い気がする。
スプレット構文とmapを使用するパターンはあまりよくないパターンかもしれない。
やっぱり、このとき無駄な配列を生成しているからダメなコード例だな。


const names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];
//この場合、mapメソッドで新しく生成した配列を使用しない
const stringLengthMax = Math.max(...names.map(v => v.length));
let stringLengthMax2 = 0;

//forEachを使う
names.forEach(v => {if(stringLengthMax2 < v.length) stringLengthMax2 = v.length;});

console.log("stringLengthMax = " + stringLengthMax);//6
console.log("stringLengthMax2 = " + stringLengthMax2);//6
続きを読む
  • 2023.01.29

【JavaScript】string.match(regexp)とregexp.exec(string)で正規表現にgフラグがセットされていた場合

regexp.exec(string)において、gフラグがセットされていた場合、検索が文字列の先頭から行われるのではなくregexp.lastIndexプロパティの場所から行われるようになる(この値は最初は0にセットされている)。もしマッチが成功した場合、regexp.lastIndexはマッチした場所の次の文字の場所にセットされる。もしマッチが失敗した場合は0にリセットされる。
これを利用すれば、ループの中でexecを同じ文字列に対して何度も呼び出すことで、文字列中に複数存在するパターンをすべて探し出すことができる。

string.match(regexp)において、gフラグがセットされていた場合、このメソッドはすべてのマッチ結果を配列で返すが、キャプチャグループによるキャプチャ結果は取得できなくなる。

続きを読む
  • 2023.01.28

【JavaScript】URLフラグメント(fragmen)とハッシュ(hash)

URLにおいて、「#」より後ろの「fragment」をURLフラグメントと言う。
URLの「#」記号よりも後ろの部分のことを，URLのハッシュ(hash)という。
DOMの文脈だったり，JavaScriptでコーディングする場合は「ハッシュ」(URLのハッシュ)と俗に呼ぶ。
技術用語としての正式名称は「URLフラグメント(URL fragment)」と参考にしたwebサイトに書いてあるな。
それから、「#以降の文字列はサーバーには送られない」ことに注意する。


var url = "http://www.ora.com:80/goodparts/?q#fragment";
続きを読む