分割代入
直接配列で代入する
ES6から導入されました。下記のように配列のデータを一括で各変数に代入する事が可能です。
|
1 2 3 4 5 |
let array = [1, 2, 3] let [a, b, c] = array; a; //1 b; //2 c; //3 |
関数の引数で配列を渡して代入する
|
1 2 3 4 5 6 7 8 9 10 11 |
let _a; let _b; function hairetu([a, b]) { _a = a; _b = b; } hairetu([2, 3]); _a; //2 _b; //3 |
デフォルト値
分割代入でも通常の関数のデフォルト値と同様に設定する事が可能です。
|
1 2 3 |
let [a, b = 3] = [2] a; //2 b; //3 |
ビルドイン関数
filter関数
filter関数を使えば配列から条件を指定して条件に合致するデータのみ抽出する事が可能です。
|
1 2 3 4 5 |
let array = [10, 20, 30, 40, 50] let resultArray = array.filter(a => { return a >= 30; }) resultArray; //[30,40,50] |
find関数
配列の先頭からデータを検索して最初に一致した値を返します。
|
1 2 3 4 5 |
let array = [10, 20, 30, 40, 50] let resultArray = array.find(a => { return a >= 30; }) resultArray; //30 |
findIndex関数
値ではなく要素数を返して欲しい場合はfindIndex関数を使います。抽出する仕様としてはfind関数と同様です。
|
1 2 3 4 5 |
let array = [10, 20, 30, 40, 50] let resultArray = array.findIndex(a => { return a >= 30; }) resultArray; //2 |
配列の比較（メモリの話）
以下の等式はtrueになります。
|
1 |
2 === 2 |
ところが、以下の等式はfalseになります。
|
1 |
[1,2,3] === [1,2,3] |
これは、配列の場合はメモリの番地が異なるようになっているためです。
なぜ配列はこのような仕様になっているのか？
データの中身を書き換えるために他ならないです。通常の数値や文字などの値の場合は特に値を書き換えることを想定していない不変データとして使うことを想定しています。配列の場合は値を書き換えることが想定しています。
lodashの活用
例えばAPIの戻り値として下記のような配列があったとします。ただ、この形式だとidが2のデータが欲しいとなったときに配列をフルスキャンしなければなりません。
|
1 2 3 4 |
[ {id:1,name:"test1"}, {id:2,name:"test2"} ] |
lodashというパッケージを使用すると下記のようなハッシュ形式にできます。
|
1 2 3 4 |
{ 1:{id:1,name:"test1"}, 2:{id:2,name:"test2"} } |
これなら欲しいIDのデータに直アクセスができるのでパフォーマンスがよくなります。
使い方
インポートします。
|
1 |
import _ from 'lodash' |
実装
下記のように記述すれば変換することが可能です。
|
1 |
_.mapKeys(ハッシュの配列,'目印としたいハッシュのキー') |
用途
Vue.jsやReactなどのJavaScriptフレームワークでAPI呼び出しを行った際にlodashを使用して加工するようにすると良いでしょう。
この記事へのコメントはありません。