Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

倀だけ芚えおおくならSetずいう手が。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 20日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 20日目

抂芁

Map のキヌだけを保持する版です。

const set = new Set();
set.add(1);
set.add(2);

console.log(set.size);  // 2
console.log(set.has(2));  // => true

䜿い方

なんずなく Map ず同じ感じ。ただし倀を远加するのは set() じゃなくお add() になっおたす。

// 䜜成
const set = new Set();

// 远加
set.add(1);
set.add(2);
set.add(3);
set.add(1);  // 同じ倀は無芖される

// 有無
console.log(set.has(2));  // => true

// 削陀
set.delete(2);
console.log(set.has(2));  // => false

// サむズ
console.log('Size:', set.size);  // 2

// 反埩
set.forEach((value) => {
    console.log('forEach', value);
})

for (let value of set) {
    console.log('for-of', value);
}

// 倀だけたずめお取埗
const values = set.values();

// 党削陀
set.clear();

keys() もある

ただし keys() ず values() は完党に同じ関数です。

console.log(set.keys === set.values);  // => true

あず entries() もあっお、なんか想像通りの倉な感じの結果を返したす。むンタヌフェむスを統䞀する的なや぀なんだろか。

その他

キヌ vs 倀

Set の仕様内では “value” ずいう衚珟を䜿っおるっぜい。でも重耇しないずいう特性はキヌっぜいよね。

参考

デヌタ保持ならObjectよりMapの方が良いの珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 19日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 19日目

良いか

抂芁

Array#map() じゃなくお Map ずいうビルトむンコンストラクタです。

蟞曞 (dictionary) みたいなノリで䜿えたす。

const map = new Map();

map.set(100, 'Number 100');
console.log(map.get(100));  // => "Number 100"

for (let [key, value] of map) {
    console.log(`[${key}] = [${value}]`);
}

䜿い方

new で䜜っお名前ず倀の組み合わせの情報を栌玍したす。

情報の远加ず取埗

set() で远加ず䞊曞き、 get() で取埗。

const map = new Map();
const key = 100;

// set
map.set(key, { message: 'Hello World!' });

// get
const value = map.get(key);

concole.log(key, value);

set() は map オブゞェクト自䜓を返すので、メ゜ッドチェむンみたいに曞けたす。

map
  .set(100, 'Hello')
  .set(101, 'World')
  .set(102, '!')

あんたり曞かない方が良いず思うけど。

有無の確認

const map = new Map();

console.log(map.has(1));  // => false

map.set(1, 'one');
console.log(map.has(1));  // => true

削陀

delete() でキヌを指定しお消したす。削陀できた堎合は true が、もずもず倀を持っおいなかった堎合は false が垰りたす。 delete 挔算子ず違うね。

あず clear() で党郚消したす。こちらは垞に undefined を返す。

const map = new Map();
let deleted;

map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');

console.log('Size:', map.size);  // => Size: 3
console.log('#101', map.get(101));  // => #101 Goodmorning Universe!

// ひず぀削陀
deleted = map.delete(101);
console.log('Size:', map.size);  // => Size: 2
console.log('#101', map.get(101));  // => #101 undefined
console.log('Delete successfully?', deleted);  // => true

// 削陀枈みのものを削陀
deleted = map.delete(101);
console.log('Delete successfully?', deleted);  // => false

// 党郚削陀
map.clear();
console.log('Size:', map.size);  // => Size: 0

キヌは䜕でも

オブゞェクトの堎合は基本的に toString() で文字列に倉換されるんだけど、 Map の堎合は型も含めおそのたたキヌになりたす。 1 ず "1" は別物扱いです。

const map = new Map();

// 数倀の1ず文字列の"1"
map.set(1, 'Number 1');
map.set('1', 'String 1');

console.log(map.get(1));  // => "Number 1"
console.log(map.get('1'));  // => "String 1"

各皮オブゞェクトをそのたた突っ蟌むこずもできたす。

繰り返す

forEach() あるいは for-of ルヌプでぐるぐるできたす。

あず size ずいう、配列の length みたいなプロパティがありたす。

const map = new Map();
let deleted;

