JavaScriptのビルトインオブジェクトを拡張する - Qiita
例えば、配列を拡張してrubyのようにfirstで1件目のエントリーを取得できるようにするにはどうすればよいか、 といったことを紹介します。 拡張する方法を紹介する記事ですので、拡張している内容は特に重要ではありません。 注意 グローバルなものを変更してしまう内容を紹介しています。 一見便利に思えても、名前が衝突する可能性があったりしますので、実用するべきかどうかは慎重に検討してください。 （僕は個人の実装物でしかやりません） そして、実装する内容も、本当に汎用的に使えるものに絞ったほうがよいです。 Mathオブジェクトに関数を拡張 この場合、単に好きなキー名に関数をアサインしてしまって大丈夫です。 Math.sum = (...numbers) => { return numbers.reduce((prev, current) => prev + current) } Math.sum
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
.reduce() | JavaScript 日本語リファレンス | js STUDIO
reduce()メソッドは配列に対して関数を適用し、その処理によって配列の各値を(左から右に)一つの値にまとめます。 文法 arr.reduce(callback,[initialValue]) 配列内の各値で実行される関数です。 この関数は4つの引数を受け取ります。 previousValue この値は直前(1つ前の要素)のコールバック実行で返された値か、 または提供されていればinitialValue(後述)になります。 currentValue 配列内で現在処理されている要素です。 index 配列内で現在処理されている要素のインデックスです。 array reduceが呼び出されている配列そのものです。 引数 説明 説明 reduceは配列内の各要素に対して(欠落しているものを除き)順番に、コールバック関数を実行していきます。 コールバック関数は初期値(または直前のコールバック呼び
オプショナルチェーン (?.) - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback オプショナルチェーン (?.) (optional chaining) 演算子は、オブジェクトのプロパティにアクセスしたり、関数を呼び出したりします。この演算子を使用してアクセスするオブジェクトまたは呼び出される関数が undefined または null の場合、エラーが発生することなく、式が途中で終了し、undefined と評価されます。 const adventurer = { name: "Alice", cat:
Number.isNaN() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. Learn moreSee full compatibilityReport feedback Number.isNaN() は静的メソッドで、渡された値が数値型の NaN であるかどうかを判定します。入力が数値型でなかった場合は false を返します。元となるグローバルの isNaN() よりも堅牢な版です。
配列のすべての要素の値を合計した値を取得する
要素の値を合計する(reduceメソッド) Array オブジェクトの reduce メソッドを使うと、配列に含まれるすべての要素の値を合計し、その合計値を返します。書式は次の通りです。 配列名.reduce( コールバック関数(合計値の保管用, 要素の値), 初期値 ) 配列名.filter( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス), 初期値 ) 配列名.filter( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス, 配列), 初期値 ) reduce メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数は、合計値の保管用、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。コールバック関数の中では合計値の保管用の値に現在の要素の値を加算したものを
Array.prototype.reduce() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback reduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素の計算結果の返値を渡します。配列のすべての要素に対して「縮小」コールバック関数を実行した最終結果は、単一の値となります。 コールバックの初回実行時には「直前の計算の返値」は存在しません。 初期値が与えらえた場合は、代わりに使用されることがあります。 そうでな
JavaScriptのNumberとparseIntの違いを現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのNumber()とparseInt()の違いについて解説しています。NumberとparseIntそれぞれの役割と使い方、2つの違い、場面によって使うとよいかについて動作を見ていきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptのNumberとparseIntの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ
[JavaScript] 数字を3桁カンマ区切りにする、2つの方法 - YoheiM .NET
こんにちは、@yoheiMuneです。 数値を3桁カンマ区切りにしたいという要件を、JavaScriptでどのように実現するのかについて、ブログに書きたいと思います。 目次 解決したいこと 「数字は3桁カンマ区切りで表示したいんだよね〜」と言われた時に、サクッと対応できる方法をお伝えしたいと思います。 方法1：toLocaleString()を利用 実装方法 もっとも簡単に対応するなら、toLocaleString()関数を使うと便利です。数値型の変数に利用できます。 var num = 12345; num.toLocaleString(); // "12,345" toLocaleString()はロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。 ブラ
![[JavaScript] 数字を3桁カンマ区切りにする、2つの方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/59af8a45171618d90e4d4f0d7fe3d06f158278fc/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F624.jpg)
Document: querySelector() メソッド - Web API | MDN
ドキュメントオブジェクトモデル (DOM)DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscr
globalThis - JavaScript | MDN
従来、グローバルスコープにアクセスするには、JavaScript 環境ごとに異なる構文を必要としていました。ウェブ上では window, self, frames を使うことができます。しかし Web Worker は self のみを利用することができます。Node.js はこれらのいずれも利用できず、代わりに global を使用する必要があります。 this キーワードは、strict でないモードで実行されている関数の中で使用することもできますが、strict モードで実行されているモジュールや関数の中では undefined になります。Function('return this')() を使用することもできますが、CSP などによって eval() を無効にしている環境では、この方法でも Function の使用が抑制されます。 globalThis プロパティは、環境を越えて
String.prototype.repeat() - JavaScript | MDN
標準組み込みオブジェクトStringコンストラクターString() コンストラクター静的メソッドString.fromCharCode()String.fromCodePoint()String.raw()インスタンスメソッドString.prototype.anchor() 非推奨; String.prototype.at()String.prototype.big() 非推奨; String.prototype.blink() 非推奨; String.prototype.bold() 非推奨; String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prot
Document: cookie プロパティ - Web API | MDN
ドキュメントオブジェクトモデル (DOM)DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscr
Object.entries() - JavaScript | MDN
標準組み込みオブジェクトObjectコンストラクターObject() コンストラクター静的メソッドObject.assign()Object.create()Object.defineProperties()Object.defineProperty()Object.entries()Object.freeze()Object.fromEntries()Object.getOwnPropertyDescriptor()Object.getOwnPropertyDescriptors()Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Object.getPrototypeOf()Object.groupBy()Object.hasOwn()Object.is()Object.isExtensible()Object.isFr
Object.assign() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. Learn moreSee full compatibilityReport feedback Object.assign() 静的メソッドは、すべての列挙可能な自身のプロパティの値を、 1 つ以上のコピー元オブジェクトからコピー先オブジェクトにコピーするために使用されます。変更されたコピー先オブジェクトを返します。 const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assig
Promise チェーン
前置き: コールバック の章で言及した問題に戻りましょう。私たちは順次実行される一連の非同期タスクを持っています。例えば、スクリプトの読み込みです。上手くコード化するにはどうすればよいでしょう？ Promise はそのためのいくつかの方法を提供します。 この章では promise チェーンを説明します。 次のようになります: new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { // (**) alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return result * 2; }).t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita![[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7f706c8a17e12cc5f52f54fd6ce87f1be553376/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz0yMDg5YWE2OTljNzUzNGQ3YWQzNDM1YjEwMWVhZjRiNQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dad1469ca61be031e845c1c818664c067%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU4NSU4RCVFNSU4OCU5NyUyOEFycmF5JTI5JUUzJTgxJUFFJUU1JTkwJTg4JUU4JUE4JTg4JUU1JTgwJUE0JTJDJTIwJUU1JUI5JUIzJUU1JTlEJTg3JUU1JTgwJUE0JTJDJTIwJUU0JUI4JUFEJUU1JUE0JUFFJUU1JTgwJUE0JUUzJTgyJTkyJUUzJTgzJUEyJUUzJTgzJTgwJUUzJTgzJUIzJUUzJTgxJUFCJUU2JUIxJTgyJUUzJTgyJTgxJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MzgwZGNjM2FjMDNjMmU2NzgzZWRmMzc3MmMzMGFkNzI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc4caf131f00e11aa0d274bec49c26b0d)
while - JavaScript | MDN
javascriptでsleepを実現する方法(実際にはsetTimoutを利用) - Qiita
JSのObjectをforEachで処理する方法 - Qiita
