JavaScript- 1.5 数据类型+变量+运算符

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！ 

系列文章目录 

JavaScript- 1.1 行内、内部、外部三种引用方式

JavaScript- 1.2 ECMA基本语法和控制流

JavaScript- 1.3 DOM对页面内容进行操作

JavaScript- 1.4 BOM对浏览器进行操作

JavaScript- 1.5 数据类型+变量+运算符

JavaScript- 1.6 基本控制流

JavaScript- 2.1 系统函数和自定义函数

JavaScript- 2.2 内置对象MATH

---

目录

系列文章目录 

前言

一、数据类型、变量和运算符

1、数据类型

1. 原始类型（Primitive Types）

2. 对象类型（Object Type）

3、类型检测

2、变量

1. 变量声明

2. 变量命名规则

3. 变量提升（Hoisting）

3、运算符

1. 算术运算符

2. 赋值运算符

3. 比较运算符

4. 逻辑运算符

5. 位运算符

6. 三元运算符

7. 类型运算符

8. 运算符优先级

4、类型转换

1. 显式转换

2. 隐式转换

5、注意事项

 二、代码实践

总结

---

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、数据类型、变量和运算符

1、数据类型

JavaScript 是一种动态类型语言，变量在运行时可以持有任何类型的数据。JavaScript 有 7 种基本数据类型（ES6+）：

1. 原始类型（Primitive Types）

• Number: 数字类型（整数和浮点数）

  javascript

  let age = 25;
  let price = 99.99;

• String: 字符串类型

  javascript

  let name = "Alice";
  let greeting = 'Hello World';

• Boolean: 布尔类型（true/false）

  javascript

  let isActive = true;
  let isCompleted = false;

• Null: 表示空值

  javascript

  let emptyValue = null;

• Undefined: 未定义的值

  javascript

  let uninitialized;
  console.log(uninitialized); // undefined

• Symbol (ES6): 唯一且不可变的值

  javascript

  let sym1 = Symbol('id');
  let sym2 = Symbol('id');
  console.log(sym1 === sym2); // false

• BigInt (ES2020): 大整数

  javascript

  const bigInt = 1234567890123456789012345678901234567890n;

2. 对象类型（Object Type）

• Object: 键值对的集合

  javascript

  let person = {name: "Bob",age: 30
  };

3、类型检测

javascript

typeof 42; // "number"
typeof "text"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof null; // "object" (历史遗留问题)
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"

2、变量

1. 变量声明

• var (ES5, 函数作用域)

  javascript

  var x = 10;

