※スマホ対応はしてません。

タグ: 分割代入

分割代入や引数の「残り全部」を持ってくるやつ……。(現代的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 – 15日目)

カテゴリー: JavaScript

現代的JavaScriptおれおれアドベントカレンダー2017 – 15日目

概要

オブジェクトとかでまとまってもらえる情報を、最初からバラバラにしちゃうやつです。配列でも使えます。

const arr = ['https:', 'ginpen.com', '/about'/];

const [protocol, host, path] = arr;
console.log(protocol);  // => "https:"
console.log(host);  // => "ginpen.com"
console.log(path);  // => "/about/"

String#match() で猛威を振るいそう。(?)

使い方

左辺にしかく括弧 [ … ] で括って、初期化なり代入なりする変数の名前を書きます。

const arr = [11, 22];

const [a, b] = arr;
console.log(a);  // => 11
console.log(b);  // => 22

順序左側の順序と右側の順序が一致します。

いらない値を飛ばす

カンマ , だけ書いて変数名を省略すると、そこの位置の値を飛ばします。

const arr = [11, 22, 33];

const [a, , b] = arr;
console.log(a);  // => 11
console.log(b);  // => 33

残りの値をまとめる

... を使って「残り」を全てひとつの新しい配列に突っ込むことができます。

const arr = [11, 22, 33, 44];

const [first, ...rest] = arr;
console.log(first);  // => 11
console.log(rest);  // => [22, 33, 44]

この ... は関数の仮引数でも使えます。別稿参照。

初期値

オブジェクトのやつと同様、 = で初期値を設定できます。

const arr = [-1, undefined, -3];

const [a = 11, b = 22, c = 33, d = 44] = arr;
console.log(a);  // => -1
console.log(b);  // => 22
console.log(c);  // => -2
console.log(d);  // => 44

入れ子

これもオブジェクトのやつと同様。

consr arrrr = ['1', ['2-1', ['2-2-1']], 3];

const [a, [, [x]], c] = arrrr;
console.log(a);  // => '1'
console.log(x);  // => '2-2-1'

もちろんオブジェクトと組み合わせて使うこともできます。

const data = { names: ['Martin', 'Luther', 'King'] };

const { names: [first, , family] } = data
console.log(first);  // => 'Martin'
console.log(family);  // => 'King'

String#match() と組み合わせる

諸々便利かなと思います。

例えば日付を分解する。

const rxDate = /(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)/;

const sDate = '2017-12-15 10:05:00';

const [, year, month, date, hours, minutes, seconds] = sDate.match(rxDate);
console.log(year);  // => "2017"
console.log(hours);  // => "10"

結果の先頭には条件に合致した全体が入ってくるけど、今回いらないので、値を捨てます。

変数の中身を入れ替える

MDNに載ってたけどあんまり使わない気がする。

let a = 'A';
let b = 'B';

[a, b] = [b, a];
console.log(a);  // => "B"
console.log(b);  // => "A"

んー何かのアルゴリズムとかでこういうことしたっけかな。

引数とか?の先頭とそれ以外を分ける

例はNode.jsの方ですけども、なんかこういうのすることもあるかもしれない。

const { spawn } = require('child_process');

const input = 'ls -a -l /var/log';

const [command, ...args] = input.split(' ');
spawn(command, args)
    .stdout.on('data', (data) => {
        console.log(data.toString());
    });

その他

省略のカンマ ,

仕様書では “elision” と呼称されているようです。

主な意味: (母音・音節などの)省略

参考

分割代入、画期的な機能。(現代的JavaScriptおれおれアドベントカレンダー2017 – 14日目)

カテゴリー: JavaScript

現代的JavaScriptおれおれアドベントカレンダー2017 – 14日目

概要

オブジェクトとかでまとまってもらえる情報を、最初からバラバラにしちゃうやつです。

const data = {
  age: 99,
  id: id,
  name: 'Alice',
};

const { name, age } = data;
console.log(name);  // => "Alice"
console.log(age);  // => 99

