ホームページ >ウェブフロントエンド >jsチュートリアル >今まで見たことのない JavaScript スキル_javascript スキル

今まで見たことのない JavaScript スキル_javascript スキル

WBOYオリジナル: 2016-05-16 18:28:401162ブラウズ

JavaScript の成功は広く話題になっており、Web ページの JavaScript コードを記述することは、すべての Web デザイナーにとっての基本的なスキルとなっています。この興味深い言語には、長年の経験を持つ JavaScript プログラマーですら完全に理解していないことが数多くあります。この記事では、あまり馴染みのない、しかし非常に実践的な JavaScript のテクニックを 7 つの側面から説明します。
省略されたステートメント
JavaScript では、次のコードのような省略されたステートメントを使用してオブジェクトと配列を迅速に作成できます:

コードをコピーコードは次のとおりです:

 
var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4 ; 
car .hubcaps = 'spinning'; 
car.age = 4; 

コードをコピーコードは次のとおりです:

 
var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
} 

オブジェクトの車が作成されますが、その前に「;」を追加しないように注意してください。そうしないと、IE で大きな問題が発生します。
配列を作成する従来の方法は次のとおりです:

コードをコピーコードは次のとおりです:

 
var movieThatNeedBetterWriters = new Array( 
'Transformers','Transformers2','Avatar','Indiana Jones 4' 
); 

省略したステートメントを使用します:

コードをコピーしますコードは次のとおりです:

 
var movieThatNeedBetterWriters = [ 
'Transformers ','Transformers2','Avatar','Indiana Jones 4' 
]; 

配列に関するもう 1 つの質問は、連想配列のようなものが存在するかどうかです。この例のように、上記の車を定義するコード例がたくさんあります。

コードをコピーしますコードは次のとおりです:

 
var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; = 'spinning' ; 
car['age'] = 4;

省略されたステートメントを使用できるもう 1 つの場所は、

です。コードをコピーしますコードは次のとおりです:

var direct; 
if(x < 200){ 
direction = 1; 
 } else { 
direction = 
} 

 

は次のように短縮できます:

コードをコピーしますコードは次のとおりです:

var directive = x < 200 ? 1 : -1;

JSON データ形式
JSON は、Douglas Crockford によって設計された「JavaScript Object Notation」の略称です。JSON は、次の例のように、複雑なデータ形式をキャッシュする際の JavaScript のジレンマを変更します。バンドを記述したい場合は、次のように記述できます。

コードをコピーコードは次のとおりです:

var Band = { 
"name":"レッド・ホット・チリ・ペッパーズ", 
"メンバー":[ 
{ 
"名前":"アンソニー・キーディス", 
"役割":"リード・ボーカル" 
}, 
 { 
"name":"マイケル 'フリー' バルザリー", 
"役割":"ベースギター、トランペット、バッキング ボーカル" 
}, 
{ 
"名前":"チャドスミス", 
"role":"ドラム、パーカッション" 
}, 
{ 
"name":"ジョン・フルシアンテ", 
"role":"リードギター" 
 } 
], 
"year":"2009" 
} 

 

JSON は、一部の API の戻りデータオブジェクトとしても、JavaScript で直接使用できます。次のコードは、有名なブックマーク Web サイト「delicious.com」の API を呼び出し、この Web サイトのすべてのブックマークを返し、自分の Web サイトに表示します。

コードをコピーしますコードは次のとおりです: