如何使用 JavaScript 单值运算符

介绍

从数学上讲,一个 operation 是对一个或多个值的计算,称为 operands 将其绘制到输出值.一个 operator 是描绘到输出值的符号或符号。

An illustration of the example operation "x plus y equals z" that labels the operators (plus and equals), the operands (x and y), and the result (z).

一个统一的操作是只有一个操作员的操作,该操作员在操作员之前或之后出现。

Unary 操作员比标准的 JavaScript 函数调用更高效,此外,unary 操作员不能被夸大,因此其功能性得到保证。

OperatorExplanation
Unary plus (+)Tries to convert the operand into a number
Unary negation (-)Tries to convert the operand into a number and negates after
Increment (++)Adds one to its operand
Decrement (--)Decrements by one from its operand
Logical NOT (!)Converts to boolean value then negates it
Bitwise NOT (~)Inverts all the bits in the operand and returns a number
typeofReturns a string which is the type of the operand
deleteDeletes specific index of an array or specific property of an object
voidDiscards a return value of an expression.

在本文中,您将介绍JavaScript中的所有unary操作员。

前提条件

如果您想跟随这篇文章,您将需要:

单元(+)

unary plus 运算符(+)先于其运算符,并对其运算符进行评估,但如果它还没有,则试图将其转换为一个数字。

它可以将数字的所有字符串表示,布尔值(真实错误)和null转换为数字。

如果操作数不能转换为一个数字,则 unary plus 运算符将返回 'NaN'。

这里有一些例子:

OperationResult
+33
+"3"3
+"-3"-3
+"3.14"3.14
+"123e-5"0.00123
+"0xFF"255
+true1
+false0
+null0
+"Infinity"Infinity
+"not a number"NaN
+function(val){ return val }NaN

一个对象只能转换,如果它有一个键 valueOf,它的函数返回上述任何类型。

1+{
2  valueOf: function() {
3    return "0xFF"
4  }
5}

这将产生如下:

1[secondary_label Output]
2255

尝试不同值后,您可以继续到下一个无数运算器。

否定性(``)

无数否定运算符(-)先于它的运算符并否定它。

单数否定和加上都执行与非数字的Number()函数相同的操作。

这里有一些例子:

OperationResult
-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

尝试不同值后,您可以继续到下一个无数运算器。

增量(++)

增量运算符(++)增加(添加一个到)它的运算符并返回一个值。

它可以用作 postfix 或 prefix 操作员。

  • Postfix:意思是操作员在操作员之后出现(y++) 这会返回增加之前的值 *前缀:操作员在操作员之前出现(++y)。

以下是一个postfix的例子:

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

y 设置为增量前的值,并将1 添加到x

使用 postfix 时要小心重置值:

1var z = 5   // z = 5
2z = z++     // z = 5

z 设置为增量前的值。

这里有一个前缀的例子:

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

