前端学习（六）

最新推荐文章于 2024-09-12 16:43:23 发布

5chenyu

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：前端 html javascript css

本文链接：https://blog.csdn.net/qq_44529689/article/details/122530597

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

02-JavaScript书写方式

1、JavaScript代码引入方式

行内式：写在标签内部。

内嵌式（内联式）：写在 head 标签中。

外链式：引入外部 JS 文件。

2、注释格式

2.1 HTML 的注释

<!-- 我是 HTML 注释  -->

2.2 CSS 的注释

<style type="text/css">
    /* 我是 CSS 注释 */
    p {
        font-weight: bold;
        font-style: italic;
        color: red;
    }
</style>

注意：CSS 只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效。

2.3 JavaScript 的注释

单行注释：

// 我是注释

多行注释：

/*
    多行注释1
    多行注释2
*/

补充：VS Code 中，单行注释的快捷键是「Ctrl + /」，多行注释的默认快捷键是「Alt + Shift + A」。

2、JavaScript输出语句

2.1 弹窗：alert()语句

alert（英文翻译为“警报”）的用途：弹出“警告框”。它会在弹窗中显示一条信息，并等待用户按下 “OK”。

如果写了两个 alert()语句，则网页的效果是：弹出第一个警告框，点击确定后，继续弹出第二个警告框。

2.2 弹窗：confirm()语句

var result = confirm('你听说过千古壹号吗？');
console.log(result);

代码运行后，页面上会显示一个弹窗。弹窗上有“确认”和“取消”两个按钮，点击“确定”返回 true，点击“取消”返回 false。

2.3 弹出输入框：prompt()语句

prompt()就是专门弹出能够让用户输入的对话框。用得少，测试的时候偶尔会用。

var a = prompt('请随便输入点什么东西吧');
console.log(a);

上方代码中，用户输入的内容，将被传递到变量 a 里面，并在控制台打印出来。

2.4 alert()和 prompt()的区别：

alert() 语句中可以输出数字和字符串，如果要输出字符串，则必须用引号括起来；prompt()语句中，用户不管输入什么内容，都是字符串。
prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。

3、输出语句

3.1 网页内容区域输出：document.write()语句

document.write('千古前端图文教程');

3.2 控制台输出：console.log() 打印日志

console.log()表示在控制台中输出。console 表示“控制台”，log 表示“输出”。括号里可以写字符串、数字、变量。

console 语句可以设置不同的打印等级：

console.log('千古壹号1'); //普通打印
console.warn('千古壹号2'); //警告打印
console.error('千古壹号3'); //错误打印

03-常量和变量

1、常量（字面量）：数字和字符串

有以下几种：

数字常量（数值常量）
字符串常量
布尔常量
自定义常量

1.1 数字常量

数字常量非常简单，直接写数字就行，不需要任何其他的符号。既可以是整数，也可以是浮点数。

// 不需要加引号
alert(996); // 996是整数

1.2 字符串常量

字符串常量就是用单引号或双引号括起来的内容。可以是单词、句子等，一定要加引号。在JS中，只要是单引号或双引号括起来的内容，都是字符串常量。

1.3 布尔常量

布尔常量就是表达真或者假，在JS中用 true 和 false 来表达。

if (true) {
	console.log('如果为真，就走这里面的代码);
}

1.4 自定义常量const

const 常量名称 = 常量取值;

const name = '千古壹号'; // 定义常量name，它的取值是 千古壹号

// name =  '许嵩'; // 既然 name 是常量，所以这一行是错误的写法，因为 name 无法被修改为其他的值

console.log(name); // 打印结果：千古壹号

2、变量

2.1 变量的定义/声明

const name; // 定义一个常量

let age; // 定义一个变量

2.2 变量的赋值

name = '千古壹号';

2.3 合并写法

var a = 100; // ES5语法
console.log(a);

const b = hello; // ES6 语法

let c = world; // ES6 语法
c = qianguyihao; // 修改 变量 C 的值

04-标识符、关键字、保留字

1、变量的命名规则

只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ )组成。
不能以数字开头。必须以字母(A-Z、a-z)、下划线(_)或者美元符( $ )开头。变量名中不允许出现空格。尤其注意，变量名中不能出现中划线-，很多人写了多年代码都不知道这一点，让人大跌眼镜。
严格区分大小写（JS 是区分大小写的语言）。
不能使用 JS 语言中保留的「关键字」和「保留字」作为变量名。下一篇文章会讲。
变量名长度不能超过 255 个字符。
汉语可以作为变量名。但是不建议使用，因为 low。

