JavaScript基础知识2（常量、数据类型、类型转换、算术运算符优先级）
常量
概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致
const PI = 3.14
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
数据类型
计算机世界中的万事成物都是数据。
计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：
注：通过 typeof 关键字检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 检测 1 是什么类型数据，结果为 number
document.write(typeof 1)
</script>
</body>
</html>
数值类型
即我们数学中学习到的数字，可以是整数、小数、正数、负数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let score = 100 // 正整数
let price = 12.345 // 小数
let temperature = -40 // 负数
document.write(typeof score) // 结果为 number
document.write(typeof price) // 结果为 number
document.write(typeof temperature) // 结果为 number
</script>
</body>
</html>
JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。
字符串类型
通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
- 必要时可以使用转义符
\，输出单引号或双引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let user_name = '小明' // 使用单引号
let gender = "男" // 使用双引号
let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
let str1 = '' // 这种情况叫空字符串
documeent.write(typeof user_name) // 结果为 string
documeent.write(typeof gender) // 结果为 string
documeent.write(typeof str) // 结果为 string
</script>
</body>
</html>
字符串拼接：
场景：+运算符 可以实现字符串的拼接
口诀：数字相加，字符相连（只要+左右有字符串就是拼接）
模板字符串（Template Strings）是 ES6（ECMAScript 2015）引入的一个新特性，使得在字符串中嵌入变量和表达式变得更加方便和直观。模板字符串使用反引号（`）而不是普通的单引号或双引号来定义。
模板字符串基本用法
-
嵌入变量：
使用${}语法在字符串中嵌入变量。let name = 'Alice'; let greeting = `Hello, ${name}!`; console.log(greeting); // 输出 "Hello, Alice!" -
嵌入表达式：
在${}中可以嵌入任意的 JavaScript 表达式。let a = 10; let b = 20; let result = `The sum of ${a} and ${b} is ${a + b}.`; console.log(result); // 输出 "The sum of 10 and 20 is 30." -
多行字符串：
模板字符串可以轻松创建多行字符串，而不需要使用换行符\n。let multiLine = `This is a string that spans across multiple lines.`; console.log(multiLine); // 输出： // This is a string // that spans across // multiple lines.
你的例子改写成模板字符串
我们可以使用模板字符串来改写你之前的代码，以便更直观地输出结果：
const pi = 3.14;
let r = prompt('请输入半径：');
r = parseFloat(r); // 将字符串转换为数字
if (isNaN(r)) {
console.log('请输入一个有效的数字作为半径。');
} else {
let circle = pi * r * r;
console.log(`半径为 ${r} 的圆的面积是：${circle}`);
}
详细解释
-
定义常量和获取输入：
const pi = 3.14; let r = prompt('请输入半径：'); r = parseFloat(r); // 将字符串转换为数字 -
输入验证：
if (isNaN(r)) { console.log('请输入一个有效的数字作为半径。'); } else { let circle = pi * r * r; console.log(`半径为 ${r} 的圆的面积是：${circle}`); }
完整示例（使用模板字符串）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算圆的面积</title>
</head>
<body>
<script>
const pi = 3.14;
let r = prompt('请输入半径：');
r = parseFloat(r); // 将字符串转换为数字
if (isNaN(r)) {
console.log('请输入一个有效的数字作为半径。');
} else {
let circle = pi * r * r;
console.log(`半径为 ${r} 的圆的面积是：${circle}`);
}
</script>
</body>
</html>
在这个示例中，我们使用模板字符串来构建输出消息，使得代码更简洁和易读。模板字符串不仅支持嵌入变量和表达式，还可以方便地处理多行文本，提升代码的可读性和维护性。
布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// pink老师帅不帅？回答 是 或 否
let isCool = true // 是的，摔死了！
isCool = false // 不，套马杆的汉子！
document.write(typeof isCool) // 结果为 boolean
</script>
</body>
</html>
undefined
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 只声明了变量，并末赋值
let tmp;
document.write(typeof tmp) // 结果为 undefined
</script>
</body>
</html>
注：JavaScript 中变量的值决定了变量的数据类型。
typeof 是 JavaScript 中的一个操作符，用于确定变量或表达式的类型。它返回一个字符串，表示操作数的类型。
获取数据类型使用 typeof
语法：
typeof operand
operand 可以是任意变量、值或表达式。
返回值
typeof 操作符返回以下字符串之一，表示操作数的类型：
"undefined"：如果变量未定义。"boolean"：如果变量是布尔值。"number"：如果变量是数字（包括 NaN）。"string"：如果变量是字符串。"object"：如果变量是对象（包括数组和null）。"function"：如果变量是函数。"bigint"：如果变量是 BigInt（大整数）。"symbol"：如果变量是 Symbol。
示例
console.log(typeof undefined); // "undefined"
console.log(typeof true); // "boolean"
console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (数组也是对象)
console.log(typeof null); // "object" (这是一个历史遗留的 bug)
console.log(typeof function(){}); // "function"
console.log(typeof BigInt(123)); // "bigint"
console.log(typeof Symbol('symbol')); // "symbol"
示例解释
-
undefined：let a; console.log(typeof a); // "undefined" -
boolean：let b = true; console.log(typeof b); // "boolean" -
number：let c = 42; console.log(typeof c); // "number" -
string：let d = 'hello'; console.log(typeof d); // "string" -
object（包括数组和null）：let e = {}; console.log(typeof e); // "object" let f = []; console.log(typeof f); // "object" let g = null; console.log(typeof g); // "object" -
function：let h = function(){}; console.log(typeof h); // "function" -
bigint：let i = BigInt(123); console.log(typeof i); // "bigint" -
symbol：let j = Symbol('symbol'); console.log(typeof j); // "symbol"
示例应用
在你的代码中，我们可以用 typeof 来检查用户输入的类型，并确保输入的是一个数字：
const pi = 3.14;
let r = prompt('请输入半径：');
r = parseFloat(r); // 将字符串转换为数字
if (isNaN(r)) {
console.log('请输入一个有效的数字作为半径。');
} else {
let circle = pi * r * r;
console.log(`半径为 ${r} 的圆的面积是：${circle}`);
console.log(`类型检查：radius 是 ${typeof r}，面积是 ${typeof circle}`);
}
在这个示例中，我们使用 typeof 来输出 r 和 circle 的类型，帮助我们确认输入和计算的正确性。
类型转换
理解弱类型语言的特征，掌握显式类型转换的方法
在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
let num = 13 // 数值
let num2 = '2' // 字符串
// 结果为 132
// 原因是将数值 num 转换成了字符串，相当于 '13'
// 然后 + 将两个字符串拼接到了一起
console.log(num + num2)
// 结果为 11
// 原因是将字符串 num2 转换成了数值，相当于 2
// 然后数值 13 减去 数值 2
console.log(num - num2)
let a = prompt('请输入一个数字')
let b = prompt('请再输入一个数字')
alert(a + b);
</script>
</body>
</html>
注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换(+)。
在 JavaScript 中，数据类型的隐式转换（也称为类型强制转换）指的是 JavaScript 自动将一种数据类型转换为另一种数据类型，以执行特定操作。这种转换可以发生在许多情况下，例如在使用算术运算符 + 时。下面是一些常见的隐式转换场景和示例：
算术运算符 +
+ 运算符既可以用于数值相加，也可以用于字符串连接。当操作数中有一个是字符串时，JavaScript 会将另一个操作数转换为字符串，然后执行字符串连接。
示例：
let result1 = 1 + 2; // 数字相加，结果是 3
let result2 = '1' + 2; // 字符串和数字相加，数字被转换为字符串，结果是 '12'
let result3 = 1 + '2'; // 数字和字符串相加，数字被转换为字符串，结果是 '12'
let result4 = '1' + '2'; // 字符串相加，结果是 '12'
console.log(result1); // 3
console.log(result2); // '12'
console.log(result3); // '12'
console.log(result4); // '12'
其他运算符
对于其他算术运算符（如 -、*、/ 等），JavaScript 会将操作数转换为数字，然后进行运算。
示例：
let result5 = '5' - 2; // 字符串 '5' 被转换为数字 5，结果是 3
let result6 = '5' * 2; // 字符串 '5' 被转换为数字 5，结果是 10
let result7 = '5' / 2; // 字符串 '5' 被转换为数字 5，结果是 2.5
console.log(result5); // 3
console.log(result6); // 10
console.log(result7); // 2.5
比较运算符
比较运算符（如 == 和 !=）会进行类型转换后再进行比较，而严格比较运算符（如 === 和 !==）不会进行类型转换。
示例：
let result8 = '5' == 5; // '5' 被转换为数字 5，结果是 true
let result9 = '5' === 5; // 类型不同，不进行转换，结果是 false
console.log(result8); // true
console.log(result9); // false
布尔上下文
在布尔上下文中（如条件语句中），非布尔值会被转换为布尔值。以下值会被转换为 false：false、0、-0、0n、""、null、undefined 和 NaN。其他值会被转换为 true。
示例：
let result10 = Boolean(0); // false
let result11 = Boolean(''); // false
let result12 = Boolean(1); // true
let result13 = Boolean('hello'); // true
if ('hello') {
console.log('This is true!'); // This will be printed
}
console.log(result10); // false
console.log(result11); // false
console.log(result12); // true
console.log(result13); // true
对象到原始值的转换
当对象参与运算时，JavaScript 会尝试将对象转换为原始值。具体的转换过程取决于对象的 toString 和 valueOf 方法。
示例：
let obj = {
toString() {
return '42';
}
};
let result14 = obj + 1; // 对象被转换为字符串 '42'，然后进行字符串连接，结果是 '421'
console.log(result14); // '421'
总结
JavaScript 中的隐式转换有时会导致意想不到的结果，因此在编写代码时需要小心。为了避免潜在的问题，建议尽量使用显式转换，如使用 Number()、String() 和 Boolean() 函数来明确转换类型，并使用严格比较运算符 === 和 !== 来避免不必要的类型转换。
显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
Number
通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
let t = '12'
let f = 8
// 显式将字符串 12 转换成数值 12
t = Number(t)
// 检测转换后的类型
// console.log(typeof t);
console.log(t + f) // 结果为 20
// 并不是所有的值都可以被转成数值类型
let str = 'hello'
// 将 hello 转成数值是不现实的，当无法转换成
// 数值时，得到的结果为 NaN （Not a Number）
console.log(Number(str))
</script>
</body>
</html>
Number(), parseInt(), 和 parseFloat() 是 JavaScript 中用于将字符串转换为数字的三种常用方法。它们各自有不同的用途和行为。下面是它们的详细解释和用法：
Number()
Number() 函数用于将一个值转换为数字类型。如果转换失败，则返回 NaN（表示不是一个数字）。
用法：
let num1 = Number('123'); // 123
let num2 = Number('123.45'); // 123.45
let num3 = Number('abc'); // NaN
let num4 = Number(true); // 1
let num5 = Number(false); // 0
let num6 = Number(null); // 0
let num7 = Number(undefined); // NaN
特点：
- 转换布尔值：
true转换为1，false转换为0。 - 转换
null为0，undefined转换为NaN。 - 如果字符串包含非数字字符（除了小数点），转换结果为
NaN。
parseInt()
parseInt() 函数用于将字符串转换为整数。它解析一个字符串参数，并返回一个指定基数的整数。
用法：
let num1 = parseInt('123'); // 123
let num2 = parseInt('123.45'); // 123
let num3 = parseInt('abc'); // NaN
let num4 = parseInt('123abc'); // 123
let num5 = parseInt('0x10'); // 16 (16进制)
let num6 = parseInt('10', 2); // 2 (2进制)
特点：
- 只解析字符串中的整数部分，忽略小数部分。
- 忽略前导空格。
- 如果字符串以
0x开头，默认使用 16 进制。 - 可以指定基数（进制）作为第二个参数，例如
parseInt('10', 2)将字符串10解析为二进制数2。
parseFloat()
parseFloat() 函数用于将字符串转换为浮点数。它解析一个字符串参数，并返回一个浮点数。
用法：
let num1 = parseFloat('123'); // 123
let num2 = parseFloat('123.45'); // 123.45
let num3 = parseFloat('abc'); // NaN
let num4 = parseFloat('123abc'); // 123
let num5 = parseFloat('123.45.67'); // 123.45 (只解析第一个小数点部分)
特点：
- 解析字符串中的浮点数，返回浮点数。
- 忽略前导空格。
- 只解析第一个小数点及其后的数字，后续的小数点和字符被忽略。
示例对比
以下是这三种方法的使用示例：
let str = '123.45abc';
let num1 = Number(str); // NaN，因为字符串包含非数字字符
let num2 = parseInt(str); // 123，解析整数部分，忽略小数和后续字符
let num3 = parseFloat(str); // 123.45，解析浮点数部分，忽略后续字符
console.log(`Number: ${num1}`); // 输出 "Number: NaN"
console.log(`parseInt: ${num2}`); // 输出 "parseInt: 123"
console.log(`parseFloat: ${num3}`); // 输出 "parseFloat: 123.45"
应用场景
Number()：用于严格的数值转换，当需要确保整个字符串都是数字时使用。parseInt()：用于将字符串解析为整数，特别是当字符串包含整数部分时。parseFloat()：用于将字符串解析为浮点数，特别是当字符串包含小数部分时。
理解这三种方法的不同用途和特点，可以帮助你在处理字符串和数字转换时选择合适的方法。如果你有更多问题或需要进一步的解释，请告诉我！
算术运算符优先级
JavaScript 中的算术运算符有特定的优先级，决定了在表达式中它们的计算顺序。了解这些优先级可以帮助你正确地书写和理解复杂的表达式。以下是 JavaScript 中常见算术运算符的优先级，从高到低列出：
-
括号
()：优先级最高，用于明确表达式的计算顺序。let result = (2 + 3) * 4; // 20，而不是 2 + (3 * 4) = 14 -
递增
++和递减--（前缀形式）：let a = 1; let b = ++a; // a 变成 2，b 也是 2 -
一元正
+和一元负-：用于单个操作数。let a = -5; let b = +a; // -5 -
递增
++和递减--（后缀形式）：let a = 1; let b = a++; // b 是 1，a 变成 2 -
乘法
*，除法/和取模%：let result = 2 * 3 / 4 % 5; // (2 * 3) / 4 = 1.5, 1.5 % 5 = 1.5 -
加法
+和减法-：let result = 2 + 3 - 4; // 1 -
关系运算符（例如
>，>=，<，<=）和等号运算符（例如==，!=，===，!==）：这些运算符在逻辑表达式中有重要作用，但优先级低于算术运算符。
完整优先级列表
以下是一个更完整的优先级列表，包含算术运算符和其他常用运算符：
-
成员访问
.：object.property -
函数调用
()：myFunction() -
对象属性访问
[]：object['property'] -
new（带参数列表）：
new MyConstructor(arg1, arg2) -
递增
++和递减--（前缀形式）：++a --a -
一元运算符
+，-，~，!：-a !a -
乘法
*，除法/，取模%：a * b a / b a % b -
加法
+和减法-：a + b a - b -
位移运算符
<<，>>，>>>：a << b a >> b a >>> b -
关系运算符
<，<=，>，>=：a < b a <= b a > b a >= b -
等号运算符
==，!=，===，!==：a == b a != b a === b a !== b -
按位与
&：a & b -
按位异或
^：a ^ b -
按位或
|：a | b -
逻辑与
&&：a && b -
逻辑或
||：a || b -
三元运算符
? :：condition ? expr1 : expr2 -
赋值运算符
=，+=，-=，*=，/=，%=：a = b a += b a -= b a *= b a /= b a %= b -
逗号运算符
,：a, b
示例解释
以下是一个示例，展示了这些运算符的优先级：
let a = 10;
let b = 5;
let c = 2;
let result = a + b * c; // b * c 先计算，然后再加上 a
console.log(result); // 20
let resultWithParens = (a + b) * c; // a + b 先计算，然后乘以 c
console.log(resultWithParens); // 30
通过了解和使用这些优先级规则，可以确保在编写复杂表达式时正确地计算结果。如果需要改变默认的运算顺序，可以使用括号来明确指定计算顺序。
特别注意：
prompt 返回的是字符串：prompt 函数返回的值是字符串，所以在使用它进行算术运算之前，需要将其转换为数字。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
