木道寻08

这个屌丝很懒，什么也没留下！

热门标签

JavaScript高级程序设计读书笔记

作者：木道寻08 | 2024-07-16 23:51:45

踩

javascript高级程序设计读书笔记

JS元素类型：

什么是JavaScript

JavaScript是一门用来与网页交互的脚本语言，包含以下三个组成部分。
1.ECMAScript：由ECMA-262定义并提供核心功能。
2.文档对象模型（DOM）：提供与网页内容交互的方法和接口。
3.浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。

HTML中的JavaScrip

script元素

1.在网页中嵌入JavaScript代码

<script>
function sayHi() {
console.log("Hi!");
}
</script>
1
2
3
4
5

2.在网页中包含外部JavaScript文件
<script src="example.js"></script>或

<script src="http://www.somewhere.com/afile.js"></script>
1

注意：使用了src属性的<script>元素不应该再在<script>和</script>
标签中再包含其他JavaScript代码。如果两者都提供的话，则浏览器只会
下载并执行脚本文件，从而忽略行内代码。
不管包含的是什么代码，浏览器都会按照 <script> 在页面中出现的顺序
依次解释它们。

推迟执行脚本

在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

<script defer src="example2.js"></script>
1

注意：defer属性只对外部脚本文件才有效；对于XHTML文档，指定defer属性时应该写成defer=“defer”。

异步执行脚本

给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。

<script async src="example2.js"></script>
1

动态加载脚本

除了<script>标签，还有其他方式可以加载脚本。因为JavaScript可以使DOM API，所以通过向DOM中动态添加script元素同样可以加载指定的脚本。只要创建一个script元素并将其添加到DOM即可。

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
1
2
3

`<noscript>`元素

在下列两种情况下，浏览器将显示包含在中的内容：
1.浏览器不支持脚本；
2.浏览器对脚本的支持被关闭。

<body>
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
</body>
1
2
3
4
5

总结

1.要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
2.所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
3.对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。
4.可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
5.可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
6.通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的
内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内
容都不会被渲染。

语言基础

区分大小写

标识符

所谓标识符，就是变量、函数、属性或函数参数的名称。标识符可以由一或多个下列字符组成：
第一个字符必须是一个字母、下划线（_）或美元符号（$）；
剩下的其他字符可以是字母、下划线、美元符号或数字。
注意：关键字、保留字、true、false和null不能作为标识符。

注释

// 单行注释
1

/* 这是多行注释 */
1

严格模式

1.要对整个脚本启用严格模式，在脚本开头加上这一行：

"use strict";
1

2.也可以单独指定一个函数在严格模式下执行，只要把这个预处理指令放到函数体开头即可：

function doSomething() {
"use strict";
// 函数体
}
1
2
3
4

变量

var关键字

定义变量

var message = "hi";
1

var声明作用域

1.使用var在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

function test() {
var message = "hi"; // 局部变量
}
test();
console.log(message); // 出错！
1
2
3
4
5

这里，message变量是在函数内部使用var定义的。函数叫test()，
调用它会创建这个变量并给它赋值。调用之后变量随即被销毁，因
此示例中的最后一行会导致错误。
2.不使用var关键字直接定义变量，该变量会变成全局变量。

function test() {
message = "hi"; // 全局变量
}
test();
console.log(message); // "hi"
1
2
3
4
5

var声明提升

function foo() {
console.log(age);
var age = 26;
}
foo(); // undefined
1
2
3
4
5

相当于

function foo() {
var age;
console.log(age);
age = 26;
}
foo(); // undefined
1
2
3
4
5
6

let声明

1.let声明的范围是块作用域，而var声明的范围是函数作用域。

if (true) {
let age = 26;
console.log(age); // 26
}
console.log(age); // ReferenceError: age没有定义
1
2
3
4
5

此处错误是因为let作用域仅限于函数体内部，外部无法访问。
2.let与var的另一个重要的区别，就是let声明的变量不会在作用域中被提升。

// name会被提升
console.log(name); // undefined
var name = 'Matt';
// age不会被提升
console.log(age); // ReferenceError：age没有定义
let age = 26;
1
2
3
4
5
6

3.与var关键字不同，使用let在全局作用域中声明的变量不会成为window对象的属性（var声明的变量则会）。

var name = 'Matt';
console.log(window.name); // 'Matt'
let age = 26;
console.log(window.age); // undefined
1
2
3
4

for循环中的let声明

1.使用let，迭代变量的作用域仅限于for循环内部。

for (let i = 0; i < 5; ++i) {
// 循环逻辑
}
console.log(i); // ReferenceError: i没有定义
1
2
3
4

2.使用var变量声明由于在退出循环时，迭代变量保存的是导致循环退出的值：5

for (var i = 0; i < 5; ++i) {
setTimeout(() => console.log(i), 0)
}
// 你可能以为会输出0、1、2、3、4
// 实际上会输出5、5、5、5、5
for (let i = 0; i < 5; ++i) {
setTimeout(() => console.log(i), 0)
}
// 会输出0、1、2、3、4
1
2
3
4
5
6
7
8
9

使用let声明迭代变量时，JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。

const声明

const的行为与let基本相同，唯一一个重要的区别是用它声明变量时必
须同时初始化变量，且尝试修改const声明的变量会导致运行时错误。

const age = 26;
age = 36; // TypeError: 给常量赋值
// const也不允许重复声明
const name = 'Matt';
const name = 'Nicholas'; // SyntaxError
// const声明的作用域也是块
const name = 'Matt';
if (true) {
const name = 'Nicholas';
}
console.log(name); // Matt
1
2
3
4
5
6
7
8
9
10
11

注意：不能用const来声明迭代变量（因为迭代变量会自增）：

for (const i = 0; i < 10; ++i) {} // TypeError：给常量赋值
1

数据类型

ECMAScript有6种简单数据类型（也称为原始类型）：Undefined、Null、Boolean、Number、String和Symbol。Symbol（符号）是ECMAScript 6新增的。
还有一种复杂数据类型叫Object（对象）。

typeof操作符

作用：返回数据类型。

let message = "some string";
console.log(typeof message); // "string"
console.log(typeof(message)); // "string"
console.log(typeof 95); // "number"
1
2
3
4

注意：console.log(typeof null); // "object"

undefined类型

输出未声明变量值导致报错：

let message; // 这个变量被声明了，只是值为undefined
// 确保没有声明过这个变量
// let age
console.log(message); // "undefined"
console.log(age); // 报错
1
2
3
4
5

注意：调用typeof时未初始化变量不会报错，而是返回undefined

let message; // 这个变量被声明了，只是值为undefined
// 确保没有声明过这个变量
// let age
console.log(typeof message); // "undefined"
console.log(typeof age); // "undefined"
1
2
3
4
5

null类型

null表示一个空对象指针：

let car = null;
console.log(typeof car); // "object"
1
2

undefined值是由null值派生而来的：

console.log(null == undefined); // true
1

注意：undefined和null都为假值。

Boolean 类型

只有true和false两个值。这两个布尔值不同于数值，因此true不等于1，false不等于0。
转换为false的值：false 、 “”（空字符串）、0、NaN、null、undefined。

number类型

科学计数法：

let floatNum = 3.125e7; // 等于31250000
1

浮点值的精确度最高可达17位小数，但在算术计算中远不如整数精确。
注意：

if (a + b == 0.3) { // 别这么干！ console.log("You got 0.3."); }
1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/836831