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运算符
22 5
|
1月前
|
JavaScript 前端开发
JavaScript 运算符全知道
JavaScript 运算符全知道
52 0
|
1月前
|
JavaScript
js---三元表达式详解
js---三元表达式详解
60 0
|
2月前
|
JavaScript 前端开发
JavaScript 运算符
JavaScript 运算符
21 3
|
3月前
|
JavaScript 前端开发
JavaScript 中的 typeof 运算符
【8月更文挑战第29天】
25 1
|
3月前
|
JavaScript 前端开发 安全
深入理解JavaScript中的比较运算符
深入理解JavaScript中的比较运算符
|
3月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
3月前
|
JavaScript 前端开发
JS常见的运算符有哪些?
JS常见的运算符有哪些?
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
这篇文章详细介绍了JavaScript中的强制类型转换、运算符(包括算术、逻辑、条件、赋值和关系运算符)的使用方法和优先级规则。
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符