http://sho.tdiary.net/20080222.html#p01
ここで W31SAと D705iμの例が出ていたので、にっくき(笑)ソニーエリクソンではどうなっているのかを紹介。
補足など。
split()の第一パラメータ separatorが空文字列にマッチするかどうかで結果が異なる。
"".split(" ").length; // 1 (空文字列にマッチしないから)
"".split("").length; // 0 (空文字列にマッチするので)
"".split(/\s+/).length; // 1 (空文字列にマッチしないから)
"".split(/^$|\s+/).length; // 0 (空文字列にマッチするので)
function getClasses(element) {
return element.className.split(/^$|\s+/);
}
上の functionでは classNameが空っぽの時には空文字列の要素を作らないが、頭や尻尾に空白が付いていると空文字列の要素が残る (IEを除いて)。事前にトリミングする手間をかけるくらいなら一個二個の空文字列を気にせず(だけど連続する空文字列の要素は気にしてる) className.split(/\s+/) とする方が好みだな。
IE7と Firefox2で異なる。Firefox2の方が正しいが無限ループに陥りやすい。
var re = /\b/g; // 単語境界にマッチする、幅0のメタ文字。
var str = "012 456 89A";
re.lastIndex = 0;
for(var i = 0; i !== 5; ++i) {
alert("("+ re.exec(str).index +","+ re.lastIndex +")");
// IE7: (0,1) (3,4) (4,5) (7,8) (8,9) ...
// Fx2: (0,0) (0,0) (0,0) (0,0) (0,0) ...
}
空文字列にマッチしていれば(IE7でスキップされるマッチがでてくる) exec()の前後で lastIndexの値が変わっていなければ(Fx2でのマッチ回数が IE7より増える) indexと lastIndexが同じならば lastIndexを 1インクリメント、としておくとどちらでも間違いが起こらない。
var re = /\b/g;
var str = "012 456 89A";
re.lastIndex = 0;
for(var i = 0; i !== 5; ++i) {
var index = re.exec(str).index;
alert("("+ index +","+ re.lastIndex +")");
// IE7: (0,1) (3,4) (4,5) (7,8) (8,9) ...
// Fx2: (0,0) (3,3) (4,4) (7,7) (8,8) ...
if(index === re.lastIndex) {
++re.lastIndex;
}
}
ループで
if(index === re.lastIndex) {
++re.lastIndex;
}
なんて分岐を増やすより、文字列末尾にマッチする /$/ を例外として*、正規表現から空文字列にマッチする可能性を排除する方が良さそう。
* /$/.exec("str") の後の lastIndexプロパティは IE7、Fx2とも、最後の文字の次を指す。
コメント欄がないのでここでひっそりつっこんでおきます。
Stringと Boolean(と Numberと Date)だけこのように比較方法を === から == にしたりする必要はなくて、
String.prototype.equals = Boolean.prototype.equals = function(arg){
return this == arg;
};
こう。
Object.prototype.equals = function(that) {
return this.valueOf() === that.valueOf();
}
これでオブジェクトに関しては同一性をチェックし、プリミティブでは値が等しいかどうかをチェックする。
ところで、配列の場合、
valueOf メソッドの動作は、オブジェクトの種類に応じて異なります
配列の要素は、カンマによって連結される文字列に変換されます。Array.toString メソッドや Array.join メソッドと同じように動作します。
Microsoft JScript 5.5 リファレンス (chm)
と書かれていて同一性のチェックができなさそうに思えるけど、JScript5.7、Firefox(javascript1.5)ともにチェックできていた。
Array.prototype.valueOf() は String、Boolean、Number、Dateのそれと違って特別に用意されてはいなかった。
参照: 15.4 Array オブジェクト (Array Objects)
ということは Object.prototype.valueOf()が呼ばれるはずで、これは thisを返す。
var a = [1]; alert(a.valueOf() === a); // true
JScript5.5のいいかげんなリファレンスを書いた人、出てきなさい。(はじめての言語だった JScriptと HSPのヘルプには、変数の概念から始まる丁寧な説明を受けました。大変感謝しています)
リストを使うと途端にそこから文章に構造がなくなってしまうのが困りもので、できるだけ !!(h4)や !!!(h5)を使うようにしていたのだけど、とうとうリストアイテム内で段落を書けるようにいじってしまった。(少し前の変更で取り除かれた \ エスケープが復活している……)
HikiDoc(r90)のリストアイテムに文章構造(段落)を持ち込むための変更
*li1-p1\ \ li1-p2A\ li1-p2B *li2
li1-p1
li1-p2A li1-p2B
<ul> <li><p>li1-p1</p> <p>li1-p2A li1-p2B</p> </li> <li>li2</li> </ul>
行末の \ は見落としやすいので *-、**-、***- を、前行のリストアイテムを継続する、という意味にするのはどうだろう。
HikiDoc(r90)のリストアイテムに文章構造(段落)を持ち込むための変更2 (以前の変更からの差分なので順番に適用する必要がある)
* li1-p1 *- *-li1-p2A *-li1-p2B *li2
li1-p1
li1-p2A li1-p2B
<ul> <li><p>li1-p1</p> <p>li1-p2A li1-p2B</p> </li> <li>li2</li> </ul>
なぜ *+ でなく *- にしたんだろう……。
最終更新: 2010-03-21T03:27+0900
SHJSの sh_main.jsを高速化したことを以前書いた。(20080204p01)
SHJSのページには動作を確認したブラウザとして以下が挙げられている。
sh_main.jsの修正版は Firefox2と IE7と Opera9で正しく動作することの確認と速度の比較を行っている。
IE6での確認は IE7から戻すのが面倒なので省略する。
Sarari3は Vistaで動くものがダウンロードできるので確認してみたところ動いた。(表示も正常)
いじったことで対応ブラウザが減っていなくて良かった。(IE6は？)
SHJSの作者は Code Conventions for the JavaScript Programming Language や jslint: The JavaScript Verifier かそれに類似した文書を読んでいるに違いない。(これらのページを今日発見した)
というのも、sh_main.jsを JSLintでチェックしてみたが、こういうエラーしか出なかった。
Error: Implied global: document 362, sh_languages 347, window 332
このエラーは JSLint向けにコメントを埋め込めば取り除けるものだし、そうしないと不可避だともいえるもの。
Error:
Implied global: document 207 360, sh_languages 332, window 329
Problem at line 73 character 48: Use the array literal notation [].
matchCaches = language.matchCaches = new Array(language.length);
Problem at line 86 character 17: 'i' is already defined.
for(var i = matchCaches.length-1; i !== -1; --i) {
Problem at line 97 character 22: 'i' is already defined.
for (var i = state.length-1; i !== -1; --i) {
Problem at line 110 character 17: 'i' is already defined.
var i = (pair[0] & 0x3F);
Problem at line 280 character 15: Use '!==' to compare with '0'.
while(0 != this._currentStyles.length) {
Problem at line 389 character 14: 'node' is already defined.
var node = this.free_;
「var array = new Array(length);」を「var array = []; array.length = length;」や「var array = Array.prototype.slice.call({length:length}, 0);」 と書き換えることは拒否する。
(new Array(length)が一番簡潔で自然な書き方)
(JavaScript 1.7の配列内包に書き換えるのには吝かでない)
(一つを除いて) 無視できる警告*ばかりで良かった。
* 無視したら警告の意味がない。forループの変数なんて(古い VC使い以外には)スコープの誤解を招きやすいという理由で、避けなければいけないものの筆頭ともいえる。
Under Translation of ECMA-262 3rd Edition を読んでいて見つけた「故意にに汎用的である」と書かれたメソッド群。Arrayと Stringのほとんどのメソッドが該当する。
Firefoxが Array.prototype.methodなどを Array.methodからも参照できるようにする(している)のも 仕様が汎用的で再利用が可能になっているからだろう。
それら汎用的なメソッドを使い回してやるために、その動作を javascriptのコードで表してみる。
function() {
var array = [];
var array_index = 0;
var item = this;
var arg_index = 0;
do {
if(item instanceof Array) { // (1)
var item_index = 0;
while(item_index !== item.length) {
if(item_index in item) {
array[array_index++] = item[item_index++];
} else {
++array_index; ++item_index; // (2)
}
}
} else {
array[array_index++] = item;
}
} while(arg_index !== arguments.length &&
(item = arguments[arg_index++] || true)
);
array.length = array_length;
return array;
}
function(separator) {
var length = this.length>>>0; // (1)-1
if(typeof(separator) === "undefined") {
separator = ",";
}
separator = ToString(separator);
if(length === 0) {
return "";
}
var result;
var index = 0;
var item = this[index++];
item = (item == null) ? "" : ToString(item);
result = item;
while(index !== length) { // (1)-2
item = this[index++];
item = (item == null) ? "" : ToString(item);
result += separator + item;
}
return result;
}
// argが数値の場合は厳密には違うかも。
// 以後もたびたび登場する予定。
function ToString(arg) {
return ""+arg.valueOf();
}
function() {
var length = this.length>>>0;
if(length === 0) {
this.length = length; // (1)-1
return; // undefined
}
length -= 1;
var result = this[length];
delete this[length];
this.length = length; // (1)-2
return result;
}
function() {
var length = this.length>>>0;
for(var i = 0; i < arguments.length; ++i) {
this[length++] = arguments[i];
}
this.length = length; // (1)
return length;
}
function() {
var length = this.length>>>0;
var mid = Math.floor(length/2);
for(var p = 0; p !== mid; ++p) {
var q = length-p-1;
var P = this[p], Q = this[q];
if(!(q in this)) {
delete[p];
} else {
this[p] = Q;
}
if(!(p in this)) {
delete[q];
} else {
this[q] = P;
}
}
return this;
}
sort()については、this.length>>>0 が用いられることと、thisを変更して thisを返すことだけを書いておいて、i, j要素を比較する手順について。
function compare(i, j) {
// (A) 存在しない要素を最後尾へ。
if(!(i in this)) {
if(!(j in this)) {
return +0; // (1)
} else {
return 1;
}
} else if(!(j in this)) {
return -1;
}
var I = this[i], J = this[j];
// (B) undefinedな要素を後ろへ。
if(typeof(I) === "undefined") {
if(typeof(J) === "undefined") {
return +0; // (1)
} else {
return 1;
}
} else if(typeof(J) === "undefined") {
return -1;
}
// (C) ユーザー比較関数
if(typeof(comparefn) !== "undefined") {
return comparefn(I, J);
}
// (D) デフォルト比較方法 (文字列化して昇順)
I = ToString(I), J = ToSTring(J);
if(I < J) {
return -1;
} else if(I > J) {
return 1;
}
return +0;
}
function() {
var length = this.length>>>0;
if(length === 0) {
this.length = length; // (1)
return; // undefined
}
var result = this[0];
// ひとつずつ前へスライド
for(var k = 1; k !== length; ++k) {
if(k in this) {
this[k-1] = this[k];
} else {
delete this[k-1];
}
}
delete this[length-1];
this.length = length-1;
return result;
}
function() {
var length = this.length>>>0;
// 要素を引数の数だけ後ろへシフト。
for(var k = length; k !== 0; --k) {
var j = k-1;
if(j in this) {
this[j + arguments.length] = this[j];
} else {
delete this[j + arguments.length];
}
}
// 先頭に引数をコピー
for(var k = 0; k !== arguments.length; ++k) {
this[k] = arguments[k];
}
this.length = length + arguments.length; // (1)
return this.length;
}
function(start, end) {
var array = [];
var array_index = 0;
var length = this.length>>>0;
start = ToInteger(start);
start = (start < 0) ? Math.max(length+start, 0) : Math.min(start, length);
end = (typeof(end) === "undefined") ? length : ToInteger(end);
end = (end < 0) ? Math.max(length+end, 0) : Math.min(end, length);
for(var k = start; k < end; ++k) {
if(k in this) {
array[array_index++] = this[k];
} else {
++array_index; // (1)
}
}
array.length = array_index;
return array;
}
function ToInteger(x) {
x = +x;
if(isNaN(x)) {
return +0; // (2)
}
if(x === 0 || !isFinite(x)) {
return x;
}
// 0 に近づける。(小数点以下を切り捨てる)
return (0 <= x) ? Math.floor(x) : Math.ceil(x);
}
function(start, deleteCount) {
var array = [];
var length = this.length>>>0;
start = ToInteger(start);
start = (start < 0) ? Math.max(length+start, 0) : Math.min(start, le deleteCount = ToInteger(deleteCount);
deleteCount = Math.min(Math.max(deleteCount, 0), length-start);
// 取り出す要素をコピー。(まだ削除はしない)
for(var k = 0; k !== deleteCount; ++k) {
var l = start+k;
if(l in this) {
array[k] = this[l];
}
}
// (A) 要素を後ろへずらして空きを作る
// (後で上書きされてしまう要素までずらしてない？)
if(deleteCount < arguments.length) {
for(var k = length-deleteCount; k !== start; --k) {
var l = k + deleteCount -1;
var m = k + arguments.length -1;
if(l in this) {
this[m] = this[l];
} else {
delete this[m];
}
}
// (B) 要素を前へ詰めて、空きを新要素と同じ数にする
} else if(arguments.length < deleteCount) {
for(var k = start; k !== length-deleteCount; ++k) {
var l = k + arguments.length;
var m = k + deleteCount;
if(m in this) {
this[l] = this[m];
} else {
delete this[l];
}
}
// (なぜ逆順で削除する？)
for(var k = length; k !== length-deleteCount+arguments.length; --k) {
delete this[k-1];
}
}
// 追加する要素で thisを上書き
if(arguments.length === deleteCount) {
for(var k = 0; k !== arguments.length; ++k) {
this[start+k] = arguments[k];
}
}
this.length = length - deleteCount + arguments.length;
return array;
}
パターンがわかってきた。
Firefox(JavaScript1.5?)では適用すると Array.prototype.method.call(string) is read-onlyという警告がいくつも出る。
一度の呼び出しでいくつも出ることから read-onlyなのはメソッドではなく、自己破壊的な Array.prototype.method()を適用された stringだと思われる。
警告が出るだけで、戻り値は得られるので pop()で末尾の文字、shift()で先頭の文字が得られる。
unshift()、push()の返す数値は使えない。(その長さを持った文字列は存在しないので)
reverse(), sort()は全く役に立たない。役に立つ値を返さないし、並べ替えには失敗しているから。
slice()は String.prototypeに同名のメソッドがすでに存在する。
splice()がちょっと面白く、splice(startと deleteCount) の引数はちょうど String.prototype.substr(start, length)と対応するが、返ってくるのが substr()->"文字列" なのに対し、splice()->["文","字","列"] となる。
string.split("")の代わりに Array.prototype.splice.call(string, 0)としてみるのはいかが？ (警告が出る上に IE7では使えませんが)
Stringではなく、配列のようなオブジェクト(コレクションとか argumentsとか)に適用するのが正解か。
// unknown_objectが配列なら unknown_objectのコピー、 // それ以外なら unknown_objectを唯一の要素とする配列が返る。 var array = Array.prototype.concat.call(unknown_object);
// lengthプロパティと [] での要素アクセスが可能な、
// 配列っぽいオブジェクト(NodeListとか argumentsとか)を配列化。
var array = Array.prototype.slice.call(document.getElementsByTagName("pre"), 0);
// " " が得られます。
var softtab = Array.prototype.join.call({length:8+1}, " ");
// softtabを使ったレベル3のインデントが得られます。
var indent = new Array(3+1).join(softtab); // prototypeいらねー
二番目の書き方を使うなら Arrayのビルトインメソッドを他のオブジェクトに使い回すという趣旨が……。
今回から String.prototypeのメソッド。Stringは自己破壊的なメソッドを持っていないから、Arrayのビルトインメソッドと違って適用範囲が広いことを期待している。
……と思ったが、Stringのビルトインメソッドはどれも事前に ToString(this)を呼んでしまう。(ToString()については (1))
indexOfで配列の探索ができるんじゃないかと期待していたが無理だった。がっかり。
これにて終了。
split()に渡す正規表現のサブマッチに特別な意味があるとか、split()はグローバルフラグを無視するとか、グローバルフラグの立った正規表現で exec(string)を呼んで空文字列にマッチしたときはこちらで lastIndexプロパティを 1増やさないといけないとか、もやもやしてたことが Under Translation of ECMA-262 3rd Editionにはいろいろ書いてありました。訳者に感謝。
switch-caseのラベル部分に何でも書ける*という変態的な部分は置いておいて、1/2が 0.5になるのと同じ類の話。
返るのは [1, 10, 5]。どうも文字列としてソートされている。数字だけの配列だ(と自分が知っている)からって無駄な期待をしてはいけない。
stringと表示される。i に入るのが配列の要素 1, 5, 10 ではなく添え字(key)だというだけで意外だが、さらに意表をついてそれが数字でもなく、"0", "1", "2" 。i+1 としても隣の要素にはアクセスできない。array[1] = 5; と数字の添え字で代入した後でも同じだった。
for-in ループは遅いと評判だったので使っておらず、最近まで知らなかった。
ついでにいうと for-inとは別の in 演算子の存在も、つい最近まで知らなかった。(SHJSのソースを読んで発見した)
グローバル変数の存在確認方法も SHJSを読んで知った。今までは typeof(global_var) == "undefined" とやっていた。これは存在確認とは微妙に意味が違う。
deleteできるグローバル変数とできないグローバル変数については amachangのブログを読んで知った。
ということを知っていれば for-inループで文字列が渡されても驚くことはない。(じゃあなぜ驚いた)
var object = {};
alert(""+ (1==="1")); // false
o[1] = 1;
o["1"] = "1";
alert(""+ (o[1]===o["1"])); // true
var a = [1,2,3];
var b = [1,2,3];
alert(""+ (a===b)); // false
o[a] = a;
o[b] = b;
alert(""+ (o[a]===o[b])); // true
var s = "1,2,3";
alert(""+ (a===s)); // false
o[s] = s;
alert(""+ (o[a]===o[s])); // true
* http://arton.no-ip.info/diary/20061224.html#p02
こんなやりとりがあった。
dankogaiの指摘の一つ、「MyObject.prototype = { /* ... */ }は避けるべし」について。
MyBox.prototype = Box.prototype; // ここで継承しているのに
MyBox.prototype = { // ここで台無し
speed:8
};
指摘には同意するが、上の例だと親の Boxにも MyBoxと共通のクラス変数 speedが追加されている。
amachangの反論にあるように、継承するなら次の書き方の方が優れている。
MyBox.prototype = new Box; // new Box()と同じ
ところで、amachangはこう続けている。これがプロトタイプ継承の正しい形式であり
MyBox.prototype = {};
MyBox.prototype = new Object;
指摘を受けた上段の書き方は下段のシンタックスシュガーなので両方とも Objectからの正しい継承方法である。このことがわかっていれば、他から継承しておきながら Objectからも継承して台無しにするような間違いは犯さない。(だから必要に応じて違う書き方をすれば良いし、必要がなければ .prototype={}と書いても良い)。
でも違う理由で MyObject.prototype = {}; という書き方は避けている。 理由は一つで
MyObject = function(){};
MyObject.prototype = {/* MyObjectの定義 */};
alert(new MyObject().constructor); // function Object(){ [natiive code] } と表示
constructorプロパティが MyObjectではなくなってしまっている。これは MyObject.prototype = new MyParent; としたときも同じで constructorは MyParentになる。
constructorプロパティだけを気にするなら
MyObject.prototype = { constructor:MyObject.prototype.constructor };
というように明示的にコピーすればごまかせるが、一時しのぎ感がぷんぷんしている。(constructor以外のプロパティが追加されたらその都度書き換えるの？)
だから、継承の仕方で逆につっこまれてしまったが、dankogaiが提示した 3つの方法に自分は同意していて、そのうちの一つ目を自分は使っている。
http://blog.mf-davinci.com/mori_log/archives/2005/12/index.php
勘違いしていた。水面より上にある氷が融ければ水面が上がると思っていた。
重さで考えてみる。
氷の全体の重さは、水面下に沈んでいる氷の体積と同じ量の水の重さと等しい。(浮力)
氷が融けてすべて水になるとどうなるか。水面下にあった氷と同じだけの体積を占めることになる。(同じ重さの水は同じ体積)
水面は上昇しない。
ところで、氷の水面に浮かんでいる部分は、水が凝固したときに増加した体積分だという見方はしたことがなかった。(凡人以下)
いやになるなあ。