俺のjs
連想配列の途中でkeyが存在しなくてもエラーにならないようにしたい
// categoryまで存在しないと未定義エラーになる
if (data.items[item_id].category.name)
↓
// Optional chaining を使う
if (data.items?.[item_id]?.category?.name)
または
// 一個ずつチェックする
if (data.items &&
data.items[item_id] &&
data.items[item_id].category &&
data.items[item_id].category.name)
配列のフィルタ(抽出)
// row.idsの中にtargetIdsの値がひとつでも含まれているものを抽出する
const filterRows = rows.filter(function (row) {
for(let targetId of targetIds) {
if(row.ids.includes(targetId)) {
return true;
}
}
return false
});
// ↓↓↓
// someを使ってもっと簡単に書くこともできる
const filterRows = rows.filter(function (row) {
return targetIds.some(/** string */ id => row.ids.includes(id))
});
配列やオブジェクトをループしたい
どちらもforEachで統一することにした!
// 配列の場合
data = [
'A',
'B',
'C'
];
data.forEach(function(value){
console.log(value);
});
// オブジェクトの場合
data = {
'a': 'A',
'b': 'B',
'c': 'C'
};
// keyだけ使いたいときはkeys
Object.keys(data).forEach(function(key){
console.log(data[key]);
});
// valueだけ使いたいときはvalues
Object.values(data).forEach(function(value){
console.log(value);
});
// 両方使いたい時はentries
Object.entries(data).forEach(function([key, value]){
console.log(value);
});
forEachに落ち着いた理由
- for of で配列やイテレーションを持つオブジェクト(反復可能オブジェクト)を回すこともできるが、普通のオブジェクトは回せない。※頑張ればできる。
- for in でオブジェクト回せるが、プロトタイプのやつも処理しちゃうからオススメしない。
- ESLint の Airbnb スタイル的にも使わないでいこうぜといった感じ。
- ただしforEach内でreturnしても意味ないので注意!!→参考
- forEach で continue したい
return;
でできる
- forEach で break したい
- できないので some関数を使うか、このときは普通にfor inとかがいいかも…
- forEach で continue したい
でも判定や一部データを取得したいときはsomeとか使った方がいいよ!
例1
/**
* 配列の中に自分の名前が存在するか
*
* @param {string} id
* @param {object} members
* @returns {boolean}
*/
function isExistsMyName(myName, members) {
let exists = false;
Object.values(members).forEach(function (value) {
console.log(value.name);
if (value.name === myName) {
exists = true;
}
});
return exists;
}
// ↓ forEachではなくsomeがオススメ
function isExistsMyName(myName, members) {
return Object.values(members).some(function (value) {
return value.name === myName;
});
}
あとforEachの中でawaitしても意味ないよ!
members.forEach(async (member) => {
await getData(member);
});
とか書けちゃうけど実際はawaitしない。その場合はfor-ofとか使おう。
参考)https://qiita.com/frameair/items/e7645066075666a13063
なのでforEachに統一できないね。。。臨機応変に行こう!
例2
/**
* IDから名前を取得する
*
* @param {string} id
* @param {object} members
* @returns {string}
*/
function getName(id, members) {
let name = '';
Object.entries(members).forEach(function ([key, value]) {
if (id === key) {
name = value.name;
}
});
return name;
}
// ↓ ループにこだわらなくたっていい
function getName(id, members) {
return members[id] ? members[id].name : '';
}
関数の引数をまとめてみる
const sampleFunction = (hoge, fuga, moga) => {}
↓
const sampleFunction = ({hoge, fuga, moga}) => {}
// メリットとしてObjectの引数であれば使う側も渡す側も順番を気にしなくても良くなる
importとか
(時代が変わったので普通にブラウザで動くよ。)
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<script type="module">
import hoge, { test as fooLoud } from './test.js';
fooLoud();
</script>
</head>
<body>
<div id="App"></div>
</body>
</html>
test.js
export const test = () => {
alert('foo');
}
export default function test2() {
alert('bar');
}
- defaultはどんな名前でもOK(ここではhoge)
- default以外は名前を一致させる必要がある
import { test } from './test.js';
- ただし
as
で名前変えれる
配列を空にしたい
array.splice(0);
配列の要素を削除したい
https://naoqoo2.github.io/20210408-【javascript】配列をループして処理成功した要素は削除する.md
画面遷移したい
window.location.href = '/hogehoge';