検索
ホームページウェブフロントエンドjsチュートリアルJavaScriptカーネルの基本概念_基礎知識

この章では主に、JavaScript のデータ型 (基本型と参照型)、変数 (変数のスコープを含む)、および演算子 (主に文字通り理解するのが難しいいくつかの一般的な演算子) について説明します。 JavaScript では「すべてがオブジェクト」であるため、これらの基本概念を習得すると、スコープ、オブジェクトの呼び出し、クロージャ、カリー化などのより難しい概念を簡単に理解できるようになります。

データ型

プログラミング経験のある読者は、C や Java などの言語ではデータが型付けされ、たとえばユーザー名を表すために使用されることを知っている必要があります。属性は文字列であり、従業員の年齢は数値です。UI 上のスイッチ ボタンを表すデータ モデルはブール値などです。数値は浮動小数点数、整数、整数に分割されることもあります。つまり、これらはすべて言語内のデータの値の型を表します。

JavaScript のデータ型は、基本データ型とオブジェクト型の 2 つの型に分類されます。オブジェクト型には、オブジェクト、配列、関数が含まれます (実際には、関数、配列などもオブジェクトです。これについては後で説明します)。章の詳細は後述します)。

1.1.1 基本データ型

JavaScript には、String、Number、Boolean (boolean) の 3 つの基本データ型があります。簡単な例をいくつか示します。

コードをコピーします コードは次のとおりです。
var str = "Hello, world"; //String
var i = 10;//Integer
var f = 2.3;//浮動小数点

var b = true;//Boolean Value

を表示できます変数の値と変数の型はそれぞれ:
コードをコピー コードは次のとおりです:

print(str);
print(f);
print(typeof str); typeof i);
print(typeof f);


ここで使用される print() 関数は rhino インタープリタのメソッドであることに注意してください。トップレベル オブジェクトは、文字列を出力するために使用できます。通常、プログラマーは、同様のアクションを実行するために、alert() を使用します。これは、ブラウザー メソッドの JavaScript インタープリターのトップレベル オブジェクト (ウィンドウ) です。 。

Hello, world
10
2.3
true

string
number
number
Boolean
JavaScript では、すべての数値、これは整数浮動小数点であり、「数値」基本型に属します。 typeof は単項演算子であり、これについてはこの章の別のセクションで説明します。


1.1.2 オブジェクトの型


ここで言うオブジェクトはオブジェクトそのものではなく、型のことです。オブジェクトの詳細については、第 3 章の説明で説明します。ここでのオブジェクトには、オブジェクト (属性のコレクション、つまりキー値のハッシュ テーブル)、配列 (順序付きリスト)、および関数 (実行可能コードを含む) が含まれます。
オブジェクト型は複合データ型です。もちろん、オブジェクト型の値は基本データ型に限定されません。オブジェクト型のインスタンスを例で説明します。