y 被设置为增量后的值,并将 1 添加到 `x 。

1var z = 5   // z = 5
2z = ++z     // z = 6

z 设置为增量后的值。

尝试不同值后,您可以继续到下一个无数运算器。

降级(``)

减数运算符(--)减去(从)其运算符并返回一个值。

它可以用作 postfix 或 prefix 操作员。

  • Postfix:意思是操作员在操作员(y--)之后出现。这会返回降级之前的值 *前缀:操作员在操作员(--y)之前出现。

以下是一个postfix的例子:

1x = 4       // x = 4
2y = x--     // y = 4 and x = 3

在减小之前将y设置为值,并从x中删除1。

1var z = 5   // z = 5
2z = z--     // z = 5

z 设置为降级前的值。

这里有一个前缀的例子:

1x = 4       // x = 4
2y = --x     // y = 3 and x = 3

在减小后将y设置为值,并从x中删除1。

1var z = 5   // z = 5
2z = --z     // z = 4

z 被设置为减小后的值。

尝试不同值后,您可以继续到下一个无数运算器。

逻辑不是(!)

逻辑NOT(!)运算(逻辑补充,否定)将真理转化为虚假,反之亦然。

这里有一些例子:

OperationResult
!falsetrue
!NaNtrue
!0true
!nulltrue
!undefinedtrue
!""true
!truefalse
!-3false
!"-3"false
!42false
!"42"false
!"string"false
!"true"false
!"false"false
!{}false
![]false
!function(){}false

这些示例表明逻辑NOT如何返回,如果操作符可以转换为,否则它会返回

你也可以使用双重否定(!!!)。

1!!1 === true        // returns true
2!!0 === false       // returns true
3!!'hi' === true     // returns true

让我们来看看最后一个例子。

首先,一个字符串的否定返回:

1!'hi'               // returns false

然后,一个的否定返回:

1!false              // returns true

这样:

1true === true       // returns true

尝试不同值后,您可以继续到下一个无数运算器。

( )

Bitwise NOT 操作员 (~) 逆转其操作员的位数。

一个不是数字上的位数结果为: -(x + 1)

aNOT a
01
10

这里有一些例子:

OperationResult
~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

下面的表格更深入地看看该操作是如何执行的。

(base 10)(base 2)NOT (base 2)NOT (base 10)
20000001011111101-3
10000000111111110-2
00000000011111111-1
-111111111000000000
-211111110000000011
-311111101000000102

尝试不同值后,您可以继续到下一个无数运算器。

类型

typeof运算符返回一个表示未被评估的运算符的类型的字符串。

这里有一些例子:

QQ 操作 QQ 结果 QQ QQ: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 类型 3'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' QQ'object' ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' QQ'object' QQ {hi:"世界"} QQ'object' QQ 日期的QQ类型 () QQ' string' QQ QQ类型 新日期 () QQ'object' QQ QQ 类型未定义的' 未定义

尝试不同值后,您可以继续到下一个无数运算器。

删除

JavaScript删除操作器从对象中删除一个属性;如果不再保留同一个属性的引用,它最终会自动释放。

如果成功删除该属性或如果该属性不存在,则返回

返回如果无法删除一个项目。

删除不会对函数和变量产生任何影响。

以下是尝试在变量上使用删除的一个示例:

1var variableExample = 1;
2delete variableExample;          // returns false
3console.log(variableExample);    // returns 1

以下是尝试在函数上使用删除的一个示例:

1function functionExample(){};
2delete functionExample;           // returns false
3console.log(functionExample);     // returns function functionExample(){}

以下是尝试在数组上使用删除的一个示例:

1var arrayExample = [1,1,2,3,5]
2delete arrayExample             // returns false
3console.log(arrayExample);      // [1,1,2,3,5]

以下是尝试在对象上使用删除的一个示例:

1var objectExample = {propertyExample: "1"}
2delete objectExample            // returns false
3console.log(objectExample);     // returns Object { propertyExample: "1" }

现在,以下是用字面符号的属性上使用删除的一个示例:

1var inventory = {"apples": 1, "oranges": 2}
2delete inventory["apples"]          // returns true
3console.log(inventory);             // returns Object { "oranges": 2 }
4console.log(inventory["apples"]);   // returns undefined

以下是使用点符号的属性上使用删除的一个示例:

1var inventory = {"apples": 1}
2delete inventory.apples;            // returns true
3console.log(inventory);             // returns {}
4console.log(inventory.apples);      // returns undefined

以下是尝试在不存在的属性上使用删除的一个示例:

1var inventory = {"apples": 1};
2delete inventory.oranges;           // returns true
3console.log(inventory.apples);      // returns 1

以下是尝试在预定义对象的非可配置属性上使用删除的一个示例:

1delete Math.PI;                     // returns false
2console.log(Math.PI);               // returns 3.141592653589793

删除对设置为不可配置的对象属性没有影响. 它将始终返回

在严格模式下,这将引发一个SyntaxError

以下是尝试在无法配置的属性上使用删除的一个示例:

1var configurableFalseExample = {};
2Object.defineProperty(configurableFalseExample, 'name', { value: 'Sammy', configurable: false })
3console.log(configurableFalseExample.name);     // returns 'Sammy'
4delete configurableFalseExample.name            // returns false
5console.log(configurableFalseExample.name);     // returns 'Sammy'

以下是使用删除在无法配置的属性的一个示例:

1var configurableTrueExample = {};
2Object.defineProperty(configurableTrueExample, 'name', { value: 'Sammy', configurable: true })
3console.log(configurableTrueExample.name);      // returns 'Sammy'
4delete configurableTrueExample.name             // returns true
5console.log(configurableTrueExample.name);      // returns undefined

閱讀更多關於 defineProperty()的內容。

var, letconst 会创建无法配置的属性,这些属性无法用删除 操作器删除:

以下是设置一个窗口范围中的var的例子(例如,网页浏览器):

1var num = 1;
2Object.getOwnPropertyDescriptor(window, "num")

这将返回:

1[secondary_label Output]
2{
3  value: 1,
4  writable: true,
5  enumerable: true,
6  configurable: false
7}

然后尝试删除变量:

1delete num;

这将返回:

1[secondary_label Output]
2false

以下是在全球范围内设置一个var的例子(例如,节点):

1var num = 1;
2Object.getOwnPropertyDescriptor(global, "num")

这将返回:

1[secondary_label Output]
2{
3  value: 1,
4  writable: true,
5  enumerable: true,
6  configurable: false
7}

现在,这是一个对象的例子:

1var inventory = { "apples": 1 };
2Object.getOwnPropertyDescriptor(inventory, "apples")

这将返回:

1[secondary_label Output]
2{
3  value: 1,
4  writable: true,
5  enumerable: true,
6  configurable: true
7}

注意可配置属性被标记为

Arrays在JavaScript中被认为是Object类型,因此,这种方法会对它们起作用:

1var arrayExample = [20,30,40];
2console.log(arrayExample.length);     // returns 3
3delete arrayExample[2]                // returns true
4console.log(arrayExample);            // returns [ 20, 30, <1 empty item> ]
5console.log(arrayExample[2]);         // returns undefined
6console.log(arrayExample.length);     // returns 3

删除运算器只会删除数组的值,而不是索引,它会将该特定索引的值留为未定义

严格模式中,删除会因为直接引用变量、函数参数或函数名而引入SyntaxError

以下是直接引用变量的例子,会导致SyntaxError:

1use strict
2var inventory = {"apples": 1, "oranges": 2};
3delete inventory;

这将产生:

1[secondary_label Output]
2Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.

以下是导致SyntaxError的函数参数的示例:

1use strict
2function Person() {
3 delete name;
4 var name;
5}

以下是导致SyntaxError的函数名称的示例:

1use strict
2function yo() { }
3
4delete yo;

以下是使用删除时要始终考虑的几点提示:

试图删除一个不存在的属性,删除会返回真实,但不会对对象产生影响 *删除仅影响对象的自身属性,这意味着如果对象的原型链上存在一个具有相同名称的属性(https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain),那么删除不会影响它。删除后,对象将使用原型链中的属性 *声明变量var,letconst不能从对象的全球范围或函数的范围中删除。

尝试不同值后,您可以继续到下一个无数运算器。

《Void》

运算器评估给定的表达式,然后返回未定义

'void' 运算符的主要目的是返回 'undefined' 运算符指定要评估的表达式,而不返回值。

void 运算符以以下方式使用: ‘void (expression)’ 或‘void 表达式’。

<$>[注] 注: void 运算符不是一个函数,因此 () 不需要,但根据 MDN <$>使用它们是一个很好的风格。

这里有一个例子:

1void 0

这将返回:

1[secondary_label Output]
2undefined

以下是一个函数的例子:

1var functionExample = function () {
2  console.log('Example')
3  return 4;
4}

如果您提到函数:

1var result = functionExample()
2console.log(result);

这将返回4值:

1[secondary_label Output]
24

但是,如果您删除该函数:

1var voidResult = void (functionExample())
2console.log(voidResult);

这将返回未定义值:

1[secondary_label Output]
2undefined

也可以使用运算符来指定一个表达式作为一个超文本链接. 该表达式被评估,但不会被加载到当前文档的位置。

以下是在链接上使用void(0)的例子:

1<a href="javascript:void(0)">Link to perform no action.</a>

上面的代码创建了一个链接,当用户点击它时,它不会做任何事情,这是因为‘void(0)’评估为‘undefined’。

以下是在链接上使用void(document.form.submit())的例子:

1<a href="javascript:void(document.form.submit())">Link to submit a form.</a>

代码创建了一个链接,当用户点击表单时提交表单。

用不同的价值观进行实验。

结论

在本文中,您被介绍了JavaScript中的所有unary操作员。

在处理多个运营商时,始终考虑操作顺序,这是减轻不可预见的错误的良好做法。

以下是一个简短的表格,显示在使用JavaScript时操作中的优先顺序。

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________----__________--------------------_______________________________________________________- bitwise- and ** ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## "花":"多""(- )"|""" 分配" +="(- ) >>="(- )" >>>=" ^=" &#" &#" &#" &#" &#" &#" &#" &#" |" |" |" |" |" |" ("X" = 8" ("- ") |". ** comma* __________________________________________________________________________________________________________________________________

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

Published At
Categories with 技术
Tagged with
comments powered by Disqus