这里是
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
是属于高阶进阶的语法,所以目前知道就好了,后面进阶可以学习使用。
总结
以上就是本期的所有内容了,也算是当我复习了一遍,如果有什么错误的地方,欢迎指正,如果有什么不懂的地方,也欢迎询问呀!