JavaScript

weixin_51223473

已于 2025-06-12 18:28:49 修改

阅读量597

点赞数 20

CC 4.0 BY-SA版权

于 2025-01-17 21:57:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51223473/article/details/143609968

P03 javascript书写位置

内部javascript

内部JavaScript：直接写在html文件里，用script标签包住
规范：script标签写在</body>上面
拓展：alert('你好，js')页面弹出警告框对话框
注意事项：我们将<script>放在HTML文件中底部附近的原因世浏览器会按照代码在文件中的顺序加载HTML。如果先加载javascript期望修改其下方的HTML，那么它可能由于HTML尚未加载而失效。因此，将javascript代码放在HTML页面的底部附近通常是最好的策略

<body>
<script>
    alert('你好，js')
</script>
</body>

外部javascript

代码写在.js结尾的文件里
语法：通过script标签，引入到html页面中
通过src引入外部js文件

<body>
    <script src="my.js"></script>
</body>

内联javascript

代码写在标签内部
注意：此处作为了解即可，但是后面vue框架会用这种模式

<body>
    <button onclick="alert('警示框')">按钮</button>
</body>

P04 注释

单行注释：

符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctr+/

<script>
// 注释
</script>

块注释

符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift+alt+a

<script>
/*
块注释
*/
</script>

结束符

作用：使用英文的;代码语句结束
实际情况：实际开发中，可写可不写，浏览器（javascript引擎）可以自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张，书写javascript代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

P5 javascript输入和输出语句和字面量

输出语法：

目标：能写出常见javascript输入输出语法
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出语法：
语法1

document.write('文档输出内容')

作用：向body内输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素
语法2：

alert(‘警示框’)

作用：页面弹出警告对话框
语法3：

console.log(‘控制台打印’)

作用：控制台输出语法，程序员调试使用

输入语法：

语法

prompt('请输入您的名字')

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

字面量

目标：能说出上面是字面量
在计算机科学中，字面量（literal）是在计算机中描述：事、物
比如：

我们的工资是：10000，此时10000就是数字字面量
'黑马程序员' 字符串字面量
还有接下来我们学的 [] 数组字面量，{} 对象字面量等等

P6 变量与赋值

变量：变量是计算机中用来存储数据的”容器“，它可以让计算机变得有记忆。
注意：变量不是数据本身，用于存储数值的容器，可以理解为用来装东西的盒子

变量的基本使用

目标：能够声明一个变量并完成赋值的操作
变量的声明

声明变量：想要使用变量，首先需要创建变量（也称为声明变量或者定义变量）
声明变量有两部分构成：声明关键字、变量名（标识）
let及6关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语

let 变量名

变量的赋值

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个”=“，然后是数据。
注意：是通过变量名来获得变量里面的数据

let name = '数据';

更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
let不允许多次声明一个变量

let name = 'pink'
name = 'blue'

声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
语法：多个变量中间用逗号隔开

let age = 18, name = 'pink'

P11 数组

数组（Array）一种将一组数据存在单个变量名下的优雅方式

let arr = []

数组的基本使用

目标：能够声明数组并且能够获取里面的数据

声明语法：

let 数组名 = [数据1，数据2，....,数据n]

数据是按顺序保存，所以每个数据都有自己的编号
使用数组数组名[索引号] 从0开始
在数组中，数据的编号也叫索引或下标
数据可以存储任意类型的数据

console.log(arr[1])

数组长度：数组中数据的个数，通过数组的length属性获得

console.log(name.length)

P12 常量的基本使用

概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
命名规范：和变量一致
常量使用：

const G = 9.8

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const

P13 数据类型

计算机世界中的万事万物都是数据
计算机程序可以处理大量的数据，为什么要给数据分类？

更加充分和高效的利用内容
也更加方便程序员的使用数据

js数据类型整体分为两大类：

基本数据类型

number 数字型：可以是整数、小数、正数、负数（算术运算符：加+、减-、乘*、除/、取余%【开发中经常作为某个数字是否】）

let num = 1
let num = 1.2

string 字符串型：数字相加，字符相连

let age = 18
document.write('大家好'+ age + '岁')

模板字符串：

使用场景：拼接字符串和变量
在没有它之前，要拼接变量比较麻烦
外面使用`` 里面${变量名}
语法：

let age = 18
document.write(`我今年${age}`)

boolean 布尔型：表示肯定或否定时在计算机中对应的是布尔类型数据、它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）

let isCool = true
console.log(isCool)

undefined 未定义型：未定义时比较特殊的类型，只有一个值undefined，只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined

开发使用场景：我们开发中经常声明一个变量，等待传送过来的数据，如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

let age
console.log(age)

