本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、数据类型、变量和运算符
1、数据类型
JavaScript 是一种动态类型语言，变量在运行时可以持有任何类型的数据。JavaScript 有 7 种基本数据类型（ES6+）：
1. 原始类型（Primitive Types）
-
Number: 数字类型（整数和浮点数）
javascriptlet age = 25; let price = 99.99; -
String: 字符串类型
javascriptlet name = "Alice"; let greeting = 'Hello World'; -
Boolean: 布尔类型（true/false）
javascriptlet isActive = true; let isCompleted = false; -
Null: 表示空值
javascriptlet emptyValue = null; -
Undefined: 未定义的值
javascriptlet uninitialized; console.log(uninitialized); // undefined -
Symbol (ES6): 唯一且不可变的值
javascriptlet sym1 = Symbol('id'); let sym2 = Symbol('id'); console.log(sym1 === sym2); // false -
BigInt (ES2020): 大整数
javascriptconst bigInt = 1234567890123456789012345678901234567890n;
2. 对象类型（Object Type）
- Object: 键值对的集合
javascriptlet 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, 函数作用域)
javascriptvar x = 10; -
let (ES6, 块级作用域
javascriptlet y = 20; -
const (ES6, 块级作用域，常量)
javascriptconst 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; // true4. 逻辑运算符
javascript
let x = 5, y = 10;
x && y; // 10 (逻辑与)
x || y; // 5 (逻辑或)
!x; // false (逻辑非)5. 位运算符
javascript
let a = 5; // 0101
let b = 3; // 0011
a & 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
!!""; // false2. 隐式转换
javascript
"5" + 1; // "51" (字符串连接)
"5" - 1; // 4 (减法转为数字)
"5" * "2"; // 10 (乘法转为数字)
if ("hello") { /* 会执行 */ } // 字符串转为true5、注意事项
-
浮点数精度问题：
javascript0.1 + 0.2 === 0.3; // false -
NaN (Not a Number)：
javascriptNaN === NaN; // false isNaN(NaN); // true -
对象比较：
javascript{} === {}; // false -
变量声明：
- 优先使用
const，其次是let，避免使用var const必须初始化
- 优先使用
-
类型检查：
- 使用
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);//underfind
a=10.11;
console.log(typeof a);//number
a="abcd";
console.log(typeof a);//string
a=false;
console.log(typeof a);//boolean
a={
name:'molly',
age:23,
add:'山西太原'
}
console.log(typeof a);//object
console.log(a);
a=[1,2,3,4,5];
console.log(typeof a);//object--array
console.log(a);
//变量
//一次可以声明多个变量并赋值
//运算符 算术运算符 关系运算符 逻辑运算符 位运算符
console.log('以下是运算符')
var a=10,b="10",c=20;
console.log(a+b)//string
console.log(a+c)//number
console.log(a%3)//取余
console.log(a==b)//只比较数据不比较类型
console.log(a===b)//只比较数据也比较类型
// console.log(a!=b)//a不等于b，！==是不全等于
//三目运算符 条件？执行1：执行2
var score=81;
score>=60? console.log('恭喜你，你过啦'):console.log('啊哈哈哈，你挂啦')
score>=80? console.log('优秀'):(score>=60? console.log('恭喜你，你过啦'):console.log('啊哈哈哈，你挂啦'))
</script>
</body>
</html>
代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了数据类型+变量+运算符，仅作为一份简单的笔记使用，大家根据注释理解
扫一扫
1694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
