JavaScript运算符小技巧

博主： Arvin
发布时间：2021 年 12 月 21 日
1497 次浏览
2 条评论
5747字数
分类：学校日常 JavaScript 实用技巧

## 前言

在JavaScript中的有很多运算符，我们在使用的时候可能也只是使用到了其中个一小撮，今天这篇文章，简单总结了一下在JavaScript中运算符使用技巧。

## 加法（+）运算

如果在操作数之前使用 **`+`** 运算符，那么 **`+`** 就成为了一元加运算符。

一元加运算符位于操作数之前并计算操作数，并试图将操作数转换为数字（如果不是数字的话）。

```javascript
const x = 1
const y = -1

console.log(+x)		// 控制台输出: 1
console.log(+y)		// 控制台输出: -1
console.log(+'')	// 控制台输出: 0
console.log(+true)	// 控制台输出: 1
console.log(+false)	// 控制台输出: 0
console.log(+'hello')	// 控制台输出: NaN （Not a number,不是一个数字）
```

> 注意：如果将一元加运算符与不是数字的字符串一起使用，则返回NaN（not a number）

如果在其他上下文中使用 `+`运算符，则用作加法运算符。

将产生除字符串之外的数字操作数的总和。

> 注意：它会将布尔值转换为数字，将对象转换为数字。

```javascript
console.log(2 + 4) // 6
console.log(2 + true) // 3
```

当你将它与字符串一起使用时，将进行字符串连接

```javascript
const name = 'code oz'
console.log('hello ' + 'my name is ' + name);  //此处使用加号进行字符串连接
```

> 注意：你应该使用模板字符串代替连接。
> 
> 更多ES6新特性，可以查阅：
> 
> <div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://jbea.cn/archives/107.html" target="_blank" class="post_inser_a no-external-link no-underline-link">
<div class="inner-image bg" style="background-image: url(https://jbea.cn/usr/themes/handsome/assets/img/sj/7.jpg);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">ECMAScript 6 （ES6新语法）</p>
<div class="inster-summary text-muted">
ECMAScript 6 （ES6新语法）- 第一篇章前言ECMAScript 6 目前基本成为业界标准，它的普及...
</div>
</div>
</a>

</div>

</div>

## 减法（-）运算

如果在操作数之前使用 `-`运算符，那么 `-`将用作一元否定运算符。

一元否定运算符位于操作数之前进行否定。

> 注意：它会将布尔值转换为数字，将对象转换为数字，将字符串转换为数字

```javascript
const a = 5
console.log(-a) // -5
console.log(-'1') // -1
```

> 注意：如果将其与不是数字的字符串一起使用，则返回 `NaN`（not a number）

如果在其他上下文中使用 `-`运算符，则用作减法运算符。

减去两个操作数，产生它们的差。

```javascript
console.log(5 - 3)		// 控制台输出: 2
console.log(3.5 - 5)		// 控制台输出: -1.5
console.log(5 - 'hello')	// 控制台输出: NaN
console.log(5 - true)		// 控制台输出: 4
```

## 扩展 | rest参数 （...）

如果在函数参数中使用 `...`运算符，它将用作rest运算符。

它允许函数拥有无限数量的参数！

```javascript
let arr = [3, 5, 1]
Math.max(...arr) 	// 5
```

如果在其他上下文中使用 `...`运算符，它将用作扩展运算符。

如果将其用作函数中的参数：它将允许可迭代，例如函数参数中的数组表达式。

```javascript
//定义方法
const add = (...rest) => {
   return rest.reduce((total, current) => total + current) //计算总和
}

//方法调用
add(1, 2, 3)
add(1, 2, 3, 4, 5)
```

你还可以使用它从数组或对象中提取值。

```javascript
const [ firstItem, ...others ] = [ 1, 2, 3, 4 ]
firstItem // 1
others // [ 2, 3, 4 ]

const toto = { a: 1, b: 2, c: 3 }
const { a, ...others } = toto
a // 1   //匹配第一个参数
others // { b: 2, c: 3 }  //匹配剩余参数
```

> 注意：当你在做 `const toto = { ...anotherObject }`时，它等于 `const toto = Object.assign({}, anotherObject)`

## 逻辑运算符

首先我们要知道：Javascript中的所有值都是假值或真值，这意味着你可以对任何值进行布尔计算，并获得布尔值。在Javascript中，除 `0`、`null`、`undefined`、`NaN`、空字符串外，其他所有值都是真值。

### 逻辑与（&&）

用于检查所有值（通常值为条件）是否为真。

