学习《JavaScript高级程序设计》----day01

已于 2022-08-05 12:31:02 修改
阅读量125 收藏
点赞数 2
文章标签： javascript 学习 前端
于 2022-08-04 14:27:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javacabbagej/article/details/126155243
版权

Chapter1—基础篇

文章目录

一、HTML中的Javascript

1.使用script标签

1.1 在script标签内部写代码，例如：

<script type="text/javascript" >
	//...some codes
</script>

1.2 从外部引用代码，例如：

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

2.script标签的相关属性

  • async:
    立即开始下载脚本，但不阻碍其他页面动。相当于告知浏览器立即下载，但延迟执行。
  • defer：
    脚本可以延迟到文档完全被解析和显示之后再执行。
  • charset：
    指定字符集，较少使用。
  • crossorigin：
    CORS（跨域资源共享）配置。默认不使用。
  • integrity：
    允许对比接收到的资源和指定的加密签名，以验证子资源的完整性。该属性可用于保证CDN（内容分发网络）不会提供恶意的内容。
  • language：
    已废弃。
  • src：
    要执行的外部文件。
  • type：
    用于替代language属性，该值始终都是text/javascript。

3.使用script标签的注意事项

3.1.当出现下列情况的时候(在标签内部写JS代码的同时也外部引用JS代码)，浏览器只会下载并执行外部脚本文件：

<script src="test.js" type="text/javascript">
	//...some codes
</script>

例子：

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
	<script type="text/javascript" src="index.js">
		alert("执行内部代码");
	</script>
	</body>
</html>

index.js

console.log("执行外部代码");

运行结果：
在这里插入图片描述

二、语言基础

1.变量

  • var关键字：
    1.使用var声明的变量会自动提升到函数作用或全局作用域的顶部（即var 声明提升）。
    2.在函数内部定义变量时，若忽略var关键字，则在函数执行后该变量会被提升到全局作用域。
    代码如下（示例）：

    console.log(a); //不会报错，打印undefined
var a; // 声明提升到全局作用域顶部
function test() {
	console.log(b); //不会报错, 打印2
	var b = 2; //变量b会提升到函数作用域的顶部
	c = 23; //函数执行后，该变量会提升到全局作用域
}
console.log(c); //报错
test();
console.log(c); //不会报错, 打印23

  • let关键字:
    1.let与var类似，但是let声明的变量不会出现提升。
    2.let声明的变量会出现暂时性死区，即在let声明变量之前使用该变量，会报错。
    3.在同一作用域中不可重复声明同一变量。
    4.不能使用let进行条件式声明。
    5.for循环中的let声明，JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。
    代码如下（示例）：

    console.log(d);//let声明的变量不会出现“提升”，在let声明变量之前使用该变量，出现暂时性死区
let d;
let d = 23;//报错，重复声明
for (let i = 0; i < 5; i++) {
	setTimeout(() => console.log(i), 0); //顺序打印 0 1 2 3 4
}

  • const关键字：
    1.与let类似，但是在声明的同时也得初始化变量。
    2.const声明对于for-of、for-in有特别的意义。
    3.在for循环中不能使用const来声明迭代变量。
    代码如下（示例）：

    const f = 23;
f = 24; //报错
const arr = [1, 2, 3, 4, 5];
for (const val of arr) {
	console.log(val); //打印 1 2 3 4 5
}

// 错误示例
for(const i = 0; i < 5; i++){
	console.log(i);
}

2.JavaScript中基本数据类型

JS中有6中基本数据类型Undefined、Null、Boolean、String、Number、Symbol：

  • Undefined 类型:
    Undefined类型只有一个值，即undefined；当一个变量未初始化时,它的值默认为undefined。
    代码如下（示例）：
    let a;
console.log(a === undefined); //true
console.log(typeof a); // "undefined"
  • Null 类型:
    Null类型只有一个值，即null，逻辑上null表示一个空对象指针，因此typeof 返回的值是"object"。
    代码如下（示例）：
    let b = null;
console.log(typeof b); // "object"
  • Boolean 类型:
    1.Boolean有两个字面值true和false。
    2.可以通过Boolean()转型函数将其它类型的值转换为Boolean类型的值。
    代码如下（示例）：
    let c = false;