建议遵守：

命名要有可读性，方便顾名思义。
建议用驼峰命名法。比如 getElementById、getUserInfo、aaaOrBbbAndCcc

2、标识符

通俗来讲，标识符就是我们写代码时为某些东西起的名字。类似于人出生的时候，起个人名。

标识符的命名规则和变量的命令规则是一样的。关于变量的命名规则，详见上一段。

标识符不能使用语言中保留的关键字及保留字。

3、关键字

关键字：被JS赋予了特殊含义的单词。

也就是说，关键字是 JS 本身已经使用了的单词，我们不能再用它们充当变量名、函数名等标识符。关键字在开发工具中会显示特殊的颜色。

4、保留字

保留字：实际上就是预留的“关键字”。它们虽然现在还不是关键字，但是未来可能会成为关键字。同样不能用它们当充当变量名、函数名等标识符。

05-变量的数据类型：基本数据类型和引用数据类型

1、数据分类

数据分为：静态数据、动态数据。

静态数据

静态数据是指一些永久性的数据。一般是以文件的形式存储在硬盘上，比如文档、照片、视频等文件。

电脑关闭后，静态数据仍然还在。只要不主动删掉数据或者硬盘没损坏，这些数据就一直都在。

动态数据

动态数据是在程序运行过程中，动态产生的临时数据，这些数据可能随时发生变化。一般存储在内存中。

电脑关闭后，这些数据会被清除。

为何不把应用程序的动态数据加载到硬盘中执行呢？这主要是因为，内存的访问速度比硬盘快无数倍。

2、变量数据类型

基本数据类型（值类型）：String 字符串、Number 数值、BigInt 大型数值、Boolean 布尔值、Null 空值、Undefined 未定义、Symbol。
引用数据类型（引用类型）：Object 对象。

数据类型之间最大的区别：

基本数据类型：参数赋值的时候，传数值。
引用数据类型：参数赋值的时候，传地址。

3、栈内存和堆内存

我们首先记住一句话：JS 中，所有的变量都是保存在栈内存中的。

然后来看看下面的区别。

基本数据类型：

基本数据类型的值，直接保存在栈内存中。值与值之间是独立存在，修改一个变量不会影响其他的变量。

引用数据类型：

对象是保存到堆内存中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间；而变量保存了对象的内存地址（对象的引用），保存在栈内存当中。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。

06-基本数据类型：String 和 Boolean

1、string字符串

字符串型可以是引号中的任意文本，其语法为：双引号 "" 或者单引号 ''。

2、转义字符

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

\" 表示 " 双引号
\' 表示 ' 单引号
\\ 表示\
\r 表示回车
\n 表示换行。n 的意思是 newline。
\t 表示缩进。t 的意思是 tab。
\b 表示空格。b 的意思是 blank。

3、获取字符串的长度

str1.length

字符串的 length 属性，在判断字符串的长度时，会认为：

一个中文算一个字符，一个英文算一个字符
一个标点符号（包括中文标点、英文标点）算一个字符
一个空格算一个字符

4、字符串拼接

多个字符串之间可以使用加号 + 进行拼接。

字符串 + 任意数据类型 = 拼接之后的新字符串;

拼接规则：拼接前，会把与字符串相加的这个数据类型转成字符串，然后再拼接成一个新的字符串。

5、字符串的不可变性

字符串里面的值不可被改变。虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

6、模板字符串

var name = 'qianguyihao';
var age = '26';

console.log('我是' + name + ',age:' + age); //传统写法
console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式

注意，上方代码中，倒数第二行用的符号是单引号，最后一行用的符号是反引号（在 tab 键的上方）。

以前，在字符串中插入表达式的写法必须是这样的：

const a = 5;
const b = 10;
console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

现在，通过模板字符串，我们可以使用一种更优雅的方式来表示：

const a = 5;
const b = 10;

// 下面这行代码，故意做了换行。
console.log(`this is ${a + b} and
not ${2 * a + b}.`);

打印结果：

this is 15 and
not 20.

07-基本数据类型：Number

1、数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值。

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为： 5e-324

如果使用 Number 表示的变量超过了最大值，则会返回 Infinity。

无穷大（正无穷）：Infinity
无穷小（负无穷）：-Infinity

注意：typeof Infinity的返回结果是 number。

2、NaN

NaN：是一个特殊的数字，表示 Not a Number，非数值。比如：

console.log('abc' / 18); //结果是NaN