在一组表达式中，只要有一组表达式返回结果为false，则最终结果就是false，反之，当所有的表达式的返回值为true，则最终的返回结果才是true。【执行过程中，中途会结束运算】

```javascript
let i = 10, j = 10;
if(i > 10 && j++ > 10){   //表达式1：i>10  表达式2：j++>10  执行过程中表达式1返回false，结束了表达式2的运算
    console.log("进入if");
    console.log(`${i}:${j}`);
}else{
    console.log("进入else");
    console.log(`${i}:${j}`);
}
/* 控制台输出：
 * 进入else
 * 10:10
 */
```

> 分析：在执行代码判断时，表达式1返回false，此处使用的是&&运算，则表达式2直接忽略跳过不执行，j++不会累加，所以最终j的结果为10，也不会进入if选择结构

### 逻辑或（||）

用于检查一组值中的一个值（通常值是条件）是否为真。

在一组表达式中，只要有一组表达式返回结果为ture，则最终结果就是true，反之，当所有的表达式的返回值为false，则最终的返回结果才是false。

```javascript
let i = 10, j = 10;
if(i < 5 || j++ > 10){   //表达式1：i<5 表达式2：j++>10  执行过程中表达式1返回false，当时程序将会继续进行第二个表达的计算
    console.log("进入if");
    console.log(`${i}:${j}`);
}else{
    console.log("进入else");
    console.log(`${i}:${j}`);
}
/* 控制台输出：
 * 进入else
 * 10:11
 */
```

> 分析：同学们可能会有疑问，既然程序会继续进行判断，那么j++ > 10是满足条件的，其实这是错误的，在计算过程中，是先进行的判断然后在进行的j++的赋值，所以程序最终不会进入if，而是进入else，最后的输出结果i=10，但是j的值却发生了变化，变成了11，这也就证明了两个点：
> 
> 1. 程序的确进行了 j++>10的执行
> 2. j++的自增运算是在条件判断完毕之后才执行的

### 逻辑空合并（??）

当其左侧操作数为 `null`或 `undefined` （空值）时，返回其右侧操作数。

```javascript
const value1 = null ?? 'hello' // value1 => 'hello'
const value2 = undefined ?? 55 // value2 => 55
```

> 注意：`??`运算符与 `||`不同，因此当你需要根据其他值来赋值时，应该选择正确的运算符！

### 逻辑非（！）

将真值交换为假值，将假值交换为真值。

还会将任何值转换为布尔值。所以所有真值都变成假值，反之亦然。

> 提示：我经常使用双逻辑运算符来将任何值转换为布尔值。它相当于使用布尔值（任何值哦）
> 
> 真真假假分不清，哈哈哈哈。真变假，假变真。

## 特殊运算符

### 可选链

它允许访问对象上的属性，而无需检查链中的每个引用是否有效。

是不是不明白？看看下面的例子你就知道了：

```javascript
const toto = { a: { b: 5 } }   //创建对象
toto.a // object: { b: 5 }
toto.a.b // 输出: 5
toto.a.b.c // 输出: undefined
toto.a.b.c.d // 错误: Uncaught TypeError: Cannot read properties of undefined
```

实际上，当你尝试访问未定义属性上的属性时，Javascript引擎将触发错误！

所以为了安全起见，我们需要像这样做：

```javascript
const toto = { a: { b: 5 } }
// 此处需要进行条件判断,看起的是不是很麻烦?
if (toto.a && toto.a.b && toto.a.b.c && toto.a.b.c.d) {
    console.log(toto.a.b.c.d) // 如果存在这个属性,则正常输出
}
```

但是这样不太方便，是吧？

所以可选链来拯救我们了。

如上所示，你可以尝试访问一个属性，而无需检查之前是否存在所有属性！你只需要在属性上使用此运算符，如果该属性不存在，则返回 `undefined`。

```javascript
const toto = { a: { b: 5 } }
toto?.a?.b // 5
toto?.a?.b?.c?.d // undefined  [此处不会报错,而是输出未定义]
```

### 三元运算符

这是JavaScript中唯一需要两个伪操作数（`?`和 `:`）的运算符。它根据条件是假还是真来评估条件。等价于 `if (...) & else (...)`。

```javascript
console.log( 2 > 1 ? '大于' : '不大于');  //输出: 大于

// 上面的表达式等同于下方if-else结构

if (2 > 1) {
    console.log('大于')
} else {
    console.log('小于')
}
```

## 比较运算符

### 相等（==）

检查两个操作数是否相等，并返回布尔结果。与 `===`（严格相等运算符）不同，它尝试转换（进行隐式强制）并比较不同类型的操作数。