null 空类型：javascript中的null仅仅是一个代表“无”、“空”、或“值未知”的特殊值

null和undefined区别：undefined表示没有赋值。null表示复制了，但是内容为空
null开发中的使用场景：官方解释：把null作为尚未创建的对象
将来有个变量里面存放的是一个对象，但是对象还没有建好，可以先给null

let obj = null
console.log(obj)

引用数据类型

object对象

检测数据类型

通过typeof关键词检测数据类型
typeof运算符可以返回被检测的数据类型，它支持两种语法形式：

作为运算符：typeof x （常用的写法）
函数形式：typeof(x)
有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法

let num = 10
let str = 'pink'
let flag = true
let un
let obj = null
sonsole.log(typeof num)
sonsole.log(typeof str)
sonsole.log(typeof flag)
sonsole.log(typeof un)
sonsole.log(typeof obj)

P17 隐式转换和显示转换

js是弱数据类型，javascript也不知道变量到底属于那种数据类型，只有赋值了才清楚
坑：使用表单、prompt获取过来的数据默认是字符串的，此时就不能直接简单的进行加法运算
此时需要转换变量的数据类型
把一种数据类型的变量转换成我们需要的数据类型

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规格：
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符，如- * / 等都会把数据转成数字类型
缺点：
转换类型不明确，靠经验才能总结
小技巧：
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

显示转换

概念：自己写代码告诉系统该转成什么类型

转换为数字型：Number(数据)
转成数字类型
如果字符串内容里有非数字，转换失败时结果为NaN（Not Number）既不是一个数字
NaNcy也是Number类型的数据，代表非数字

let str = '123'
let str1 = Number('123')
console.log(Number(str))
console.log(str1)

parselnt(数据)【只保留整数】

console.log(parseInt('12px'))

parseFloat(数据)【可以保留小数】

console.log(parseFloat('12.94px'))

P19 赋值运算符

目标：能够使用赋值运算符简化代码
赋值运算符：对变量进行赋值的运算符
已经学过的赋值运算符：= 将等号右边的赋值予给左边，要求左边必须是一个容器
其他赋值运算符：

let num = 1
num += 1

-=
*=
/=
%=
使用这些运算符可以在对变量赋值时进行快速操作

自增运算符

目标：能够使用一元运算符做自增运算
众多的javascript的运算可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

二元运算符：

let num = 10 + 20

一元运算符：正、负号（之前的写法）

let num = 1
num = num + 1

一元运算符：我们可以有更简便的写法

自增：
符号：++
作用：让变量的值+1
自减：
符号：--
作用：让变量的值-1

使用场景：经常用于计数来使用，比如进行10次操作，用它来计算进行了多少次了
前置自增：先自加再使用（记忆口诀：++在前先加）
后置自增：先使用再自加（记忆口诀：++在后后加）

// 前置递增
// 每执行1次，当前变量数值加1 其作用相当于 num += 1
let num = 1
++num // 让num的值加1变2

比较运算符

逻辑运算

逻辑与 && ：一假则假

console.log(true && true)

逻辑或 || ：一真则真

console.log(true || false)

逻辑非取反（!true !false）

console.log(!true)
console.log(!false)

P23 表达式和语句

分支语句

目标：掌握流程控制，写出能“思考”的程序
程序三大流程控制语句

顺序结构：写几句就从上往下执行几句
分支结构：根据条件选择执行代码
循环结构：某段代码被重复执行的

if语句

单分支

分支语句包含：if分支语句、三元运算符、switch语句
if语句有三种使用：单分支、双分支、多分支
单分支：

if (条件) {
    满足条件要执行的代码
}

括号内的条件为true时，进入打括号里执行代码
小括号内的结果若不是布尔型时，会发生隐式转换转为布尔型
如果大括号只有一个语句，大括号可以省略，但是，不提倡这么做

双分支

if (条件) {
    满足条件要执行的代码
} else {
    不满足条件的代码
}

多分支

使用场景：适合于有多个结果的时候，比如学习成绩可以分为：优秀、良好、及格、不及格

if (条件) {
    代码1
} else if (条件2) {
    代码2
} else if (条件3) {
    代码3
} else if (条件4) {
    代码4
}

三元运算符

使用场景：比if双分支更简单的写法，可以使用三元表达式
符号：?与：配合使用
一般用来取值
语法：

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

switch语句

找到跟小括号里面数据全等的case值，并执行里面对应的代码
若没有全等===的则执行default里的代码
例：数据若跟值2全等，则执行代码2
switch case语句一般用于等值判断，不适合用于区间判断
switch case一般需要配合break关键词使用，没有break会造成case穿透