console.log('abc' * 'abcd'); //按理说，字符串相乘是没有结果的，但如果你非要让JS去算，它就一定会给你一个结果，结果是NaN。

注意事项：

typeof NaN的返回结果是 number。
Undefined 和任何数值计算的结果为 NaN。NaN 与任何值都不相等，包括 NaN 本身。
关于 isNaN() 函数，可以看后续的文章《JavaScript基础/typeof和数据类型转换》。

3、隐式转换

我们知道，"2"+1得到的结果其实是字符串，但是"2"-1得到的结果却是数值 1，这是因为计算机自动帮我们进行了“隐式转换”。

var a = '4' + 3 - 6;
console.log(a);

输出结果：

37;

08-基本数据类型：Null 和 Undefined

1、NULL空对象

null 专门用来定义一个空对象。例如：let a = null，又例如 Object.create(null).

如果你想定义一个变量用来保存引用类型，但是还没想好放什么内容，这个时候，可以在初始化时将其设置为 null。你可以把 null 理解为：null 虽然是一个单独的数据类型，但null 相当于是一个 object，只不过地址为空（空指针）而已。

补充：

Null 类型的值只有一个，就是 null。比如 let a = null。
使用 typeof 检查一个 null 值时，会返回 object。

2、undefined未定义类型

（1）变量已声明，未赋值时

声明了一个变量，但没有赋值，此时它的值就是 undefined。

（2）变量未声明（未定义）时

（3）函数无返回值时

（4）调用函数时，未传参

其他区别：

null 和 undefined 有很大的相似性。看看 null == undefined 的结果为 true 也更加能说明这点。

但是 null === undefined 的结果是 false。它们虽然相似，但还是有区别的，其中一个区别是，和数字运算时：

10 + null 结果为 10。
10 + undefined 结果为 NaN。

规律总结：

任何值和 null 运算，null 可看做 0 运算。
任何数据类型和 undefined 运算都是 NaN。

09-typeof和数据类型转换

通常有三种形式的类型转换：

转换为字符串类型
转换为数字型
转换为布尔型

1、typeof运算符

typeof()表示“获取变量的数据类型”，它是 JS 提供的一个操作符。返回的是小写，语法为：（两种写法都可以）

// 写法1
typeof 变量;

// 写法2
typeof(变量);

typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢？是字符串。

typeof null的返回值是object，因为 null 代表的是空对象。

typeof NaN的返回值是 number，因为NaN 是一个特殊的数字。

2、变量的类型转换分类

（1）显式类型转换

toString()
String()
Number()
parseInt(string)
parseFloat(string)
Boolean()

（2）隐式类型转换

isNaN ()
自增/自减运算符：++、—-
正号/负号：+a、-a
加号：+
运算符：-、*、/

（3）隐式类型转换（特殊）

逻辑运算符：&&、||、! 。非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算。&&、||的运算结果是原值，!的运算结果为布尔值。
关系运算符：<、> <= >=等。关系运算符，得到的运算结果都是布尔值：要么是 true，要么是 false。

3、将其他简单类型-->String类型

1. 隐式类型转换：字符串拼接

格式：变量+"" 或者变量+"abc"

2. 调用 toString()方法

变量.toString();

var result = 变量.toString(); // 或者用一个新的变量接收转换结果

【重要】该方法不会影响到原变量，它会将转换的结果返回。当然我们还可以直接写成a = a.toString()，这样的话，就是直接修改原变量。

toString() 的注意事项:

1、null 和 undefined 这两个值没有 toString() 方法，所以它们不能用 toString() 。如果调用，会报错。

2、Number 类型的变量，在调用 toString()时，可以在方法中传递一个整数作为参数。此时它会把数字转换为指定的进制，如果不指定则默认转换为 10 进制。

3. 使用 String()函数

String(变量);

使用 String()函数做强制类型转换时：

对于 Number、Boolean、Object 而言，本质上就是调用 toString()方法。
但是对于 null 和 undefined，则不会调用 toString()方法。它会将 null 直接转换为 "null"。将 undefined 直接转换为 "undefined"。

10-运算符

运算符：也叫操作符，是一种符号。通过运算符可以对一个或多个值进行运算，并获取运算结果。比如：typeof 就是运算符，可以来获得一个值的类型。它会将该值的类型以字符串的形式返回，返回值可以是 number、string、boolean、undefined、object。

运算符的分类

JS 中的运算符，分类如下：