```javascript
'24' == 24  // true
24 == 24  // true
24.0 == 24 //true
```

> 通常，你应该使用 `===`（严格相等），并避免使用此运算符！

### 严格相等（===）

检查两个操作数是否相等且类型一致时返回布尔结果。与 `==`（相等运算符）不同，严格相等运算符始终认为不同类型的操作数是不同的。

```javascript
1 === 1  // true
'hello' === 'hello'  // true
'1' ===  1     // false
```

> 你应该始终使用此运算符而不是 `==`（相等运算符）！

### 不等于（!=）

检查两个操作数是否不相等，并返回布尔结果。与 `!==`（严格不等于运算符）不同，它尝试转换和比较不同类型的操作数。

```javascript
1 != 2;    // true
1 != '1';  // false
1 != 1;    // false
'arvin' != 'Arvin';  // true
```

> 通常，你应该使用 `!==`（严格不等于）并避免使用此运算符！

### 严格不等于（!==）

检查两个操作数是否不相等，并返回布尔结果。与 `!=`（不等于运算符）不同，严格不等于运算符始终认为不同类型的操作数是不同的。

```javascript
1 !== 2;    // true
1 !== '1';  // true  *差异
1 !== 1;    // false
'arvin' !== 'Arvin';  // true
```

> 你应该始终使用此运算符而不是 `!=`（不等于）！

其实在JavaScript中还有很多运算符，这篇文章中只是讲解了一点点，其他的比较冷门，在这里我就不多说了。

最后祝大家编码愉快～

最后修改：2021 年 12 月 30 日

都滑到这里了，不点赞再走！？

2 条评论

干羽豪
2021-12-23 17:33:17

很不错！

回复
1. Arvin
  2021-12-23 17:34:13
  
  @干羽豪
  
  感谢支持~
  
  回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript运算符小技巧

Arvin • 2021 年 12 月 21 日

## 前言

在JavaScript中的有很多运算符，我们在使用的时候可能也只是使用到了其中个一小撮，今天这篇文章，简单总结了一下在JavaScript中运算符使用技巧。

## 加法（+）运算

如果在操作数之前使用 **`+`** 运算符，那么 **`+`** 就成为了一元加运算符。

一元加运算符位于操作数之前并计算操作数，并试图将操作数转换为数字（如果不是数字的话）。

```javascript
const x = 1
const y = -1

> 注意：如果将一元加运算符与不是数字的字符串一起使用，则返回NaN（not a number）

如果在其他上下文中使用 `+`运算符，则用作加法运算符。

将产生除字符串之外的数字操作数的总和。

> 注意：它会将布尔值转换为数字，将对象转换为数字。

```javascript
console.log(2 + 4) // 6
console.log(2 + true) // 3
```

当你将它与字符串一起使用时，将进行字符串连接

```javascript
const name = 'code oz'
console.log('hello ' + 'my name is ' + name);  //此处使用加号进行字符串连接
```

## 减法（-）运算

如果在操作数之前使用 `-`运算符，那么 `-`将用作一元否定运算符。

一元否定运算符位于操作数之前进行否定。

> 注意：它会将布尔值转换为数字，将对象转换为数字，将字符串转换为数字

```javascript
const a = 5
console.log(-a) // -5
console.log(-'1') // -1
```

> 注意：如果将其与不是数字的字符串一起使用，则返回 `NaN`（not a number）

如果在其他上下文中使用 `-`运算符，则用作减法运算符。

减去两个操作数，产生它们的差。

## 扩展 | rest参数 （...）

如果在函数参数中使用 `...`运算符，它将用作rest运算符。

它允许函数拥有无限数量的参数！

```javascript
let arr = [3, 5, 1]
Math.max(...arr) 	// 5
```

如果在其他上下文中使用 `...`运算符，它将用作扩展运算符。

如果将其用作函数中的参数：它将允许可迭代，例如函数参数中的数组表达式。

```javascript
//定义方法
const add = (...rest) => {
   return rest.reduce((total, current) => total + current) //计算总和
}

//方法调用
add(1, 2, 3)
add(1, 2, 3, 4, 5)
```

你还可以使用它从数组或对象中提取值。

```javascript
const [ firstItem, ...others ] = [ 1, 2, 3, 4 ]
firstItem // 1
others // [ 2, 3, 4 ]