switch (数据) {
    case 值1：
         代码1
         break

    case 值2：
         代码2
         break

    case 值3：
         代码3
         break

     default：
         代码n
         break
}

循环语句

目标：掌握循环结构，实现一段代码重复执行

while循环基本语法：

while (循环条件) {
    要重复执行的代码(循环体)
}

跟if语句很像，都要满足小括号里的条件为true才会进入循环执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号判断条件是否满足，若manzu又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，既跳出

while循环三要素：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止的过程
所以，while循环需要具备三要素：

变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）

let i = 1
while (i <= 3) {
    执行代码（循环体）
    i++
}

循环退出

目标：能说出continue和break的区别
循环结束：break（退出循环）、continue（结束本次循环，继续下次循环）

let i = 1
while (i <= 5) {
    if (i === 3) {
    break // 退出整个循环
    i++
    continue // 结束本次循环
}
    console.log(i)
    i++
}

区别：

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

P34 for循环

掌握for循环重复执行某些代码
for循环语法：
作用：重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

for (变量起始值; 终止条件; 变量变化量) {
    // 循环体
}

退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break 退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

for循环嵌套

一个循环里再嵌套一个循环，一般用在for循环里

for (外部声明记录循环次数的变量; 循环条件; 变化值) {

    for (内部声明记录循环次数的变量; 循环条件; 变化值) {
               // 循环体

}
}

P40 数组

数据：（Array）是一种可以按顺序保存数据的数据类型
场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

数组的基本使用

目标：能够声明数组并且能够获取里面的数据
声明语法

let 数据名 = [数据1, 数据2, ..., 数据n]
// 构造函数 了解
let arr = new Array(数据1, 数据2, ..., 数据n])

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，0、1、2，...，以此类推
在数组中，数据的编号也叫索引号或下标号
数组可以村粗任意类型的数据

取值语法

数组名[下标]

let names = [1, 2, 3, 4, 5]
names[0]
names[1]

通过下表数据
取出来的是什么类型的，就根据这种类型特点来访问

操作数组

数组的本质是数据集合，操作数据无非就是增、删、查语法：
查询数组数据：数组[下标]
重新赋值：数组[下标] = 新值
数组添加新的数据：arr.push(新增的内容)、arr.unshift(新增的内容)
删除数组中数据：arr.pop()、arr.shift()、arr.splice(操作下标,删除的个数)

操作数组-新增

数组.arr.push()方法将一个或多个元素添加到数组的末尾，并返回数组的新长度

arr.push(元素1, 元素2, ..., 元素n)

数组arr.unshift()方法将一个或多个元素添加到数组的开头，并返回数组的新长度

arr.unshift(元素1, 元素2, ..., 元素n)

操作数据-删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
语法：

arr.pop()

// 例如
let arr = [1,2]
arr.pop()
console.log(arr.pop()) // 1
console.log(arr) // 1

数组.shitf()方法从数组中删除第一个元素，并返回该元素的值

arr.shift()

数组.splice()方法，删除指定元素

arr.splice(start, deleteCount)
arr.splice(起始位置, 删除几个元素)

P49 函数

函数使用

目标：掌握函数语法，把代码封装起来
函数的声明语法：

function 函数名() {
    函数体
}
// 调用函数
函数名()

函数命名规范：

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词：can判断是否可执行某个动作、has判断是否含义某个值、is判断是否为某个值、get获取某个值、set设置某个值、load加载某些数据等等
命名建议：常用动词约定

函数使用

函数的调用语法

// 函数调用，这些函数体内的代码逻辑会被执行
函数名()

注意：声明（定义）的函数必须调用才会真正被执行，使用()调用函数
函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次

函数传参

声明语法
调用函数时，需要传入几个数据就写几个，用逗号隔开

function 函数名(参数列表) { // 形参 形式上的参数
    函数体
}
// 调用函数
函数名(参数1, 参数2) // 调用的小括号里面 实参-实际的参数

函数传参-参数默认值

函数返回值

函数是被设计执行特定任务的代码块
当调用某个函数，这个函数会返回一个结果出来（这就是有返回值的函数）
语法：

return 数据
return 20

// 函数返回值
function fn() {
    return 20
}
// 相当于执行了 fn() 调用者 fn() = 20
let re = fn()  // let re = 20

在函数中使用return关键字能将内部的执行结果交给函数外部使用
return后面代码不会再被执行，会立即结束当前函数，所以return后面的代码不要换行写
return函数可以没有return，这种情况默认返回值为undefined

函数细节补充

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
全局作用域：全局有效，作用于所有代码执行的坏境（整个script标签内部）或者一个独立的js文件
局部作用域：局部有效，作用于函数内代码坏境，就是局部作用域，因为跟函数有关，所以也称为函数作用域

