JavaScript：运算符_数据类型和流程循环语句

最新推荐文章于 2024-08-01 15:03:43 发布

脑袋不灵光的小白羊

最新推荐文章于 2024-08-01 15:03:43 发布

阅读量551

点赞数

分类专栏： WEB前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42588990/article/details/122324093

版权

WEB前端专栏收录该内容

36 篇文章 4 订阅

订阅专栏

数据类型

在这里插入图片描述

数据类型分类

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值，这里暂不涉及）

原始类型(基础类型)

在这里插入图片描述

var age = 20;
var name = "北京";
var learn = true;

合成类型(复合类型)

对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
在这里插入图片描述

var user = {
    name:"北京",
    age:20,
    learn:true
}

温馨提示
至于undefined和null，一般将它们看成两个特殊值。

typeof运算符

在这里插入图片描述
JavaScript 有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof

数值返回number

typeof 123 // "number"

字符串返回string

typeof '123' // "string"

布尔值返回boolean

typeof false // "boolean"

对象返回object

typeof {} // "object"

null和undefined的区别

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加
复杂度，令初学者困扰吗？这与历史原因有关

但是在大多数情况下：
基本数据类型一般初始化“没有”的时候，用undefined.
复合数据类型一班初始化“没有”的时候，用null.

算数运算符之加法运算符

在这里插入图片描述
加法运算符（+）是最常见的运算符，用来求两个数值的和

数值相加

var num1 = 10;
var num2 = 20;
num1 + num2; // 30

非数值相加

true + true // 2
1 + true // 2

与字符串相加
比较特殊的是，如果是两个字符串相加，这时加法运算符会变成连接运算符，返回一个新的字符串，将两个原字符串连接在一起。

'a' + 'bc' // "abc"

如果一个运算子是字符串，另一个运算子是非字符串，这时非字符串会转成字符串，再连接在一起。

1 + 'a' // "1a"
false + 'a' // "falsea"

运算符之算术运算符

在这里插入图片描述
加减乘除运算符
加减乘除运算符就是基本的数学运算符效果，其中加法比较特殊，之前已经讲过

10 + 10; // 20
100 - 10; // 90
10 * 2; //20
10 / 5; 2

余数运算符
余数运算符是比较常用的，因为在逻辑思维上寻找规律，余数运算符是很好用的

13 % 5 // 3

自增和自减运算符
自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1

var x = 1;
var y = 1;
++x // 2
--y // 0

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

var x = 1;
var y = 1;
x++ // 1
++y // 2

var x = 10;
var y = 20;
console.log(x++ + y);// 30

运算符之赋值运算符

在这里插入图片描述
赋值运算符（Assignment Operators）用于给变量赋值最常见的赋值运算符，当然就是等号（=）

// 将 1 赋值给变量 x
var x = 1;
// 将变量 y 的值赋值给变量 x
var x = y;

赋值运算符还可以与其他运算符结合，形成变体。下面是与算术运算符的结合

// 等同于 x = x + y
x += y
// 等同于 x = x - y
x -= y
// 等同于 x = x * y
x *= y
// 等同于 x = x / y
x /= y
// 等同于 x = x % y
x %= y

运算符之比较运算符

在这里插入图片描述
比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。

2 > 1 // true

JavaScript 一共提供了8个比较运算符。
在这里插入图片描述

“==”和“===”的区别
==：双等比较值
===：三等比较值和类型

运算符之布尔运算符

在这里插入图片描述
取反运算符（!）
布尔值取反

!true // false
!false // true

非布尔值取反
对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为 false。

温馨提示
undefined
null
false
0
NaN
空字符串（’’）

!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true
!54 // false
!'hello' // false

且运算符（&&）
多个条件都要满足

如果一个人一直做好事，突然有一天做了一件坏事，那么人们会认为这个人很虚伪，以前说不定都是装的！对这个人不再认可

console.log(10 < 20 && 10 >5); // true

或运算符（||）
满足一个条件即可

如果一个人一直做坏事，突然有一天做了一件好事，那么人们会认为这个人其实还不错，以前也许是另有原因！对这个人突然就认可了

 console.log(10 < 20 || 10 < 5); // true

运算符之位运算符

在这里插入图片描述
位运算符直接处理每一个比特位（bit），是非常底层的运算，好处是速度极快，缺点是很不直观，许多场合不能使用它们，否则会使代码难以理解和查错

快速计算位移方案