console.log(typeof c); //boolean
console.log(Boolean(a)); // false
console.log(Boolean(b)); // false
  • Number 类型:
    1.Number类型使用IEEE754格式表示整数和浮点数。
    2.最小值保存在Number.MIN_VALUE中，值为5e-324；最大值保存在Number.MAX_VALUE中,值为1.7976931348623157e+308。
    3.进行浮点数的等值比较时应当注意到浮点数的精确度最高可达17位小数。如 0.1 + 0.2 ！= 0.3
    4.NaN，表示不是数字，使用0除任何值的结果都是NaN；其他类型的数据转为Number失败时，结果都是NaN。
    5.使用Number()，parseInt()，parseFloat()将其它类型的数据转为Number类型的数值。
    代码如下（示例）：
    let d = 076; //八进制数字
console.log(d);
let e = 0xA6; //十六进制
console.log(e);
console.log(Number(a)); //NaN
console.log(Number(b)); //0
console.log(Number(c)); //0
console.log(Number("0123")); //123
console.log(Number("")); //0
console.log(Number("0xA6")); //166
console.log(Number.MAX_VALUE); //1.7976931348623157e+308
console.log(Number.MIN_VALUE); //5e-324
  • String 类型:
    1.toString()方法，将其他类型的数据转换为String类型的值，几乎其他所有类型的值都有toString()方法，但null和undefined没有。
    2.String()，将其他类型的数据转为String 类型与toString()类似，但是对null和undefined会回"null"和"undefined"。
    3.模板字面量`${variable}`。
    代码如下（示例）：
     console.log(c.toString()); //false
 console.log(String(a)); //undefined
 console.log(`\u03a3 ${c}`); //Σ false
  • Symbol 类型:
    1.Symbol是原始值，且Symbol实列唯一和不可变。主要用途是避免对象属性冲突。
    2.Symbol()，生成Symbol实例。
    3.通过Symbol.for()进行共享和重用Symbol实例，在全局符号表中创建。
    4.Symbol.iterator表示一个方法，该方法返回对象默认的迭代器。由for-of使用。
    代码如下（示例）：
     let g = Symbol();
 console.log(typeof g); //symbol
 let gloabalSymbol = Symbol.for("foo");
 let reuseSymbol = Symbol.for("foo");
 console.log(gloabalSymbol === reuseSymbol); //true

 class Emitter {
    constructor(max) {
        this.idx = 0;
        this.max = max;
    }
    *[Symbol.iterator]() {
        while (this.idx < this.max) {
            yield this.idx++;
        }
    }
 }

function count(n) {
	const emitter = new Emitter(n);
	for (const x of emitter) {
    	console.log(x);
	}
}
count(5); //打印 0 1 2 3 4
  • typeof操作符，typeof 操作符返回的值是下列字符串之一:
    "undefined"、"function"、"string"、"number"、"boolean"、"object"、"symbol"
    代码如下（示例）：
    let t1;
let t2 = null;
let t3 = false;
let sum = (a, b) => a + b;
let str = "dwcw";
let num = 1.56e+6;
let obj = {
		name:'lili',
		age:23
	};
let s = Symbol("we");

console.log(typeof t1); // undefined
console.log(typeof t2); // object
console.log(typeof t3); // boolean
console.log(typeof sum); // function
console.log(typeof num); // number
console.log(typeof str); // string
console.log(typeof obj); // object
console.log(typeof s); // symbol

3.JavaScript中操作符

  • 按位非(~):
    返回数字的补数。

    let a = 123;
console.log(~a); //-124

  • 按位与(&):
    返回两个数字的与值。

    let a = 123;
let b = 111;
console.log(a & b); //107

  • 按位异或(^):
    返回两个数字的异或值。

    let a = 123;
let b = 111;
console.log(a ^ b); //20

  • 左移(<<):
    将数字的二进制数的所有位向左移。

    let a = 1123;
console.log(a >> 5); // 3

  • 有符号右移(>>):
    将数字的二进制数的所有非符号位右移。

    let a = 123;
console.log(a << 5); //3936

  • 无符号右移(>>>):
    将数字的二进制数的所有位向右移。

    let a = 123;
console.log(a >>> 5); // 3

  • 逻辑非(!):
    返回布尔值。

    let a = 123;
console.log(!a); // false
console.log(!!a); // true

  • 逻辑与(&&):
    返回布尔值。

    let f1 = true,
	f2 = false;
console.log(f1 && f2);// false

  • 逻辑或(||):
    返回布尔值。

    let f1 = true,
	f2 = false;
console.log(f1 || f2);// true

  • 指数操作符(**):
    a ** b表示a的b次方。

    let a = 2,
	b = 3;
