JavaScript単項演算子の使用方法
序章
数学的には、操作は、出力値にマッピングされるオペランドと呼ばれる1つ以上の値の計算です。 operator は、オペランドを出力値にマップするシンボルまたは記号です。
単項演算は、オペランドが1つしかない演算です。 このオペランドは、演算子の前または後にあります。
単項演算子は、標準のJavaScript関数呼び出しよりも効率的です。 さらに、単項演算子はオーバーライドできないため、その機能が保証されます。
オペレーター | 説明 |
---|---|
単項プラス(+ )
|
オペランドを数値に変換しようとします |
単項否定(- )
|
オペランドを数値に変換しようとし、その後否定します |
インクリメント(++ )
|
オペランドに1を追加します |
デクリメント(-- )
|
オペランドから1つデクリメント |
論理否定(! )
|
ブール値に変換してからそれを否定します |
ビット単位ではありません(~ )
|
オペランドのすべてのビットを反転し、数値を返します |
typeof
|
オペランドの型である文字列を返します |
delete
|
配列の特定のインデックスまたはオブジェクトの特定のプロパティを削除します |
void
|
式の戻り値を破棄します。 |
この記事では、JavaScriptのすべての単項演算子を紹介します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
単項プラス(+
)
単項プラス演算子(
+
)は、そのオペランドの前にあり、そのオペランドに評価されますが、まだ数値に変換されていない場合は、数値に変換しようとします。
数値、ブール値(true
およびfalse
)、およびnull
のすべての文字列表現を数値に変換できます。 数値には、整数、浮動小数点数、16進数、科学的(指数)表記、およびInfinity
の両方が含まれます。
オペランドを数値に変換できない場合、単項プラス演算子はNaN
を返します。
ここではいくつかの例を示します。
手術 | 結果 |
---|---|
+3
|
3
|
+"3"
|
3
|
+"-3"
|
-3
|
+"3.14"
|
3.14
|
+"123e-5"
|
0.00123
|
+"0xFF"
|
255
|
+true
|
1
|
+false
|
0
|
+null
|
0
|
+"Infinity"
|
Infinity
|
+"not a number"
|
NaN
|
+function(val){ return val }
|
NaN
|
オブジェクトは、キー valueOf を持ち、その関数が上記のタイプのいずれかを返す場合にのみ変換できます。
+{ valueOf: function() { return "0xFF" } }
これにより、次のように出力されます。
Output255
さまざまな値を試した後、次の単項演算子に進むことができます。
単項否定(-
)
単項否定演算子(
-
)は、そのオペランドの前にあり、それを否定します。
単項否定とプラスの両方が、非数値のNumber()
関数と同じ操作を実行します。
ここではいくつかの例を示します。
手術 | 結果 |
---|---|
-3
|
-3
|
-"3"
|
-3
|
-"-3"
|
3
|
-"3.14"
|
-3.14
|
-"123e-5"
|
-0.00123
|
-"0xFF"
|
-255
|
-true
|
-1
|
-false
|
-0
|
-null
|
-0
|
-"Infinity"
|
-Infinity
|
-"not a number"
|
-NaN
|
-function(val){ return val }
|
-NaN
|
-{ valueOf: function(){ return "0xFF" } }
|
-255
|
さまざまな値を試した後、次の単項演算子に進むことができます。
インクリメント(++
)
インクリメント演算子(
++
)は、オペランドをインクリメント(1を加算)して値を返します。
接尾辞または接頭辞演算子として使用できます。
- 接尾辞:演算子がオペランド(
y++
)の後に来ることを意味します。 これにより、インクリメントする前の値が返されます。 - プレフィックス:演算子はオペランド(
++y
)の前にあります。 プレフィックスとして使用すると、インクリメント後に値が返されます。
接尾辞の例を次に示します。
x = 4 // x = 4 y = x++ // y = 4 and x = 5
y
はインクリメント前の値に設定され、1
がx
に追加されます。
postfixを使用するときは、値のリセットに注意してください。
var z = 5 // z = 5 z = z++ // z = 5
z
はインクリメント前の値に設定されます。
プレフィックスの例を次に示します。
x = 4 // x = 4 y = ++x // y = 5 and x = 5
y
はインクリメント後の値に設定され、x
に1が加算されます。
var z = 5 // z = 5 z = ++z // z = 6
z
はインクリメント後の値に設定されます。
さまざまな値を試した後、次の単項演算子に進むことができます。
デクリメント(--
)
デクリメント演算子(
--
)は、オペランドをデクリメント(1を減算)して値を返します。
接尾辞または接頭辞演算子として使用できます。
- 接尾辞:演算子がオペランド(
y--
)の後に来ることを意味します。 これにより、デクリメントする前の値が返されます。 - プレフィックス:演算子はオペランド(
--y
)の前にあります。 プレフィックスとして使用すると、デクリメント後に値が返されます。
接尾辞の例を次に示します。
x = 4 // x = 4 y = x-- // y = 4 and x = 3
y
をデクリメント前の値に設定すると、x
から1が削除されます。
var z = 5 // z = 5 z = z-- // z = 5
z
はデクリメント前の値に設定されます。
プレフィックスの例を次に示します。
x = 4 // x = 4 y = --x // y = 3 and x = 3
y
をデクリメント後の値に設定し、x
から1を削除します。
var z = 5 // z = 5 z = --z // z = 4
z
はデクリメント後の値に設定されます。
さまざまな値を試した後、次の単項演算子に進むことができます。
論理否定(!
)
論理NOT(
!
)演算子(論理補数、否定)は、真実を偽りに、またはその逆を行います。
ここではいくつかの例を示します。
手術 | 結果 |
---|---|
!false
|
true
|
!NaN
|
true
|
!0
|
true
|
!null
|
true
|
!undefined
|
true
|
!""
|
true
|
!true
|
false
|
!-3
|
false
|
!"-3"
|
false
|
!42
|
false
|
!"42"
|
false
|
!"string"
|
false
|
!"true"
|
false
|
!"false"
|
false
|
!{}
|
false
|
![]
|
false
|
!function(){}
|
false
|
これらの例は、オペランドがtrue
に変換できる場合、論理否定がfalse
を返す方法を示しています。そうでない場合、false
を返します。
二重否定(!!
)を使用することもできます。
!!1 === true // returns true !!0 === false // returns true !!'hi' === true // returns true
最後の例を見てみましょう。
まず、文字列の否定はfalse
を返します。
!'hi' // returns false
次に、false
を否定すると、true
が返されます。
!false // returns true
したがって:
true === true // returns true
さまざまな値を試した後、次の単項演算子に進むことができます。
ビット単位ではありません(~
)
ビット単位のNOT演算子(
~
)は、そのオペランドのビットを反転します。
数値にビット単位がない場合は、-(x + 1)
になります。
a | ではありません |
---|---|
0 | 1 |
1 | 0 |
ここではいくつかの例を示します。
手術 | 結果 |
---|---|
~3
|
-4
|
~"3"
|
-4
|
~"-3"
|
2
|
~"3.14"
|
-4
|
~"123e-5"
|
-1
|
~"0xFF"
|
-256
|
~true
|
-2
|
~false
|
-1
|
~null
|
-1
|
~"Infinity"
|
-1
|
~"not a number"
|
-1
|
~function(val){ return val }
|
-1
|
~{ valueOf: function(){ return "0xFF" } }
|
-256
|
次の表は、この操作がどのように実行されるかを詳しく調べています。
(10進数) | (ベース2) | NOT(ベース2) | NOT(10進数) |
---|---|---|---|
2 | 00000010 | 11111101 | -3 |
1 | 00000001 | 11111110 | -2 |
0 | 00000000 | 11111111 | -1 |
-1 | 11111111 | 00000000 | 0 |
-2 | 11111110 | 00000001 | 1 |
-3 | 11111101 | 00000010 | 2 |
さまざまな値を試した後、次の単項演算子に進むことができます。
typeof
typeof
演算子は、未評価のオペランドのタイプを示す文字列を返します。
ここではいくつかの例を示します。
手術 | 結果 |
---|---|
typeof 3
|
'number'
|
typeof '3'
|
'string'
|
typeof -3
|
'number'
|
typeof 3.14
|
'number'
|
typeof 123e-5
|
'number'
|
typeof 0xFF
|
'number'
|
typeof true
|
'boolean'
|
typeof false
|
'boolean'
|
typof null
|
'object'
|
typeof Infinity
|
'number'
|
typeof NaN
|
'number'
|
typeof function(val){ return val }
|
'function'
|
typeof { valueOf: function(){ return '0xFF' } }
|
object
|
typeof [1,2,3]
|
'object'
|
typeof {hi: "world"}
|
'object'
|
typeof Date()
|
'string'
|
typeof new Date()
|
'object'
|
typeof undefined
|
'undefined'
|
さまざまな値を試した後、次の単項演算子に進むことができます。
delete
JavaScript
delete
オペレーターは、オブジェクトからプロパティを削除します。 同じプロパティへの参照がこれ以上保持されない場合、最終的には自動的に解放されます。
プロパティが正常に削除された場合、またはプロパティが存在しない場合は、true
を返します。
アイテムの削除に失敗した場合は、false
を返します。
delete
は、関数と変数の両方に影響を与えません。
変数でdelete
を使用しようとする例を次に示します。
var variableExample = 1; delete variableExample; // returns false console.log(variableExample); // returns 1
関数でdelete
を使用しようとする例を次に示します。
function functionExample(){}; delete functionExample; // returns false console.log(functionExample); // returns function functionExample(){}
アレイでdelete
を使用しようとする例を次に示します。
var arrayExample = [1,1,2,3,5] delete arrayExample // returns false console.log(arrayExample); // [1,1,2,3,5]
オブジェクトでdelete
を使用しようとする例を次に示します。
var objectExample = {propertyExample: "1"} delete objectExample // returns false console.log(objectExample); // returns Object { propertyExample: "1" }
次に、リテラル表記のプロパティでdelete
を使用する例を示します。
var inventory = {"apples": 1, "oranges": 2} delete inventory["apples"] // returns true console.log(inventory); // returns Object { "oranges": 2 } console.log(inventory["apples"]); // returns undefined
そして、ドット表記のプロパティでdelete
を使用する例を次に示します。
var inventory = {"apples": 1} delete inventory.apples; // returns true console.log(inventory); // returns {} console.log(inventory.apples); // returns undefined
存在しないプロパティでdelete
を使用しようとする例を次に示します。
var inventory = {"apples": 1}; delete inventory.oranges; // returns true console.log(inventory.apples); // returns 1
次に、事前定義されたオブジェクトの構成不可能なプロパティでdelete
を使用しようとする例を示します。
delete Math.PI; // returns false console.log(Math.PI); // returns 3.141592653589793
delete
は、構成不可として設定されているオブジェクトプロパティには影響しません。 常にfalse
を返します。
厳密モードでは、これによりSyntaxError
が発生します。
構成不可能なプロパティでdelete
を使用しようとする例を次に示します。
var configurableFalseExample = {}; Object.defineProperty(configurableFalseExample, 'name', { value: 'Sammy', configurable: false }) console.log(configurableFalseExample.name); // returns 'Sammy' delete configurableFalseExample.name // returns false console.log(configurableFalseExample.name); // returns 'Sammy'
構成不可能なプロパティでdelete
を使用する例を次に示します。
var configurableTrueExample = {}; Object.defineProperty(configurableTrueExample, 'name', { value: 'Sammy', configurable: true }) console.log(configurableTrueExample.name); // returns 'Sammy' delete configurableTrueExample.name // returns true console.log(configurableTrueExample.name); // returns undefined
defineProperty()の詳細をご覧ください。
var
、let
、およびconst
は、delete
演算子では削除できない構成不可能なプロパティを作成します。
window
スコープ(Webブラウザなど)でvar
を設定する例を次に示します。
var num = 1; Object.getOwnPropertyDescriptor(window, "num")
これは戻ります:
Output{ value: 1, writable: true, enumerable: true, configurable: false }
次に、変数をdelete
しようとします。
delete num;
これは戻ります:
Outputfalse
global
スコープ(ノードなど)にvar
を設定する例を次に示します。
var num = 1; Object.getOwnPropertyDescriptor(global, "num")
これは戻ります:
Output{ value: 1, writable: true, enumerable: true, configurable: false }
次に、オブジェクトの例を示します。
var inventory = { "apples": 1 }; Object.getOwnPropertyDescriptor(inventory, "apples")
これは戻ります:
Output{ value: 1, writable: true, enumerable: true, configurable: true }
configurable
プロパティがtrue
としてマークされていることに注意してください。
Arrays
は、JavaScriptではタイプObject
と見なされます。 したがって、このメソッドはそれらで機能します。
var arrayExample = [20,30,40]; console.log(arrayExample.length); // returns 3 delete arrayExample[2] // returns true console.log(arrayExample); // returns [ 20, 30, <1 empty item> ] console.log(arrayExample[2]); // returns undefined console.log(arrayExample.length); // returns 3
delete
演算子は値のみを削除し、配列のインデックスは削除しません。 その特定のインデックスの値はundefined
のままになります。 これが長さが変わらない理由です。
strict
モードでは、変数、関数の引数、または関数名への直接参照を使用しているため、delete
はSyntaxError
をスローします。
SyntaxError
を引き起こす変数への直接参照の例を次に示します。
‘use strict’ var inventory = {"apples": 1, "oranges": 2}; delete inventory;
これにより、次のものが生成されます。
OutputUncaught SyntaxError: Delete of an unqualified identifier in strict mode.
SyntaxError
を引き起こす関数の引数の例を次に示します。
‘use strict’ function Person() { delete name; var name; }
SyntaxError
を引き起こす関数名の例を次に示します。
‘use strict’ function yo() { } delete yo;
delete
を使用する際に常に考慮すべきいくつかの指針を次に示します。
- 存在しないプロパティを削除しようとすると、
delete
はtrue
を返しますが、オブジェクトには影響しません。 - 削除は、オブジェクト自体のプロパティにのみ影響します。 これは、同じ名前のプロパティがオブジェクトのプロトタイプチェーンに存在する場合、
delete
はそれに影響を与えないことを意味します。 削除後、オブジェクトはプロトタイプチェーンのプロパティを使用します。 var
、let
、およびconst
と宣言された変数は、グローバルスコープまたは関数のスコープから削除できません。 意味:deleteは、グローバルスコープまたは関数スコープ内の関数を削除できません。 削除は、オブジェクトの一部である関数(グローバルスコープを除く)で機能します。- 構成不可能なプロパティは削除できません。
delete
は、Math
、Array
、Object
などの組み込みオブジェクト、または次のようなメソッドで構成不可能として作成されたプロパティでは機能しません。Object.defineProperty()
。
さまざまな値を試した後、次の単項演算子に進むことができます。
void
void
演算子は、指定された式を評価してから、undefined
を返します。
void
オペレーターの主な目的は、undefined
を返すことです。 void演算子は、値を返さずに評価される式を指定します。
void演算子は、void (expression)
またはvoid expression
のいずれかの方法で使用されます。
注: void
演算子は関数ではないため、()
は必須ではありませんが、MDNに従って使用することをお勧めします。
次に例を示します。
void 0
これは戻ります:
Outputundefined
関数の例を次に示します。
var functionExample = function () { console.log('Example') return 4; }
関数を参照する場合:
var result = functionExample() console.log(result);
これにより、値4
が返されます。
Output4
ただし、void
関数を使用すると、次のようになります。
var voidResult = void (functionExample()) console.log(voidResult);
これにより、値undefined
が返されます。
Outputundefined
void
演算子を使用して、式をハイパーテキストリンクとして指定することもできます。 式は評価されますが、現在のドキュメントの代わりにロードされません。
リンクでvoid(0)
を使用する例を次に示します。
<a href="javascript:void(0)">Link to perform no action.</a>
上記のコードは、ユーザーがクリックしても何もしないリンクを作成します。 これは、void(0)
がundefined
と評価されるためです。
リンクでvoid(document.form.submit())
を使用する例を次に示します。
<a href="javascript:void(document.form.submit())">Link to submit a form.</a>
このコードは、ユーザーがフォームをクリックしたときにフォームを送信するリンクを作成します。
さまざまな値を試してください。
結論
この記事では、JavaScriptのすべての単項演算子を紹介しました。
複数の演算子を扱う場合は、常に操作の順序を考慮してください。 これは、予期しないバグを軽減するための良い方法です。
これは、Javascriptを使用する場合の操作の優先順位を示す簡単な表です。 同じレベルのオペランドの優先順位は同じです。
演算子タイプ | オペレーター | 例 | ||
---|---|---|---|---|
メンバー | . []
|
[1,2,3]
| ||
インスタンスの呼び出し/作成 | () new
|
var vehicle = new Vehicle();
| ||
否定/増分 | ! ~ + - ++ -- typeof void delete
|
typeof [1,2,3]
| ||
掛け算/割り算 | * / %
|
3 % 3
| ||
足し算/引き算 | + -
|
3 + 3
| ||
ビット単位のシフト | << >> >>>
|
9 << 2
| ||
関連した | < <= > >= in instanceof
|
[1] instanceof Array
| ||
平等 | == != === !==
|
void(0) === undefined
| ||
ビット単位-および | &
|
5 & 1
| ||
ビット単位のxor | ^
|
5 ^ 1
| ||
ビット単位-または | 1 | |||
論理-そして | &&
|
x < 10 && y > 1
| ||
論理-または | x == 5 | y == 5 | ||
条件付き | ?:
|
(amount < 10) ? "Few" : "Many"
| ||
割り当て | = | x = 8
| ||
コンマ | ,
|
b = 3, c = 4
|
JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。