日期：2023-03-23 学习目标：理解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。
JavaScript介绍
介绍
JavaScript是什么？ JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 JavaScript能做什么？ 网页特效 表单验证 数据交互 服务端编程 JavaScript的组成 ECMAScript+WebAPIs(DOM+BOM)
JavaScript书写位置
内部JavaScript：通过 script 标签包裹 JavaScript 代码 外部JavaScript：通过script的src属性引入独立的.js文件 [推荐] 行内JavaScript
JavaScript的结束符
在JavaScript中 ; 代表一段代码的结束，多数情况下可以省略
JavaScript的输入输出语法
输出
alert()页面弹出警告对话框
alert('你好，JS!')
document.wirte()向body内输出内容，如果输出的内容写的是标签，也会被解析成网页元素
document.write('你好，JS！')
document.write('<h1>一级标题</h1>')
console.log()控制台输出语法，调试使用
输入
prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
prompt('请输入购买数量')
JavaScript代码的执行顺序
按照HTML文档流顺序执行JavaScript代码 alert()和prompt()会跳过渲染先被执行
变量
变量是用于存储信息的"容器"。 变量不是数据本身，它们仅仅是一个用于存储数值的容器
声明变量
在 JavaScript 中创建变量通常称为"声明"变量（定义变量）。 语法：
let 变量名
- 声明变量有两部分构成：声明关键字、变量名（标识）
- let 即关键字（let:许可、让、要），所谓的关键字是系统提供的专门用来声明（定义）变量的词语
- let不允许多次声明同一个变量
声明多个变量：多个变量中间用 , 隔开（不推荐，可读性不好）
let age = 25，name = '小王'
赋值
变量声明之后，该变量是空的（它没有值），使用 = 对变量赋值
变量可以在声明后为其赋值，通常也可以在声明的同时直接对该变量赋值（称为变量初始化）
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
let age = 25
let name = '小王'
console.log(age)
console.log(name)
更新变量：重新给变量赋值
let age = 25
age = 28
输入用户名并输出：
let uname = prompt('请输入姓名')
document.write(uname)
交换两个变量：声明一个 临时变量temp 来做中间存储
let num1 = 20
let num2 = 6
let temp
temp = num1
num1 = num2
num2 = temp
变量的本质
内存：计算机中存储数据的地方，相当与一个空间 变量的本质：是程序在内存中申请的一块用来存放数据的空间
变量命名规则与规范
关于变量的名称（标识符）有一系列的规则和规范需要遵守 规则：
- 只能是字母、数字、下划线、$，且不能以数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用 规范：
- 尽量保证变量具有一定的语义，见字知义
- 遵守小驼峰命名法（第一个单词首字母小写，之后单词首字母大写，例如：userName）
let和var的区别
在较旧的JavaScript，使用关键字var来声明变量，而不是let,但现在的开发中一般不再使用。let的出现是为了解决var中的一些问题。
以下是使用 let 时的注意事项：
- 允许声明和赋值同时进行
- 不允许重复声明
- 允许同时声明多个变量并赋值
- JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var 时一些问题：
- 可以先使用再声明（不合理）
- 允许重复声明（不合理）
- 比如变量提升、全局变量、没有块级作用域等存在bug
数组
数组（Array）——是一种将一组数据存储在单个变量名下的方式
- 声明语法：
let arr = []let 数组名 = [数据1,数据2,...,数据n] - 使用数组
数组名[索引号]
let arr = ['刘邦','王莽','刘秀','刘备']
console.log(arr[2]) //控制台输出打印索引号为0的数据
- 数组内的数据按顺序保存，每个数据都有自己的编号，该编号称为索引号或下标号
- 数组中的编号从0开始
- 数组可以存储任意类型的数据
- 一些术语 元素：数组中保存的每个数据叫数组的元素 下标：数组中数据的编号 长度：数组中数据的个数，通过数组的length属性获得
//获取数组长度
console.log(arr.length)
数组长度=最后一个索引号+1
常量
当某个变量永远不会改变时,可以使用const来声明,此时就称其为常量
常量的声明:
const 常量名 = 常量值
- 常量声明时必须赋值(初始化)
- 常量不允许重新赋值,不允许再次声明
数据类型
JavaScript是一种有着动态类型的动态语言,这意味着相同的变量可用作不同的类型 同时它也是一种弱数据类型语言,这意味着当操作涉及不匹配的类型时,它将允许隐式类型转换
JavaScript中的数据类型整体分为两大类:
- 基本类型(原始类型) 数字型(number)、字符串型(string)、布尔型(boolean)、未定义型(undefined)、空类型(null)
- 引用类型 对象(object)、数组(Array)、函数(Function)
数字类型(number)
即数学中的数字，可以是整数、小数、正数、负数
了解： 数字类型可以加上前缀，来表示不同的进制 不写：表示10进制 0：表示8进制 0x：表示16进制 0b: 表示2进制
算术运算符 求和:+ 求差:- 求积:* 求商:/ 取模(取余数):% 常用于判断一个数能否被整除
console.log(4 % 2) // 求余数 0
console.log(5 % 3) // 求余数 2
console.log(3 % 5) // 求余数 3
了解: NaN代表一个计算错误,它是一个不正确的或者未定义的数学操作所得到的结果,例如
console.log('老王'+1)其返回值即为NaN NaN是粘性的,任何对NaN的操作都会返回NaN
字符串类型(string)
通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项:
- 无论单引号或是双引号,都必须成对使用
- 单引号或双引号可以互相嵌套，但是不能自已嵌套自已
- 必要时可以使用转义符
\，输出单引号或双引号
在字符串中，如需表示一个特殊字符，可以使用转义符 \
\n 换行符
\t 制表符
字符串拼接 可以使用 + 拼接字符串
let age = 25
document.write('小明今年' + '18岁了')
document.write('小明今年' + age + '岁了')
模板字符串
通常用于拼接字符串和变量
模板字符串的用法:
外面使用反引号包裹,出现的变量则使用${变量名}的形式
let name = prompt('请输入您的姓名:')
let like = prompt('请输入您的爱好:')
document.write(`大家好我叫${name},我的爱好是${like}!`)
布尔类型(boolean)
布尔类型用于表达真或假两种状态
- true，表示真
- false，表示假
未定义类型(undefined)
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined
空类型(null)
表示内容为空或值未知 只有一种数据书写方式：null
开发场景:若确定一个变量存放的是object,但并未准备好,可以先使用null代替
类型检测
在数据前加上typeof,例:
<script>
console.log(typeof 25);
console.log(typeof "25");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log({
name: "小王",
nickName: "八蛋",
age: 1000,
gender: true, //true表示男，false表示女
address: {
country: "帝国",
province: "天龙省",
city: "金龟城",
detail: "老王八街250号"
},
girlFriend: undefined
});
</script>
![[得到数据类型.jpg]]
类型转换
使用表单、prompt获取的数据默认为字符串类型，若牵扯到计算，需要转换为数字类型的数据
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。 隐式转换发生场景：
-
- 号两边只要有一个数据是字符串，都会把另外一个数据转成字符串
- 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
小技巧： 当 + 号作为正号时可以将数据转换成数字型 任何数据和字符串相加结果都是字符串型
![[隐式转换.jpg]]
显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
转换为数字型:
Number(数据)
let a = '10'
let b = 3
a = Number(a)
// 检测转换后的类型
// console.log(typeof a)
// 返回值为 number
console.log(a + b)
// 结果为 13
// 并不是所有的值都可以被转成数值类型
let str = 'abc'
// 将 abc 转成数值是不现实的，当无法转换成数值时，得到的结果为 NaN （Not a Number）
console.log(Number(str))
// 结果为 NaN
将字符串转换成数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
将布尔值转换成数字
Number(false) // 返回 0
Number(true) // 返回 1
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字。 NaN也是number类型的数据，代表非数字。
parseInt(数据)
转换成数字型，只保留整数
console.log(parseInt('12px')) //结果：12
console.log(parseInt('12.34px')) //结果：12
console.log(parseInt('12.94px')) //结果：12
console.log(parseInt('abc12.94px')) //结果：NaN
parseFloat(数据)
转换成数字型，保留小数
console.log(parseFloat('12px')) //结果：12
console.log(parseFloat('12.34px')) //结果：12.34
console.log(parseFloat('12.94px')) //结果：12.94
console.log(parseFloat('abc12.94px')) //结果：12.94
转换为字符串型
String(数据)
将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
将布尔值转换为字符串
String(false) // 返回 "false"
String(true) // 返回 "true"
变量.toString(进制)
进制不写即为10进制
将数字转换成字符串
x.toString() // 将变量 x 转换为字符串并返回
(123).toString() // 将数字 123 转换为字符串并返回
(100 + 23).toString() // 将数字表达式转换为字符串并返回
将布尔值转换成字符串
false.toString() // 返回 "false"
true.toString() // 返回 "true"
