JS学习第一次

pe11223

已于 2023-01-11 04:18:09 修改

阅读量484

点赞数

文章标签： javascript 学习前端

于 2023-01-11 04:15:48 首次发布

本文链接：https://blog.csdn.net/pe11223/article/details/128638664

版权

基础

JS书写位置

我们可以将js代码编写到标签的onclick属性中

下面我们使用js来编写一个点击事件
这里放关键代码

<body>
		<button onclick="alert('已点击');">点我一下</button>
</body>

下面我们来看看效果

只有当我们点击按钮时才会触发js代码，这是由于我们的onclick属性决定的。

下面我们将js代码写入超链接的herf中
如此，点击超链接时会执行js代码

<body>
    <a href="javascript:alert('已点击');">点击</a>
</body>

下面我们看看效果

上面的种种，虽然js可以写在标签的属性内，但是题目属于结构与行为耦合，不方便维护，所以这里不推荐使用。
那么我们写在哪里呢？
开始时我们将js写在script标签内的。同样我们可以将js写在一个单独的文件中，引入来使用
由script标签引入
和css引入方式类似，我们在head内使用

<script src=""></script>

这样就实现了js的引入，这里就不过多说明了。
将JS写入到外部文件夹中可以在不同页面中同时引用，也可以利用到浏览器的缓存机制，这是很推荐的使用方式
Tips：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了，浏览器也会忽略。如果需要那直接可以创建一个新的script标签
例如

<script src=""></script>
<script>***</script>

第一行是引入外部js文件，所以我们另起一个来运行

注释规范

JS注释

/*
~~
*/

这是多行注释，和CSS差不多，注释内容不会运行，但是可以在源码中查看

//单行注释

这是单行注释，只对其后的有作用
1.JS中严格区分大小写
2.JS中每一条语句以分号（;）结尾
但是如果我们不加分号，浏览器会自动添加，但是会消耗一些系统资源，而且有时候浏览器会错加分号，所以开发中分号必须写
*3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

数据类型

数据类型值得就是字面量的类型
在JS中一共有六种数据类型
String字符串
Number数值
Boolean布尔值
Null空值
Undefined未定义
Object对象
其中String Number Boolean Null Undefined属于基本数据类型，而Object属于引用数据类型

String字符串

在JS中字符串要引号引起来
使用双引号或单引号都可以，但是不能混着用
引号不能嵌套：双引号不能放双引号，单引号不能放单引号

var str = "hello";

在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\转义

var str = "我说：\"今天天气真不错！\"";

\"表示"
\'表示'
\n表示换行
\t表示制表符
\\表示\

Number

在JS中所有的数值都是Number类型，包括整数和浮点数（小数）
其中

var a = "123";
var b = 123;

上面两个不是同一个东西，a为字符串123，b为数字。
那么我们如何检查这类现象呢？
我们使用typeof检查
语法

typeof 变量
typeof a

但是这样是无法输出结果的，所以我们都使用控制台输出

console.log(typeof a);

这样我们就可以在控制台看到类型。

JS中我们可以表示的数字的最大值为

Number.MAX_VALUE

我们来看看值为多少

上面为我们JS的最大值输出结果
如果我们使用最大值平方，那么他会输出Infinity表示无穷
使用typeof检查Infinity同样会返回Number
如果我们计算如下

a = "abc" * "bcd";
console.log(a);

他会输出什么呢？
结果为NAN
NAN是一个特殊的数字，表示Not A Number不是一个数字
如果a=NAN那么检查会输出什么呢
他也会输出number。
既然有最大值，那么就会有最小值，这个最小值不是负的最大值而是另外一种
我们令a = Number.MIN_VALUE;
这里输出结果为5e-324他依然为正数，所以这不是一般我们所理解的最小值，而是零以上的最小值。

布尔值

布尔值只有两个，主要用来做逻辑判断
true表示真
false表示假
使用typeof检查布尔值还会返回boolean

Null和Undefined

Null类型的值只有一个，就是null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值会返回object

Undefined类型值只有一个，就是undefined
当声明一个变量，但是不给变量赋值时，它的值就是undefined
使用typeof检查一个undefined时也会返回一个undefined

强制类型转换

String

强制类型转换：将一个数据类型强制转换为其他的数据类型，类型转换主要指，将其他的数据类型转换为String、Number、Boolean
那么我们怎么将其他数据类型转为String呢？
法一：
调用被转换数据类型的toString()方法，这个方法不会影响到原变量
举例

var a = 123;
var b = a.toString();

console.log(typeof b);
console.log(b);

输出结果如图

这里我们可以看到数据类型成功转换，
那么我i吗如果不想另创新值，我们可以直接使用a = a.toString();来转换，效果是一样的
Tips：null和undefined是没有toString()方法，如果调用则会报错
法二：
调用String()函数并将被转换的数据作为参数传递给函数。

a = 123
a = String(a);

输出结果是和法一相同的
但是这种方法可使null和undefined转换为字符串

Number