算数运算符
自增/自减运算符
一元运算符
逻辑运算符
赋值运算符
比较运算符
三元运算符（条件运算符）

（1）算术运算符

算术运算符：用于执行两个变量或值的算术运算。

运算符	描述
+	加、字符串连接
-	减
*	乘
/	除
%	获取余数（取余、取模）

取模（取余）运算

格式：余数 = m % n;

计算结果：

如果 n < 0，那就先把 n 取绝对值后，再计算。等价于 m % (-n)。
如果 n 是 0，那么结果是 NaN。
在 n > 0 的情况下：
- 如果 m>=n，那就正常取余。
- 如果 m<n，那结果就是 m。
取余运算结果的正负性，取决于 m，而不是 n。比如：10 % -3的运算结果是 1。-10 % 3的运算结果是-1。

（2）自增和自减运算符

自增 `++`

自增分成两种：a++和++a。

（1）一个变量自增以后，原变量的值会立即自增 1。也就是说，无论是 a++ 还是++a，都会立即使原变量的值自增 1。

（2）我们要注意的是：a是变量，而a++和++a是表达式。

那这两种自增，有啥区别呢？区别是：a++ 和 ++a的值不同：（也就是说，表达式的值不同）

a++这个表达式的值等于原变量的值（a 自增前的值）。你可以这样理解：先把 a 的值赋值给表达式，然后 a 再自增。
++a这个表达式的值等于新值（a 自增后的值）。你可以这样理解：a 先自增，然后再把自增后的值赋值给表达式。

自减 `--`

原理同上。

开发时，大多使用后置的自增/自减，并且代码独占一行，例如：num++，或者 num--。

（3）一元运算符

1、typeof

typeof 就是典型的一元运算符，因为后面只跟一个操作数。

2、正号 `+`

（1）正号不会对数字产生任何影响。比如说，2和+2是一样的。

（2）我们可以对一个其他的数据类型使用+，来将其转换为 number【重要的小技巧】。

var b = '18';
b = +b; // 注意这行代码的一元运算符操作
console.log('b：' + b);
console.log(typeof b);

3、负号 `-`

负号可以对数字进行取反。

(4)逻辑运算符

逻辑运算符有三个：

&& 与（且）：两个都为真，结果才为真。
|| 或：只要有一个是真，结果就是真。
! 非：对一个布尔值进行取反。

注意：能参与逻辑运算的，都是布尔值。

1、非布尔值的与或运算【重要】

与运算的返回结果：（以多个非布尔值的运算为例）

如果第一个值为 false，则执行第一条语句，并直接返回第一个值；不会再往后执行。
如果第一个值为 true，则继续执行第二条语句，并返回第二个值（如果所有的值都为 true，则返回的是最后一个值）。

或运算的返回结果：（以多个非布尔值的运算为例）

如果第一个值为 true，则执行第一条语句，并直接返回第一个值；不会再往后执行。
如果第一个值为 false，则继续执行第二条语句，并返回第二个值（（如果所有的值都为 false，则返回的是最后一个值）。

2、非布尔值的 `!` 运算

非布尔值进行非运算时，会先将其转换为布尔值，然后再运算，返回结果是布尔值。

let a = 10;
a = !a;

console.log(a); // false
console.log(typeof a); // boolean

（5）赋值运算符

（6）比较运算符

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

1、非数值的比较

（1）对于非数值进行比较时，会将其转换为数字然后再比较。

console.log(1 > true); //false
console.log(1 >= true); //true
console.log(1 > '0'); //true

//console.log(10 > null); //true

//任何值和NaN做任何比较都是false

console.log(10 <= 'hello'); //false
console.log(true > false); //true

（2）特殊情况：如果符号两侧的值都是字符串时，不会将其转换为数字进行比较。比较两个字符串时，比较的是字符串的Unicode 编码。【非常重要，这里是个大坑，很容易踩到】

比较字符编码时，是一位一位进行比较。如果两位一样，则比较下一位。

（3）任何值和 NaN 做任何比较都是 false。

2、`==`符号的强调

==这个符号，它是判断是否等于，而不是赋值。

（1）==这个符号，还可以验证字符串是否相同。例如：

console.log('我爱你中国' == '我爱你中国'); // 输出结果为true

（2）==这个符号并不严谨，会做隐式转换，将不同的数据类型，转为相同类型进行比较（大部分情况下，都是转换为数字）。例如：

console.log('6' == 6); // 打印结果：true。这里的字符串"6"会先转换为数字6，然后再进行比较
console.log(true == '1'); // 打印结果：true
console.log(0 == -0); // 打印结果：true