コードをコピーします。
コードは次のとおりです。 >var str = "こんにちは、世界"; var obj = 新しいオブジェクト(); obj.num = 2.3; var array = 新しい配列("foo", "bar", "zoo" ); var func = function(){
print("ここでは関数です"); >ご覧のとおり、オブジェクトには obj.str、obj.num などの属性があり、これらの属性の値は基本的な型にすることもできますが、実際にはより複雑な型にすることもできます。その型を見てみましょう。




コードをコピーします


コードは次のとおりです。

print(typeof obj); (typeof array);
print(typeof func);
// object object function を出力します。実際、 print(typeof array) はオブジェクトを出力します。オブジェクトと配列の間の境界は明らかではありません (実際、それらは同じ型です)。しかし、それらの動作は、この本の以降の章で大きく異なります。 2 つの重要なデータ型を別々に実行します。

2.1.3 2 つの


間の変換は、Java の基本データ型の自動ボックス化とボックス化解除に似ています。JavaScript にも、基本データ型に対して同様のアクションがあります。一部の操作を実行すると、オブジェクトは一時的にラップされ、操作が完了すると、オブジェクトは自動的に解放されます。いくつかの例で説明します。




コードをコピー


コードは次のとおりです:
var str = "JavaScript Kernal";
print(str.length);//Print 17

str は、typeof 演算子によってその型が "string" であることがわかります。 "、および:

コードをコピー コードは次のとおりです:
var str2 = new String ("JavaScript Kernal") ;
print(typeof str2);

str2 の型は「object」、つまり 2 つは同じではないことがわかります。 str.length を使用して str の長さを取得しますか? 事実 上記のように、str.length を使用すると、JavaScript は一時 String オブジェクトを str の内容で自動的にラップし、オブジェクトの length プロパティを取得し、最後に一時オブジェクトを取得します。リリースされます。

オブジェクトは次の方法で基本型に変換されます。オブジェクトの値は、オブジェクトの valueOf() メソッドを呼び出して取得され、コンテキストの型と一致する場合、その値が使用されます。 valueOf で値を取得できない場合は、オブジェクトの toString() メソッドを呼び出す必要があります。コンテキストが数値の場合は、文字列を数値に変換する必要があります。 JavaScript は型指定が弱いため、JavaScript エンジンはコンテキストに基づいてオブジェクトの型を「推測」する必要があり、そのため JavaScript の効率はコンパイル済み言語よりも低くなります。

valueOf() の機能は、オブジェクトの値をコンテキスト要件を満たす基本型に変換することであり、toString() はその名前に忠実で、Of に対応する文字列を出力できます。もちろん、前提条件は、Object の toString() メソッドを「再「含んでいる」ということです。

実際、この変換ルールは多くの問題を引き起こします。たとえば、

function ConvertTest(){
if(new Boolean(false) && new Object() &&
new String("") && new Array()){
print("convert to boolean")
}
}
convertTest();//Boolean に変換

初心者は JavaScript の型変換ルールに戸惑いやすいですが、実際、ルールをマスターすれば、これらの奇妙な書き方は非常に難しくなります。コードのパフォーマンスを向上させるには、例を通してこれらのルールを学びます:
コードをコピーします コードは次のとおりです:

var x = 3;
var y = x "2";// => 32
var z = x 2;// => 5

);
print (z);

通常、JS コードには次のようなコードがあります:

コードは次のとおりです:
if(datamodel.item){
//何かをします...
}else{
datamodel.item = new item();
}

この書き方には実際には深い意味があります:

datamodel.item はオブジェクト (文字列、数値など) であることに注意してください。 )、ブール式の式が必要な場合は、ここで型変換が実行されます。 JavaScript では、コンテキストにブール値が必要な場合、エンジンはオブジェクトを自動的にブール値に変換します。変換ルールは、オブジェクトが空でない場合は true に変換され、それ以外の場合は false であるため、この省略形を使用できます。

従来のプログラミング言語 (厳密に型指定された) では、次のものが必要です:

コードをコピーコードは次のとおりです。
if(datamodel.item != null){
//何かをします...
}else{
datamodel.item = new item(); 🎜 >}


2.1.4 型判定
先ほど JavaScript の機能について話したときに、JavaScript は弱い型指定言語であると言いましたが、場合によっては型判定が必要になることがあります。実行時に変数の型を知るには、たとえば、関数パラメーターは別の関数であることが想定されます:


コードをコピー コードは次のとおりです。
function handleMessage(message, handle){
return handle(message)
}
handleMessage を呼び出す関数によってハンドルが渡されたときが関数ではない場合、JavaScript エンジンはエラーを報告するため、呼び出す前に判断する必要があります:


コードをコピー コードは次のとおりです:
function handleMessage(message, handle){
if(typeof handle == "function"){
return handle(message)
}else{
throw new Error("2 番目引数は関数である必要があります");
}
}

ただし、次の状況のように、typeof は常に有効であるとは限りません:

コードをコピー コードは次のとおりです:
var obj = {};
var array = ["one", "two", "three " , "four"];

print(typeof obj);//object
print(typeof array); //object