在javascript中，根据作用域的不同，变量可以分为：
全局变量：函数外部let的变量、函数内部let的变量
函数外部let的变量：全局变量在任何区域都可以访问和修改
函数内部let的变量：局部变量只能在当前函数内部访问和修改

变量的特殊情况

作用域链：采用就近原则的方式查找变量最终的值
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

// 不推荐
function fn() {
    num = 10
}
fn()
console.log(num)

函数内部的形参可以看做是局部变量

function fn(x, y) {
    // 形参可以看作函数的局部变量
    console.log(x) // 1
}
fn(1,2)
console.log(x) // 错误

匿名函数

没有名字的函数，无法直接使用
使用方式：

匿名表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
语法：
使用场景：后期配合web API使用

let fn = function (x, y) {
    // 函数体
    console.log(x + y)
}
// 调用函数
fn(1, 2)

立即执行函数：场景介绍：避免全局变量之前的污染
立即执行函数需要加分号
语法：

// 方式1
(function (x, y) { console.log(11) })(1, 2);
// 方式2
(function () { console.log(11) }());
// 不需要调用，立即执行

逻辑中断

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
&& 左边为false就短路、|| 左边为true就短路
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 ||，运算结果都是最后执行的表达式，一般用在变量赋值

function fn(x, y) {
    x = x || 0
    y = y || 0
}
fn()

转换为Boolean型

显示转换：Boolean(内容)

记忆：‘’、0、undefined、null、false、NaN转化为布尔值都是false，其余则为true

隐式转换

有字符串的加法 “” + 1，结果是 “1”
减法 - （像大多数数学运算一样）只能用同于数字，它会使空字符串 “” 转换为0
null经过数字转换之后会变为0
undefined经过数字转换之后会变为NaN

P63 对象

对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合，注意数字是有序的数组集合
用来描述某个事物，例如描述一个人

人有姓名、年龄、性别等信息
如果用多个变量保存则比较散，用对象比较统一

let obj = {
    uname = 'pink',
    age = '18',
    gender = '男'
}

对象使用

声明语法

let 对象名 = {}
// 第二种方法
let 对象名 = new Object()

实际开发中，我们多用花括号。{}对象是字面量

对象有属性和方法组成

let 对象名 = {
    属性名: 属性值,
    方法名: 函数
}

属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的

let obj = {
    uname = 'pink',
    age = '18',
    gender = '男'
}

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量（外面是变量，对象内是属性）
属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊字符如空格、中横线等

对象使用

对象本质是无序的数据集合，操作数据无非就是增、删、改、查语法
查询对象：对象.属性

属性-查
声明对象，并添加了若干属性后，可以使用 .获取对象中属性对应的值，我称之为属性访问
语法：对象名.属性
简单理解就是获得对象里面的属性值

let obj = {
     age : 10   
}
// 使用属性 查 对象名.属性名
console.log(obj.age)

属性-改
语法：对象名.属性=新值

let obj = {
     age : 10   
}
// 修改属性 改 对象名.属性 = 新值
obj.age = 19
console.log(obj.age)

属性-增
语法：对象名.新属性=新值

let obj = {
     age : 10   
}
// 增加属性 增 对象名.新属性 = 新值
obj.uname = 'pink'
console.log(obj.age)

属性-删
语法：dalete 对象名;属性

let obj = {
     age : 10   
}
// 删除属性 删 dalete 对象名.属性
dalete obj.uname
console.log(obj.age)

改和增语法意义，判断标准就是对象有没有这个属性，没有就是增，有就是修改

属性-查的另外一种写法

对于多词属性或则-等属性，点操作就不能用了
我们可以采用：对象["属性"] 方式，单引号和双引号都可以

对象中的方法

数据行为性的信息称为方法，如跑步，唱歌等，一般是动词性的，其本质是函数

let person = {
    name: 'andy',
    sayHi: function () {
        document.write('hi')
    }
}

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用”“或‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用
也可以添加形参和实参

遍历对象

一般不用这种方式遍历数组、主要是用来遍历对象
for in 语法中的 k 是一个变量，在循环的过程中依次代表对象的属性名
由于 k 是变量，所以必须使用 [] 语法解析
一定记住：k 是获得对象的属性名，对象名[k] 是获得属性值

let obj = {
    uname: 'andy',
    age: 18,
    sex: '男'
}
for (let k in obj) {
    console.log(k) // 打印属性名
    console.log(obj[k]) // 打印属性值
}

P70 数学内置对象

Math对象是JavaScript提供的一个“数学”对象
Math对象包含的方法有：

random：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
max：找最大值
min：找最小值
pow：幂运算
abs：绝对值

