JS学习笔记（一）script标签、字面量&变量&常量、原始数据类型

想要大口炫榴莲

已于 2023-03-30 17:24:55 修改

阅读量332

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习前端

于 2022-08-29 22:13:05 首次发布

本文链接：https://blog.csdn.net/Yeee_F/article/details/126198994

版权

JavaScript 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

JS学习笔记（一）

本系列更多文章，可以查看专栏 JS学习笔记

一、JS用法

多行注释 /注释/
单行注释 // 注释
JS中单个或连续多个的空格和换行会被忽略
JS语句以;结束，大部分时候如果省略不写，浏览器会自动补全

以下三种js样式均可以同时使用，内部js和外部js只需要使用多个script标签即可

1. 行内 js（写在body标签中）

js使用alert输出，使用弹窗显示内容

写在onclick中，需要点击
写在onmousemove中，需要鼠标移动在上方
写在href中，需要点击超链接
……

<body>
    <!-- 方式1：行内js样式（不便于维护） -->
    <button onclick="alert('哈哈哈');">点一下</button>
    <hr>
    <button onmousemove="alert('啦啦啦');">鼠标移动过来</button>
    <hr>
    <a href="javascript:alert('写在a标签里的js');">js写在href里</a>
</body>

alert弹窗提示，效果图如下所示：

在这里插入图片描述

以下，为了避免页面渲染明显延迟；现在，通常将 <script> 标签放在<body>中页面内容的后面。

2. 内部 js（写在head标签中）

script标签的type属性默认值就是text/javascript，使用js可以省略type属性值。
<script>标签中内部的JS代码，会从上到下执行；
在此标签中的元素被加载完成前，页面中的其它内容不会被加载，也不会被显示。

<head>
    <meta charset="UTF-8">
    <title>JS用法</title>
    <!-- 方式2：内部js样式 -->
    <script type="text/javascript">
        // 使用document.write()输出，在网页中的body标签中输出
        let a = '哈哈';
        let b = '哈哈';
        document.write('修改前a:' + a + 'b:' + b + "<br>");
        b = '啦啦啦';
        document.write('修改后a:' + a + 'b:' + b + '<hr>')

        let c = '呵呵';
        let d = c;
        document.write('修改前c:' + c + 'd:' + d + '<br>');
        c = '好烦啊';
        document.write('修改后c:' + c + 'd:' + d + '<hr>')
    </script>
</head>

使用document.write()输出，效果如下图所示：

在这里插入图片描述

3. 外部 js（写在head标签中）

为 script 指定了 src 导入外部js;
<script>标签引入外部的JS代码，也会造成页面阻塞；
同时，在XHMTL中使用此种方式，可以忽略结束标签，比如 <script src="xx.js" />；

<head>
    <meta charset="UTF-8">
    <title>JS用法</title>
    <!-- type属性默认值就是text/javascript，使用js可以不写 -->
    <!-- 方式3：外部js样式，src指定js文件路径 -->
    <script src="./script/test1.js" type="text/javascript"></script>
</head>

// console.log()输出，是在网页开发者模式中(F12)的控制台中查看
console.log("这里是外部js样式，在控制台输出");

使用console.log输出，效果如下图所示：

在这里插入图片描述

4. script标签

（1）async（可选）：表示立即开始下载脚本，但不能阻止其它页面
只对外部脚本文件有效；
设置此值的脚本，称为异步执行脚本；多个异步执行脚本不能保证按出现次序执行

（2）defer（可选）：表示会立即下载，但是延迟到文本完全被解析和显示后再执行；
只对外部脚本文件有效；
设置此值的脚本，称为推迟执行脚本；多个推迟执行脚本按出现次序执行

（3）charset（可选）：使用src属性指定的代码字符集

（4）crossorigin（可选）：配置相关请求的CORS（跨源资源共享）设置；默认不使用。
crossorigin= "anonymous"配置文件请求不必设置凭据标志。
crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。

（5）integrity（可选）：允许对接收到在资源和指定的加密签名以验证子资源完整性；可以确保内容分发网络（CDN）不会提供恶意内容

