JavaScript（一）

Ruuuuvh

已于 2022-12-27 16:08:22 修改

阅读量359

点赞数 1

文章标签： javascript 前端开发语言

于 2022-12-03 20:52:52 首次发布

本文链接：https://blog.csdn.net/Ruuuuvh/article/details/128119260

版权

JavaScript（一）

1、JS的HelloWorld

控制浏览器弹出一个警告框

<!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>
    <script type="text/javascript">
        alert("hello")
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

document.write（）可以向body中输出一个内容

<script type="text/javascript">
    document.write("原为一盏灯，引你入凡尘")
    </script>

在这里插入图片描述

向控制台输出一个内容

<script type="text/javascript">
    console.log("wwwwwww你猜")
    </script>

在这里插入图片描述
注：JS代码从上到下，一行一行地执行

2、JS编写位置

<button>可以将JS代码编写到标签的onclick属性中

在这里插入图片描述

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

在这里插入图片描述
当我们点击按钮时，JS代码才会执行

可以将JS代码写在超链接的herf属性中，这样当点击超链接时，会执行JS代码。
可以将JS代码编写到外部JS文件中，然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐

<script type="text/javascript" src="js/1.js"></script>

注：script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略。如果需要则可以再创建一个新的script标签用于编写内部代码。

<script type="text/javascript" src="js/1.js"></script>
    <script type="text/javascript">
        alert("我是内部的JS代码");
    </script>

alert("我是外部的JS代码");

3、JS基本语法

JS注释：多行注释，注释中的内容不会被执行，但是可以在源代码中查看。
多行注释：/* */

<script type="text/javascript">
        /*
        注释
        */
    </script>

单行注释：//

<script type="text/javascript">
        //
    </script>

JS中严格区分大小写
JS中每一行语句都以分号；结尾（如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有时候，系统会加错分号）
JS中会忽略多个空格和换行，即利用空格和换行对代码进行格式化

4、字面量和变量

字面量：不可改变的量 （可直接使用）
变量：可以用来保存字面量，且值可任意改变
声明变量：在js使用var关键字来声明一个变量 var a;
为变量赋值：a=123;
同时进行声明和赋值：var b=789；

5、标识符

在所有JS中所有可以自主命名的都可以称为标识符
例：变量名，函数名，属性名

需遵守如下规定：

（1）标识符中可以包含字母、数字、_、$
（2）不能以数字开头
（3）不能是ES中关键字或保留字

（4）一般都采用驼峰命名法（首字母小写，每个单词开头字母大写，其余字母小写）

helloworld→helloWorld
xxxyyyzzz→xxxYyyZzz

JS底层保存标识符时实际上采用的Unicode编码
所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

6、字符串

数据类型指的是字面量的类型。
JS中一共有六种数据类型

String 字符串（基本数据类型）
Number 数值（基本数据类型）
Boolean 布尔值（基本数据类型）
Null 空值（基本数据类型）
undefined 未定义（基本数据类型）
Object 对象（引用数据类型）

String 字符串

在JS中字符串需要用引号引起来var str="hello";
注：单双引号均可，不能混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号

在字符串中我们可以使用\作为转义字符，当使用一些特殊符号时可以用\转义
\“ 表示”
\‘ 表示’
\n 表示换行
在这里插入图片描述
\t 制表符
\\ 表示斜杠
输出字面量字符串str：alert("str");
输出变量 str：alert(str);

Number 数值

用来表示整型和浮点数
可以利用typeof运算符检查一个变量的类型

<script type="text/javascript">
        var a = 666;
        var b = "666";
        // console.log(typeof a);
        console.log(typeof b);
    </script>

注：Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity

最大值：Number.Max_VALUE
最小值：Number.Min_VALUE
0以上的最小值：5e-324
正无穷：Infinity
负无穷：-Infinity
注：特殊数字NaN，表示Not A Number

Boolean 布尔值

用于做逻辑判断

true
false

<script type="text/javascript">
        var bool = false;
        console.log(typeof bool);
    </script>

Null 空值

