???? 个人主页 极客小俊
✍???? 作者简介：web开发者、设计师、技术分享
???? 希望大家多多支持, 我们一起学习和进步！
???? 欢迎评论 ❤️点赞????评论 ????收藏 ????加关注
常量与变量
在你正式开始写JavaScript代码之前，首先就要先学习一个概念变量和常量
什么是常量?
在数学和物理学中，存在很多种常量，它们都是一个具体的数值或一个数学表达式。
然而在JavaScript编程语言中基于数据类型的分类，常量包括字符串型、布尔型、数值型和null等等…
下面是几种常量:
'今天天气真好！'; // 字符串常量
1; e1; 077; // 数字型常量
true; false; // 布尔型常量
这样直接写上去的就是根据数据类型的常量!
在JavaScript常量的使用方法:常量直接在语句中使用即可，因为它的值不需要改变!
所以不需要再次知道其存储地点, 就像以下这样子!
举个栗子
<script>
document.write( "JavaScript编程，乐趣无穷!" );
document.write( 100 );
document.write( true );
</script>
什么是变量
顾名思义，变量是指在程序运行过程中值可以发生改变的量,就叫变量!
更为专业的说是指可读写的内存单元, 可以形象的理解为一个个可以装载东西的容器或者盒子!
变量名代表着系统分配给它的内存单元!
如图
变量的声明定义与赋值
在JavaScript中变量的定义方式 用如下方式定义一个变量。
var 变量名 = 值;
变量是可以被修改的 如下:
变量名 = 新值;
变量声明与赋值如下:
var a; //单一变量声明
var x,y; //多个变量声明
//变量赋值语句
a=1;
x="hello,how are you!";
y=x;
//使用变量的调用 你可以通过以下方式进行调用和打印变量的值
alert(a);
document.write("Tom,"+x);
看到了吧，我们并没有指定变量类型, 并且也允许一次定义多个变量!
变量的命名规则
JavaScript变量的命名必须以字母或下划线开始，后可跟下划线或数字，但不能使用特殊符号。
参考如下
name // 合法的变量名
_name // 合法的变量名
name10 // 合法的变量名
name_10 // 合法的变量名
name_n // 合法的变量名
$name //合法的变量名
12name // 不合法的变量名
$#name //不合法的变量名
变量应用小案例
<script>
//脚本程序开始
var nA = 10; // 定义两变量并赋初始值
var nB = 20;
document.write("交换前<br> "); // 输出交换前两变量的值
document.write("<li>nA = " + nA); // 输出nA
document.write("<li>nB = " + nB); // 输出nB
var nTemp = nA; // 交换两变量的值
nA = nB;
nB = nTemp;
document.write("<br>交换后<br> "); // 输出交换后两变量的值
document.write("<li>nA = " + nA); // 输出nA
document.write("<li>nB = " + nB); // 输出nB
//脚本程序结束
</script>
结果如下
如果现在让你不用第三个变量如何交换这个值呢?
我们用以下办法效果是一样的!
// 交换两变量的值
nA=nB+nA;
nB=nA-nB;
nA=nA-nB;
变量的用途
变量主要用于存储数据，比如计算的结果、存储用户输入的数据等。一部分变量作为对象的引用，通过变量来操作对象的内容或调用对象的方法 。这些作用在以后的学习过程中会体会到。
举个栗子
// 脚本程序开始
// 角色数组
var actorAry = new Array( "超级管理员", "管理员", "VIP用户", "普通用户" );
document.write("用户角色："); // 标题
for( n in actorAry ) // 遍历数组
{
document.write( "<li>" + actorAry[n] ); // 通过变量actorAry操作角色数组
}
变量的作用范围
作用域是指有效范围，JavaScript变量的作用域有全局和局部之分。
全局作用域的变量在整个程序范围都有效
局部作用域指作用范围仅限于变量所在的函数体。
JavaScript不像其它语言那样有块级作用域。变量同名时局部作用域优先于全局作用域。
举个栗子
var nA = 10; // 定义全局变量nA
function func()
{
var nA = 20; // 定义局部变量nA并输出
document.write( "<li>局部作用范围的nA：" + nA ); // 输出nA
}
func(); // 调用函数func
document.write( "<li>全局作用范围的nA：" + nA ); // 输出全局nA
JavaScript关键字
关键字为系统内部保留的标识符，其用途特殊，用户的标识符不能与关键字相同。
这里我列出根据ECMA v3标准保留的JavaScript的关键字如下:
| 关键字名称 | 关键字名称 | 关键字名称 | 关键字名称 | 关键字名称 |
|---|---|---|---|---|
| break | case | catch | continue | default |
| delete | do | else | false | finally |
| for | function | if | in | instanceof |
| new | null | return | switch | this |
| throw | true | try | typeof | var |
| void | while | with |
还有一些其他的关键字
如图
所列出的是一些常用的关键字，其中大部分内容大家现在不必去详细了解
以上这些关键字内容 我们会在以后用到相关内容时将再作讲解。
JavaScript中的大小写敏感
JavaScript代码是大小写敏感的，Name和name是不同的标识符，编码时应当予以注意。
同一个词如果如果各个字母间大小写不同时，系统将当作不同的标识符来处理，相互之间没有任何联系 !
举个栗子
下面两个变量，就根本不属于同一个了!
Name = “sunsir”; // 大写字母开头
name = “foxsir”; // 小写字母开头
JavaScript代码的注意事项
空格与换行
- 代码中多余的空格会被忽略，同一个标识符的所有字母必须连续。
- 一行代码可以分成多行书写。
单行
代码写于一行中，用分号作为语句结束标志!
例如
if(1==1 && 6>3 ){alert(“return true”);}else{alert( “return false” );}
如果分成多行、规范的书写如下：
if( 1==1 && 6>3 ) // 如果1等于1，且6大于3，则
{
alert(“return true” ); // 输出“true”
}
else
{
alert( “return false” ); // 输出“false”
}
数据类型
刚刚我们说了变量的概念，但是变量里面装的是什么？ 就是很多不同数据类型的数据!
那么这些数据类型在我们的JavaScript中都有哪些呢?
这里我大致把最常见的几种列举出来如下:
如图
Number数值类型
简单的说Number数据类型是JavaScript中最基本的数据类型，也就是数字/数值类型
并且在JavaScript中不区分整型数值和浮点型数值 记住!
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是: ±1.7976931348623157 x 10308
能表示的最小值是: ±5 x 10-324
如何表示一个Number类型
整数表示
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响,并且会以科学计数法进行显示!
例如
var num1 = 100;
document.write(num1);
document.write("<br>");
var num2 = 999999999999999999999;
document.write(num2);
浮点数表示
如果使用小数点记录数据直接表示为:3.4，5.6
如果使用指数记录数据会表示为：4.3e23 = 4.3 x 1023
小知识
在 JavaScript 中，表示次方（指数运算）通常使用 Math.pow() 方法。
Math.pow() 方法接受两个参数：底数和指数，然后返回底数的指数次幂。
例如，如果你想要计算 2 的 3 次方（即 2³），你可以这样写
例如:
document.write(4.3 * Math.pow(10, 23));
如图
小结
JavaScript中用于表示数字的类型称为数字型，不像其它编程语言那样区分整型、浮点型。
数字型用双精度浮点值来表示数字数据，可以表示（-253，+253）区间中的值。
数字的值可以用普通的记法也可以使用科学记数法。
10; // 数字
10.1; // 数字
0.1; // 数字
3e7; // 科学记数
0.3E7; // 科学记数
String字符串类型
在JavaScript中，字符串型数据是用引号括起的文本字符串。
在JavaScript中不区分“单引号”和“双引号”括起来的字符串, 它们都会被当做字符串进行处理!
字符串中可以包含用于特殊目的字符。
var hello = "你好啊:"; // 使用双引号定义字符串
var name = 'GeekerJun'; // 使用单引号定义字符串
document.write(hello + name ); // 将两个字符串用+号合在一起显示
关于字符串编码问题
JavaScript程序是由Unicode字符集编写的，每个字符串和汉字都是采用2个字节进行编码
也就是在js中字符串是由Unicode字符、数字、标点符号组成的序列,并且字符串常量首尾由单引号或双引号括起!
ASCII码和Unicode的区别ASCII码由大小写英文字母、数字、英文符号等组成，采用1个字节中的低7位进行编码!Unicode码是一种国际编码，可以表达几乎任何书写语言，它是采用16位编码的字符集!
它们彼此的具体区别如:
ASCII编码：7位编码进行表示一个字符串
如图
Unicode编码：16位编码进行表示一个字符串
如图
特殊字符的处理
JavaScript中没有字符类型 常用特殊字符在字符串中的表达 字符串中部分特殊字符必须加上右划线\
常用的转义字符, 也就是说如果要在字符串中出现这些特殊字符串就要进行转义处理!
例如 我们要在字符串中出现以下这些字符，那么就要想如下处理!
| 单引号 | 双引号 | 右划线 | 换行符 |
|---|---|---|---|
| \n | \` | \" | \\ |
Boolean数据类型
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
你也可以把布尔值也可以看作on/off、yes/no、1/0对应true/false
用途
Boolean值主要用于JavaScript的一些控制语句
例如
if (x==1){ //在这里就会存在布尔值的运算
y=y+1;
}else{
y=y-1;
}
关于布尔类型值,还有很多内容，我们后面在结合一些代码实例去理解会更好, 这里先做一个大致的了解就行了!
尤其是刚刚开始学习布尔值的时候，不要一口气看太多概念性的东西，会让你懵逼,随着代码深入学习!
复合数据类型
复合数据类型: 对象的概念
在面向对象的设计模式中，将数据和处理数据的方法捆绑在一起形成的整体，称为对象。
它封装了数据和操作数据的方法 ，使用时要先创建这个对象，用new运算符来调用对象的构造函数。
举个栗子
JavaScript将与日期相关的所有特性封装进Date对象，主要用来进行一些与时间相关的操作，
比如获取当前系统时间，使用前要先创建该对象的一个实例 如下:
var date1=new Date() // 直接创建
var date2=new Date(2024,5,20); // 指定日期创建
//输出
document.write(date1);
document.write('<br>');
document.write(date2);
全局对象
可全局对象是所有全局方法的拥有者，用来统一管理全局方法，全局方法也就是指全局函数。
该对象不能使用new运算符创建对象实例，所有方法直接调用即!
例如: window对象、Navigator 对象、Screen对象、History对象、Location对象等等。更多全局对象大家其实可以查看w3c文档，上面都有，不要去记，用到了直接查就行了!
如图
内置对象JavaScript给我们提供了很多内置的对象，可以直接拿来使用, 例如 数学对象、字符串对象
数学对象（Math）封装了与数学相关的特性，包括一些常数和数学函数，主要使用简单一些基本的数学计算。
比如: 求正弦、正切、余弦、取绝对值等…
下面是这个对象的应用实例:例如
从Math对象中获取圆周率常数，计算一个半径为2单位的圆的面积
var r = 2; // 定义变量表示半径
var pi = Math.PI; // 从Math对象中
var s = pi * r * r; // 计算面积
document.write("半径为2单位的圆面积为：" + s + "单位");// 显示圆的面积
字符串对象
String对象封装了与字符串有关的特性，主要用来处理字符串。
通过String对象，可以对字符串进行剪切、合并、替换等等。.
我们可以调用该对象的构造函数创建一个实例,其实在定义一个字符串类型变量时就也创建了一个String对象实例。
调用String对象的方法或属性形式如对象名.方法名或对象名.属性名，
构造函数如 : String([strVal])
举个栗子
我们用字符串对象中的一些方法来处理并且输出一首诗!
var comment = "静夜思李白床前明月光，疑是地上霜。举头望明月，低头思故乡。";// 诗的内容
var partial = comment.substring(0, 3); // 取出标题
partial = partial.bold(); // 标题加粗
document.write("<p align=\"center\">"); // 输出HTML标签“<p>”，并设置居中对齐
document.write(partial); // 输出标题
partial = comment.slice(3, 5); // 取出作者
document.write("<br>"); // 输出换行标签<br>
document.write(partial); // 输出作者
partial = comment.slice(5, 17); // 取出第一句诗文
partial = partial.fontcolor("gray"); // 设置颜色为gray（灰色）
document.write("<br>"); // 输出换行标签
document.write(partial); // 输出诗句
partial = comment.slice(17, 29); // 取出第二句诗文
partial = partial.fontcolor("gray"); // 设置颜色为gray（灰色）
document.write("<br>"); // 输出换行标签
document.write(partial); // 输出诗句
document.write("</p>"); // 输出HTML标签“<p>”的结束标签
以上代码中把文本串中将李白《静夜思》的各个部分分别提取出来，并格式化输出。
标题加粗，文本居中对齐，诗歌正文颜色为灰色。
效果如下
内置对象还有很多，具体也可以查看w3c官方文档
复合数据类型: 数组的概念
数组是JavaScript中另一重要的基本数据类型。
内部对象Array封装了所有和数组相关的方法和属性，其内存在多个数据段组合存储。
可以形象的理解为一种有很多连续房间的楼层，每个房间都可以存放货物，提取货物时只需要给出楼层号和房间编号即可 。
举个栗子
创建一个数组用于保存古代几个大诗人的名字，通过遍历数组逐一输出每个诗人的名字 。
var poets = new Array( "王维", "杜甫", "李白", "白居易" ); // 创建数组
document.write("古代几个大诗人：<br>"); // 输出标题
for( n in poets ) // 逐个输出数组元素
{
document.write( "<li>" + poets[n] ); // 输出诗人的名字
}
如图
其他数据类型
函数
在JavaScript中，“函数”充当了两个角色，一个运用在数据类型方面，另一个运用在子程序设计方面 。关于函数在本书后面的章节中会进一步讲到，这里先就不多讲了。
空值
之前所讲过的每一种JavaScript数据类型都有自己的内容，而编程中却需要一种类型来表示什么都没有
null类型就是为此目的而产生，其表示一个空值
可以使用null和一个变量进行比较以测试该变量是否拥有内容，通常用来判断对象的创建或引用是否成功。注意Null在程序中代表变量没有值或者不是一个对象!Undefined代表变量的值尚未指定或者对象属性根本不存在!
举个栗子
var x = 10; // 定义变量x，并给其赋值10
var y = null; // 定义变量y，并赋一个空值，表示“什么都没有”
if (x == null) // 如果x为空值则
{
document.write("x的值为空<br>"); // 输出提示
}
if (y == null) // 如果y为空则
{
document.write("y的值为空<br>"); // 输出提示
}
注意:
不确定的类型 , null值表示一个变量拥有空值。
可以理解为已经把给空给了某个变量，而undefined则表示一个变量什么都没有得到，连空都没有。通常用来判断一个变量是否已经字义或已经赋值。
Null与Undefined 之间的比较
如下表:
| 比较 | 结果描述 |
|---|---|
| null与空字符串 | 不相等，null代表什么也没有，空字符串则代表一个为空的字符串 |
| null与false | 不相等，但是!null等于true |
| null与0 | 不相等，但是在C++等其他语言中是相等的 |
| null与undefined | 相等，但是null与undefined并不相同 |
数据类型的转换
JavaScript属于松散类型的程序语言, 变量在声明的时候并不需要指定数据类型,变量只有在赋值的时候才会确定数据类型!
但是可能在我们进行开发过程当中,表达式中包含不同类型数据则在计算过程中会进行强制数据类型转换
例如:
数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false
当然有时候还存在一些隐式数据类型转换
隐式转换就是在程序运行时，系统根据当前上下文的需要，自动将数据从一种类型转换为另一种类型的过程称为隐式类型转换。其实这个转换很多时候都在我们身边悄悄发生!
例如: 我们使用document.write和alert方法时，很多时候就发生了隐式转换，也就是无论你向这两个方法 中输入什么类型的数据，最后都被转换为字符串型数据。
所以通常我们在JavaScript当中数据类型的转换其实就分为显示数据转换和隐式数据类型转换两种情况
显式转换与隐式类型转换相对应的是显式类型转换，此过程需要手动转换到目标类型。
要将某一类型的数据转换为另一类型的数据需要用到特定的方法
举个栗子
//函数parseInt：强制转换成整数
//例如
parseInt("6.12")=6
parseInt(“12a")=12
parseInt(“a12")=NaN
parseInt(“1a2")=1
//函数parseFloat： 强制转换成浮点数
parseFloat("6.12")=6.12
//函数eval：将字符串强制转换为表达式并返回结果
eval("1+1")=2
eval("1<2")=true
当然我们可以通过数据类型的强制转换来处理一些数据内容!
例如
var priceOfApple = "3元"; // 苹果的价格
var priceOfBanana = "3.5元"; // 香蕉的价格
priceOfApple = parseInt(priceOfApple); // 解析苹果的价格
var priceOfBanana2 = parseInt(priceOfBanana); // 解析香蕉的价格
// 检查解析是否成功
if ((priceOfApple === 3) && (priceOfBanana2 === 3) && (parseFloat(priceOfBanana) === 3.5)) {
// 输出水果的价格
document.write("苹果的价格:" + priceOfApple + "\n香蕉的价格的整数部分:" + priceOfBanana2 + "\n香蕉的价格:" + parseFloat(priceOfBanana));
} else {
// 解析失败时
alert("并没有得到预期的转换效果！"); // 解析失败时输出警告信息
}
结果如下
类型查询函数
有时候我们需要知道当前的变量或者数据是一个什么类型，此时此刻我们可以使用typeof函数 对数据进行查询! 返回的值一般为: (string / number / boolean / object )
举个栗子
typeof("test"+3)="string",
typeof(null)="object“
typeof(true+1)=“number”
typeof(true-false)=“number”
"????点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️????????????????
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..????嘿嘿嘿、嘻嘻嘻????!
????????????????????????