console.log(a ** b);// 8

  • 等于(==)和不等于(!=):
    1.这两个操作符都会先进行类型转换(强制类型转换)，再确定两个操作数是否相等。
    2.如果任一操作数是布尔值，则先将其转换为数值(true–>1， false–>0)，再进行比较。
    3.如果一个数字一个是字符串，则将字符串尝试转换为数字，再进行比较。
    4.如果一个是对象另一个不是，则将对象调用valueOf()方法取得其原始值，再根据前面的规则比较。
    5.如果两个都是对象，则看它们是否指向同一个对象，是则返回true；否则返回false。
    6.null和undefined相等。
    7.如果有一个是NaN则不相等(!=)返回true， 相等(==)返回false。

    console.log(null == undefined); //true
console.log("12" != 12); //false
console.log("err" == 12); //false
console.log({} == {}); //false;

  • 全相等(===)和全不相等(===):
    这两个操作符不会进行类型转换。

    console.log(null === undefined); //flase
console.log("12" !== 12); //true
console.log("err" !== 12); //true
console.log({} === {}); //false;

  • for-in:
    是一种严格的迭代语句,用于枚举对象中的非符号键属性。

    const book = {
	id:123,
	author:"佚名",
	publishedDate:"2022/2/5",
	bookName:"《JS》"
	};
for	(const prop in book){
	console.log(`${prop} : ${book[prop]}`);
}

  • for-of:
    是一种严格的迭代语句,用于遍历可迭代对象的元素 。

    const arr = [1, 2, 3, 4, 5];
for	(const item of arr){
	console.log(item);
}

  • 注意:
    两个操作数相加，只要其中有一个是字符串，就会将另一个(如果不是字符串)转换为字符串，然后将两个字符串按照操作数出现的顺序进行拼接，得到一个字符串。

    let a = 123;
let b = "q";
console.log(a + b) ;// 123q
console.log(b + a) ;// q123

总结

以上内容主要是通过学习《JavaScript高级程序设计》总结而得出，初次发表博客，有不足之处，欢迎大家直到评论。

