JavaScript | 运算符与表达式

简介: 这里是`JavaScript`系列教程第四期啦!

这里是JavaScript系列教程第四期啦!

运算符

运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算。即使不是学习编程的,在学习数学的时候,就知道+-*%,这几个运算符。下面介绍几个常用的运算符。

赋值运算符

赋值运算符将它右边的操作数的值赋给左边的操作数,最简单的就是等于(=),举个栗子:x=y。就是将y赋值给x。当然还有一些复合赋值运算符:

名称 简写 含义
赋值 x=y x=y
加法赋值 x+=y x=x+y
减法赋值 x-=y x=x-y
乘法赋值 x*=y x=x*y
除法赋值 x/=y x = x/y
求余赋值 x%y=y x=x%y
求幂赋值 x**=y x=x**y

解构运算符

解构赋值语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。举个栗子:

// 数组
const list = ['orange','blue','green']

// 不使用结构
const orange = list[0]
const blue = list[1]
const green = list[2]

// 使用解构
const [orange,blue,green] = list

// 对象
const person = {name:'orange',age:18}

// 不使用解构
let obj = {}
const obj.name = person.name
const obj.age = person.age

// 使用解构
obj = {...person}

比较运算符

比较运算符比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字,字符串,逻辑,对象值。以下是常用的比较运算符:

运算符中文 运算符 描述 返回为true的栗子
等于 == 如果两边操作数相等时返回 true。 1==1,1=='1',
不等于 如果两边操作数不相等时返回 true 1≠2,1≠'2'
全等于 === 两边操作数相等且类型相同时返回 true。 1===1,'1'==='1'
不全等于 ≠= 两边操作数不相等或类型不同时返回 true。 1≠=2,'1'≠='2'
大于 > 左边的操作数大于右边的操作数返回 true。 2>1,'3'>2
大于等于 左边的操作数大于或等于右边的操作数返回 true。 2≥1'2'≥2
小于 < 左边的操作数小于右边的操作数返回 true。 1<2,'2'<3
小于等于 左边的操作数小于或等于右边的操作数返回 true。 1≤2,'2'≤2

算数运算符

算术运算符使用数值 (字面量或者变量) 作为操作数并返回一个数值。标准的算术运算符就是加减乘除 (+ - * /)。举个栗子:

const num = 2
2/2; // 1
2/num; // 1
2+num; // 4
2-num; // 0
2*num; // 4

以上是基本的加减乘除,在JavaScript中,还有其他常用的:

运算符中文 运算符 描述 栗子
求余 % 二元运算符。返回相除之后的余数。 12%5=2
自增 ++ 一元运算符。将操作数的值加一。如果放在操作数前面(++x),则返回加一后的值;如果放在操作数后面(x++),则返回操作数原值,然后再将操作数加一。 let x = 1; ++x; // 2 let y = 2; y++; // 1
自减 - - 一元运算符。将操作数的值减一。前后缀两种用法的返回值类似自增运算符。 let x = 1; - -x; // 0 let y = 2; y- -; // 2
一元负值符 - 一元运算符,返回操作数的负值。 const x = 3 -x //-3
一元正值符 + 一元运算符,如果操作数在之前不是数值,试图将其转换为数值。 +'3'; // 3 '3'; // '3' +true; // 1

逻辑运算符

逻辑运算符也是非常重要的,简单的理解为有三种,且或非。

运算符中文 运算符 描述
&& 符号左边和符号右边的同时满足,返回为true,否则返回false
符号左边和符号右边的满足一个,返回为true,否则返回false
如果操作数能够转换为true则返回 false;否则返回 true

举个栗子:

let num1 = 1,num2 = 2;
// 且
num1 == 1 && num2 == 2 // true
num1 == 1 && num2 == 3 // false
// 或
num1 == 1 || num2 == 3 // true
num1 == 2 || num2 == 3 // false
// 非
!num2 // false
const n1 = !true // false
const n2 = !false; // true

条件运算符

条件运算符又被叫做三目运算符,是 JavaScript 中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。语法为:

条件 ? 值 1 : 值 2

翻译一下,就是如果条件是真的,那么取值1,否则取值2。

举个栗子:

const age = 18
const name = age>18?'orange':'alex'

翻译一下就是,定义一个年龄为18,定义一个姓名,如果年龄大于18的,姓名就是orange,否则就是alex。从以上代码看,结果就是alex

表达式

表达式是一组代码的集合,它返回一个值。表达式有很多类型:

  • 算术表达式,也就是通常使用加减乘除之类的算术运算符。
  • 字符串表达式,使用字符串运算符,类似于'age'+'18',结果为'age18'
  • 逻辑表达式 ,就是使用逻辑运算符的表达式。返回true或者false
  • 基本表达式,JavaScript中基本的关键字和一般表达式。
  • 左值表达式,分配给左值。

基本表达式

this

this关键字被用于指代当前的对象,通常,this指代的是方法中正在被调用的对象。先了解就好,知道有这个,以后会用到。

function

function 关键字定义了函数表达式。在es5 中,我们定义函数会使用function

class

class 关键字定义了类表达式。在一些抽象方法会使用。

async和await

这两个是配合使用的,表示的是异步使用方法,等待一个执行完毕后,在执行下一个。

左值表达式

new

new 运算符创建了构造函数实例。举个栗子:

const obj = new Object() // 定义一个对象
const arr = new Array() // 定义一个数组
const str = new String() // 定义一个字符串
const num = new Number() // 定义一个数值
...

super

super 关键字调用父类的构造器。这个一般在使用class类定义一个类后,又使用class定义一个子类,子类需要继承父类的属性时候,就会使用到super。举个栗子:

class Person {
  constuctor(name,age){
    this.name = name
    this.age = age
    this.id = '1'
  }
  logAll(){
    console.log('名字叫做:' + this.name + '年龄为:' + this.age + 'id为' + this.id)
  }
}

class Student extends Person {
  constuctor(address){
    super(address) // 我们必须先使用super,下面才能使用this获取id
    this.id = '2' // 这里就是继承了Person类里面的属性id,并且更改了它,
  }
}

当然以上的class是属于高阶进阶的语法,所以目前知道就好了,后面进阶可以学习使用。

总结

以上就是本期的所有内容了,也算是当我复习了一遍,如果有什么错误的地方,欢迎指正,如果有什么不懂的地方,也欢迎询问呀!

相关文章
|
1月前
|
JavaScript 前端开发 开发者
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
|
1月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
12 0
|
12天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
3天前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
9 1
|
4天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
6 1
|
6天前
|
JavaScript
js的一些运算符规则
js的一些运算符规则
11 1
|
6天前
|
JavaScript
js的比较运算符
js的比较运算符
13 1
|
6天前
|
JavaScript 前端开发
js的运算符
js的运算符
13 2
|
13天前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别,本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较,而`===`不转换类型,要求完全相等。在比较对象时,`==`只比较引用,`===`比较内容。推荐使用`===`以确保准确性,但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中,应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。
|
16天前
|
JavaScript 前端开发 开发者
解密 JavaScript 中的三元运算符:简洁而强大的条件表达式
解密 JavaScript 中的三元运算符:简洁而强大的条件表达式
18 0