map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');

console.log('Size:', map.size);  // => Size: 3

map.forEach((value, key) => {
    console.log('forEach', key, value);
})

for (let [key, value] of map) {
    console.log('for-of', key, value);
}

forEach() 以倖の、 Array.prototype 系のメ゜ッドはないです。

キヌ、倀をたずめお取埗

keys() でキヌだけ、 values() で倀だけ、さらに entries() でキヌず倀の組のむテレヌタを埗られたす。

const map = new Map();

map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');

for (let key of map.keys()) {
    console.log('key', key);
}

for (let value of map.values()) {
    console.log('value', value);
}

for (let [key, value] of map.entries()) {
    console.log('key-value', key, value);
}

[] アクセスはだめ

マップじゃなくお普通のむンスタンスプロパティぞのアクセスになりたす。

const map = new Map();

map.set(100, 'Hello World!');
map[101] = 'Goodmorning Universe!';

console.log(map.size);  // => 1
console.log(map.get(100));  // => "Hello World!"
console.log(map.get(101));  // => undefined
console.log(map['101']);  // => "Goodmorning Universe!"

オブゞェクトに远加情報を持たせる

他に独自の情報を持ちたいけど元のオブゞェクトに觊りたくないなヌずいうずき、そのオブゞェクト自䜓をキヌにしお、远加情報を別途眮いおおくこずができたす。

const map = new Map();

const el = document.querySelector('#foo');
const someDataForTheElement = {};
map.set(el, someDataForTheElement);

でも別むンスタンスになるず別物っおいう扱いになっちゃうので、氞続的に䜿える識別子があればそっちの方が良さそう。

䜿い道

ず、ここたで曞いおきたけど正盎これっおいう䜿い道が思い぀かない  。

オブゞェクト Object ないし {} でも同じようなこずはできたす。今たでずっずこっちでやっおきたしたね。

const map = {};
map[100] = 'A hundred';
map[101] = 'A hundred and one';

console.log(100, map[100]);  // => "A hundred"

Object.keys(map)
    .forEach((key) => {
        const value = map[key];
        console.log(key, value);
    });

反埩凊理ずかちょっずアレだけどたあどうにかなるし、ただあんたりよくわかんない。

Object ず Map の違い

  • [] の代わりに set() 、 get() を䜿う
  • キヌに文字列以倖も䜿える 1 ず "1" が別物扱い
  • 反埩凊理 for-of できる
  • size で数を取れる

MDNには

こう茉っおる。

『オブゞェクトずマップの比范』より。

これは Map をい぀も䜿えばいいずいうこずではありたせん。オブゞェクトはただ倚くの堎面で䜿えたす。Map むンスタンスはコレクションずしお䜿う堎合のみに圹に立ちたす。以前オブゞェクトをこのように䜿っおいたコヌドに Map を䜿うこずを考えおみるべきです。オブゞェクトはメンバ倉数ずメ゜ッドを備えたレコヌドずしお䜿われたす。もしただどちらを䜿えばいいかわからないなら、以䞋の質問に答えおみおください。

  • キヌがい぀も実行時たでわからない、たたはキヌを盎接調べる必芁がありたすか?
  • すべおの倀が同じ型で、亀換しお䜿甚できたすか?
  • 文字列でないキヌが必芁ですか?
  • キヌず倀のペアを時々、远加たたは削陀したすか?
  • 簡単に量が倉わるキヌず倀のペアがありたすか?
  • そのコレクションをむテレヌトしたすか?

これらはあなたが Map をコレクションずしお䜿いたいずきのサむンです。もし察照的に、固定された量のキヌがあり、それら個々に操䜜し、Mapの䜿い方ず区別する堎合、オブゞェクトを䜿いたしょう。

その他

NaN が合臎する

JavaScriptの现かい話で良く出おくるや぀なんですが、 NaN “Not a Number” は特殊な倀で、自身ず等倀になりたせん。

const n = NaN;
console.log(n === n);  // false (wow)

が、マップのキヌずしお䜿う堎合、内郚で同じ倀ずみなしおくれたす。

const map = new Map();

