如何使用JavaScript一元运算符

介绍

在数学上， 操作 是对一个或多个称为 操作数 的值的计算，映射到输出值。 运算符 是将操作数映射到输出值的符号或符号。

一元运算是只有一个操作数的运算。 此操作数位于运算符之前或之后。

一元运算符比标准 JavaScript 函数调用更有效。 此外，一元运算符不能被覆盖，因此它们的功能得到保证。

操作员	解释
一元加号 (+)	尝试将操作数转换为数字
一元否定 (-)	尝试将操作数转换为数字并在之后取反
增量（++）	在其操作数上加一
递减（--）	从其操作数减一
逻辑非 (!)	转换为布尔值然后否定它
按位非 (~)	反转操作数中的所有位并返回一个数字
typeof	返回一个字符串，它是操作数的类型
delete	删除数组的特定索引或对象的特定属性
void	丢弃表达式的返回值。

在本文中，您将了解 JavaScript 中的所有一元运算符。

先决条件

如果您想继续阅读本文，您将需要：

• 对 JavaScript 数据类型、变量、对象和函数有一定的了解。

一元加号 (+)

一元加号运算符 (+) 在其操作数之前并计算其操作数，但如果尚未将其转换为数字，则尝试将其转换为数字。

它可以将数字、布尔值（true 和 false）和 null 的所有字符串表示形式转换为数字。 数字将包括整数、浮点数、十六进制、科学（指数）表示法和 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

在尝试了不同的值之后，您可以继续下一个一元运算符。

增量（++）

递增运算符 (++) 递增（加一）其操作数并返回一个值。

它可以用作后缀或前缀运算符。

• 后缀：表示运算符位于操作数 (y++) 之后。 这将返回递增之前的值。
• 前缀：运算符位于操作数之前（++y）。 使用它作为前缀返回递增后的值。

这是一个后缀示例：

x = 4       // x = 4
y = x++     // y = 4 and  x = 5

y 设置为递增前的值，并将 1 与 x 相加。

使用后缀时要小心重置值：

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 设置为递增后的值。

在尝试了不同的值之后，您可以继续下一个一元运算符。

递减（--）

递减运算符 (--) 递减（减一）其操作数并返回一个值。

它可以用作后缀或前缀运算符。

• 后缀：表示运算符位于操作数 (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，则逻辑 NOT 如何返回 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）	非（基数 2）	非（以 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 范围内设置 var 的示例（例如，Web 浏览器）：

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 适用于作为对象一部分的函数（除了全局范围）。
• 无法删除不可配置的属性。
• 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
按位异或	^	5 ^ 1
按位或		1
逻辑与	&&	x < 10 && y > 1
逻辑或			x == 5	y == 5
有条件的	?:	(amount < 10) ? "Few" : "Many"
任务	=	x = 8
逗号	,	b = 3, c = 4

如果您想了解有关 JavaScript 的更多信息，请查看 我们的 JavaScript 主题页面 以获取练习和编程项目。