// 属性
console.log(Math.PI);
// ceil 天花板 向上取整
console.log(Math.ceil(1.1)); // 2
// floor 地板 向下取整
console.log(floor(1.1)); // 1
// 四舍五入
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.round(-1.1)) // -1
console.log(Math.round(-1.51)) // -2
// max 最大值
console.log(Math.max(1,2,3,4,5));
// min 最小值
console.log(Math.min(1,2,3,4,5));
// abs 绝对值
console.log(Math.abs(-1)); // 1

P78 Web API

变量声明三个var、let、const
建议：const优先，尽量使用const，const语义化更好
作用：使用js去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象类型）

DOM

DOM是用来呈现以及与任意HTML或XML文档交互的API
DOM是浏览器提供的一套专门用来操作网页内容的功能、
DOM作用：开发网页内容特效和实现用户交互

DOM树

将HTML文档以树状结构直观的表现出来，我们称之为文档树或者DOM树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

DOM对象

DOM对象：浏览器根据HTML标签生成的js对象

所有的标签属性都可以在这个对象上找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

document对象

是DOM里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面

获取DOM对象

查找元素DOM元素就是利用js选择页面中标签元素
根据css选择器选择DOM元素
参数：包含一个或多个有效的css选择器字符串
返回值：css选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null
返回值：css选择器匹配的NodeList对象集合

// 选择一个元素
document.querySelector('css选择')
// 选择全部元素
document.querySelectorAll('ul li')

根据CSS选择器来获取DOM元素（重点）

得到的是一个伪数组：
有长度有索引号的数组
但是没有pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得
注意：哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已

元素innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

 // 1.获取元素
const box = document.querySelector('.box')
 // 2.修改文字内容 对象.innerText属性
console.log(box.innerText) // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容

元素innerHTML属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签记忆使用模板字符

 // 1.获取元素
const box = document.querySelector('.box')
// 2.修改文字内容 对象.innerHTML属性 可以编写标签
console.log(box.innerHTML) // 获取文字内容
box.innerHTML = '我是<strong>一个</strong>盒子' // 修改文字内容

操作元素常用属性

还可以通过js设置/修改标签元素属性，比如通过src更改图片
最常见的属性比如：href、title、src等

// 语法：对象.属性 = 值
// 1. 获取元素
const pic = document.querySelector('img')
// 2. 操作元素
pic.src = '文件路径'
pic.title = '鼠标悬浮显示文字'

操作元素样式属性

可以通过js设置/修改标签元素的样式属性
比如通过：轮播图小圆点自动更换颜色样式、点击按钮可以滚动图片、这是移动的图片的位置left等等

通过style属性操作CSS

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

// 对象.style.样式属性 = 值
p.style.color = 'red'

通过类名 (className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式
语法：

// 元素.className = 'active'
div.className = 'active'

由于class是关键字，所以使用className去代替
className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

通过classList操作类操作CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加或删除类名
语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的，跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了属性，如果为false代表移除了该属性
比如：disabled、checked、selected

自定义属性

标准属性：标签天生自带的属性比如 class、id、title等，可以直接使用点语法操作比如：disabled、checked、selected
自定义属性：在html中推出来了专门的data-自定义属性、在标签上一律以date-开头、在DOM对象上一律以data-set对象方式获取

 <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)
    console.log(one.dataset.spm)
  </script>

定时器-间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种：定时器、间歇函数

定时器

定时函数可以开启和关闭定时器
开始定时器
作用：每隔一段时间调用这个函数
间隔时间单位是毫秒
注意：函数名不需要加括号、定时器返回的是一个id数字

// setInterval(函数, 间隔时间)
 setInterval(function () {
      console.log('一秒执行依次')
    }, 1000)

let n = function fn() {
    console.log('一秒执行依次')
}
 setInterval(fn,1000)
// 关闭定时器
clearInterval(n)

事件监听

事件在程序时系统内发生的动作或者发生的事件
比如：用户在网页上单击一个按钮
就是让程序检测是否有事产生，一旦有事件触发，就立刻调用一个函数做出响应，也称为绑定事件或者注册事件。
比如：鼠标经过显示下拉菜单、可以播放轮播图等等
语法：

元素对象.addEventlistener('事件类型',要执行的函数)

事件监听三要素：
事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如：鼠标单击click、鼠标经过mouseover等
事件调用的函数：要做什么事情
事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次

<button>按钮</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('点击了')
    })
  </script>

事件监听版本

DOM L0
事件源.on事件 = function () {}
DOM L2
事件源.addEventlistener(事件, 事件处理函数)
区别：on方式会被覆盖，addEventlistener方式可以绑定多次，拥有事件更多特性，推荐使用

事件类型

鼠标事件（鼠标触发）：

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