（6）language（废弃）：最初表示代码块中的脚本语言

（7）src（可选）：表示包含要执行的代码外部文件
跟<img>元素相似，<script> src属性可以是一个完整的URL，其指向的资源可以跟包含它的HTML页面不在同一个域中；
如果同时定义了内部js和外部js，仅会下载外部js脚本文件；

（8）type（可选）：代替language，表示代码块中脚本语言的内容类型（MINE类型）。
默认始终为"text/javascript"，故使用js时，可以不设置；
当值为module时，无论是内部代码还是外部脚本，都会被当成ES6模块，这时才允许出现import和export关键字；

二、字面量、变量、常量

使用量之前需要先进行声明

1. 字面量 / 直接量

此部分内容参考《JavaScript权威指南(第6版)(中文版)》

字面量 / 直接量：程序中直接使用的数据值

	12      // 数字
    1.2     // 小数
    "hello" // 字符串文本
    'Hi'    // 字符串文本
    true    // 布尔值
    false   // 布尔值
    null    // 空

更多关于var、let和const的内容，可以参考 JS学习笔记（六）是什么执行上下文和作用域？var、let、const的区别？

2. 常量【ES6新增：let】

使用const声明常量

$\color{red}{常量必须声明时，对其值进行初始化。}$

		const 常量名 = 值;

$\color{blue}{后续不可对常量值进行修改,即使使用“常量名 = 值;”的方式进行二次赋值，也无法修改常量的值}$

3. 变量【ES6新增：const】

使用let或var声明变量

变量可以选择先声明后赋值，也可以声明时进行初始化其值。

let 变量名;					// 仅声明变量
var 变量名;  				// 仅声明变量
变量名 = 值;					// 为变量赋值

let 变量名 = 值; 			// 声明变量的同时，进行赋值
var 变量名 = 值; 			// 声明变量的同时，进行赋值

4. 变量的内存结构

（1）当变量的字面值相同时，会共享同一个值地址，共享同一个值空间。

let a = 999;
let b = 'hello';
let c = 999;

在这里插入图片描述

（2）若将变量c的值进行修改，如果修改的值已经存在，会共享值地址。

c = 'hello';

在这里插入图片描述
（3）若将变量c的值进行修改，如果修改的值不存在，会重新开辟存储值的空间

c = 'haha';

在这里插入图片描述

三、原始数据类型（7种）

JavaScript中的数据类型包括Number、BigInt（提案中）、String、Boolean、Null、Undefined、Symbol、Object，前7种为原始数据类型，Object属于对象数据类型。

除Null类型外，可以使用 运算符 typeof 可以检查变量类型

1. 数字（数值Number、大整数BigInt）

（1）数值（Number）

使用运算符 typeof 查看变量类型，返回值为 number

$\color{red}{可以表示整数、浮点数，当数值过大或者过小时，均会显示成近似值}$

// 以下，单行注释为控制台实际输出值
a = 999999999999999.3;				// 999999999999999.2
a = 999999999999;					// 999999999999
a = 0.0000000000000012;				// 1.2e-15
a = 99999 ** 99999; 				//number Infinity，正无穷大
a = 1 - "a"; 						// number NaN，非数字特殊值
// 其它进制数
a = 0b110; 							// number 6，二进制数
a = 0o17;							//number 15，八进制数
a = 0x12; 							// number 18, 十六进制数

$\color{red}{特殊Number类型值：}$

Infinity： 表示JS中表示正无穷的数值
-Infinity： 表示JS中表示负无穷的数值
NaN： 表示JS中非数值的特殊值

（2）大整数（BigInt）【ES6新增】

使用运算符 typeof 查看变量类型，返回值为 bigint

可以作为Number类型无法精确表示的超过 2^53 -1 的整数

可用数值加上n结尾，表示BigInt类型

// 以下，单行注释为控制台实际输出值
a = 999999999999999999999999999999999n;// bigint 999999999999999999999999999999999n
a = 1n; 							   // bigint 1n
a = -5n; 							   // bigint -5n

