JavaScript基础 - 变量、常量、数据类型
一、介绍
1.1 基本介绍
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
JavaScript的 |MDN的 (mozilla.org)
HTML和CSS是标记语言
可以实现
-
网页特效（监听用户的一些行为让网页做出对应的反馈）
-
表单验证（针对表单数据的合法性进行判断）
-
数据交互（获取后台的数据，渲染到前端）
-
服务端编程（node.js）
JS整体分成两大类
- ECMAScript
JavaScript语言基础或者说是基本语法，规定了js基础语法核心知识
比如：变量、分支语句、循环语句、对象等等
JavaScript遵循的是ECMAScript规范，JScript（微软研发的脚本语言）也遵循这个规范
-
Web APIs
包含了DOM和BOM
-
DOM 操作文档
比如对页面元素进行移动、大小、添加删除等操作
-
BOM 操作浏览器
比如页面弹框、检测窗口宽度、存储数据到浏览器等
-
1.2 书写位置
如何向页面添加JavaScript
1.2.1行内 JavaScript
代码写在标签内部
语法
之后vue框架会使用这种模式
<body>
<button onclick="alert('逗你玩~')">
点击我月薪过万
</button>
</body>
1.2.2 内部 JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在</body>上面
拓展：alert(‘你好，js’)页面弹出警告对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--内部JS-->
<script>
//页面弹出警示框
alert('你好，js')
</script>
</body>
</html>
我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML
如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效
因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略
比如下方代码，我们在html下面引入的JavaScript，之后在script标签中获取button的DOM元素
假如说先获取DOM元素，再加载HTML中的标签的话，是获取不到button的DOM元素的
1.2.3 外部 JavaScript
代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中
<body>
<!--外部JS-->
<script src="./js/my.js">
//中间不要写内容
</script>
</body>
script标签中间无需写代码，否则会被忽略
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，html也会更加易读，这是一个好习惯
1.3 注释与结束符
-
单行注释
符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl+/
-
块注释
符号：/* */
作用：在/* 和 */之间的所有内容都会被忽略
快捷键：shift+alt+a
快捷键在不同软件中可能是不同的
-
结束符
作用：使用英文的分号“;”代表语句结束
实际情况：实际开发中，可写可不写，浏览器（JavaScript引擎）可以自动判断语句的结束为止
现状：在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写
1.4 输入与输出语法
输入和输出也可以理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这边是一次输入和输出的过程
输出语法
- 语法1
<script>
document.write('要输出的内容')
document.write('<h1>我是一级标题</h1>')
</script>
作用：向body内输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素
效果图：
- 语法2
<script>
//页面弹出警示框
alert('你好，js')
</script>
作用：页面弹出警告对话框
- 语法3
console.log('控制台打印')
作用：控制台输出语法，程序员调试使用
输入语法
<script>
prompt('请输入您的姓名')
</script>
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
alter()和promte()它们会跳过页面渲染先被执行
1.5 字面量
在计算机科学中，字面量（literal）是在计算机中描述事/物
比如：
工资1000，其中‘1000’就是数字字面量
‘zhangjingqi’ 是字符串字面量，还有其他的’[ ]‘数组字面量，’{ }’ 对象字面量等
二、变量
变量是计算机存储数据的容器
变量不是数据本身，他们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
2.1 语法
要想使用变量，需要先创建变量（也称为声明变量或者定义变量）
- 声明语法
let 变量名
声明变量有两部分：声明关键字、变量名
let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语
举例
声明age变量，age即是变量的名称，也叫标识符
let age
我们同时可以声明多个变量
多个变量中间用逗号隔开，但是为了更好的可读性，一般一行只声明一个变量即可
let age=18,uname='zhangjingqi'
- 赋值语法
定义了一个变量后，便能初始化它
语法
let age = 20
let name
name=zhangjingqi
- 更新语法
变量赋值后，还可以通过简单的给他一个不同的值来更新
let age = 20
age=18
2.2 变量案例
- 变量案例1：将输入的变量输出到页面
<script>
let uname = prompt('请输入您的姓名：')
document.write(uname)
</script>
- 变量案例2：交换变量的值
需求：
有两个变量：num1里面放的事10，num2里面放的是20
最后变为num1里面放的是20，num2里面放的是10
<script>
let num1=10
let num2=20
let temp
temp=num1
num1=num2
num2=temp
alert('num1:'+num1)
alert('num2:'+num2)
</script>
2.3 变量本质
计算机中存储数据的地方，相当于一个空间
变量本质，是程序在内容中申请的一块用来存放数据的小空间
2.4 命名规范
规则：必须遵守，不遵守会报错（法律层面）
规范：建议，不遵守不会报错，但不符合业内通识
规则
- 不能用关键字
- 只能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写，如Age和age是不同的变量
规范
-
起名要有意义
-
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写
2.5 var与let区别
在较旧的JavaScript中，使用关键字var来声明变量，而不是let
var现在开发中一般不再使用它，可能在老程序中看到
let为了解决var的一些问题
var声明：
- 可以先使用再声明（不合理）
- var声明过的变量可以重复声明（不合理）
- 比如变量提升、全局变量、没有块级作用域等等
2.6 数组 Array
一种将一组数据存储在单个变量名下的优雅方式
声明方式
let 数组名=[数据1,数据2,....,数据n]
示例
<script>
let arr=['qwe',123]
console.log(arr)
</script>
也可以看出数组是有序的，并且数组可以存储任意类型的数据
下面会把下标为0的数据输出到控制台
console.log(arr[0])
三、常量
概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明
明明规范：同变量
常量的使用：
const G=9.8
consule.log(G)
注意：常来那个不允许重新赋值，声明的时候必须赋值
不需要重新赋值的数据使用const
四、数据类型
为什么要给数据分类？
更加充分和高校的利用内存
更加方便程序员使用数据，因为有的地方需要字符串，有的地方需要数字
JS数据类型整体分为两大类
- 基本数据类型
- 引用数据类型
4.1 基本数据类型
4.1.1 number 数字类型
- 可以是整数、小数、正数、负数
JavaScript是弱数据类型，变量到底属于哪种类型，只有赋值之后才能确认
let age=18 //整数
let price=88.99 //小数
- 算数运算符
先乘除，后加减，有括号先算括号里面的
- NaN
NaN代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN是粘性的，任何对NaN的操作都会返回NaN
console.log('老师' - 2) //NaN
console.log(NaN + 2) //NaN
console.log(undefined + 1) //NaN
4.1.2 string 字符串
通过单引号、双引号或反引号包裹的数据都叫字符串，单引号和双引号没有本质的区别，推荐单引号
let uname='张三' //单引号
let gender="男" //双引号
let goods=`小米` //反引号
let tel='1388888888' //看上去是数字，其实是字符串
let str='' //空字符串
- 无论打印好或是双引号，都必须成对使用
- 单引号/双引号可以互相嵌套，但是不可以自己嵌套自己（外双内单或者外单内双）
- 必要时可以使用转移符"\"，输出单引号或双引号
字符串拼接
使用“+”号运算符，可以实现字符串的拼接
口诀：数字相加，字符相连
模版字符串
- 拼接字符串和变量
在没有它之前，要拼接变量比较麻烦
- 必须使用“``”反引号
- 内容拼接变量时，用${}包住变量
let age=18
document.write(`我今年${age}岁了`)
4.1.3 boolean 布尔类型
表示肯定或否定时，在计算机中对应的应该是布尔类型数据
它有两个固定的值true和false
let isCool = true
console.log(isCool)
4.1.4 undefined 未定义类型
因为JavaScript中是弱数据类型，只有赋值了才知道此变量是什么数据类型
未定义是比较特殊的类型，只有一个值undefined
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为undefined
一般很少直接为某个变量赋值为undefined
4.1.5 null 空引用
JavaScript中null仅仅是一个代表“无”、“空”或“值未知”的特殊值
let obj = null
null和undefined的区别
- undefined表示没有赋值
- null表示赋值了，但是内容为空
官方解释说，把null作为尚未创建的对象
console.log(null+1) //=1
4.2 引用数据类型
4.3 typeof 检测数据类型
通过typeof关键字检测数据类型
typeof运算符可以返回被检测的数据类型，它支持两种语法形式：
-
作为运算符：typeof x 这是常用写法
-
函数形式：typeof(x)
换言之，有括号和没括号，得到的结果是一样的，所以我们直接使用运算符的写法
let num=10
console.log(typeof num)
let str='zhangsan'
console.log(typeof str)
let str1='10'
console.log(typeof str1)
let flag = false
console.log(typeof flag)
五、类型转换
JavaScript是弱数据类型：JavaScript也不知道变量到底属于哪种数据类型，只有赋值了才清楚。
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
通俗的说，我们需要把一种数据类型的变量转换成我们需要的数据类型
5.1 隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规则
- +号两边只要有一个字符串，都会把另外一个转成字符串
- 除了+以外的算数运算符，比如-*/等都会把数据转换成数字类型
console.log(2-'2') // 0
缺点
- 转换类型不明确，靠经验才能总结出经验
小技巧
- +号座位正号解析可以转换成数字类型
console.log(+'123') // 123 数字类型的
console.log(typeof +'123')//number
- 任何数据和字符串相加结果都是字符串
5.2 显示转换
编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律
为了避免因隐式转换带来的问题，通常需要对数据进行显示转换
概念
自己写代码告诉系统该转换成什么类型
- 转换为数字型
let str = '123'
console.log(Number(str)) //123
- parseInt(数据) 只保留整数
console.log(parseInt('12px')) //12 将‘12px’字符串转换成了12px
console.log(parseInt('aaa12px')) //报错
- parseFloat(数据) 可以保留小数
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