焦点事件（表单获得光标）：

focus 获得焦点
blur 失去焦点

键盘事件（键盘触发）：

Keydown 键盘按下触发
Keyup 键盘抬起触发

文件事件（表单输入触发）：

input 用户输入事件

事件对象

也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景：可以判断用户按下了哪个键，比如按下回车可以发布新闻、可以判断鼠标点了哪个元素，从而做相应的操作

获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
语法：

元素.addEventListener('click', function (e) {

}

部分常用属性：type 获取当前的事件类型、clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置、offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置、key 用户按下的键盘键的值
trim()去除左右空格

坏境对象

坏境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的坏境
作用：弄清楚this的指向，可以让我们代码更简洁
每个函数里面都有this坏境对象，普通函数里面this指向的是window
函数的调用方式不同，this指代的对象也不同
谁调用，this就是谁，是判断this指向的粗略规则

P105 事件流

事件流指的是事件完整执行过程中的流动路径

说明：假设页面里面有个div，当触发事件时，会经历两个阶段，分别是捕获、冒泡阶段
简单来说：捕获阶段时从父到子，冒泡阶段是从子到父
实际工作都是使用事件冒泡为主

事件捕获

事件捕获概念：从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
代码：

DOM.addEventlistener(事件类型, 事件处理函数, 是否使用捕获机制)

addEventlistener第三个参数传入true代表时捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false

事件冒泡

事件冒泡概念：当一个元素的事件被触发时，同样的时间将会在该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡
简单理解：为一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡时默认存在的
L2事件监听第三个参数时false，或者默认都是冒泡

阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
语法：

事件对象.stopPropagarrion()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

解绑事件

on事件方式，直接使用null覆盖就可以实现事件的解绑
语法：

//  绑定事件
btn.onclick = function() {
    alert(''点击了)
}
btn.onclick = null

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

阻止元素默认行为

我们某些情况下需要阻止默认行为的，比如阻止链接的跳转表单域跳转
语法：

<form action="https://wwww.baidu.com">
    <input type="submit" value="免费注册">
  </form>
  <a href="https://wwww.baidu.com">百度一下</a>
  <script>
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止行为提交
      e.preventDefault();
    })
    const a = document.querySelector('a')
    a.addEventListener('click', function (e) {
      // 阻止行为提交
      e.preventDefault();
    })
  </script>

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
监听页面所有资源加载完毕：给window添加load事件
语法：

 // 等待页面所有资源加载完毕，就回去执行回调函数
    window.addEventListener('load', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(1)
      })
    })

注意：不光可以监听整个页面资源加载完毕，也可以针对某个事件资源绑定load事件

    img.addEventListener('load', function () {
      // 等待图片加载完毕 再去执行里面的代码
    })

页面加载事件2

当初始的HTML文件被完全加载和解析完成之后，DOMContentLoaded事件触发，而无需等待样式表，图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕
语法：

 document.addEventListener('DOMContentLoaded', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(111)
      })
    })

页面滚动事件

滚动条再滚动的时候持续触发的事件
很多网页需要检测用户把页面滚动到某个区域做一些处理，比如固定导航栏、比如返回顶部
事件名：scroll
监听整个页面滚动
语法：

    window.addEventListener('scroll', function () {
      console.log(1)
    })

给window或者document添加scroll事件
监听某个元素内部滚动直接给某个元素添加即可

页面滚动事件-获取位置

scrollLeft和scrolltop（属性）
获取被卷去的大小
获取元素内容往左、往上滚动出去看不到的距离
这两个只是可读写的

    // 页面滚动事件
    const div = document.querySelector('div')
    window.addEventListener('scroll', function () {
      const n = document.documentElement.scrollTop
      if (n >= 100) {
        div.style.display = 'block'
      }
    })

页面滚动事件-滚动到指定的坐标

scrollTo()方法可把内容滚动到指定的坐标
语法：元素.scrollTo(x,y)

页面尺寸事件

会在窗口尺寸改变的时候触发事件
语法：resize

  window.addEventListener('resize', function () {
      console.log(1)
    })

检测屏幕宽度

检测屏幕宽度（可应用在网页自适应）
获取元素的可见部分宽高（不包含边框、margin、滚动条等）
语法：clientWidth、clientHeight

 // 检测屏幕宽度
    window.addEventListener('resize', function () {
      let w = document.documentElement.clientWidth
      console.log(w)
    })

元素尺寸于位置

获取宽高

获取元素的自身宽、高包含元素自身设置的宽高、padding、border
语法：offsetWidth、offsetHeight
获取出来的是数值，方便计算
注意：获取出来的是可视化宽高，如果盒子是隐藏的，获取的结果为0