実行結果は、オブジェクト obj の typeof を示しています。と配列の配列の値はすべて「オブジェクト」であるため、正確に判断することはできません。このとき、instanceof を呼び出すことで、さらに判断することができます:

print(objinstanceof Array);//false
print(array instanceof Array);//true
コードの最初の行は false を返し、2 行目は true を返します。したがって、typeof演算子とinstanceof演算子を組み合わせて判断することができます。

2.2 変数

変数、つまり、値は名前に関連付けられており、その値は将来、次のように変数を通じて参照できます。 🎜>

コードをコピーします コードは次のとおりです。
var str = "Hello, World"; 🎜>var num = 2.345;

次回、文字列「Hello, Wrold」を参照して特定の操作を実行する場合は、変数 str を使用するだけで済みます。同様に、10* を使用できます。 10*2.345 を表す数値。変数の目的は、変数に値を「格納」することです。

2.2.1 基本型と参照型

前のセクションでは、数値やブール値などの基本的なデータ型はメモリ内に固定されます。では、変数を通じて基本的なデータ型に直接アクセスします。オブジェクト、配列、関数などの参照型の場合、そのサイズには原則として制限がないため、参照自体が実際のストレージ複合体の場所を指すアドレスになります。オブジェクト。

基本型と参照型の違いは比較的明白です。いくつかの例を見てみましょう。



コードをコピーコードは次のとおりです:var x = 1;//数値 x、基本型
var y = x;//数値 y、基本型
print(x) ;
print(y);

x = 2;//x の値を変更します

print(x);//x の値は 2 になります
print( y);/ /y の値は変更されません

実行結果は次のとおりです:

1

1

2

1

このような演算結果は想定の範囲内です。配列の長さは固定ではなく、動的に追加できるため、参照型の例を見てみましょう。または削除された場合、配列は参照型です:



コードをコピー コードは次のとおりです:var 配列 = [1,2,3,4,5];
var arrayRef = 配列

array.push(6);

参照はアドレスを指します。つまり、参照は参照自体を指すのではなく、参照に対応する実際のオブジェクトを指します。したがって、array が指す配列を変更すると、arrayRef は同じオブジェクトを指すようになり、その結果は次のようになります:
1,2,3,4,5,6

2.2 .2 変数のスコープ

変数が定義されている領域がそのスコープです。グローバル変数にはグローバル スコープがあり、関数内で宣言された変数などにはローカル スコープがあり、関数の外部から直接アクセスすることはできません。の。例:




コードをコピー コードは次のとおりです: var variable = "out" ;
function func(){
var variable = "in";
print(variable);//print "in"
}

func();
print (variable);//Print "out"

関数内で var キーワードが必要であることに注意してください。var キーワードを記述せずに変数を使用する場合、デフォルトの動作は次のようになります。グローバル オブジェクト 例:



コードをコピー コードは次のとおりです: var variable = "out";
function func(){
variable = "in";//この変数の前に var キーワードがないことに注意してください
print(variable)}

func() ;
print(variable);//グローバル変数変数が変更されます

関数 func で変数がキーワード var なしで使用されているため、デフォルトではグローバル オブジェクトの変数属性を操作する (変数の値を in に変更する) ため、このコードは次のように出力されます:

in

in



2.3 演算子

演算子は通常見落とされがちですが、いくつかの奇妙な演算子があります。 JavaScript では、演算子の組み合わせ率や機能によって説明する必要があるかもしれません。JS プログラミングの経験を持つ多くの人は依然として混乱を避けられません。

このセクションでは主に次の演算子について説明します。

2.3.1 角括弧演算子 ([])

[] 演算子は配列オブジェクトとオブジェクトで使用できます。添字で配列から値を取得します:

コードをコピーします コードは次のとおりです:
var array = ["one", "two", "three", "four"];
array[0]

一般的に言えば、オブジェクト内では、属性の値は、次のようなドット (.) 演算子を通じて取得されます。

コードをコピー コードは次のとおりです。
var object = {
field : "self",
printInfo : function(){
print(this.field);
}
}