const toto = { a: 1, b: 2, c: 3 }
const { a, ...others } = toto
a // 1   //匹配第一个参数
others // { b: 2, c: 3 }  //匹配剩余参数
```

> 注意：当你在做 `const toto = { ...anotherObject }`时，它等于 `const toto = Object.assign({}, anotherObject)`

## 逻辑运算符

### 逻辑与（&&）

用于检查所有值（通常值为条件）是否为真。

### 逻辑或（||）

用于检查一组值中的一个值（通常值是条件）是否为真。

在一组表达式中，只要有一组表达式返回结果为ture，则最终结果就是true，反之，当所有的表达式的返回值为false，则最终的返回结果才是false。

### 逻辑空合并（??）

当其左侧操作数为 `null`或 `undefined` （空值）时，返回其右侧操作数。

```javascript
const value1 = null ?? 'hello' // value1 => 'hello'
const value2 = undefined ?? 55 // value2 => 55
```

> 注意：`??`运算符与 `||`不同，因此当你需要根据其他值来赋值时，应该选择正确的运算符！

### 逻辑非（！）

将真值交换为假值，将假值交换为真值。

还会将任何值转换为布尔值。所以所有真值都变成假值，反之亦然。

> 提示：我经常使用双逻辑运算符来将任何值转换为布尔值。它相当于使用布尔值（任何值哦）
> 
> 真真假假分不清，哈哈哈哈。真变假，假变真。

## 特殊运算符

### 可选链

它允许访问对象上的属性，而无需检查链中的每个引用是否有效。

是不是不明白？看看下面的例子你就知道了：

实际上，当你尝试访问未定义属性上的属性时，Javascript引擎将触发错误！

所以为了安全起见，我们需要像这样做：

但是这样不太方便，是吧？

所以可选链来拯救我们了。

如上所示，你可以尝试访问一个属性，而无需检查之前是否存在所有属性！你只需要在属性上使用此运算符，如果该属性不存在，则返回 `undefined`。

```javascript
const toto = { a: { b: 5 } }
toto?.a?.b // 5
toto?.a?.b?.c?.d // undefined  [此处不会报错,而是输出未定义]
```

### 三元运算符

这是JavaScript中唯一需要两个伪操作数（`?`和 `:`）的运算符。它根据条件是假还是真来评估条件。等价于 `if (...) & else (...)`。

```javascript
console.log( 2 > 1 ? '大于' : '不大于');  //输出: 大于

// 上面的表达式等同于下方if-else结构

if (2 > 1) {
    console.log('大于')
} else {
    console.log('小于')
}
```

## 比较运算符

### 相等（==）

检查两个操作数是否相等，并返回布尔结果。与 `===`（严格相等运算符）不同，它尝试转换（进行隐式强制）并比较不同类型的操作数。

```javascript
'24' == 24  // true
24 == 24  // true
24.0 == 24 //true
```

> 通常，你应该使用 `===`（严格相等），并避免使用此运算符！

### 严格相等（===）

检查两个操作数是否相等且类型一致时返回布尔结果。与 `==`（相等运算符）不同，严格相等运算符始终认为不同类型的操作数是不同的。

```javascript
1 === 1  // true
'hello' === 'hello'  // true
'1' ===  1     // false
```

> 你应该始终使用此运算符而不是 `==`（相等运算符）！

### 不等于（!=）

检查两个操作数是否不相等，并返回布尔结果。与 `!==`（严格不等于运算符）不同，它尝试转换和比较不同类型的操作数。

```javascript
1 != 2;    // true
1 != '1';  // false
1 != 1;    // false
'arvin' != 'Arvin';  // true
```

> 通常，你应该使用 `!==`（严格不等于）并避免使用此运算符！

### 严格不等于（!==）

检查两个操作数是否不相等，并返回布尔结果。与 `!=`（不等于运算符）不同，严格不等于运算符始终认为不同类型的操作数是不同的。

```javascript
1 !== 2;    // true
1 !== '1';  // true  *差异
1 !== 1;    // false
'arvin' !== 'Arvin';  // true
```

> 你应该始终使用此运算符而不是 `!=`（不等于）！

其实在JavaScript中还有很多运算符，这篇文章中只是讲解了一点点，其他的比较冷门，在这里我就不多说了。

最后祝大家编码愉快～

JavaScript运算符小技巧

2 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Java基础之JDK的安装

开启Visual Studio Code编写jQuery语法提示

C#-WinForms实现手写板

使用GSAP实现滚动条交互动画

C# 中获取中文拼音、首字母

来自曾博旺同学的项目总结

HTML从入门到精通 - 浮动

解决Windows Update服务(wuauserv)拒绝访问

TreeView树状视图动态绑定

记-2021级理工大HTML项目答辩

JavaScript运算符小技巧

2 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript运算符小技巧

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款