只有一个值的数据类型，这个特殊的值是 null
从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object

Undefined 未定义

只有一个值的数据类型，这个特殊的值是 undefined
声明一个变量，但不是给变量赋值时，它的值就是undefined
使用typeof对没有初始化和没有声明的变量，会返回undefined

7、强制类型转换

将其它的数据类型转换为String、Number、Boolean

转换为String类型

（1）调用被转换数据类型的toString( )方法
该方法不会影响到原变量，它会将转换的结果返回
注：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错

var a = 666;
var a = a.toString();
console.log(typeof a)
console.log(a);

（2）调用String()函数，并将被转换的数据作为参数传递给函数
使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString( )方法
注：对于null和undefined则会直接调用对应类型

var a = 666;
var a = String(a);
console.log(typeof a)
console.log(a);

转换为Number

（1）使用Number()函数

var a = "123";
var a = Number(a);
console.log(typeof a)
console.log(a);

字符串→数字
①纯数字的字符串,则直接将其转换为数字
②字符串中有非数字的内容,则转换为NaN
③字符串是一个空串或者是一个全是空格的字符串,则转换为0

布尔值→数字
①true 转成1
②false 转成0

Null→数字 0

Undefined→数字 NaN

（2）针对字符串，parseInt() 把一个字符串转换为一个整数

var a = "666px";
var a = parseInt(a);
console.log(typeof a)
console.log(a);

（3）parseFloat() 把一个字符串转换为一个浮点数

var a = "666.99px";
var a = parseFloat(a);
console.log(typeof a)
console.log(a);

其他进制的数字：
在JS中如果需要表示16进制的数字，需以0x开头
表示8进制的数字，需以0开头
表示2进制的数字，需以0b开头

<script type="text/javascript">
        var a = "070";
        var a = parseInt(a,10);
        console.log(typeof a)
        console.log(a);
    </script>

如"070"字符串，可能会当成八进制或十进制解析
可在parseInt()中传递一个第二个参数，来指定数字的进制

转换为Boolean类型

数字→布尔

除了0和NaN，其余的都是true

字符串→布尔

除了空串，其余的都是true

8、运算符

通过运算符可以对一个或多个值进行运算并获取运算结果

算数运算符（可进行隐式转换）

在这里插入图片描述
注：任何的值和字符串做加法运算，会先转换为字符串，然后拼串

无论是a++ 还是++a，都会立即使原变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值（自增前的值）
++a的值等于原变量新值（自增后的值）
自减同理

一元运算符

对于非Number类型的值
它会先转换为Number，然后再运算
可以对一个其他的数据类型使用+，将其转换为number
原理与Number()函数一样

<script type="text/javascript">
        a = true;
        var a = 2;
        a = +a;
        console.log(a);
        console.log(typeof a);
    </script>

关系运算符

逻辑语句中使用，以测定变量或值是否相等
在这里插入图片描述

①任何值和NaN作任何比较结果都是false
②如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而是分别比较字符串中字符的Unicode编码。
③比较字符编码是一位一位比较如果两位一样，则比较下一位，所以借用它来对英文字符进行排序。
④比较中文时没有意义如果比较的两个字符串类型的数字，可能会超出预期的效果。
必须进行转型

赋值运算符

用于给 JavaScript 变量赋值
在这里插入图片描述

逻辑运算符

用于测定变量或值之间的逻辑
在这里插入图片描述

<script type="text/javascript">
        var result = 3 && 6;
        console.log("result="+result);
    </script>

<script type="text/javascript">
        var result = NaN && true;
        console.log("result="+result);
    </script>

相等运算符

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

注：NaN不和任何值相等，包括它本身（可以通过isNaN()函数来判断一个值是否是NaN）

!= 来做不相等运算
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

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

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

条件运算符

语法：条件表达式?语句1:语句2;

执行流程：

①首先对表达式进行求值
②判断

如果该值为true，则执行语句1，并返回执行结果

如果为false，则执行语句2，并返回执行结果

如果条件的表达式的求值结果是一个非布尔值会将其转换为布尔值然后再运算