chaika.hatenablog.com Open in urlscan Pro
35.75.255.9  Public Scan

Form analysis
1 forms found in the DOM

GET https://chaika.hatenablog.com/search

<form class="search-form" role="search" action="https://chaika.hatenablog.com/search" method="get">
  <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
  <input type="submit" value="検索" class="search-module-button">
</form>

Text Content

読者になる



かもメモ


自分の落ちた落とし穴に何度も落ちる人のメモ帳


2016-06-21


JAVASCRIPT 連想配列(オブジェクト)をFOREACHでループさせたい。

JavaScript ES5

いい加減配列のループにはArray#forEachを使っていきたいと思っています。
通常の配列であれば下記のような感じ。

var array = ['暁', '響', '雷', '電'];

array.forEach(function(val, i) {
  console.log(i, elmval; 
});
/* ↓ 出力
0 "暁"
1 "響"
2 "雷"
3 "電"
*/



連想配列をFOREACHでループさせる

しかし連想配列(オブジェクト)の場合

var obj = { first: '暁', second: '響', third: '雷', fourth: '電' };

obj.forEach(function(val, key) {
  console.log(key, val); 
}); // => Uncaught TypeError: obj.forEach is not a function


そのまま Object.forEach とするとエラーになってしまいます。

OBJECT.KEYS() で連想配列のキーを配列にして利用する

連想配列(オブジェクト)をforEachで回すにはキーの配列を利用すればOK... なのだけど

var obj = { first: '暁', second: '響', third: '雷', fourth: '電' };

Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key]);
});
/* ↓ 出力
first 暁
second 響
third 雷
fourth 電
*/


ループ内で obj[key] ってループの外にある変数を参照するのがイケてない...

FOREACHの第二引数にオブジェクトを渡してあげればOK！

> array.forEach(callback[, thisObj]);
> 引数
> callback ... 各要素に対して実行するコールバック関数で、３つの引数をとります。
> thisObj ... 任意。callback 内で this として使用する値
> 
> 
> Array.prototype.forEach() - JavaScript | MDN

どうやら、forEach()の第二引数に渡した値がループ内でthisとして使用できるようなので、第二引数にオブジェクトを渡すと良い感じになりそうです。

var obj = { first: '暁', second: '響', third: '雷', fourth: '電' };

// 第二引数に obj を渡す
Object.keys(obj).forEach(function(key) {
  var val = this[key]; // this は obj
  console.log(key, val);
}, obj);
/* ↓ 出力
first 暁
second 響
third 雷
fourth 電
*/




ループ内でループ外の変数を参照させること無く連想配列(オブジェクト)をforEach()でループさせることが出来ました！

　
今頃こんなエントリーを書いているのは、未だにES2015は疎か、ES5もちゃんと把握できてないって事...
そろそろヤバイ感あるぞ... (今後もまっとうなエンジニアとしてやっていくのなら)

--------------------------------------------------------------------------------

[参考]





 * Array.prototype.forEach() - JavaScript | MDN
 * JavaScript Array.forEachとjQuery.eachの違い - Qiita
 * ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita



オブジェクト指向JavaScriptの原則

 * 作者: Nicholas C. Zakas,和田祐一郎
 * 出版社/メーカー: オライリージャパン
 * 発売日: 2014/06/18
 * メディア: 単行本（ソフトカバー）
 * この商品を含むブログ (4件) を見る





ききき きき (id:kikiki-kiki) 7年前




広告を非表示にする

--------------------------------------------------------------------------------

Buy me a coffee
コメントを書く
 * もっと読む

« PHP PDO 複数条件(WHERE IN)にハマる WordPress 特定の固定ページを保存時に処… »

検索


永遠の初心者

Я чайка!
無職のデザイナーが描いています。
アイカツ！が好きです。人生の大切なことはアニメから学んだ。

読者です 読者をやめる 読者になる 読者になる


放射線について考えよう。 WEB・本のイラストを描かせてい頂きました！

Buy me a coffee
最新記事
 * 2023-09-13
   GitHub ビルド成功のバッジを README に表示させたい
 * 2023-09-11
   Vite + TypeScript のプロジェクトに Jest x GitHub actions PR 時に coverage レポートを出力させたい
 * 2023-09-01
   Git merge commit を残して rebase したい
 * 2023-08-28
   TypeScript Object 型を判定したい
 * 2023-08-21
   Jest × React Testing Library テスト内のイベントが state の更新を待ってくれないにハマる


アクセスの多い記事
 * Googleスプレッドシート 他のシートから特定のセルを条件付きで取ってきて表示させたい
 * Git 間違って rebase しちゃったのを元に戻したい
 * npm パッケージをアップデートしたい
 * Next.js next/image で外部URLの画像を使いたいときにやること
 * React 文字列を改行付きにして出力したい