object.field;
object.printInfo();

しかし、そのような状況を考慮すると、オブジェクトを走査するとき、属性のキーについては何もわかりません。ドット (.) を介してアクセスしますか? 現時点では、[] 演算子を使用できます:

for(var key in object){
print(key ":" object[key]);
}

実行結果は次のとおりです。

field:slef
printInfo:function (){
print(this.field)
}
2.3.2 ドット演算子 (.)

ドット演算子の左側はオブジェクト (属性のコレクション) で、右側は属性名です。左側のオブジェクトの属性に加えて、右側の値も指定できることに注意してください。

コードをコピー コードは次のとおりです:
var object = {
field : "self",
printInfo : function(){
print(this.field);
outer:{
inner : "内部テキスト",
printInnerText : function(){
print(this.inner)
}
}
}

object.outter.printInnerText();
この例では、outter をオブジェクトの属性として使用すると同時に、printInnerText() のオブジェクトとしても使用します。

2.3.3 == と === と != と !==

演算子 == は等しいものとして読み取られ、演算子 === は等しいものとして読み取られます。これら 2 つの演算子演算は JavaScript コードでよく見られますが、その意味はまったく同じではありません。つまり、等価演算子はオペランドの両側で型変換を実行しますが、等価演算子は実行しません。例で説明します。

print(1 == true);
print("" == false); === false);

print(null == 未定義);
print(null === 未定義);





コードをコピーfalse
true


等価演算子と等価演算子の規則は次のとおりです。

等価演算子

オペランドの型が同じ場合、2 つのオペランドの値が等しいかどうかが等価であると判断されます。

オペランドの型が異なる場合は、次の状況に従って判断されます:

◆ null

◆ どちらか一方が数値、もう一方が文字列である場合、その文字列を数値に変換して比較します

◆ どちらか一方が true の場合は変換しますまず 1 に変換します (false の場合は 0 に変換します)

の比較◆ 一方の値がオブジェクトで、もう一方が数値/文字列の場合、オブジェクトを元の値に変換します (toString() または valueOf( 経由) )メソッド)

◆その他の場合は、直接 false を返します

等価演算子

オペランドの型が異なる場合は値判定を行わず、 false を返します

オペランドの型が同じ場合、次の状況に従って判断されます。

◆ 両方とも数値です。 値が同じ場合、2 つは次のとおりです。等しい (例外があり、NaN は等しくありません)、それ以外の場合は等しくありません

◆ 他のプログラミング言語と同様、文字列の値が等しくない場合は、それらはすべて文字列です。

◆ これらはすべてブール値であり、値がすべて true/false の場合は等しく、そうでない場合は等しくありません

◆ 2 つのオペランドが同じオブジェクト (配列、関数) を参照する場合、それらは完全に等しくなります。そうでない場合、それらは等しくありません。

◆ 2 つのオペランドが同じオブジェクト (配列、関数) を参照する場合。 ) 両方が null/未定義の場合は等しく、それ以外の場合は等しくありません

例:

コードをコピー コードは次のとおりです。
var obj = {
id : "self",
name : "object"
}; obj;
var ob = obj;

print(oa == ob);

は次のようになります。 >true
true

オブジェクトの例を見てみましょう:





コードをコピー
コードは次のとおりです。 var obj1 = { id : "self", name : "object", toString : function(){
return "オブジェクト 1";
}
}

var obj2 = "オブジェクト 1";

print(obj1 == = obj2);

戻り値は次のとおりです:

true

false

obj1 はオブジェクトであり、obj2 はまったく異なる構造を持つ文字列です。等価演算子を使用して判断すると、この 2 つはまったく同じになります。これは、obj1 がトップレベル オブジェクトの toString() メソッドをオーバーロードするためです。

!= は !== と等しくありませんが、==/!== の逆です。したがって、JavaScript で等価/等価、不等価/不等価を使用する場合は、型変換に注意する必要があります。これにより、デバッグが困難な一部のバグを回避できる等価/不等価を使用して判断することをお勧めします。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境