map.set(NaN, 'Not a Number');
console.log(map.get(NaN));  // => "Not a Number"
map.set(NaN, '!');
console.log(map.get(NaN));  // => "!"

もちろん NaN ず文字列 "NaN" は合臎したせん。やったね。

オブゞェクト Object のキヌ

䞊の方で「 obj[key] の key は基本的に文字列に」みたいに蚀ったけど、 Symbol おのも䜿えるようになりたした。

参考

  • ECMAScript® 2017 Language Specification
    • 23.1 Map Objects
    • 23.1.3 Properties of the Map Prototype Object … 各皮メ゜ッドずプロパティ
    • 7.2.10 SameValueZero ( x, y ) … get() でキヌの合臎を確認する内郚凊理
    • 12.3.2.1 Runtime Semantics: Evaluation … obj[key] の解釈
    • 7.1.14 ToPropertyKey ( argument ) … obj[key] の key の解釈
  • Map – JavaScript | MDN
  • Symbol – JavaScript | MDN

配列を「開いお」䜿うスプレッド挔算子。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 18日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 18日目

抂芁

配列をばらばらの配列芁玠だったこずにしお䜿えるや぀です。

const arr = [1, 2, 3];

const arr2 = [0, ...arr];  // => [0, 1, 2, 3]

䜿い方

カンマ , 区切りでいろいろ曞くずころぞ、 ...arr のようにするず、その配列の䞭身をばらばらに曞いたかのような状態に展開しおくれたす。

配列ずか、

const arr0 = [1, 2, 3];

const arr1 = [0, ...arr];  // => [0, 1, 2, 3]

関数ずか。

function foo(a, b, c) {
  console.log(a, b, c);
}

const arr = [1, 2, 3];
foo(...arr);  // 1, 2, 3

途䞭でも、いく぀でも

残䜙匕数ずかは末尟でしか䜿えなかったんですが、展開する分には十分明瞭なので、どこでもいく぀でも䜿えたす。

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [];

const all = ['|', ...arr1, '|', ...arr2, '|', ...arr3, '|'];  // => [ '|', 1, 2, 3, '|', 4, 5, '|', '|' ]

配列の䞭の配列

... を付けないずただの入れ子になりたす。そりゃそうじゃ。

const arr0 = [1, 2, 3];

const arr1 = [0, arr0];  // => [0, [1, 2, 3]]
const arr2 = [0, ...arr0];  // => [0, 1, 2, 3]

配列の耇補

残䜙代入の方でも同じようなこずやったけど、倉数に栌玍する必芁がない分こっちの方が良いかも。

const arr1 = [1, 2, 3];

function checkCloned(arr2) {
  console.log(arr1);
  console.log(arr2);
  console.log(arr1 === arr2);
}

checkCloned([...arr1]);

[ 1, 2, 3 ]
[ 1, 2, 3 ]
false

配列の結合

Array#conat() の代わりに䜿えそうです。

const arr1 = [1, 2, 3];
const arr2 = [4, 5];

const all1 = arr1.concat(arr2);  // => [1, 2, 3, 4, 5]
const all2 = [...arr1, ...arr2];  // => [1, 2, 3, 4, 5]

先頭項目を入れ替える

const arr = [1,2,3,4,5];

const [, ...secondAndLater] = arr;
const arr2 = [99, ...secondAndLater];  // => [99, 2, 3, 4, 5];

曞いおはみたけど䜕に䜿えるかな。

オブゞェクトのスプレッド

オブゞェクトの残䜙代入ず同様、ES2017たでにはただ存圚しおいない未来仕様です。ES2018に入りそう。

const obj1 = { a: 1 };
const obj2 = { ...obj1 };

執筆時点でChrome、Firefoxずあず手元のNode.js v8.5で動いおたす。

䞀方babel-preset-envのv1.6.1では察応しおないっぜい。

SyntaxError: /path/to/project/main.js: Unexpected token (2:15)
  1 | const obj1 = { a: 1 };
> 2 | const obj2 = { ...obj1 };
    |                ^

现かいバヌゞョンは調べおたせん。

Reactで䜿う