月別アーカイブ
 * ▼ ▶
   2023 (56)
   * 2023 / 9 (3)
   * 2023 / 8 (9)
   * 2023 / 7 (3)
   * 2023 / 6 (5)
   * 2023 / 5 (2)
   * 2023 / 4 (8)
   * 2023 / 3 (9)
   * 2023 / 2 (14)
   * 2023 / 1 (3)
 * ▼ ▶
   2022 (87)
   * 2022 / 12 (10)
   * 2022 / 11 (6)
   * 2022 / 10 (11)
   * 2022 / 9 (5)
   * 2022 / 8 (12)
   * 2022 / 7 (6)
   * 2022 / 6 (12)
   * 2022 / 5 (12)
   * 2022 / 3 (4)
   * 2022 / 2 (4)
   * 2022 / 1 (5)
 * ▼ ▶
   2021 (74)
   * 2021 / 12 (7)
   * 2021 / 11 (7)
   * 2021 / 10 (9)
   * 2021 / 9 (8)
   * 2021 / 8 (5)
   * 2021 / 7 (11)
   * 2021 / 6 (7)
   * 2021 / 5 (5)
   * 2021 / 4 (7)
   * 2021 / 3 (5)
   * 2021 / 2 (1)
   * 2021 / 1 (2)
 * ▼ ▶
   2020 (114)
   * 2020 / 12 (11)
   * 2020 / 11 (7)
   * 2020 / 10 (13)
   * 2020 / 9 (7)
   * 2020 / 8 (10)
   * 2020 / 7 (13)
   * 2020 / 6 (12)
   * 2020 / 5 (9)
   * 2020 / 4 (12)
   * 2020 / 3 (9)
   * 2020 / 2 (6)
   * 2020 / 1 (5)
 * ▼ ▶
   2019 (116)
   * 2019 / 12 (7)
   * 2019 / 11 (6)
   * 2019 / 10 (8)
   * 2019 / 9 (6)
   * 2019 / 8 (5)
   * 2019 / 7 (9)
   * 2019 / 6 (10)
   * 2019 / 5 (17)
   * 2019 / 4 (7)
   * 2019 / 3 (5)
   * 2019 / 2 (16)
   * 2019 / 1 (20)
 * ▼ ▶
   2018 (73)
   * 2018 / 12 (17)
   * 2018 / 11 (7)
   * 2018 / 10 (8)
   * 2018 / 9 (5)
   * 2018 / 8 (9)
   * 2018 / 7 (2)
   * 2018 / 6 (5)
   * 2018 / 5 (3)
   * 2018 / 4 (4)
   * 2018 / 3 (4)
   * 2018 / 2 (5)
   * 2018 / 1 (4)
 * ▼ ▶
   2017 (66)
   * 2017 / 12 (5)
   * 2017 / 11 (4)
   * 2017 / 10 (4)
   * 2017 / 9 (4)
   * 2017 / 8 (2)
   * 2017 / 7 (10)
   * 2017 / 6 (7)
   * 2017 / 5 (4)
   * 2017 / 4 (13)
   * 2017 / 3 (7)
   * 2017 / 2 (2)
   * 2017 / 1 (4)
 * ▼ ▶
   2016 (76)
   * 2016 / 12 (6)
   * 2016 / 11 (4)
   * 2016 / 10 (6)
   * 2016 / 9 (2)
   * 2016 / 8 (4)
   * 2016 / 7 (6)
   * 2016 / 6 (11)
   * 2016 / 5 (3)
   * 2016 / 4 (6)
   * 2016 / 3 (15)
   * 2016 / 2 (7)
   * 2016 / 1 (6)
 * ▼ ▶
   2015 (88)
   * 2015 / 12 (2)
   * 2015 / 11 (5)
   * 2015 / 10 (8)
   * 2015 / 9 (11)
   * 2015 / 8 (7)
   * 2015 / 7 (5)
   * 2015 / 6 (5)
   * 2015 / 5 (4)
   * 2015 / 4 (12)
   * 2015 / 3 (15)
   * 2015 / 2 (5)
   * 2015 / 1 (9)
 * ▼ ▶
   2014 (59)
   * 2014 / 12 (3)
   * 2014 / 11 (4)
   * 2014 / 10 (9)
   * 2014 / 9 (3)
   * 2014 / 8 (5)
   * 2014 / 7 (7)
   * 2014 / 6 (7)
   * 2014 / 5 (3)
   * 2014 / 4 (6)
   * 2014 / 3 (12)