• let (ES6, 块级作用域

  javascript

  let y = 20;

• const (ES6, 块级作用域，常量)

  javascript

  const PI = 3.14159;

2. 变量命名规则

• 必须以字母、下划线(_)或美元符号($)开头
• 后续字符可以是字母、数字、下划线或美元符号
• 区分大小写
• 不能使用保留字

3. 变量提升（Hoisting）

javascript

console.log(a); // undefined (不是报错)
var a = 5;console.log(b); // ReferenceError: b is not defined
let b = 10;

3、运算符

1. 算术运算符

javascript

let a = 10, b = 3;a + b; // 13 (加法)
a - b; // 7 (减法)
a * b; // 30 (乘法)
a / b; // 3.333... (除法)
a % b; // 1 (取模/余数)
a ** b; // 1000 (指数)
a++; // 11 (后增)
++a; // 12 (前增)
a--; // 11 (后减)
--a; // 10 (前减)

2. 赋值运算符

javascript

let x = 10;x += 5; // x = x + 5 (15)
x -= 3; // x = x - 3 (12)
x *= 2; // x = x * 2 (24)
x /= 4; // x = x / 4 (6)
x %= 5; // x = x % 5 (1)
x **= 3; // x = x ** 3 (1)

3. 比较运算符

javascript

let a = 5, b = "5";a == b; // true (值相等)
a === b; // false (值和类型都相等)
a != b; // false (值不相等)
a !== b; // true (值或类型不相等)
a > b; // false
a < b; // false
a >= b; // true
a <= b; // true

4. 逻辑运算符

javascript

let x = 5, y = 10;x && y; // 10 (逻辑与)
x || y; // 5 (逻辑或)
!x; // false (逻辑非)

5. 位运算符

javascript

let a = 5; // 0101
let b = 3; // 0011a & b; // 0001 (1) 按位与
a | b; // 0111 (7) 按位或
a ^ b; // 0110 (6) 按位异或
~a; // 11111111111111111111111111111010 (-6) 按位非
a << 1; // 1010 (10) 左移
a >> 1; // 0010 (2) 右移
a >>> 1; // 0010 (2) 无符号右移

6. 三元运算符

javascript

let age = 20;
let status = (age >= 18) ? "成年" : "未成年"; // 成年

7. 类型运算符

javascript

typeof "text"; // "string"
a instanceof Array; // 检查a是否是Array的实例

8. 运算符优先级

运算符类型	运算符
成员访问	. []
调用/构造	() new
后置递增/递减	++ --
一元运算符	! ~ + - ++ -- typeof void delete
乘除	* / %
加减	+ -
位移	<< >> >>>
关系	< <= > >= in instanceof
相等	== != === !==
位与	&
位异或	^
位或	|
逻辑与	&&
逻辑或	||
条件	? :
赋值	= += -= *= /= %= <<= >>= >>>= &= ^= |=
逗号	,

4、类型转换

1. 显式转换

javascript

// 转为字符串
String(123); // "123"
(123).toString(); // "123"// 转为数字
Number("123"); // 123
parseInt("123px"); // 123
parseFloat("12.34"); // 12.34// 转为布尔值
Boolean(0); // false
!!""; // false

2. 隐式转换

javascript

"5" + 1; // "51" (字符串连接)
"5" - 1; // 4 (减法转为数字)
"5" * "2"; // 10 (乘法转为数字)if ("hello") { /* 会执行 */ } // 字符串转为true

5、注意事项

1. 浮点数精度问题：

   javascript

   0.1 + 0.2 === 0.3; // false

2. NaN (Not a Number)：

   javascript

   NaN === NaN; // false
   isNaN(NaN); // true

3. 对象比较：

   javascript

   {} === {}; // false

4. 变量声明：

   • 优先使用 const，其次是 let，避免使用 var
   • const 必须初始化

5. 类型检查：

   • 使用 typeof 时注意 null 的特殊情况
   • 检查数组使用 Array.isArray()

理解这些基本概念是掌握 JavaScript 的基础，它们在日常开发中无处不在。

 二、代码实践

代码如下：

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数据类型+变量+运算符</title></head><body><!-- //数据类型 --><script type="text/javascript">var a;console.log(typeof a);//underfinda=10.11;console.log(typeof a);//numbera="abcd";console.log(typeof a);//stringa=false;console.log(typeof a);//booleana={name:'molly',age:23,add:'山西太原'}console.log(typeof a);//objectconsole.log(a);a=[1,2,3,4,5];console.log(typeof a);//object--arrayconsole.log(a);//变量//一次可以声明多个变量并赋值//运算符 算术运算符 关系运算符 逻辑运算符 位运算符console.log('以下是运算符')var a=10,b="10",c=20;console.log(a+b)//stringconsole.log(a+c)//numberconsole.log(a%3)//取余console.log(a==b)//只比较数据不比较类型console.log(a===b)//只比较数据也比较类型// console.log(a!=b)//a不等于b，！==是不全等于//三目运算符 条件？执行1：执行2var score=81;score>=60? console.log('恭喜你，你过啦'):console.log('啊哈哈哈，你挂啦')score>=80? console.log('优秀'):(score>=60? console.log('恭喜你，你过啦'):console.log('啊哈哈哈，你挂啦'))</script></body>
</html>

代码运行如下：

---

总结

以上就是今天要讲的内容，本文简单记录了数据类型+变量+运算符，仅作为一份简单的笔记使用，大家根据注释理解