2. 字符串（String）

使用运算符 typeof 查看变量类型，返回值为 string

（1）使用 $\color{red}{单引号}$ 或 $\color{red}{双引号}$ 来表示字符串，但是引号内不可包含 $\color{blue}{换行符}$

// 以下，单行注释为控制台实际输出值
a = "hello"; 						// string hello
a = 'xixi'; 							// string xixi

// 单引号中可以使用双引号，双引号中可以使用单引号，但是不可包含与其相同的引号
a = "xi'X'xi"; 					// string xi'X'xi
a = '今天"天气"真好'; 		// string 今天"天气"真好

使用转义字符在引号中表示特殊字符，可以解决包含自身引号的问题

\ 为转义符号
\\ 表示 \
\\\\ 表示 \\
\' 表示'
\" 表示"
\t 表示 制表符
\n 表示 换行符
……

（2）使用 $\color{red}{反引号}$ (esc键下方引号）来表示模板字符串，可以包含换行

a = `Hello
World
!!!`;

效果如下图所示：

在这里插入图片描述
（3）在 $\color{red}{模板字符串}$ 中，使用${}来嵌入其它字符串

let str1 = "今天是星期";
let str2 = `${str1}一`;
console.log(str2);

效果如下图所示：

在这里插入图片描述

3. 布尔类型（Boolean）

主要用于逻辑判断，只有两种值， $\color{red}{true}$ 和 $\color{red}{false}$

使用运算符 typeof 查看布尔值类型，返回值为 boolean

4. 空值（Null）

用于表示空对象、空对象，只有一个值 null

使用运算符 typeof 查看null类型，返回值为 object，无法使用 typeof 检查空值

5. 未定义（Undefined）

仅声明一个变量，未赋值时，该变量就是Undefined类型
只有一个值， undefined

使用运算符 typeof 查看未定义变量，返回值为 undefined

6. 符号类型（Symbol）【ES6新增】

一个 Symbol 类型的值，用于确保对象属性使用唯一标识符，不会发生属性冲突的危险。

符号仅用来创建唯一记号，进而用作 非字符串形式的对象属性

使用运算符 typeof 查看未定义变量，返回值为 symbol

（1）符号没有字面量，仅使用 Symbol() 函数创建符号
（2）Symbol() 函数可以传入字符串参数，作为对符号的描述，但此描述不是标识符
（3）Symbol() 函数不能与 new 关键字一起作为构造函数

// 添加符号描述
let symbol1 = Symbol("foo");
let symbol2 = Symbol("foo");
console.log(symbol1 === symbol2); // false，仅描述相同

可借用 Object() 函数，使用符号包装对象

// 使用符号包装对象
let testSymbol = Symbol();
let symbolObject = Object(testSymbol);
console.log(typeof symbolObject); // object
console.log(symbolObject); // Symbol {Symbol(), description: undefined}

在这里插入图片描述
更多用法，可以查看《JavaScript高级程序设计》

7. 手写函数判断JS数据类型

此部分，参考手写一个getType()函数用于判断JS数据类型

function getType(p) {
	let originType = Object.prototype.toString.call(p);
	let type = originType.split(" ")[1];
	type = type.substring(0, type.length - 1);
	return type.toLowerCase();
}

console.log(getType("小猪课堂")); // string
console.log(getType(123)); // number
console.log(getType(true)); // boolean
console.log(getType(null)); // null
console.log(getType(undefined)); // undefined
console.log(getType({ name: "小猪课堂" })); // object
console.log(getType([1, 3, 2])); // array
console.log(getType(Promise.resolve())); // promise
console.log(getType(new Set())); // set
console.log(getType(new WeakMap())); // weakmap
console.log(getType(new Date())); // date
console.log(getType(() => {})); // function
console.log(getType(new Map())); // map
console.log(getType(BigInt(100))); // bigint
console.log(getType(new RegExp(""))); // regexp
console.log(getType(Symbol())); // symbol