カテゴリー
 * Accessibility (1)
 * Adobe (6)
 * Adobe Creative Cloud (2)
 * Aikatsu! (1)
 * Ajax (11)
 * anyenv (2)
 * Apache (8)
 * Arudino (1)
 * AWS (10)
 * AWS Amplify (3)
 * AWS CDK (2)
 * AWS Lambda (6)
 * Babel (9)
 * Blog (25)
 * Book (9)
 * Bower (1)
 * cache (3)
 * Cache_Lite (2)
 * CakePHP3 (3)
 * Capybara (4)
 * CentOS (3)
 * Chakra UI (5)
 * ChatGPT (1)
 * Chrome (5)
 * CI (1)
 * Cloud Firestore (4)
 * CommonJS (6)
 * compass (Sass) (4)
 * Composer (6)
 * Contact Form 7 (6)
 * cookie (1)
 * CORS (2)
 * CSS (63)
 * CSS in JS (3)
 * CSV (1)
 * Dark Mode (2)
 * Design (28)
 * Docker (15)
 * DynamoDB (3)
 * Edge-BUG (1)
 * Enzyme (6)
 * ES2015 (ES6) (30)
 * ES2017 (6)
 * ES5 (6)
 * ESLin (1)
 * ESLint (16)
 * ESModules (6)
 * Express (18)
 * Express 4.x (10)
 * fetch (2)
 * Firebase (9)
 * Flask (2)
 * Functional Programming (12)
 * git (39)
 * git submodule (3)
 * GitHub (15)
 * Gmail (5)
 * Google Analytics (1)
 * Google Apps Script (GAS) (9)
 * Google Drive (20)
 * GoogleDomains (1)
 * GoogleMaps (3)
 * GraphQL (7)
 * Grunt (4)
 * Gulp (24)
 * Haml (2)
 * Hasura (1)
 * Heroku (1)
 * heteml (2)
 * Homebrew (20)
 * HTML (36)
 * i18n (4)
 * IE-BUG (5)
 * illustrator (4)
 * iOS (2)
 * IoT (1)
 * iPad (2)
 * iPhone (6)
 * iTunes (1)
 * Java (1)
 * JavaScript (293)
 * Jest (14)
 * jotai (5)
 * jQuery (31)
 * jsHint (1)
 * JSON (4)
 * JSX (8)
 * JWT (3)
 * Laravel (2)
 * Linter (3)
 * Linux (1)
 * localhost (2)
 * Mac (47)
 * Mac M2 (3)
 * Mail (1)
 * Markdown (6)
 * mashup (1)
 * Material UI (2)
 * mongoDB (1)
 * Multisite (3)
 * MySQL (29)
 * Netlify (1)
 * Next.js (17)
 * nginx (3)
 * Node.js (86)
 * nodebrew (2)
 * note (5)
 * npm (17)
 * Nuxt.js (2)
 * nvm (2)
 * obniz (1)
 * PDO (6)
 * PEAR (2)
 * Photoshop (1)
 * PHP (102)
 * phpbrew (3)
 * PHPMailer (1)
 * Pinterest (1)
 * PostCSS (2)
 * PostgreSQL (2)
 * Prettier (4)
 * Processing (1)
 * Promise, async / await (6)
 * pug (jade) (14)
 * Python3 (21)
 * Raspberry Pi (1)
 * React (104)
 * React Hooks (19)
 * React-Query (1)
 * react-router-dom (2)
 * Recoil (4)
 * Rect (1)
 * Redis (4)
 * Responsive (10)
 * RESR API (1)
 * Rollup (3)
 * RSpec (7)
 * Ruby (37)
 * Ruby on Rails (11)
 * Safari (2)
 * Sass (SCSS) (18)
 * security (2)
 * SEO (1)
 * Serverless (5)
 * setup (50)
 * shell (2)
 * SIM (4)
 * Sinatra (1)
 * Slim (1)
 * Slim (PHP) (1)
 * SPA (4)
 * Spreadsheet (28)
 * SQL (2)
 * SSH (3)
 * Stash (1)
 * stylus (15)
 * Sublime Text (7)
 * Svelte (2)
 * svg (3)
 * Tailwind CSS (1)
 * Test (2)
 * testing-library (2)
 * TIL (Today I Learned) (1)
 * Tips (184)
 * TLS (1)
 * Tools (1)
 * Twitter (2)
 * TypeScript (120)
 * Unit Test (15)
 * vim (1)
 * VirtualBox (2)
 * Vite (12)
 * VS Code (10)
 * Vue.js (1)
 * Webpack (23)
 * Windows10 (2)
 * WIP (1)
 * WordPress (70)
 * Works (1)
 * XHR (15)
 * yarn (1)
 * zsh (3)
 * さくらサーバー (3)
 * はてなブログ (2)
 * ドットインストール (3)
 * 家計を支える技術 (1)
 * 海外旅行 (2)
 * 非同期処理 (4)

CLOSE



はてなブログをはじめよう！

kikiki-kikiさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか？

はてなブログをはじめる（無料）
はてなブログとは
かもメモ

Powered by Hatena Blog | ブログを報告する



引用をストックしました

ストック一覧を見る 閉じる

引用するにはまずログインしてください

ログイン 閉じる

引用をストックできませんでした。再度お試しください

閉じる

限定公開記事のため引用できません。

読者です 読者をやめる 読者になる 読者になる
193