文字列SetとしてのDOMTokenList

DOMTokenListを文字列専用のSetとして使えそうと思ったけど、空白を含む文字列を追加できないので使いづらかった(DOMTokenListを得られるのはclassListかrelListで、どちらもセパレータが空白)。

var set = document.createElement('div').classList;

set.add('foo');
set.add('bar');
set.add('bar'); // 同じトークンは追加されない
console.log(set.toString()); // "foo bar"

try {
    // 空白を含む文字列を追加できない
    set.add('hoge fuga');
} catch (e) {
    console.error(e); // InvalidCharacterError
}

set.remove('bar');
set.toggle('baz');

console.log(Array.prototype.map.call(set, function (token) {
    return token.toUpperCase();
}).join('\n'));
/*
FOO
BAZ
*/
// DOMTokenListを使ってuniqのようなこと

var strList = 'puyo piyo hoge fuga puyo fuga hoge piyo fuga'.split(' ');
var set = document.createElement('div').classList;

strList.forEach(function (str) {
    set.add(str);
});

// DOMTokenList→Array
var uniqStrList = Array.apply(null, set);

console.log(uniqStrList.join(', ')); // "puyo, piyo, hoge, fuga"

Setとは違い、Array.prototypeのメソッドを転用できる。


というか、文字列だけならObjectを使えばいいじゃん!

var strList = 'puyo piyo hoge fuga puyo fuga hoge piyo fuga'.split(' ');
var uniqStrList = Object.keys(strList.reduce(function (table, str) {
    table[str] = 1;
    return table;
}, {}));
console.log(uniqStrList.join(', ')); // 順序は実装次第