console.log(null == 0); // 打印结果：false

（3）undefined 衍生自 null，所以这两个值做相等判断时，会返回 true。

console.log(undefined == null); //打印结果：true。

（4）NaN 不和任何值相等，包括他本身。

问题：那如果我想判断 b 的值是否为 NaN，该怎么办呢？

答案：可以通过 isNaN()函数来判断一个值是否是 NaN。举例：

console.log(isNaN(b)); //如果 b 为 NaN，则返回 true；否则返回 false。

3、`===`全等符号的强调

全等在比较时，不会做类型转换。如果要保证绝对等于（完全等于），我们就要用三个等号=== 。

console.log('6' === 6); //false
console.log(6 === 6); //true

==的反面是!=，===的反面是!==。

（7）三元运算符

三元运算符也叫条件运算符。

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

执行的流程：

条件运算符在执行时，首先对条件表达式进行求值：

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

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

（8）运算的优先级

11-流程控制语句：选择结构（if和switch）

11.1 代码块

用{}包围起来的代码，就是代码块。

在 ES5 语法中，代码块，只具有分组的作用，没有其他的用途。代码块中的内容，在外部是完全可见的。

11.2 流程控制语句

流程控制语句分类

顺序结构
选择结构：if 语句、switch 语句
循环结构：while 语句、for 语句

11.2.1顺序结构

11.2.2选择结构

（1）if语句

1、条件判断语句

条件成立才执行。如果条件不成立，那就什么都不做。

if (条件表达式) {
    // 条件为真时，做的事情
}

2、条件分支语句

格式一

if (条件表达式) {
    // 条件为真时，做的事情
} else {
    // 条件为假时，做的事情
}

格式二

if (条件表达式1) {
    // 条件1为真时，做的事情
} else if (条件表达式2) {
    // 条件1不满足，条件2满足时，做的事情
} else if (条件表达式3) {
    // 条件1、2不满足，条件3满足时，做的事情
} else {
    // 条件1、2、3都不满足时，做的事情
}

（2）switch 语句（条件分支语句）

switch(表达式) {
	case 值1：
		语句体1;
		break;

	case 值2：
		语句体2;
		break;

	...
	...

	default：
		语句体 n+1;
		break;
}

执行流程如下：

（1）首先，计算出表达式的值，和 case 依次比较，一旦有对应的值，就会执行相应的语句，在执行的过程中，遇到 break 就会结束。

（2）然后，如果所有的 case 都和表达式的值不匹配，就会执行 default 语句体部分。

switch 语句的结束条件【非常重要】

情况 a：遇到 break 就结束，而不是遇到 default 就结束。（因为 break 在此处的作用就是退出 switch 语句）
情况 b：执行到程序的末尾就结束。

12-流程控制语句：循环结构（for和while）

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

12.1 for循环

语法：

for(①初始化表达式; ②条件表达式; ④更新表达式){
	③语句...
}

执行流程：

①执行初始化表达式，初始化变量（初始化表达式只会执行一次）

②执行条件表达式，判断是否执行循环：
	如果为true，则执行循环③
	如果为false，终止循环

④执行更新表达式，更新表达式执行完毕继续重复②

12.2 while 循环语句

12.2.1 while循环

语法：

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

执行流程：

while语句在执行时，先对条件表达式进行求值判断：

	如果值为true，则执行循环体：
		循环体执行完毕以后，继续对表达式进行判断
		如果为true，则继续执行循环体，以此类推

	如果值为false，则终止循环

如果有必要的话，我们可以使用 break 来终止循环。

12.2.2 do...while循环

语法：

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

执行流程：

do...while语句在执行时，会先执行循环体：

	循环体执行完毕以后，在对while后的条件表达式进行判断：
		如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
		如果结果为false，则终止循环

while 循环和 do...while 循环的区别

这两个语句的功能类似，不同的是：

while 是先判断后执行，而 do...while 是先执行后判断。

也就是说，do...while 可以保证循环体至少执行一次，而 while 不能。

12.3 break 和 continue

break

break 可以用来退出 switch 语句或退出整个循环语句（循环语句包括 for 循环、while 循环。不包括 if。单独的 if 语句里不能用 break 和 continue，否则会报错）。
break 会立即终止离它最近的那个循环语句。
可以为循环语句创建一个 label，来标识当前的循环（格式：label:循环语句）。使用 break 语句时，可以在 break 后跟着一个 label，这样 break 将会结束指定的循环，而不是最近的。

