ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptミニマリスト入門講座(1):基礎編_JavaScriptスキル

JavaScriptミニマリスト入門講座(1):基礎編_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 16:32:571153ブラウズ

この記事を読むには、他の言語でのプログラミング経験が必要です。

勉強を始める前に

ほとんどのプログラミング言語には、良い部分と悪い部分があります。この記事では、JavaScript の良い部分のみを取り上げます。理由は次のとおりです。

1. 良い部分だけを学ぶことで学習時間を短縮できます
2. 書かれたコードはより堅牢になります
3. 書かれたコードがより読みやすくなります
4. 記述されたコードの保守が容易になります

弱い型付けと強い型付け

一般的に言えば、バグの修正が早ければ早いほど、コストは低くなります。厳密に型指定された言語のコンパイラーは、コンパイル時に特定のエラーをチェックできます。 JavaScript は型指定が弱い言語であり、そのインタプリタは型エラーをチェックできませんが、実際にやってみると次のことがわかります。

1. 強力な型指定で回避できるエラーは重大なエラーではありません

2. 弱い型付けは柔軟性をもたらし、強い型付けの荷物を運ぶ必要はありません

JavaScript 関連の標準

ECMA-262 標準は、ECMAScript 言語を定義します。私たちがよく知っている JavaScript と ActionScript は、どちらも ECMAScript に基づいています。現在は ECMA-262 第 5 版が主流であり、Google の V8 エンジンはこれを実装したものです。

こんにちは JavaScript

JavaScript は、解釈して実行するためにインタープリターを必要とするスクリプト言語です。ブラウザで JavaScript を解釈して実行することも、Google の V8 JavaScript エンジンを統合する Node.js を直接使用することもできます。 node.js を使うととても便利なので、ここでは、node.js を使って JavaScript を解釈して実行します。次に、最初の JavaScript プログラムを見てみましょう:


コードをコピー コードは次のとおりです:
// test.js
console.log("Hello JavaScript");

次の手順を実行します:


コードをコピー コードは次のとおりです:
ノードtest.js

文法

メモ

JavaScript は C と同じコメント メソッドを使用し、// は単一行のコメントに使用され、/* */ は複数行のコメントに使用されます。

数値型

JavaScript には、64 ビット浮動小数点数である数値型が 1 つだけあります。数値型には NaN と Infinity という 2 つの特別な値があります。NaN は数値ではないことを意味します。値 Infinity が無限であるかどうかを確認するには、関数 isNaN を使用します。 Math オブジェクトには、数値を操作するための一連のメソッドがあります。たとえば、Math.floor メソッドは切り捨てに使用されます。

文字列

文字列リテラルは、エスケープ文字を使用して一重引用符または二重引用符で囲むことができます (他の多くの言語と同様)。 JavaScript の各文字は 2 バイトであり、Unicode 文字セットを使用します。文字列には長さのプロパティがあります:

コードをコピーします コードは次のとおりです:
"Hello".length // 値は 5 ですが、"Hello".length()
ではないことに注意してください
文字列は変更できません (Lua と同じ) ここで説明した length 属性に加えて、次のようなメソッドもあります。

コードをコピーします コードは次のとおりです:
'cat'.toUpperCase() === 'CAT'


ステートメント

var ステートメントはローカル変数を宣言するために使用されます。それ以外の場合、変数はグローバル変数となり、初期化されていない変数の値は未定義になります:

コードをコピーします コードは次のとおりです:
関数 f() {
var localVar = 123;
globalVar = 456;
var i; // i の値は未定義です
};

f();

console.log(globalVar); // OK
console.log(localVar); // エラー、localVar が定義されていません


{} で囲まれたステートメントのグループはブロックと呼ばれます。他の言語とは異なり、JavaScript の関数は新しいスコープを作成しますが、ブロックは作成しません。たとえば、次のようになります。

コードをコピーします コードは次のとおりです: {
var v = 123;
}
console.log(v); // OK

if ステートメント

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

if (式)
ステートメント

または

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

if (式)
ステートメント1
それ以外
ステートメント2

または

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

if (式1)
ステートメント1
else if (式 2)
ステートメント2
else if (式 3)
ステートメント3
それ以外
ステートメント4

if ステートメントは、式の値が true か false かを判断して、特定のステートメントを実行するかスキップするかを決定します。 JavaScript では、次の値は false です (他の値はすべて true):

1.false
2.ヌル
3.未定義
4. 空の文字列
5.0
6.NaN

if 内のステートメントは、ステートメントまたはステートメント ブロックにすることができます。

switch ステートメント

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