配列もばらせます。別稿参照。

使い方

左辺ににょろ括弧 { … } で括って、欲しいプロパティの名前を書きます。

const data = { id: 123, name: 'Alice' };

const { id, age } = data;
console.log(id);  // => 123
console.log(age);  // => undefined

右辺のオブジェクトから合致する名前のプロパティの値を代入します。 (id)

右辺にないもの (age) を指定すると undefined になり、また右辺にあるもの (name) を必ずしも左辺に用意する必要はありません。

かんたん、かんたん。

初期値

= で、値が undefined だった場合の初期値を設定できます。

const data = { id: 123, name: undefined };

const { name = 'Anonymous', age = 0 } = data;
console.log(name, age);  // => "Anonymous", 0

null は普通に代入されます。

入れ子

入れ子になった情報を取り出すこともできます。その場合、途中のプロパティは値が取得されません。

const data = {
  detail: {
    phone: {
      number: '0120-000-000',
      type: 'free',
    },
  },
};

const { detail: { phone: { number, type } } } = data;
console.log(number);  // => "0120-000-000"
console.log(type);  // => "free"
console.log(detail);  // Exception: ReferenceError: detail is not defined

異なる名前で

APIで情報を取ってきたは良いけどなんかその命名違うんだよなーみたいな場合にも使えます。

{ original: renamed } のようにして original を renamed へ代入できます。

const data = { updated_at: '2017-12-14 00:00' };

const { updated_at: updatedAt } = data;
console.log(updatedAt);  // => "2017-12-14 00:00"

全部乗せ

初期値、入れ子、異名を全部組み合わせてもよろしい。

const data = { detail: { updated_at: '2017-12-14 00:00' } };

const {
  detail: {
    user_name: name = 'Anonymous',
    updated_at: updatedAt = 'NA',
  }
} = data;
console.log(name);  // => "Anonymous" (default value)
console.log(updatedAt);  // => "2017-12-14 00:00"

改行してもなお読みづらい感じはするね。うん、わかるよその気持ち。

関数の仮引数で

最初はちょっとぎょっとするかもしれないけど、仮引数の括弧の中でも使えます。

function sayHello({ message, delay = 1000 }) {
  setTimeout(() => console.log(message), delay);
}

sayHello({ message: 'Hello World!' });

必要なオプションが一目瞭然で良いかも。数が少ない間はね。

オプションオブジェクト option でざっくり受け取って、なんか中で処理を分けるとかすると良いかも?

function doGreatStuff(options) {
  doSomething(options);
  doAnything(options);
  doWhatever(options);
}

function doSomething({ foo }) {}
function doAnything({ bar }) {}
function doWhatever({ boo, hoge }) {}

その他

定義済み変数でSyntaxErrorになる

これはだめ。

const data = { foo: 'fufu' };

let foo;
{ foo } = data;  // Exception: SyntaxError: expected expression, got '='

行頭の { がブロックとみなされてしまうため。

括弧 ( … ) で括って式として判断させます。

const data = { foo: 'fufu' };

let foo;
({ foo } = data);
console.log(foo);  // => "fufu"

もちろん、普通にその場で変数宣言すれば問題ないです。

const data = { foo: 'fufu' };

const { foo } = data;
console.log(foo);  // => "fufu"

import

見た目は似てるけど違います。

import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';

雰囲気も似てるけど、動きも仕様も別物です。

destructuring assign

“destructure” は「破壊する」だそうです。あんまり一般的な語句ではないっぽい?

「分解代入」の方が意味的には適切なのかな。おれも分割代入って呼ぶけど。

デストラクタ destructor

じゃないです。コンストラクタの逆のやつ。

いや、まあこれはこれで欲しいことあるよね。いらない参照を明示的に切ったりとかイベント監視解除したりとかね。でも自動GCだからね。

参考

更新履歴

  • 2017-12-15 importは違うぞと言われてアアアーッッ!となって削除しました。たしかにいろいろ違います、すみません。