continue

continue 可以用来跳过当次循环，继续下一次循环。
同样，continue 默认只会离他最近的循环起作用。
同样，如果需要跳过指定的当次循环，可以使用 label 标签。

13-对象简介

13.1 面向对象简介

面向对象：可以创建自定义的类型，很好的支持继承和多态。

面向对象的特征：封装、继承、多态。

13.2 对象的概念

在 JavaScript 中，对象是一组无序的相关属性和方法的集合。

对象的作用是：封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。

对象具有特征（属性）和行为（方法）。

两条补充

补充1：对象的属性值可以是任何的数据类型，也可以是个函数：（也称之为方法）

补充2：对象中的属性值，也可以是一个对象。

13.3 对象和数据类型之间的关系

数据类型分类

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

基本数据类型：

基本数据类型的值直接保存在栈内存中，值与值之间是独立存在，修改一个变量不会影响其他的变量。

对象：

只要不是那五种基本数据类型，就全都是对象。

如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体。

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址（对象的引用）。

换而言之，对象的值是保存在堆内存中的，而对象的引用（即变量）是保存在栈内存中的。

如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。

13.4 传值和传址的区别

传值

let a = 1;

let b = a;// 将 a 赋值给 b

b = 2; // 修改 b 的值，a的值不会改变

传址

var obj1 = new Object();
obj1.name = "孙悟空";

var obj2 = obj1; // 将 obj1 的地址赋值给 obj2。从此， obj1 和 obj2 指向了同一个堆内存空间

//修改obj2的name属性
obj2.name = "猪八戒";

13.5 对象的分类

1.内置对象：

由ES标准中定义的对象，在任何的ES的实现中都可以使用
比如：Object、Math、Date、String、Array、Number、Boolean、Function等。

2.宿主对象：

由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
比如 BOM DOM。比如console、document。

3.自定义对象：

由开发人员自己创建的对象

通过 new 关键字创建出来的对象实例，都是属于对象类型，比如Object、Array、Date等。

先写这么多，剩下的下一篇笔记写。

5chenyu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端学习（六）

02-JavaScript书写方式

1、JavaScript代码引入方式

2、注释格式

2.1 HTML 的注释

2.2 CSS 的注释

2.3 JavaScript 的注释

2、JavaScript输出语句

2.1 弹窗：alert()语句

2.2 弹窗：confirm()语句

2.3 弹出输入框：prompt()语句

2.4 alert()和 prompt()的区别：

3、输出语句

3.1 网页内容区域输出：document.write()语句

3.2 控制台输出：console.log() 打印日志

03-常量和变量

1、常量（字面量）：数字和字符串

1.1 数字常量

1.2 字符串常量

1.3 布尔常量

1.4 自定义常量const

2、变量

2.1 变量的定义/声明

2.2 变量的赋值

2.3 合并写法

04-标识符、关键字、保留字

1、变量的命名规则

2、标识符

3、关键字

4、保留字

05-变量的数据类型：基本数据类型和引用数据类型

1、数据分类

静态数据

动态数据

2、变量数据类型

3、栈内存和堆内存

06-基本数据类型：String 和 Boolean

1、string字符串

2、转义字符

3、获取字符串的长度

4、字符串拼接

5、字符串的不可变性

6、模板字符串

07-基本数据类型：Number

1、数值范围

2、NaN

3、隐式转换

08-基本数据类型：Null 和 Undefined

1、NULL空对象

2、undefined未定义类型

（1）变量已声明，未赋值时

（2）变量未声明（未定义）时

（3）函数无返回值时

（4）调用函数时，未传参

09-typeof和数据类型转换

1、typeof运算符

2、变量的类型转换分类

（1）显式类型转换

（2）隐式类型转换

（3）隐式类型转换（特殊）

3、将其他简单类型-->String类型

1. 隐式类型转换：字符串拼接

2. 调用 toString()方法

3. 使用 String()函数

10-运算符

运算符的分类

（1）算术运算符

取模（取余）运算

（2）自增和自减运算符

自增 ++

自减 --

（3） 一元运算符

1、typeof

2、正号 +

3、负号 -

(4)逻辑运算符

1、非布尔值的与或运算【重要】

2、非布尔值的 ! 运算

（5）赋值运算符

（6）比较运算符

自增 `++`

自减 `--`

（3）一元运算符

2、正号 `+`

3、负号 `-`

2、非布尔值的 `!` 运算

2、`==`符号的强调

3、`===`全等符号的强调