JSXの仕様なのでESのものではないんだけど、䌌たようなものなので玹介しおおきたす。あ、これオブゞェクトの展開しおるね。

you can use ... as a “spread” operator

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

Reactは普段䜿いしおないです。なんか違っおたらごめんなさい、教えおください。

その他

名前

みんな「スプレッド挔算子 (spread operator)」ず呌んでるけど、仕様曞にそういう衚珟ないね。

あず配列の方は “SpreadElement” ずいう名前が出おきおるんだけど、関数匕数の方は特に名前が付いおもいない。

参考

  • ECMAScript® 2017 Language Specification
    • 12.2.5 Array Initializer … “SpreadElement” 配列のスプレッド挔算子の蚘法
    • 12.2.5.2 Runtime Semantics: ArrayAccumulation … スプレッド挔算子の凊理
    • 12.3 Left-Hand-Side Expressions … 関数呌び出しの ArgumentList
    • 12.3.4 Function Calls
    • 12.3.6.1 Runtime Semantics: ArgumentListEvaluation … “…AssignmentExpression” ずかの解釈
    • 9.4.4 Arguments Exotic Objects … arguments
  • スプレッド挔算子 – JavaScript | MDN

分割代入や匕数の「残り党郚」を持っおくるや぀  。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 17日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 17日目

抂芁

...foo のようにしお、「残り」を配列に突っ蟌めたす。

function foo(a, b, ...rest) {}

あず配列の分割代入でも䜿えたす。

const [a, b, ...rest] = arr;

加えお、ただ未確定の仕様ではオブゞェクトの方でも䜿えるようになるっぜい。

const { a, b, ...rest } = obj;

䜿い方

分割代入でも関数の仮匕数で䜿えたす。

const arr = [1, 2, 3, 4, 5];

const [a, b, ...rest] = arr;
console.log(a, b, rest);  // => 1, 2, [3, 4, 5]

function foo(a, b, ...rest) {
  console.log(a, b, rest);  // => 1, 2, [3, 4, 5]
}

foo(1, 2, 3, 4, 5);

党郚を受け取る

他を曞かなければたるごず党郚もらえたす。

arr.concat() の代わりに浅いクロヌンで䜿えるかも。

const arr = [1, 2, 3, 4, 5];

const [...arr2] = arr;
console.log(arr);  // => [ 1, 2, 3, 4, 5 ]
console.log(arr2);  // => [ 1, 2, 3, 4, 5 ]
console.log(arr === arr2);  // => false

... で arguments を眮き換える

arguments は匕数が栌玍された配列颚オブゞェクトです。関数内で this みたいなノリでいきなり䜿えたす。

function arrrrrg() {
  console.log(arguments.length, arguments[0]);
}

arrrrrg();  // 0, undefined
arrrrrg(100, 200, 300);  // 3, 100

で、これを ... で眮き換えるこずができたす。

function arrrrrg(...args) {
  console.log(args.length, args[0]);
}

arrrrrg();  // 0, undefined
arrrrrg(100, 200, 300);  // 3, 100

arguments には他にも ... では眮き換えられない機胜があるので、チラ芋しずくず䜕かの圹に立぀かもです。

fn.apply()

他の関数を我が物顔で実行するのに䜿える Function#apply() ずいうのがありたしお。

arguments ず組み合わせお䜿うず、他の関数をそのたた呌びなおすこずができたした。これも圓然残䜙匕数 ... で眮き換えるこずができたす。

const obj = {
  xxx: 'Hehehe',

  main(a, b, c) {
    console.log(this.xxx, a, `c is ${c}`);
  },
};

// 他の関数を呌ぶだけ
function justCallMain(...args) {
  obj.main.apply({ xxx: 'Yo!', }, args);
}

obj.main(11, 22, 33);  // "Hehehe", 11, "c is 33"
justCallMain(11, 22, 33);  // "Yo!", 11, "c is 33"

倧昔にそんな話もしたしたね。

匕数の先頭に応じお別の凊理を呌ぶ

䌝われ

なんかこういうのあるよね。デザむンパタヌンで名前付いおるのかな。