奇风叶
关注
学习《JavaScript高级程序设计》----day02
javacabbagej的博客
08-05 156
引用值、原始值、深度复制、浅复制、垃圾回收机制、内存泄漏
day04 JavaScript高级程序设计 阅读总结
weixin_49172439的博客
03-21 1646
《JavaScript高级程序设计》（第四版）阅读总结 额，据说这本是前端er必看书籍，花了20个小时简单把这本书过了一下，目前暂时很少用到的东西我这一遍就没有过了，等以后要用的时候再回来继续学了。 先来谈谈这本书的缺点，书籍前面章节用到了一些后面才讲到的东西，比如第三章讲symbol对象时，就用到了后面才讲的iterator和generator。然后就是感觉讲的有点太广了，而且基本没有课后习题，看过就是看过了，顶多自己花时间把书里面的例子都敲一遍。所以我建议应该和现代JavaScript教程一起食用。 反
JavaScript高级程序设计
hello_helloworld的博客
08-31 7437
这是我对《JavaScript高级程序设计》的详细学习笔记，主要内容包括html中的JavaScript，变量基础，变量、作用域与内存，基本引用类型、集合引用类型，迭代器与生成器，对象、类与面向对象编程，函数，期约与异步函数，BOM,DOM,DOM扩展，DOM2和DOM3，事件......
Javascript高级程序设计读书笔记_day01
qq_36818174的博客
11-10 552
什么是Javascript 1995年，Javascript问世，在当时主要用途就是处理输入验证。由于当时只有服务器能够处理输入值是否有效，但服务器处理则需要一次网络通信 ，会导致处理速度缓慢，因此Javascript问世，直接处理输入验证，而无需网络通信。因此Javascript成为浏览器的标配。 1998 年，国际标准化组织（ISO）和国际电工委员会（IEC）也将 ECMAScript 采纳为标准（ISO/ IEC-16262）。自此以后，各家浏览器均以 ECMAScript 作为自己 JavaScr
基于uniapp小程序的英语学习交流平台小程序附带文章源码部署视频讲解等
fanheng1231的博客
09-04 1141
🌞博主介绍：✌CSDN特邀作者、资深全栈开发程序员，曾在互联网大厂担任高级职位、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。✌🌞👇🏻精彩专栏 推荐订阅👇🏻2024-2025年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2024-2025年最值得选的Java毕业设计选题大全：100个热门选题推荐✅。
grpc-python day01-day03
yutu75的博客
03-29 3543
文章目录grpc-python介绍环境准备 grpc-python介绍 RPC(Remote Procedure Call)远程过程调用，简单的理解是一个节点请求另一个节点提供的服务。如果 http 就是一种远程调用的协议。这里提到了远程过程调用，那么对于远程就应该有本地过程调用那么什么是本地过程调用，也就是调用本地方法对本地的对象进行操作。 例如调用 Add 方法向列表中添加一个对象。而远程过程调用，向列表添加对象方法并不在本地，调用远程提供 Add() 来实现该操作。 gRPC 是一个现代开源的高性能远
JavaScript-高级(学习笔记)
热门推荐
前端徒行者
11-01 1万+
课程介绍 大纲 1.原型及作用 2.游戏：贪吃蛇 3.继承 4.高阶函数（内置的方法+正则表达式） 5.正则表达式 目标 理解面向对象开发思想 掌握Javascript面向对象开发相关模式 掌握在Javascript中使用正则表达式 案例演示：贪吃蛇 Day1介绍 1.复习-------------------------------------------大量时间，压缩至30分钟 2...
01-JavaScript基础.md
mxl00z的博客
10-05 883
学习目标: 掌握编程的基本思维 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔等看不穿 ##课前说明 目标： 掌握编程的基本思想 掌握JavaScript的基础语法,使用常见API(备注)完成相应案例及练习和作业 培养独立解决问题能力 遇到问题先独立调试(牛X从规范和调试...
基于uniapp小程序的高校学习助手小程序附带文章源码部署视频讲解等
fanheng1231的博客
09-15 1082
🌞博主介绍：✌CSDN特邀作者、资深全栈开发程序员，曾在互联网大厂担任高级职位、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。✌🌞👇🏻精彩专栏 推荐订阅👇🏻2024-2025年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2024-2025年最值得选的Java毕业设计选题大全：100个热门选题推荐✅。
基于uniapp小程序的诗词学习系统附带文章源码部署视频讲解等
fanheng1231的博客
09-27 974
🌞博主介绍：✌CSDN特邀作者、资深全栈开发程序员，曾在互联网大厂担任高级职位、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。✌🌞👇🏻精彩专栏 推荐订阅👇🏻2024-2025年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2024-2025年最值得选的Java毕业设计选题大全：100个热门选题推荐✅。
高级软件人才培训专家-day10-SpringBootWeb案例
03-10
- **标题与描述**：“高级软件人才培训专家-day10-SpringBootWeb案例”这一标题表明这是一个针对高级软件人才的专业培训课程中的第十天教学内容，主要涉及使用Spring Boot框架构建Web应用的案例研究。 ### 二、技术...
day02-js高级-课件.rar
04-18
在"day02-js高级-课件.rar"这个压缩包中，我们可以预见到一系列深入讲解JavaScript高级特性的教学资料。这些课件将帮助我们深入理解并掌握JS的核心概念，以便于提升我们的前端开发技能。 首先，我们要关注的是...
word-of-the-day-BE
03-20
标题中的"word-of-the-day-BE"项目是一个与英语学习相关的应用后端代码，它可能是一个服务，每天为用户推送一个新词汇，帮助他们扩展词汇量。描述中提到的"回购word-of-day-com的后端代码"暗示了这个项目可能是对...
work-day-scheduler
03-29
在现代生活中，有效的时间管理和日程安排至关重要。"work-day-scheduler"项目就是一...通过不断迭代和优化，"work-day-scheduler"可以进一步升级，例如集成服务器端功能，提供云同步，或者添加提醒和通知等高级特性。
JavaScript高级day45--JS是单线程的
maomaochong07的博客
07-08 121
js中的进程和线程证明设计成单线程的原因 证明 setTimeout(function () { console.log('timeout 2222')//8 alert('22222222')//9 暂停当前主线程的执行, 同时暂停计时, 点击确定后, 恢复程序执行和计时 }, 2000) setTimeout(function () { console.log('timeout 1111')//6 alert('1111111')//7 暂停当前主线程的执行,
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1248
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Puppeteer自动化：使用JavaScript定制PDF下载
ip16yun的博客
10-08 852
Puppeteer 是一个强大的Node.js库，提供了对无头Chrome或Chromium的控制，可以用于生成网页快照、抓取数据、自动化测试等任务。其中，生成PDF文件是一个常见的需求，本文将通过使用Puppeteer展示如何自动化生成定制的PDF，并使用代理IP、设置user-agent、cookie等技术来增强自动化过程的灵活性与稳定性。为了更好地理解如何定制Puppeteer生成的PDF文件，我们提供一个生成A4纸张格式的网页PDF的实例。用户可以根据需求自定义输出的PDF格式或内容。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
最新发布
m0_66584716的博客
10-11 874
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
javascript中==和===有什么不同
qq_48763502的博客
10-09 405
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值