获取位置

获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop注意是只读属性

元素尺寸于位置-尺寸

获取位置：element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置

属性选择器

 intput[type=text] {
      color: red;
    }
<script>
const input = document.querySelector('input[value]')
</script>

日期对象

日期对象：用来表示时间的对象
作用：可以得到当前系统时间

实例化

在代码中发现了new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
获得当前时间：

const date = new Date()

获得指定时间：

const date = new Date('2008-8-8 08:30:00')

日期对象

调用例子：

 // 获得日期对象
    const date = new Date()
    // 使用里面的方法
    // 年
    console.log(date.getFullYear())
    // 月（1-11） 我们的月（1-12）需要+1
    console.log(date.getMonth() + 1)
    // 日
    console.log(date.getDate())
    // 星期（0-6）
    console.log(date.getDay())

显示格式化的时间案例

    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      // 时分秒补0
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDay()}号 ${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate()
    // 添加定时器让时间自己走动
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)

时间的另外一个写法

const div = document.querySelector('div')
    const date = new Date()
    // div.innerHTML = date.toLocaleString() // 年月日时分秒 2025/1/8 10:48:43
    // div.innerHTML = date.toLocaleDateString() // 年月日 2025/1/8
    // div.innerHTML = date.toLocaleTimeString() // 时分秒 10:51:12

时间戳

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余实际毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分01秒

三种方式获取时间戳

使用getTime()方法

const date = new Date()
console.log(date.getTime)

简写 +new Date()

console.log(+new Date())

使用Date.now() 【前面两种可以返回指定时间的时间戳，Date.now()只能得到当前的时间戳】

console.log(Date.now())

倒计时效果转换公式

      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(count % 60)
      s = s < 10 ? '0' + s : s

DOM节点

DOM节点：DOM树里每一个内容都称之为节点
节点类型：

元素节点：所有的标签比如：body、div。html时根节点
属性节点：所有的属性比如href
文本节点：所有的文本
其他等

节点操作

查找节点：关闭二维码案例：点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子
节点关系：针对的找亲戚返回的都是对象

父节点
子节点
兄弟节点

父节点查找

parentNode 属性
返回最近一级的父节点找不到返回null

子元素.parentNode

子节点查找

子节点查找：childNodes
获取所有子节点、包括文本节点（空格、换行）、注释节点等
children属性（重点）近获得所以有元素节点
返回的还是一个伪数组

父元素.children

兄弟关系查找

下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling属性

创建节点

即创造出ige新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：

document.createElement('标签名')

追加节点

要想在页面看到，还得插入到某个元素中
插入到父元素的最后一个子元素

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBofore(要插入的元素,在哪个元素前面)

克隆节点

特殊情况下，我们新值节点，按照如下操作：复制一个原有的节点、把复制的节点放入到指定的元素内部

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
注意：true深克隆标签里面有什么全部克隆过来，false浅克隆只克隆标签

删除节点

若一个节点在页面中已不需要时，可以删除它
在javascript原生DOM操作中，要删除元素必须通过父元素删除
语法：

父元素.removeChild(要删除的元素)

注意：如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

M端事件

移动端也有自己独特的地方，比如触屏事件 touch （也称触摸事件），Android和iOS都有
touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔，触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作
常见的触屏事件如下：

触屏touch事件：
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发

Window对象

BOM
BOM（Browser Ovject Model）是浏览器对象模型
window对象是一个全局对象，也可以说是javascript中的顶级对象
像document、alert()、console.log()这些都是window属性，基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

setTimeout(回调函数,等待的毫秒数)
JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout
setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
清除延时函数：clearTimeout(timer)

let timer = setTimeout (回调函数, 等待的毫秒数)
clearTimeout(timer)

两种定时器对比：执行的次数
延迟函数：执行一次
间隔函数：每隔一段时间就执行一次，除非手动清除

JS执行机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事
这是因为javascript这门脚本语言诞生的使命所致——JavaScript是处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标签，允许JavaScript创建多个线程，于是，JS中出现了同步和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟），再去切菜、炒菜
异步：你在做一件事情时，因为这件事会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法：我们在烧水的同时，利用这10分钟，去切菜，炒菜

location 对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
常用属性和方法：href属性获取完整的URL地址，对其赋值时用于地址的跳转

// 可以获取到当前文件URL地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href = 'http://www.baidu.com'

search属性获取地址中携带的参数，符号 ? 后面部分

 <form action="">
    <input type="text" name="username">
    <input type="password" name="pwd">
    <button>提交</button>
  </form>
  <script>
    console.log(location.search)
  </script>

hash属性获取地址中的哈希值，符号 # 后面部分
后去vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云

 <a href="#my">我的</a>
  <script>
    console.log(location.hash)
  </script>