调用Number()函数将值转换为Number类型
如果我们被转换的为字母之类的呢，转换后输出值为NaN
str–>数字
如果是纯数字的字符串，则直接将其转换为数字
如果字符串内含有非数字的内容，则转为NaN
如果字符串是一个空串或者是一个全是空格字符则转换为0
布尔–>数字
true转为1
false转为0
null–>数字 0
undefined–>数字NaN
法二
这种专门对付字符串
parseInt()把一个字符串转换为一个整数
parseFloat()把一个字符串转换为一个浮点数
parseInt()可以将一个字符串中有效整数内容取出来
同样parseFloat()他获得有效小数例如123.236.21则会筛出123.236会忽略后面.21因为他不是有效小数

其他进制的数字

如果需要16进制数字，则需以0x开头
eg：a = 0x10;则输出结果为16
如果a =0xff则输出255
如果需要以8进制数字则以0开头
如果表示2进制数字则以0b开头，但是不是所有的浏览器都是支持的
像070之类的字符串，有些浏览器会当成8进制数转换有些会以10进制转换那么我们怎么解决呢

a = "070"
a = parseInt(a,10); //10表示10进制

可以在parseInt()中传递一个第二参数，来指定数字的进制

布尔值

将其他数据类型转换为Boolean使用Boolean()函数
数字

var a=123
a = Boolean(a);
console.log(a);

输出结果为true，而a赋值为-123输出还是true；
输入Infinity输出依然为true而赋值为0则输出false；
综上我们知道非零为true及除了0和NaN其余都是true
字符串
除了空串其余都为true
null和undefined都会转换为false

算数运算符

运算符也叫操作符，通过运算符我们可以对一个或多个值进行运算，并获取运算结果。
例如：typeof就是运算符，可以获得一个值的类型，他会将该值的类型以字符串的形式返回。
算数运算符：

+		可以将两个值进行加法运算并将结果返回，如果对两个字符串进行加法运算，则会做拼串操作，任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作
-
*
/
%取余

由上面加法的转换字符串操作，我们可以利用，只需要为任意的数据类型＋一个""即可将其转换为字符串，这是一种隐式类型转换
Tips：除了加法会将其余数据类型转换为字符串，其余都是转换为数字类型

一元运算符

一元运算符只需要一个操作数，例如typeof()、+正号（不会对数字产生任何影响）、-负号（可以对数字进行负号的取反），对于非数字类型的值他会先转换为数字类型然后再计算，可以对一个其他类型数据使用+，来将其转换为number，他的原理和Number()函数是一样的

自增和自减

自增为++
通过自增可以使变量在自身基础上加1
对于一个变量自增后，原变量的值会立即自增1
无论是a++还是++a都会立即使原变量值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值（自增前的值）
++a的值等于原变量的新值（自增后的值）
自减为–
和自增几乎一样这里就不赘述了

逻辑运算符

！非
&&与
||或

！
如果计算

a =!a;

那么输出结果为false
所谓非运算符就是对一个布尔值进行取反操作
true变false，false变true
如果对一个布尔值去两次反，它不会变化
如果对非布尔值运算，则会将其转换为布尔值然后取反。
所以我们可以为任意数据类型取两次反，来将其转换为布尔值原理和Boolean()一样
&&
&&可以对符号两侧值进行运算并返回结果
运算规则：
两个值中只要由一个值为false就返回false
只有两个值都为true才返回true
JS中的与属于短路与，如果第一个值为false则不会看第二个值
||
||可以对符号两侧的值进行或运算并返回结果
运算规则：
两个值中只要有一个true就返回true
如果两个值都为false才返回false
JS中的或属于短路的或
如果第一个值为true则不会检查第二个值

非布尔值的与或运算

&&和||对非布尔值运算
会先将其转换为布尔值，然后运算
&&
如果第一个值为true则必然返回第二个值
如果第一个值为false则直接返回第一个值
||
如果第一个值为true则直接返回第一个值
如果第一个值为false则返回第二个值

赋值运算符

=可以将符号右侧的值赋值给左侧的变量
+=
a +=5等价于 a = a + 5
-=
a-=5等价于a = a - 5
*=
a*=5等价于a=a*5
/=
a/=5等价于a=a/5
%=
a%=5等价于a=a%5

关系运算符

通过关系运算符可以比较两个值之间的大小关系
如果关系成立他会返回true，如果关系不成立则额返回false

>
判断符号左侧值是否大于右侧值
如果关系成立他会返回true，如果关系不成立则额返回false
>=
判断符号左侧的值是否大于或等于右侧的值
<
<=

注意的是
比较两个字符串时，比较的时字符串的字符编码，比较字符编码时时一位一位进行比较的
如果两位一样，则比较下一位，所以借用他来对英文排序。
比较中文是没有意义的
如果比较的两个字符串型数字，可能得到不可预期的结果
Tips：比较两个字符串型数字时，一定要转型

Unicode编码

在字符串中使用转义字符输入Unicode编码
\u四位编码

console.log("\u2620");