スイッチ (n) {
case 1: // n が 1 に等しい場合
//コードブロックを実行
休憩;
ケース 2: // n が 2 に等しい場合
//コードブロックを実行
休憩;
デフォルト: // n が 1 でも 2 でもない場合
//コードブロックを実行
休憩;
}

ここでの Break は、loop ステートメントまたは switch ステートメントを終了するために使用されます。 JavaScript では、2 つの値が等しいかどうかを比較する演算子が 2 つあります:

1.== (!= 演算子に対応)、等しい、2 つのオペランドの型が異なる場合、この演算子は比較する前にオペランドの型を変換しようとします。例:

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

var x = 1;
x == 1 // true
x == "1" // true
;

2.=== (!== 演算子に対応)、完全に等しく、オペランドの型変換を実行せずに 2 つのオペランドを比較します。例:

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

var x = 1;
x === 1 // true
x === "1" // false
;

NaN がどの値にも等しくないことに注意してください。x が NaN の場合、x !== x (NaN の場合のみ true)、次のように isNaN 関数を実装できます。

コードをコピーします コードは次のとおりです:
関数 isNaN(n) {
n を返します !== n;
}

上記の switch ステートメントは if ステートメントに変換されます。


コードをコピー コードは次のとおりです:
if (n === 1)
// ...
else if (n === 2)
// ...
それ以外
// ...

while および do-while ステートメント

コードをコピーします コードは次のとおりです:
while (式)
ステートメント

expression が true の場合、expression が false になるまでステートメントが繰り返し実行されます。

コードをコピーします コードは次のとおりです:
する
ステートメント
while (式);

while ループと似ていますが、最初にステートメントが実行され、次に条件式がチェックされる点が異なります。

ステートメント

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

for (初期化; テスト; インクリメント)
ステートメント

最初に初期化が 1 回実行され (通常、ループ変数の初期化に使用されます)、次にテスト条件がテストされます (通常、ループ変数のテストに使用されます)。テスト条件が false の場合はループが停止され、それ以外の場合はステートメントが実行されます。次に、インクリメント (ループの更新によく使用される変数) が実行され、テスト条件テストが実行され、ループが続行されます。使用例:

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

for (var i=0; i console.log(i);
}

for の別の形式は、オブジェクトのすべてのプロパティ名を列挙するために使用されます。

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

for (オブジェクト内の変数)
ステートメント

例:

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

var obj = {
a: 1、
b: 2、
c:3
};

for (obj 内の変数名)
console.log(名前);

hasOwnProperty メソッドを使用して、プロパティ名がオブジェクトに属しているか、プロトタイプ チェーンから見つかったかを確認することに注意してください (プロトタイプについては次の記事で紹介します):

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

for (obj の変数) {
If (obj.hasOwnProperty(var)) {
// ...
}
}

return ステートメント

return ステートメントは、関数が値を返すようにするために使用されます。関数が return を明示的に使用しない場合は、
が返されます。

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

関数 f() { }
var v = f() // v === 未定義

?: 条件演算子 (JavaScript の唯一の三項演算子)
?: 条件演算子は多くのプログラミング言語に存在します。最初のオペランドが true の場合、演算子は 2 番目のオペランドの値を返し、そうでない場合は 3 番目のオペランドの値を返します。

コードをコピーします コードは次のとおりです:
関数 abs() {
x > 0 ? を返す: -x;
}

演算子の種類

typeof 演算子は変数の型を取得するために使用され、その戻り値には次のものが含まれます。

1.'番号'

2.'文字列'
3.'ブール値'
4.「未定義」
5.「関数」
6.「オブジェクト」

特殊な typeof null は「object」を返します。 typeof の例:

コードをコピーします コードは次のとおりです:
var a = typeof 'hello' // a === '文字列'
; var b = null のタイプ // b === 'オブジェクト'

オペレーター

演算子は、JavaScript での加算演算に使用でき、文字列の連結にも使用できます:


コードをコピー コードは次のとおりです:
var message = 'hello' 'world' // メッセージ === 'helloworld'
;

&& および || 演算子

&& 演算子は、最初のオペランドが false の場合は最初のオペランドの値を返し、それ以外の場合は 2 番目のオペランドの値を返します
|| 演算子は、最初のオペランドが true の場合は最初のオペランドの値を返し、それ以外の場合は 2 番目のオペランドの値を返します

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

var a = 1 && true // a === true
var b = 1 || // b === 1

|| の慣用的な使用法:

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

name = name || 'unknown' // 名前 'unknown' のデフォルト値を設定します
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。