JavaScript」カテゴリーアーカイブ

プログラミング言語「JavaScript」に関するカテゴリーです。

jQuery elementを配列に変換する方法

<a>タグのhrefを調べたい場合

$('a').each(function(){
  console.log($(this).attr('href'));
}

のような感じで使うことが多かったのですが、使いたいプラグインの関係で配列に変換する必要があり、簡単な方法を調べてみました。

ということで、mapmakeArrayを使って次のような感じで配列に変換できるみたいです。

var elems = $('a').map(function(){ return $(this).attr('href'); });
var ar = $.makeArray(elems);

console.log(ar);

実行結果

Array(3) [ "https://example.com/", "https://example.net/", "https://example.org/" ]

リンク

jQuery.makeArray() | jQuery API Documentation
https://api.jquery.com/jquery.makeArray/

.map() | jQuery API Documentation
https://api.jquery.com/map/


jQuery elementをわざわざ配列に変換する機会は多くないと思いますが、必要になったら参考にしてみてください。

JavaScriptの分割代入を使って配列をシャッフル

JavaScriptの配列をシャッフルしようと思ってお手軽な方法を調べてみました。

Destructuring assignment

Destructuring assignmentの使い方は次のような感じです。

a = [ 1, 2, 3, 4, 5 ];
[a[1], a[2]] = [a[2], a[1]];

結果はa = [ 1, 3, 2, 4, 5 ]となります。

シャッフルの実装

ということで、これを複数回繰り返すと配列のシャッフルができるという仕組みです。

for(i = 0; i < 5; ++i) {
  j = Math.floor(Math.random()*a.length);
  [a[i], a[j]] = [a[j], a[i]];
}

もう少し効率的な方法もあるかなと思いますが、Destructuring assignment自体は便利そうなので使っていこうかなと思います。

リンク

Destructuring assignment – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

JavaScriptの難読化ツール JavaScript::Packer

JavaScriptを難読化、圧縮するツール

/packer/
http://dean.edwards.name/packer/

Javascript::Packer

オフラインで利用できるPerlバージョンはこちら。

GitHub – leejo/javascript-packer-perl: CPAN Module Javascript::Packer
https://github.com/leejo/javascript-packer-perl

使い方

#!/usr/bin/perl

use JavaScript::Packer;

my $packer = JavaScript::Packer->init();
my $uncompressed = 'console.log("JavaScript::Packer");';
my $compressed = $packer->minify( \$uncompressed, { compress => 'obfuscate' } );

print $compressed;

出力結果

eval(function(p,a,c,k,e,r){e=String;if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'[0-3]'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2.3("0::1");',[],4,'JavaScript|Packer|console|log'.split('|'),0,{}))

圧縮用途で使う場合はcompressbestとするのが良いと思います。
(このサンプルでは元のスクリプトよりもサイズが大きくなっていますが。)