在网页中使用Unicode编码
&#编码；这里使用的编码需要10进制

相等运算符

相等运算符用来比较两个值是否相等
如果相等则会返回true否则返回false

==
相等运算
当使用==来比较两个值时，如果值类型不同，则会自动进行类型转换，将其转换为相同的类型然后再比较
不相等
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
使用！=来做不相等运算
不相等也会对变量进行自动类型转换，如果转换后相等它也会返回false

===
全等
用来判断两个值是否全等，他和相等类似，不同的时它不会做自动类型转换
如果两个值类型不同直接返回false

！==
不全等
用来判断两个值是否不全等，和不等类似，不同的时它不会做自动类型转换
如果两个值类型不同直接返回true

undefined衍生自null所以这两个值做相等判断时，会返回true
NaN不和任何值相等，包括他自己
可以通过isNaN()来判断一个值是否为NaN

条件运算符（三元运算符）

语法：
条件表达式？语句1：语句2；
执行流程：
条件运算符在执行时，首先对条件表达式进行求值
如果该值为true则执行语句1并返回结果
如果该值为false则执行语句2并返回结果
如果条件表达式求值结果是一个非布尔值，会将其转换为布尔值然后运算

流程控制语句

流程控制语句
JS中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行的流程，使得程序可以根据一定的条件来选择执行。
语句分类
1.条件判断语句
2.条件分支语句
3.循环语句

1.条件判断语句
使用条件判断语句可以在执行某个语句前进行判断，如果条件成立才会执行语句，条件不成立则不执行。
if语句
语法一：

if(条件表达式)
	语句

if语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true则执行if后语句。
如果条件表达式的值为false则不会执行if后语句。
if语句只能控制紧随其后的那个语句，如果希望if语句控制多条语句，可以将这些语句统一放到代码块中。
if语句后的代码块不是必须的，但是在开发中是尽量保证要有的。
语法二：

if(条件表达式)
{
	语句
}
else
{
	语句
}

if…else…语句
当该语句执行时，会先对if后条件表达式进行求值判断，如果条件表达式的值为true则执行if后语句。
如果条件表达式的值为false则执行else后语句。
语法三：

if(条件表达式)
{
	语句
}
else if(条件表达式)
{
	语句
}
else if(条件表达式)
{
	语句
}
else
{
	语句
}

if…else if…else
当该语句执行时，会从上至下依次对条件表达式进行求值判断，如果为true则执行当前语句，如果为false则继续向下判断。

条件分支语句

条件分支语句也叫switch语句
语法

switch(条件表达式)
{
case 表达式:
	语句
	break;
case 表达式:
	语句
	break;
default 表达式:
	语句
	break;
}

执行流程：
switch…case…语句
在执行时会一次将case后的表达式的值和switch后的条件表达式的值进行全等比较，如果为true则从当前case开始执行代码，如果为false则继续向下比较。
如果所有比较结果都为false则只执行default后语句。

循环

循环语句：
通过循环语句可以反复执行一段代码多次。
while循环
语法

while(条件表达式)
{
	语句
}

执行流程：
先对条件表达式进行求值判断，如果为true则执行循环体，循环体执行完毕后，继续对表达式判断，如果为true则继续执行循环体，以此类推。
如果为false则终止循环。
Tips：
将条件表达式写死为true的循环称为死循环，该循环不会停止，除非浏览器关闭，死循环在开发中慎用，可使用break来终止循环。

创建一个循环，往往需要三个步骤：
1.创初始化一个变量
2.在循环中设置一个条件表达式
3.定义一个更新表达式，每次更新可初始化变量

do…while循环
语法

do
{
	语句
}
while(条件表达式)

执行流程：
do…while语句在执行时，会先执行循环体，循环体执行完毕后在对while后条件表达式进行判断，如果结果为true则继续执行循环体，执行完毕继续判断，以此类推。
如果为false则终止循环。

实际上上面两个语句功能类似，不同的是while是先判断再执行，而do…while会执行后判断。
do…while会保证循环体至少执行一次。

for循环

for语句：也是一个循环语句，称为for循环
在for循环中，为我们提供专门的位置放三个表达式
1.初始化表达式
2.条件表达式
3.更新表达式
语法

for(初始化表达式;条件表达式;更新表达式)
{
	语句
}

流程：
①执行初始化表达式，初始化变量
②执行条件表达式，判断是否执行循环
如果为true则执行循环③
如果为false则终止循环
③执行更新表达式，更新表达式执行完毕继续重复②

for循环中三个部分都可以省略，也可以写在外部
如果在for循环中不写任何表达式，只写两个；此时循环是一个死循环会一直循环下去，慎用。

break和continue

break
break关键字可以用来退出switch或循环语句
不能再if语句中使用break和continue。
可以为循环语句传教一个label来标识当前循环
label：循环语句
使用break语句时可以再break后跟着一个label，这样break将会结束指定的循环，而不是最近的。
continue
continue关键字可以用来跳过当次循环，同样continue也是默认只会对离他最近的循环起作用。