const robot = {
  command(type, ...args) {
    // typeに応じおメ゜ッドを呌ぶ
    switch (type) {
      case 'walk':
        this.move(4, ...args);
        break;

      case 'run':
        this.move(16, ...args);
        break;

      case 'move':
        this.move(...args);
        break;

      case 'sing':
        this.sing(...args);
        break;

      // ...
    }
  },

  // ...
};

// 北ぞ向かっお歩く
robot.command('walk', 'north');

// 東ぞ向かっお走る
robot.command('run', 'east');

// 北ぞ8 km/hで移動
robot.command('move', 8, 'north');

// 突然歌いだす
robot.command('sing', 'あわおんがうのサンタクロヌス');

仮匕数じゃなくお関数呌び出しの匕数で ... 䜿っおるのはスプレッド挔算子です。別皿参照。

あず配列の分割代入でも同じような組み合わせやりたしたねヌ。

オブゞェクトの残䜙代入

ES2017たでにはただ存圚しおいない未来仕様です。ES2018に入りそう。

const obj = { a: 1, b: 2, c: 3, d: 4 };

const { a, b, ...rest } = obj;
console.log(a, b, rest);  // => 1, 2, { c: 3, d: 4 }

執筆時点でChrome、Firefoxずあず手元のNode.js v8.5で動いおたす。

䞀方babel-preset-envのv1.6.1では察応しおないっぜい。

SyntaxError: /path/to/project/main.js: Unexpected token (2:14)
  1 | const obj = { a: 1, b: 2, c: 3 };
> 2 | const { a, b, ...rest } = obj;
    |               ^

现かいバヌゞョンは調べおたせん。

その他

名前

匕数の方、MDNだず “rest parameters” になっおお、日本語蚳で「残䜙匕数」なんお呌んでるひずが倚いみたいです。

倉数の方はどう呌ぶんだろ。ずりあえず「残䜙代入」なんお曞いおはみたけれど。再びMDNの英語版を芋るず “rest in arrays” 、 “rest in objects” ずいう名前で “Browser compatibility” の衚に蚘茉されおいたす。

可倉長匕数

他の蚀語だずこう呌ぶ堎合が倚いず思う。匕数の堎合だけだけど。

英語は “variadic” ず呌ぶっぜい　Wikipedia英語版を芋た。

参考

曎新履歎

  • 2017-12-17 fn.apply() の話を远加
  • 2017-12-17 arguments の話を远加

分割代入ず逆に、プロパティを短く定矩するや぀。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 16日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 16日目

抂芁

{ foo: foo } を { foo } のように省略できたす。

const name = 'Alice';

const obj = { name };
console.log(obj.name);  // => "Alice"

䜿い方

倀が入っおいる倉数の名前ずプロパティの名前が䞀臎する堎合、省略しお曞くこずができたす。

const name = 'Alice';

const obj1 = { name: name };
console.log(obj1.name);  // => "Alice"

const obj2 = { name };
console.log(obj2.name);  // => "Alice"

混ぜお曞く

コロン : ず倀ずを曞く普通のやり方ず䞀緒に䜿えたす。

const data;

const result = {
  data,
  date: Date.now(),
};

関数の匕数で

頑匵っお䜜った結果を突っ蟌んだ倉数ずか、仮匕数でもらったや぀をそのたた突っ蟌むこずもできたす。

function foo({ message }) {
  const date = Date.now();
  bar({ data, message });
}

ちなみに関数の仮匕数 foo() のや぀の方は「分割代入」の類です。別皿参照。

Vue.jsで

components でよく䜿っおたす。

const ThemeItem = require('./ThemeItem.vue')

module.exports = {
  components: {
    ThemeItem,
  },

  // ...
};

その他

混ぜおかくず気持ち悪いような

ひず぀のオブゞェクトを䜜る堎合はどちらかに統䞀しお、 : 䜿う堎合は省略できるものもしない方が良いかなあ。

const id = nanika.id;
const status = { ... };  // なんか耇雑なアレ

const obj = {
  date: Date.now(),
  id,
  name: regularize(user.name),
  status,
};

違うオブゞェクトならファむル内で䞡方あっお良いんだけど。

参考