俺のjs #JavaScript

連想配列の途中で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とかがいいかも...

でも判定や一部データを取得したいときは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);

配列の要素を削除したい

画面遷移したい

window.location.href = '/hogehoge';