左移运算符就是*2的n次方（n代表位移次数）
右移运算符就是/2的n次方 (n代表位移次数，不同点，出现小数时要取整）

位运算演算过程
左移运算符 <<

console.log(5 << 2); // 20

在这里插入图片描述
右移运算符 >>

console.log(1000 >> 8); //3

在这里插入图片描述
十进制转为二进制
采用"除2取余，逆序排列"法：
假设我们现在需要将42转为二进制，那我们怎么做呢，如下图所示：

运算符优先级

JavaScript 各种运算符的优先级别是不一样的。优先级高的运算符先执行，优先级低的运算符后执行。

4 + 5 * 6 // 34

下述表格优先级由高到低
在这里插入图片描述

特别提示
如果多个运算符混写在一起，常常会导致令人困惑的代码,所以一般我们可以通过多条语句完成，记住所有运算符的优先级，是非常难的，也是没有必要的
解决方案
1 添加小括号()
2 分离开来，写成多条语句

类型转换

在这里插入图片描述
自动转换
遇到以下两种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见
第一种情况：不同类型的数据互相运算

123 + 'abc' // "123abc"

第二种情况：对非布尔值类型的数据求布尔值

!"hello"

强制转化
强制转换主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。

Number
使用Number函数，可以将任意类型的值转化成数值

// 数值：转换后还是原来的值
Number(324) // 324
// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324
// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN
// 空字符串转为0
Number('') // 0
// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

String
String函数可以将任意类型的值转化成字符串，转换规则如下

String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

Boolean
Boolean函数可以将任意类型的值转为布尔值
它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

undefined
null
-0或+0
NaN
‘’（空字符串）

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

条件语句之 if语句

if 结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true 表示真，false 表示伪。
在这里插入图片描述
if语句语法规范

if (布尔值){
   语句;
}
if (布尔值)
  语句;

建议总是在if语句中使用大括号，因为这样方便插入语句
需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中

var m = 3;
if (m === 3) {
    m++;
}
console.log(m); // 4

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。

var x = 1;
var y = 2;
if (x = y) {
    console.log(x);
}

条件语句之 if…else

if…else基本结构
if 代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。
在这里插入图片描述

if (m === 3) {
  // 满足条件时，执行的语句
} else {
  // 不满足条件时，执行的语句
}

多个if…else连接
对同一个变量进行多次判断时，多个if…else语句可以连写在一起。
在这里插入图片描述

if (m === 0) {
  // ...
} else if (m === 1) {
  // ...
} else if (m === 2) {
  // ...
} else {
  // ...
}

if…else嵌套

var eat = true;
var food = "猪肉炖粉条";
if (eat) {
    if (food == "双椒鱼头") {
        console.log('双椒鱼头'); 
   }else{
        console.log("猪肉炖粉条");
   }
} else {
    console.log('不吃了');
}

else代码块总是与离自己最近的那个if语句配对。

条件语句之 switch

多个if…else连在一起使用的时候，可以转为使用更方便的switch结构
在这里插入图片描述

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

var x = 1;
switch (x) {
  case 1:
    console.log('x 等于1');
  case 2:
    console.log('x 等于2');
  default:
    console.log('x 等于其他值');
}
// x等于1
// x等于2
// x等于其他值

需要注意的是，switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（===），而不是相等运算符（==），这意味着比较时不会发生类型转换。

var x = 1;
switch (x) {
  case true:
    console.log('x 发生类型转换');
  default:
    console.log('x 没有发生类型转换');
}
// x 没有发生类型转换

三元运算符

在这里插入图片描述
JavaScript还有一个三元运算符（即该运算符需要三个运算子） ?: ，也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2

在这里插入图片描述
这个三元运算符可以被视为if…else…的简写形式，因此可以用于多种场合。

判断一个整数是奇数与偶
if…else语句

var n = 100;
if (n % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

三元运算符

var n = 100;
n % 2 === 0 ? '偶数' : '奇数'

循环语句之for

循环语句用于重复执行某个操作
for语句就是循环命令，可以指定循环的起点、终点和终止条件。它的格式如下

for (初始化表达式; 条件; 迭代因子)
  语句
// 或者
for (初始化表达式; 条件; 迭代因子) {
  语句
}

我们总是推荐大家使用带有{}的方式
for 语句后面的括号里面，有三个表达式。

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}

for语句的三个表达式，可以省略任何一个，也可以全部省略。

for ( ; ; ){
  console.log('Hello World');
}

温馨提示
如果三个都省略，结果就导致了一个无限循环（死循环）

循环语句之while

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件) {
  语句;
}

在这里插入图片描述
while例子

var i = 0;
while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}

下面的例子是一个无限循环，因为循环条件总是为真

while (true) {
  console.log('Hello, world');
}

所有for循环，都可以改写成while循环

// for
var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}
// while
var x = 3;
var i = 0;
while (i < x) {
  console.log(i);
  i++;
}

循环语句之do…while

do…while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

do {
  语句
} while (条件);

在这里插入图片描述
do…while例子

var x = 3;
var i = 4;
do {
  console.log(i);
  i++;
} while(i < x);

break 语句和 continue 语句

在这里插入图片描述
break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行

break
break语句用于跳出代码块或循环

for (var i = 0; i < 5; i++) {
    if (i === 3){
        break;
   }
    console.log(i);
}

continue
continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

for (var i = 0; i < 5; i++) {
    if (i === 3){
        continue;
   }
    console.log(i);
}

在这里插入图片描述

字符串与数组

脑袋不灵光的小白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：运算符_数据类型和流程循环语句

数据类型数据类型分类JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值，这里暂不涉及）原始类型(基础类型)var age = 20;var name = "北京";var learn = true;合成类型(复合类型)对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器var user = { name:"北京", age:20,
复制链接

扫一扫

专栏目录