reload方法用来刷新当前页面，传入参数true时表示强制刷新

 <a href="#my">我的</a>
  <script>
    const a = document.querySelector('a')
    a.addEventListener('click', function () {
      location.reload(true)
    })
  </script>

navigator的数据类型时对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：通过userAgent检测浏览器的版本及平台

 // 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    })();

histroy的数据类型时对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：back() 可以后退功能、forward() 前进功能、go(参数) 前进后退功能，参数如果是1前进1个页面，如果是-1后退1个页面

<button>后退</button>
  <button>前进</button>
  <script>
    const back = document.querySelector('button:first-child')
    // 兄弟关系查找
    const forward = back.nextElementSibling
    back.addEventListener('click', function () {
      // 后退一步
      // history.back()
      // history.go(-1) 后退一步
      history.go(-1)
    })
    forward.addEventListener('click', function () {
      // 前进一步
      // history.forward()
      // history.go(1) 前进一步
      history.go(1)
    })
  </script>

本地存储

数据存储再用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage和localStorage约5M左右
作用：可以将数据永久存储再本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
本地存储只能存储字符串数据类型，储存数字类型也会自动转换为字符串类型

    // 存储数据
    localStorage.setItem('uname', 'pink')
    // 获取数据
    console.log(localStorage.getItem('uname'))
    // 修改数据
    localStorage.setItem('uname', 'red')
    // 删除数据
    localStorage.removeItem('uname')

sessionStorage特性
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式储存使用
用法跟localStorage基本相同

储存复杂数据类型

本地只能储存字符串，无法储存复杂数据类型
储存复杂数据类型，无法直接使用（需要将复杂数据类型转成JSON字符串，再储存到本地）
语法：JSON.stringify(复炸数据类型)

 const obj = {
      uname: 'pink',
      age: 18,
      gender: '男'
    }
    // 1.获取数据 2.转换为JSON字符串存储 JSON.stringify(obj)
    localStorage.setItem('obj', JSON.stringify(obj))
    // console.log(localStorage.getItem('obj', JSON.stringify(obj)))
    // 3.把JSON字符串转换为 对象
    console.log(JSON.parse(localStorage.getItem('obj', JSON.stringify(obj))))

数组中map方法选代数组

使用场景：map可以遍历数组处理数据，并且返回新的数组
map也称为映射。映射是个术语，指两个元素的集之间元素相互对应的关系
map重点在于有返回值，forEach没有返回值

const arr = ['red', 'blue', 'green']
const newArr = arr.map(function (ele, index) {
    console.log(ele) // 数组元素
    console.log(index) // 数组索引号
    return ele + '颜色'
})
console.log(newArr) // ['red颜色', 'blue颜色', 'green颜色']

数组中join方法

作用：join()方法用于把数组中的所有元素转换为一个字符串
参数：数组元素是通过参数里面指定的分隔符进行分隔的，空字符串('')，则所有元素之间都没有任何字符

const arr = [1,2,3]
console.log(arr.join('')) /// 123

JavaScript

P03 javascript书写位置

内部javascript

外部javascript

内联javascript

P04 注释

结束符

P5 javascript输入和输出语句和字面量

输出语法：

输入语法：

字面量

P6 变量与赋值

变量的基本使用

P11 数组

数组的基本使用

P12 常量的基本使用

P13 数据类型

js数据类型整体分为两大类：

检测数据类型

P17 隐式转换和显示转换

隐式转换

显示转换

P19 赋值运算符

自增运算符

二元运算符：

一元运算符：正、负号 （之前的写法）

一元运算符：我们可以有更简便的写法

比较运算符

逻辑运算

P23 表达式和语句

分支语句

if语句

单分支

双分支

多分支

三元运算符

switch语句

循环语句

while循环基本语法：

while循环三要素：

循环退出

P34 for循环

退出循环

for循环嵌套

P40 数组

数组的基本使用

取值语法

操作数组

操作数组-新增

操作数据-删除

P49 函数

函数使用

函数使用

函数传参

函数传参-参数默认值

函数返回值

函数细节补充

作用域

变量的特殊情况

匿名函数

逻辑中断

转换为Boolean型

隐式转换

P63 对象

对象使用

对象有属性和方法组成

属性

对象使用

改和增语法意义，判断标准就是对象有没有这个属性，没有就是增，有就是修改

属性-查的另外一种写法

对象中的方法

遍历对象

P70 数学内置对象

P78 Web API

DOM

DOM树

DOM对象

获取DOM对象

根据CSS选择器来获取DOM元素（重点）

元素innerText属性

一元运算符：正、负号（之前的写法）

数组中map方法选代数组