发布时间：2023-04-13 09:30
创始人：布兰登.艾奇（1961~）
在1995年用10天完成JavaScript设计。
网景公司最初命名为LiveScript
alert(msg) ：浏览器弹出警示框 用来展示给用户看的
console.log(msg):浏览器控制台输出信息
prompt(info):浏览器弹出输入框，用户可以输入
用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。（变量就是一个装东西的盒子）
var age; //声明一个名称为age的变量 （variable变量的意思）
age=10; //给age这个变量赋值为10
var age = 18 ; //声明变量的同时赋值为18
声明一个变量并赋值，我们称之为变量的初始化。
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var age =18;
age =81; //最后的结果就是81，因为18被覆盖掉了
只需要写一个var，多个变量名之间使用英文逗号隔开，最后一个分号结尾。
var age =10, name='zs', sex =2;
| 情况 | 说明 | 结果 |
|---|---|---|
| var age; console.log(age); | 只声明 不复赋值 | undefined(未定义的) |
| console.log(age); | 不声明 不赋值 直接使用 | 报错 |
| age =10; console.log(age); | 不声明 只赋值 | 10 |
①由字母（A-Za-z）、数字（0-9）、下划线（_）、美元符号（ ） 组 成 ， 如 ： ∗ ∗ u s r A g e ∗ ∗ , ∗ ∗ n y m 01 ∗ ∗ , ∗ ∗ ）组成，如：**usrAge**, **nym01**, ** ）组成，如：∗∗usrAge∗∗,∗∗nym01∗∗,∗∗name**, _sex
②严格区分大小写。 var app; 和var App; 是两个变量
③不能 以数字开头。 18age 是错误的
④不能 是关键字、保留字。例如：var、for、while
⑤变量名必须有意义。 MMD BBD nl➡age
⑥遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFristName
⑦推荐翻译网站：有道 爱词霸
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ts42D3Fw-1657280263962)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220303094434503.png)]
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号。比如姓名’‘张三’'，年龄18 这些数据的类型是不一样的。
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。**JavaScript是一种弱类型或者说动态语言。**这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
var age =10; //这是一个数字型
var areYouOk ="是的"; //这是一个字符串
在代码运行时，变量的数据类型是由js引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时也就意味着相同的变量可用作不同的类型：
var x = 6; //x为数字型
var x = "Bill"; //x为字符串
JS把数据类型分为两类：
①简单的数据类型（Number,String,Boolean,Undefined,Null）
②复杂数据类型（object）
JavaScript中的简单数据类型及其说明如下：
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含 整型值和浮点型值，如21、0.21 | 0 |
| Boolean | 布尔值类型，如true、false、等价于1和0 | false |
| String | 字符串类型，如"张三" 注意咱们js里面，字符串都带引号 | “” |
| Undfined | var a; 声明了变量a但是没有给值，此时a=undefined | undefined |
| Null | var a = null; 声明了变量a为空值 | null |
JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。
var age = 21; //整数
var Age = 21.3747; //小数
最常见的进制有二进制、八进制、十进制、十六进制。
//1.八进制数字序列范围：0~7
var num1 = 07; //对应十进制的7
var num2 = 019; //对应十进制的19
var num3 = 08; //对应十进制的8
//2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;
在js中八进制前面加0，十六进制前面加0x
JavaScript中数值的最大和最小值
alert(Number.MAX_VALUE); //这个值为：1.7976931348623157e+308
alert(Number.MIN_VALUE); //这个值为：5e-324
alert(Infinity); //Infinity 代表无穷大，大于任何数值
alert(-Infinity); //-Infinity 代表无穷小，小于任何数值
alert(NaN); //NAN Not a number,代表一个非数值
用来判断一个变量是否为非数字的类型，返回true或者false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yRl4OIPb-1657280263964)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220408095114977.png)]
var userAge = 21;
var isOk = isNaN(userAge);
console.log(isOk); //false ,21 不是一个非数字
var userName = "andy";
console.log(isNaN(userName));// true，"andy"是一个非数字
var str = "123";
console.log(isNaN(str)) //flase 先隐式转换 再判断
var nan = NaN;
console.log(isNaN(nan)) //true Not a number,代表一个非数值
字符串型可以是引导中的任意文本，其语法为双引号""和单引号’’
var strMsg = "我爱北京天安门~"; //使用双引号表示字符串
var strMsg = '我爱吃猪蹄~'； //使用单引号表示字符串
//常见错误
var strMsg3 = 我爱大肘子; //报错，没使用引号，会被认为是js代码，但js没有这些语法
因为HTML标签里面的属性使用的是双引号，js这里我们更推荐使用单引号。
js可以用单引号嵌套双引号，或者用**双引号嵌套单引号（外双内单，外单内双）
var strMsg = '我是"高帅富"程序猿'; //可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; //也可以用""包含''
//常见错误
var badQuotes = 'What on earth?";//报错，不能单双引号搭配
类似HTML里面的特殊字符，字符串中也有特殊字符， 我们称之为转义符。
转义符都是\开头的，常用的转义符及其说明如下：
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符，n是newline的意思 |
| \\ | 斜杠\ |
| \’ | ’ 单引号 |
| \" | " 双引号 |
| \t | tab 缩进 |
| \b | 空格，b是blank的意思 |
字符串是由若干字符组成，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); //输出11
①多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
②拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
//1.字符串+字符串
alert('hello'+''+'world'); //输出 hello world
//2.数值字符串+数值字符串
alert('100'+'100'); //输出 100100
//3.数值字符串+数值
alert('11'+12); //输出 1112
//4.数值+数值
alert(12+12); //输出 24
+号总结口诀：数值相加，字符相连。
console.log('pink老师' + 18); //只要有字符串就会相连
var age = 18;
//console.log('pink老师age岁啦')； //错误写法
console.log('pink老师' + age); //输出 pink老师18
console.log('pink老师' + age + '岁啦'); //输出 pink老师18岁啦
①经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
②变量是不能添加引号的，因为加引号的变量会变成字符串
③如果变量两侧都有字符串拼接，口诀"引引加加"，删掉数字，变量加中间
布尔类型有两个值：true 和false，其中true表示真（对），false表示假（错）。
布尔型和数字型相加的时候，true的值为1 ，false的值为0.
console.log(true + 1); // 输出 2
console.log(false + 1); //输出 1
1、null的加（+）运算
① null与undefined||NaN进行加（+）运算，不分先后，结果为：NaN。
② null与null||boolean||number进行加（+）运算，不分先后，结果为：数字类型的数据，注意正负。
③ null与字符串进行加（+）运算，不分先后，结果为字符串相加，包括字符串类型的数字。
④ null与数组进行加（+）运算时会调用.toString()方法，不分先后，结果为：‘’||‘1,2’||‘1,2,3’，并从左往右按字符串相加。
⑤ null与对象进行加（+）运算时会调用.toString()方法，不分先后，结果为：[object Object]，并从左往右按字符串相加。
2、null的减（-）运算
① null与undefined||NaN||对象||数组（除[]||[1]||[‘3’]外），因为这些数据类型不能正常转为数字类型的字符串，所以进行减（-）运算时，不分先后，结果为：NaN。
② null与能转换为数字类型的数据进行减（-）运算，不分先后，结果为数字类型的数据，注意正负。console.log(null - ‘’); // 0||console.log(null - []); // 0||console.log(null - [1]); // 1
③ 值得注意的是’true’ || ‘false’是不能正常转为1 || 0。这两个值与’1’ || '0’的转换方式不同，‘1’ || '0’可以转为1 || 0。
3、null的减（*）运算
① null与undefined||NaN||对象||数组（除[]||[1]||[‘3’]外），因为这些数据类型不能正常转为数字类型的字符串，所以进行乘（）运算时，不分先后，结果为：NaN。
② null与能转换为数字类型的数据进行乘（）运算，不分先后，结果为：0。
4、null的减（/）运算
① null作为除数时，与true||大于0的数字类型数据||[1]进行除（/）运算时结果为：Infinity。
② null作为被除数时，与大于0的数字类型数据进行除（/）运算时，结果为：0。
③ 其余情况的除（/）运算结果为：NaN。
5、null的减（%）运算
① null作为被除数时，与true||大于0的数字类型数据||[1]进行取模（%）运算时结果为：0。
② 其余情况的取模（/）运算结果为：NaN。
一个声明后没有赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）
var variable;
console.log(variable); //输出 undefined
console.log('你好' + variable); //输出 你好undefined
console.log(11 + variable); //输出 NaN
console.log(true + variable); //输出 NaN
一个声明变量给null值，里面存的值为空（学习对象时，继续研究null）
var vari = null;
console.log('你好' + vari); //输出 你好null
console.log(11 + vari); //输出 11
console.log(true + vari); //输出 1
typeof可用来获取检测变量的数据类型
根据控制台输出的字体颜色判断数据类型
控制台输出的字体是蓝色的 属于 数字型、输出的字体是黑色的 属于 字符型、输出的字体颜色是深蓝色的 属于布尔型、输出的字体是灰色的 属于 undefined（未定义的）或null。
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
①数字字面量：8 , 9 , 10
②字符串字面量：‘黑马程序员’ , ‘大前端’
③布尔字面量：true , false
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
通常会实现3种方式的转换：
①转换为字符串类型
②转换为数字型
③转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转成 字符串 | var num = 1; alert(num.toString()); |
| String() 强制转换 | 转成 字符串 | var num = 1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num + ‘我是字符串’)； |
①toString() 和 String() 使用方法不一样
②三种转换方式，我们更喜欢用第三种加号拼接字符转换，这种方式也称之为隐式转换。
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(string) 函数 | 将string类型转成整数数值型 | parseInt(‘78’) |
| parseFloat(string) 函数 | 将string类型转成浮点数数值型 | parseFloat(‘78.21’) |
| Number() 强制转换函数 | 将string类型转换为数字型 | Nubmber(‘12’) |
| js 隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’ - 0 |
注意parseInt和parseFloat单词的大小写，这2个是重点
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean | 其他类型转成布尔型 | Boolean(‘true’); |
①代表空、否定的值会被转换为false，如"、0、NaN、null、undefined
②其余值都会被转换为true
console.log(Boolean('')); //输出 false
console.log(Boolean(0)); //输出 false
console.log(Boolean(NaN)); //输出 false
console.log(Boolean(null)); //输出 false
console.log(Boolean(undefined)); //输出 false
console.log(Boolean('小白')); //输出 true
console.log(Boolean(12)); //输出 true
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcrQnuL9-1657280263965)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220305101121654.png)]
①翻译器的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同。
②编译器是在代码执行之前进行编辑，生成中间代码文件
③解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AMsxcGFZ-1657280263966)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220305101644430.png)]
类似于请客吃饭：
①编译语言：首先把所有菜做好，才能上桌吃饭
②解释语言：好比吃火锅，边吃边涮，同时进行
标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
关键字：是指JS本身已经使用了的字，不能再用他们充当变量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、swith、this、try、typeof、var、void、while、with等。
保留字：实际上就是预留的"关键字"，意思是现在虽然还不是关键字，但未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。
运算符（operator）也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：
①算数运算符
②递增和递减运算符
③比较运算符
④逻辑运算符
⑤赋值运算符
概念：算术运算使用的符号，用于执行两个变量或值的算术运算。
| 运算符 | 描述 | 案例 |
|---|---|---|
| + | 加 | 10 + 20 =30 |
| - | 减 | 10 - 20 = -10 |
| * | 乘 | 10 * 20 = 200 |
| / | 除 | 10 / 20 = 0.5 |
| % | 取余数（取模） | 返回除法的余数9 % 2 = 1 |
浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。
console.log(0.1 + 0.2); // 结果不是0.3，而是：0.30000000000000004 15个0
console.log(0.07 * 100); // 结果不是7， 而是：7.000000000000001 14个0
所以：不要直接判断两个浮点数是否相等！
一个数的余数是0就说明这个数能被整除，这就是%取余运算符的主要用途。
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解：是由数字、运算符、变量等组成的式子
如果需要反复给数字变量添加或减去1，可以使用**递增（++）和递减（–）运算符来完成。
在JavaScript中，递增（++）和递减（–）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意：递增和递减运算符必须和变量配合使用。
++num前置递增，就是自加1再赋值，类似于num = num +1。 口诀：先自加，后返回值
num++后置递增，就是先赋值再自加1，类似于num = num ，然后num=num+1 。 口诀：先返回值，后自加
①前置递增和后置递增运算符可以简化代码的编写，让变量的值 +1 比以前写法更简单
②单独使用时，运行结果相同
③与其他代码联用时，执行结果会不同
④后置：先原值运算，后自加（先人后己）
⑤前置：先自加，后运算（先己后人）
⑥开发时，大多使用后置递增/减，并且代码独占一行，例如：num++；或者num–；
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| < | 小于号 | 1 < 2 | true |
| > | 大于号 | 1 > 2 | false |
| >= | 大于等于号（大于或者等于） | 2 >= 2 | true |
| <= | 小于等于号（小于或者等于） | 3 <= 2 | false |
| == | 判等号（会转型） | 37 == 37 | true |
| != | 不等号 | 37 != 37 | false |
| === !== | 全等 要求值和 数据类型都一致 | 37 === ‘37’ | false |
3.5.2 = 小结
| 符号 | 作用 | 用法 |
|---|---|---|
| = | 赋值 | 把右边给左边 |
| == | 判断 | 判断两边值是否相等（注意此时有隐式转换） |
| === | 全等 | 判断两边的值和数据类型是否完全相同 |
console.log(18 == '18');
console.log(18 === '18')
概念：逻辑运算符是用来进行布尔值运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
| 逻辑运算符 | 说明 | 案例 |
|---|---|---|
| && | “逻辑与”,简称"与" and | true && false |
| || | “逻辑或”,简称"或" or | true || false |
| ！ | “逻辑非”,简称"非" not | !true |
只有两个都是真，结果才是真。
如果一个为真，则为真；
指本来值的反值
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ – ！（逻辑非的优先级很高） |
| 3 | 算数运算符 | 先 * / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后|| （逻辑与比逻辑或优先级高） |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
if 的语法结构 如果if
if(条件表达式){
//执行语句
}else{
//执行语句
}
执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
如果 if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
if else if 语句是多分支语句
if(条件表达式1){
// 语句1；
}else if(条件表达式2){
// 语句2;
}else if(条件表达式3){
// 语句3;
}else{
// 最后语句;
}
//执行思路
//如果条件表达式1 满足就执行 语句1 执行完毕，退出整个if 分支语句
//如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2
//如果上面的所有条件表达式都不成立，则执行else 里面的语句
//注意 多个分支语句还是多选1 最后只能有一个语句执行
else if 里面的条件理论上是可以任意多个的
else if 中间有个空格了
swith语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以试用swith。
1.swith 语句也是多分支语句 也可以实现多选1
swith 转换、开关 case 小例子或者选项的意思
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
利用我们的表达式的值 和case 后面的选项值想匹配 如果匹配上，就执行该case里面的语句 如果都没有匹配上，那么执行 default里面的语句
①我们开发里面 表达式我们经常写成变量
②我们num 的值 和case里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
③break 如果当前的case里面没有break 则不会退出swith 是继续执行下一个case
①一般情况下，它们两个语句可以相互替换。
②swith…case 语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)。
③swith 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。
④当分支比较少时，if…else语句的执行效率比swith语句高。
⑤当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
for重复执行某些代码，通常跟计数有关
for(初始化变量;条件表达式;操作表达式){
//循环体
}
就是用var声明的一个普通变量，通常用于作为计数器使用
就是用来决定每一次循环是否继续执行 就是终止的条件
是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
for(var i = 1; i <= 100; i++){
console.log('你好吗');
}
①首先执行里面的计数器变量 var i = 1,但是这句话在for 里面只执行一次 index
②去 i <= 100 来判断是否满足条件，如果满足条件 就去执行 循环体 不满足条件退出循环
③最后去执行 i++ i++是单独写的代码 递增 第一轮结束
④接着去执行i<=100 如果满足条件 就去执行循环体 不满足条件退出
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
//执行语句
}
}
我们可以把里面的循环看做是外层循环的语句
外层循环循环一次，里面的循环执行全部（执行到不满足条件语句）
①for循环可以重复执行某些相同代码
②for循环可以重复执行些许不同的代码，因为我们有计数器
③for循环可以重复执行某些操作，比如算术运算符加法操作
④随着需求增加，双重for循环可以做更多、更好看的效果
⑤双重for循环，外层循环一次，内层for循环全部执行
⑥for循环是循环条件和数字直接相关的相关
⑦分析要比写代码更重要
⑧一些核心算法想不到，但要是学会，分析它执行过程
while 当…的时候
while(条件表达式){
//循环体
}
当条件表达式结果为true 则执行循环体 否则 退出循环
do{
//循环体
}while(条件表达式)
跟着while不同的地方在于 do while 先执行一次循环体 再判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环体
do while 循环体至少执行一次
continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）。
break 关键字用于立即跳出整个循环（循环结束）。
在js里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。
虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用js中的函数
函数在使用时分为两步：声明函数和调用函数。
声明函数
//function 函数名(){
// 函数体
//}
function say(){
console.log('hi~');
}
注意：
① function 声明函数的关键字 全部小写
② 函数时做某件事情，函数名一般是动词
③ 函数不调用自己不执行
调用函数
// 函数名(); //通过调用函数名来执行函数体代码
function say(){
console.log('hi~');
}
say();
注意： 调用函数的时候千万不要忘记加小括号 。
声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
口诀： 函数不调用，自己不执行。
函数的封装是把一个或者多个功能通过 函数的方式封装起来，对外只提供一个简单的函数接口。
① 函数声明会被提升到当前作用域的顶部，函数表达式则不会。
② 把函数声明放在调用它的语句后不会报错，
在 声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为 形参，而在 **调用该函数时，**同样也需要传递相应的参数，这些参数被称为 实参。
| 参数 | 说明 |
|---|---|
| 形参 | 形式上的参数 函数定义的时候传递的参数 当前并不知道是什么 |
| 实参 | 实际上的 参数 函数调用 的时候传递的参数 实参是传递给形参的 |
参数的作用：在 函数内部某些值不能固定，我们可以通过参数在 调用函数时传递不同的值进去。
①我们可以利用函数的参数实现函数重复不同的代码
function 函数名(形参1,形参2) { //在声明函数的小括号里面是 形参（形式上的参数）
//JavaScript语句;
}
函数名(实参1,实参2); //在函数调用的小括号里面是实参（实际的canshu）
②形参和实参的执行过程
function cook(a){ //形参是接受实参的 aru = '酸辣土豆丝' 形参类似于一个变量
console.log(a);
}
cook('酸辣土豆丝');
cook('大肘子');
③ 函数的参数可以有，也可以没有个数不限
| 参数个数 | 说明 |
|---|---|
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数多于形参个数 | 只取到形参的个数(有几个形参 取几个实参) |
| 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |
1.函数形参实参个数匹配
function getSum(num1,num2){
console.log(num1+num2);
}
//1.如果实参的个数和形参的个数一致 则正常输出结果
getSun(1,2);
2.如果实参的个数多于形参的个数 会取到形参的个数
getSum(1,2,3);
3.如果实参的个数小于形参的个数 多于的形参定义为undefined 因为一个定义了一个未定义两个相加为非数字 最终的结果就是 NaN
//形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined
getSum(1); //NaN
//建议 我们尽量让实参的个数和形参相匹配
注意：在JavaScript中，形参的默认值是undefined。
小结：
① 函数可以带参数也可以不带参数；
② 声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined；
③ 调用函数的时候，函数名括号里面的是实参；
④ 多个参数中间用逗号分隔；
⑤ 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配。
示例：5行6列表格
function table(tr,td){
var str = ""
for(var i=1; i<=tr;i++){
str+=""
for (var j = 1; j <=td; j++) {
str+=""+i+"行"+j+"列 "
};
str+=" "
}
str+= "
"
document.write(str)
}
table(5,6)
① 函数是做某件事或者实现某种功能
function cook(aru){
console.log(aru);
}
cook('大肘子');
② 函数的返回值格式
function 函数名(){
return 需要返回的结果;
}
函数名();
(1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
(2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()= return 后面的结果
③ 代码验证
function getResult(){
reyurn 666;
}
getResult(); // getResult() = 666
console.log(getResult());
function cook(aru){
return aru;
}
console.log(cook('大肘子')); //大肘子
④ 求任意两个数的和
function getSun(num1,num2){
return num1 + num2;
}
console.log(setSum(1,2)); // 3
function getMax(num1,num2){
//if(num1 > num2){
// return num1;
//}else{
// return num2;
// }
return num1 > num2 ? num1 : num2; 可以实现和上面的代码同样的效果
}
console.log(getMax(1,3)); // 3
console.log(getMax(11,3)); // 11
//利用函数求数组[5,2,99,101,67,77]中的最大值。
function getArrMax(arr){ //arr 接受一个数组 arr = [5,2,99,101,67,77]
var max = arr[0];
for(var i = 1; i <= arr.length; i++){
if(arr[i] > max){
max = arr[i];
}
}
return max;
}
//getArrMax([5,2,99,101,67,77]); // 实参是一个数组送过去
//在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
var re = getArrMax([5,2,99,101,67,77]);
console.log(re);//101
return 的返回值
return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
注意：
1.return 终止函数
function getSum(num1,num2){
return num1 + num2; //return 后面的代码不会被执行
alert('我是不会被执行的哦');
}
console.log(getSum(1,2)); // 3
2.return 只能返回一个值
function fn(num1,num2){
return num1,num2; //返回的结果是最后一个值
}
xonsole.log(fn(1,2)); // 2
3.我们求任意两个数的 加减乘除结果
function getResult(num1,num2){
return[num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1,2); //返回的是一个数组
console.log(re); // [3, -1, 2, 0.5]
4.我们的函数如果有 return 则返回的是 return 后面的值，如果函数没有 return 则返回undefined
函数都是有返回值的
① 如果有return则返回return后面的值
② 如果没有return则返回undefined
function fun1(){
return 666;
}
console.log(fun1()); //返回 666
function fun2(){
}console.log(fun2()); // 函数返回的结果是undefined
break，continue，return 的区别
break：结束当前的循环（如for、while）；
continue：跳出本次循环，继续执行下次循环（如for、while）；
return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码。
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中 储存了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有一下特点：
① 具有length属性；
② 按索引方式储存数据；
③ 不具有数组的push,pop等方法。
arguments 的使用
只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
function fn(){
console.log(arguments); //里面存储了所有传递过来的实参
console.log(arguments.length); // 3
console.log(arguments[2]); // 3
//我们可以按照数组的方式遍历arguments
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
fn(1,2,3);
伪数组并不是真正意义上的数组
① 具有数组的length属性
② 按照索引的方式进行存储的
③ 它没有真正数组的一些方法 pop() push() 等等
利用函数求任意个数的最大值
function getMax(){
var max = arguments[0];
for(var i = 1; i < arguments.length; i++){
if(arguments[i] > max){
max = arguments[i];
}
}
return max;
}
console.log(getMax(1,2,3)); // 3
console.log(getMax(1,2,3,4,5)); // 5
console.log(getMax(11,2,34,444,5,100)); // 444
利用函数翻转任意数组 reverse 翻转
function reverse(arr){
var newArr = [];
for(var i = arr.length - 1; i >= 0; i--){
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1,2,3,4]);
console.log(arr1); // 4,3,2,1
利用函数冒泡排序 、sort 排序
function sort(arr){
for(var i = 0; i < arr.length - 1; i++){
for(var j = 0; j <arr.length - i - 1; j++){
if(arr[j] > arr[j + 1]){
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var arr1 = sort([1,4,2,9]);
console.log(arr1); // 1,2,4,9
利用函数判断闰年
function isRunYear(year){
//如果是闰年我们返回 true 否则 返回false
var flag = false;
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
flag = true;
}
return flag;
}
console.log(isRunYear(2000)); // ture
console.log(isRunYear(1999)); // false
函数可以调用另外一个函数
因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。
//函数是可以相互调用的
function fn1(){
console.log(11);
fn2(); // 在fn1 函数里面调用了 fn2 函数
}
fn2();
function fn2(){
console.log(22);
}
function fn1(){
console.log(111); //第二步
fn2(); // 第三步
console.log('fn1'); // 第四步
}
function fn2(){
console.log(222);
console.log('fn2');
}
fn1(); // 第一步
利用函数关键字自定义函数（命名函数）
function fn(){}
fc();
函数表达式
// var 变量名 = function(){};
var fun = function(aru){
console.log('我是函数表达式');
console.log(aru)
}
fun('pink老师');
// ① fun是变量名 不是函数名
// ② 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// ③ 函数表达式也可以进行传递参数
(function(){
console.log("函数自调用")
})()
// 可以提前将要执行的代码提前加载到内存中 可以开辟属于自己的空间
// var a = 2;
(function(){
console.log("函数自调用")
var a = 1;
})()
console.log(a)
function 属于引用数据类型
typeof 没有设计好
函数可以作为参数
以一个函数作为另一个函数的参数 就是回调函数
// 回调函数
function fn1(callback){
callback()
}
function fn2(){
console.log("这是fn2打印出来的东西")
}
fn1(fn2)
return
终止函数 并且返回结果 返回给函数体
function table(tr,td){
var str = ""
for(var i= 1; i<=tr; i++){
str+=""
for (var j = 1; j <=td; j++) {
str+=""+i+"行"+j+"列"+" "
};
str+=" "
}
str +="
";
return str
}
var dom = table(10,10);
document.write(dom)
函数之内嵌套函数
在函数体之内 函数内部可以访问函数外部的变量 函数外部访问不了函数内部的变量
主要作用就是：延伸了变量的作用范围
优点：
①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）。
③匿名自执行函数可以减少内存消耗。（function（）{}）{}
闭包的坏处
闭包：函数内部包裹函数，作用域链得不到释放，造成消耗内存。如果写多了还容易造成内存泄漏
如果用完了之后不用的情况下记得给null清空
外部会改变内部函数变量
function foo(){
var count =1;
return function bar(){
console.log( ++count)
}
}
var bar = foo();
bar(); //2
bar(); //3
bar(); //4
概述：通常来说，一段程序代码在中所用到的名字并不是有效和可用的，而限定这个名字的 可用性的代码范围就是这个名字的 作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性更重要的是 减少命名冲突。
js的作用域（es6）之前：全局作用域 、局部作用域
全局作用域：整个script标签 或者是一个单独的js文件
var num = 10;
var num = 30;
console.log(num); // 30
局部作用域（函数作用域）：在函数内部就是局部作用域、这个代码的名字只在函数内部器效果和作用。
var num = 10;
function fn(){
var num = 20;
console.log(num);
}
fn(); // 20
在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量和局部变量。
全局变量
在全局作用下声明的变量叫做 全局变量（ 在函数外部定义的变量）。
① 全局变量在代码的任何位置都可以使用、在函数内部也可以使用全局变量；
② 在全局作用域下var声明的变量 是全局变量；
③ 特殊情况下，在函数内部不使用var声明的变量也是全局变量（不建议使用）。
注意： 如果在函数内部 没有声明直接赋值的变量也属于全局变量
var num = 10; //num 就是一个全局变量
console.log(num); // 10
function fn(){
consoel.log(num);
}
fn(); // 10
局部变量
在局部作用域下的变量、或者在函数内部的变量就是 局部变量（在函数内部定义的变量）
①局部变量只能在该函数 内部使用；
② 在函数内部var声明的变量是局部变量；
③ 函数的形参实际上就是局部变量。
**注意：**函数的形参也可以看做是局部变量
console.log(aru);
function fun(aru){
var num1 = 10; // num1就是局部变量 只能在函数内部使用
num2 = 20;
}
fun();
// console.log(num1); // undefined
// console.log(num2); // 20
① 全局变量只有浏览器关闭的时候才会销毁，比较占内存；
② 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源。
① **全局变量：**在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；
② **局部变量：**只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。
全局变量：在函数外声明的变量，网页上的所有脚本和函数都能访问它
局部变量：在函数内部声明的变量（使用var），只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量
生存期
局部变量在函数运行以后被删除
全局变量在页面关闭后被删除
js作用域：全局作用域 局部作用域 现阶段我们js 没有 块级作用域
我们js 也是在es6 的时候新增的块级作用域
块级作用域：{} if{ } 、for{ }
概念：内部函数访问外部函数的变量，采用的是链式查找的方式来决定取哪个值、这种结构我们称为 作用域链。 就近原则
① 只要是代码，就至少有一个作用域；
② 写在函数内部的局部作用域；
③ 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
④ 根据在内部函数可以访问外部函数变量的这种机制，用 链式查找决定哪些数据能被内部函数访问，就称作 作用域链。
//作用域链
var num = 10;
function fn(){ // 外部函数
var num = 20;
function fun(){ // 内部函数
console.log(num); // 20 就近原则 站在目标出发，一层一层的往外查找
}
fun();
}
fn(); // 20
沿着作用域链一级一级地搜索的过程。搜索过程始终从作用域链底端开始，然后逐级向上回溯，直到找到为止（如果找不到，通常会报错）
隐式全局变量
指声明变量时没有使用声明变量的关键字
var a1=1; //全局变量
a2=2; //隐式全局变量
delete a1;
delete a2;
console.log(typeof a1);//number
console.log(typeof a2);//undefined
结论：隐式全局变量是可以被删除的，但是全局变量是不能被删除的
切记 不要使用隐式全局变量
js引擎运行js分为两步： 预解析 代码执行
①预解析 js引擎会把js 里面所有的var 还有 function 提升到当前作用域的最前面
②代码执行 按照书写的顺序从上往下执行
预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）
①变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
②函数提升 就是把所有的函数声明提升到当前作用域的最前面 不用调用函数
现实生活中万物皆对象，对象是 一个具体的事物，看得见摸得着的实物。例如：一本书、一个人、可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象 ”。
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等。
对象是由 属性和 方法组成的。
① 属性：事物的 特征，在对象中用 属性来表示（常用名词）；
② 方法：事物的 行为，在对象中用 方法来表示（常用动词）。
保存一个值时，可以使用 变量，保存多个值（一组值）时，可以使用 数组。
在JavaScript中，现阶段我们可以采用三种方式创建对象（object）：
① 利用 字面量创建对象；
② 利用 new Object创建对象
③ 利用 构造函数创建对象
**对象字面量：**就是花括号{ } 里面包含了表达这个具体事物（对象）的属性和方法。
{ }里面采取 键值对的形式表示
① **键：**相当于属性名；
② **值：**相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型、函数类型等）。
1.利用对象字面量创建对象 { }
var obj = {
uname: '张三疯',
age: 18,
sex: '男'，
sayHi: function(){
console.log('hi~');
}
}
① 里面的属性或者方法我们采用键值对的形式 键 属性： 值 属性 ；
②多个属性或者方法中间用逗号隔开的；
③ 方法冒号后面跟的是一个匿名函数。
2.使用对象
①调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
console.log(obj.uname); // 张三疯
② 调用属性还有一种方法 对象名[‘属性名’]
console.log(obj['age']); // 18
③ 调用对象的方法 sayHi 对象名.方法名
obj.sayHi();
对象的调用
① 对象里面的属性调用：对象.属性名，这个小点，就理解为“的”；
② 对象里面属性的另一种调用方式： 对象[‘属性名’]，注意方括号里面的属性 必须加引号，我们后面会用；
③ 对象里面的方法调用： 对象.方法名()，注意这个方法名字后面一定加括号。
变量和属性的相同点：他们都是用来存储数据的
var num = 10;
var obj = {
age: 18;
}
consoel.log(obj.age);
// console.log(age); //undefined
变量 单独声明并赋值 使用的时候直接写变量名 单独存在；
属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性。
函数和方法的不同点 都是实现某种功能 做某件事
函数是单独声明 并且调用的 函数名() 单独存在的；
方法 在对象里面 调用的时候 对象. 方法()。
① **变量：**单独声明赋值，单独存在；
② **属性：**对象里面的变量称为属性，不需要声明，用来描述该对象的特征；
③ **函数：**单独存在的，通过“函数名()” 的方法就可以调用；
④ **方法：**对象里面的函数称为方法，方法不需要声明，使用“对象.方法()”的方式就可以调用，方法用来描述该对象的行为和功能。
//遍历对象
var obj = {
name: 'pink老师',
age: 18,
sex: '男',
fn: function(){
}
}
//console.log(obj.name);
//console.log(obj.age);
//console.log(obj.sex);
//for in 遍历我们的对象
//for(变量 in 对象){
//}
for(var k in obj){
console.log(k); // k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到的是 属性值
}
//我们使用 for in 里面的变量 我们喜欢写 k 或者 key
var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
console.log('hi~');
}
// ① 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
// ② 每个属性和方法之间用 分号结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
之前的两种创建对象的方式一次只能创建一个对象，我们一次创建一个对象，里面很多的属性和方法是大量相同的，我们只能复制，
因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为 构造函数。
又因为这个函数不一样，里面封装的不是普通代码，而是 对象；
**构造函数：**是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。
指向调用当前函数的对象
1.new会在内存中创建一个新的空对象
2.new会让this指向这个新的对象
3.执行构造函数里面的代码 目的：给这个新对象加属性和方法
4.new会返回这个新对象（所以构造函数里面不需要return）
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
var F = function () { }
F.prototype = Person.prototype;
Student.prototype = new F();
function Student(foot, head) {
Parent.apply(this, [foot, head]);
}
function Student() {
Person.call(this);
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
function extend(Chid, Parent) {
var person = Parent.prototype;
var student = Chid.prototype;
for (var k in person) {
student[k] = person[k];
}
}
extend(Student, Person);
利用构造函数创建对象
语法：
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){ }
}
new 构造函数名();
function Star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
// var 了一个 ldh this 就指向 ldh
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
// consoel.log(typeof ldh);
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨'); //把值传给了 sang
// var 了一个 zxy this 就指向 zxy
var zxy = new Star('张学友',19,'男');
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('李香兰');
1.构造函数名字首字母要大写
2.我们构造函数不需要return，就可以返回结果
3.我们调用构造函数 必须使用new
4.我们只要new Star() 调用函数就创建一个对象 ldh{ }
构造函数+prototype
构造函数：属性
原型prototype：方法
function User(name,pass){
this.name = name;
this.pass = pass;
}
function Person(){
}
Person.prototype = User.prototype.show = function(){
document.write(this.name)
}
var user = new User("张三",123456)
// new 做的事情就是将函数进行实例化
console.log(user)
var arr = new Array();
console.log(arr)
如果替换了prototype对象：o.prototype = {};
要为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数：o.prototype.constructor = o;
示例：
function Person(){
this.foot = 2;
this.head = 1;
}
function Student(name,no){
this.name = name;
this.no = no;
}
// constructor 构造函数的构造器
// console.log(new Person())
Student.prototype = new Person();
Student.prototype.constructor = Student;
var student = new Student("张三",'121313')
console.log(student)
function Person(){
}
Person.prototype.head = 1;
Person.prototype.foot = 2;
function Student(name,no){
this.name = name;
this.no = no;
}
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
var student = new Student("张三","12212")
console.log(student)
Student.prototype.eye = 2;
var person = new Person();
console.log(person)
优点：效率比较高（不用执行和建立Person的实例了）
缺点：Student.prototype和Person.prototype现在指向了同一个对象，任何对Student.prototype的修改，都会反映到Person.prototype
利用空对象作为中介
function Person(){}
Person.prototype.head = 1;
Person.prototype.foot = 2;
function Student(name,no){
this.name = name;
this.no = no;
}
var F = function(){}
F.prototype = Person.prototype;
Student.prototype = new F();
Student.prototype.eye = 2;
Student.prototype.constructor = Student;
var student = new Student("张三",'12');
console.log(student);
console.log(student.head)
空对象，几乎不占内存
修改Student的prototype对象，不会影响到Person的prototype对象
示例：
function Person(){}
Person.prototype.head = 1;
Person.prototype.foot = 2;
function Student(name,no){
this.name = name;
this.no = no;
}
function extend(Child,Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
extend(Student,Person);
var student = new Student("张三",1212);
console.log(student)
继承实例属性 实例方法
function Person(head,foot){
this.head = head;
this.foot = foot;
}
function Student(name,age,head,foot){
// Person.call(this,head,foot)
Person.apply(this,[head,foot]);
this.name = name;
this.age = age;
}
var student = new Student("张三",16,2,1);
console.log(student)
function Person(){
this.head = 1;
this.foot = 2;
}
Person.prototype.show = function(){
document.write(this.head)
}
function Student(name,age){
this.name = name;
this.age = age;
Person.call(this)
}
Student.prototype = new Person();
Student.prototype.constructor =Student;
var student = new Student("张三",'212');
student.show()
把父对象的所有属性和方法，拷贝进子对象
将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象
function Person(){
this.head = 1;
this.foot = 2;
}
Person.prototype.show= function(){
document.write("有"+this.head+"个头"+this.foot+"只脚.");
}
function Student(name,age){
this.name = name;
this.age = age;
Person.call(this);
}
function extend(Person,Child){
var person = Person.prototype;
var child = Child.prototype;
for(var name in person){
child[name]= person[name]
}
}
extend(Person,Student);
var student = new Student("张三",16);
student.show()
console.log(student)
概念：JavaScript中的对象分3种：自定义对象、内置对象、浏览器对象；
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。
内置对象最大的优点就是帮助我们快速开发，
JavaScript提供了多个内置对象：Math、Date、Array、String等
数组 array的 属性和方法
时间 date 的方法
两种声明数组的方式
①利用new 对象方式 创建数组
var arr = new Array(); //创建了一个空数组
var arr2 = new Array(2); // 这个 2 表示数组的长度为2 里面有两个空的数组元素
var arr2 = new Array(2,3); //等价于[2,3] 这样写表示 里面有2个数组元素 是 2 和 3
②利用数组字面量创建数组
var arr = []; //创建了一个空的数组
var arr2 = [1,2,3];
数组字面量是方括号[ ]
声明数组并赋值称为数组的初始化
①instanceof 运算符 可以用来检测是否为数组
var arr =[];
console.log(arr instanceof Array); //true
var obj = {};
console.log(obj instanceof Aarry); //false
②Array.isArray(参数); H5新增的方法 ie9以上版本支持
var arr =[];
console.log(Array.isArray(arr)); //true
var obj = {};
console.log(Array.isArray(obj)); //false
注意：数组里面的数据一定用逗号分隔
数组里面的数据 比如1，2 我们称为数组元素
具有相同数据类型的一个或多个值的集合
如果以对象的方式声明 传入一个number类型的数字，代表的是可以存放多少数组 也就是lenght 多少
如果是存放多个的时候 代表的就是数组
var week= new Array ("星期日","星期一"……);
array 也是一种数据类型 但是是引用数组类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值
var = [1,2,'pink',true];
索引（下标）：用来访问数组元素的序号（数组下标从 0 开始）。
var arr = ['小白','小黑','大黄','瑞奇'];
// 索引号：0 1 2 3
数组可以通过索引来 访问、设置、修改对应的数组元素，我们可以通过 “数组名[索引]” 的形式来获取数组中的元素（访问就是得到的意思）
获取数组元素
格式： 数组名[索引号] 索引号从0开始
**属性 ：**length
数组名.length : 数组的长度是数组的元素个数 不要和索引号混淆
arr.length 动态监测数组元素的个数
方法： push() 末尾添加 、 join() 数组转化字符串、 pop() 末尾删除 、 unshift() 首个添加、 shift() 第一个删除 、 sort() 排序、 concat() 合并数组 、 slice() 截取 、 splice() 数组更新、 indexOf() 从开头查询 查询到即结束 、 lastIndexOf() 从末尾查询 查询到即结束、 reverse() 数组倒序
数组转字符串，方法只接收一个参数：即默认为逗号分隔符。
var arr=[1,2,3,4];
console.log(arr.join()); //1,2,3,4
console.log(arr.join(":")); //1:2:3:4
console.log(arr); //[1,2,3,4],原数组不变
push()：方法可向数组的末尾添加一个或多个元素，会改变原数组 并返回新的长度。
pop()：方法用于删除并返回数组的最后一个元素（返回的是删除的那个元素）。
var arr=[1,2,3,4];
//push
var push_arr=arr.push("Tom","Sun");
console.log(arr); //[1,2,3,4,"Tom","Sun"];
console.log(push_arr); // 6
//pop
var pop_arr=arr.pop();
console.log(arr); //[1,2,3,4,"Tom"];
console.log(pop_arr); // Sun
shift()：方法用于把数组的第一个元素从其中删除，并返回第一个元素的值 (返回的是删除的那个元素）。
unshift()：方法可向数组的开头添加一个或更多元素，会改变原数组 并返回新的长度。
var arr=[1,2,3,4];
//shift
var shift_arr=arr.shift();
console.log(arr); // [2, 3, 4]
console.log(shift_arr); // 1
//unshift
var unshift_arr=arr.unshift("Tom");
console.log(arr); // ["Tom", 2, 3, 4]
console.log(unshift_arr); // 4
方法用于对数组的元素进行排序。
var arr=[1,100,5,20];
console.log(arr.sort()); // [1, 100, 20, 5]
console.log(arr); // [1, 100, 20, 5] (原数组改变)
请注意，上面的代码没有按照数值的大小对数字进行排序，是按照字符编码的顺序进行排序，要实现这一点，就必须使用一个排序函数：
升序：
var arr=[1,100,5,20];
function sortNumber(a,b){return a - b};
console.log(arr.sort(sortNumber)); //[1, 5, 20, 100]
console.log(arr); //[1, 5, 20, 100] (原数组改变)
降序：
var arr=[1,100,5,20];
function sortNumber(a,b){return b - a};
console.log(arr.sort(sortNumber)); // [100, 20, 5, 1]
console.log(arr); // [100, 20, 5, 1] (原数组改变)
方法用于颠倒数组中元素的顺序。
var arr=[12,25,5,20];
console.log(arr.reverse()); // [20, 5, 25, 12]
console.log(arr); // [20, 5, 25, 12] (原数组改变)
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
var arr=[1,2,3,4];
var arr2=[11,12,13]
var arrCopy = arr.concat(arr2);
console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
console.log(arrCopy); // [1, 2, 3, 4, 11, 12, 13]
console.log(arr); // [1, 2, 3, 4] (原数组未改变)
arr.slice(start , end);
start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值：返回一个新的数组，包含从 start 到 end （不包括该元素 包头不包尾）的 arr 中的元素。
var arr = [1,4,6,8,12];
var arrCopy1 = arr.slice(1);
var arrCopy2 = arr.slice(0,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-5,4);
var arrCopy5 = arr.slice(-4,-1)
console.log(arrCopy1); // [4, 6, 8, 12]
console.log(arrCopy2); // [1, 4, 6, 8]
console.log(arrCopy3); // [4, 6]
console.log(arrCopy4); // [1, 4, 6, 8]
console.log(arrCopy5); // [4, 6, 8]
console.log(arr); // [1, 4, 6, 8, 12] (原数组未改变)
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）
arr.splice(index , howmany , item1,…,itemX)
index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX：可选。向数组添加的新项目。
返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。
<script>
var arr = ["张三","李四","王五","小明","小红"];
/**************删除"王五"****************/
var arrReplace1 = arr.splice(2,1);
console.log(arrReplace1); // ["王五"]
console.log(arr); // ["张三", "李四", "小明", "小红"] (原数组改变)
//删除多个
var arrReplace2 = arr.splice(1,2);
console.log(arrReplace2); // ["李四", "小明"]
console.log(arr); // ["张三", "小红"]
/**************添加"小刚"****************/
var arrReplace3 = arr.splice(1,0,"小刚");
console.log(arrReplace3); // [] (没有删除元素，所以返回的是空数组)
console.log(arr); // ["张三", "小刚", "小红"]
//添加多个
var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");
console.log(arrReplace4); // []
console.log(arr); // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]
/**************"王五"替换"小刚"****************/
var arrReplace5 = arr.splice(1,1,"王五");
console.log(arrReplace5); // ["小刚"]
console.log(arr); // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]
//替换多个
var arrReplace6 = arr.splice(1,4,"李四");
console.log(arrReplace6); // ["王五", "小红", "刘一", "陈二"]
console.log(arr); // ["张三", "李四", "赵六"]
script>
两个方法都返回要查找的项在数组中首次出现的位置，在没找到的情况下返回-1
indexOf()--------array.indexOf(item,start) （从数组的开头（位置 0）开始向后查找）
item： 必须。查找的元素。
start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]开始检索。
lastIndexOf()--------array.lastIndexOf(item,start) （从数组的末尾开始向前查找）
item： 必须。查找的元素。
start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从 array[array.length-1]开始检索。
<script>
var arr = [1,4,7,10,7,18,7,26];
console.log(arr.indexOf(7)); // 2
console.log(arr.lastIndexOf(7)); // 6
console.log(arr.indexOf(7,4)); // 4
console.log(arr.lastIndexOf(7,2)); // 2
console.log(arr.indexOf(5)); // -1
script>
var arr=[5,4,26,9,4,8,5,14];
var newarr = [];
for (var i = 0; i < arr.length; i++) {
if(newarr.indexOf(arr[i])===-1){
newarr.push(arr[i])
}
}
console.log(newarr)
// 冒泡排序
var arr = [5,14,58,78,85,5,10,50,47];
// 外层执行一次
for (var i = 0; i < arr.length; i++) {
// 里层执行一遍
for(var j = 0; j<arr.length-i-1; j++){
if(arr[j]>arr[j+1]){
// 先把前面的数进行保存
var temp = arr[j];
// 再把前面的位置替换成小的那个数
arr[j] = arr[j+1];
// 后面的位置换成大的数
arr[j+1] = temp;
}
}
};
console.log(arr)
Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
// var date = new Date("4,5,2011,5:6:3");
var date = new Date("2021-10-05,20:52:6")
如果没有参数 返回当前系统的当前时间
①获取当前时间必须实例化
var date = new Date();
console.log(date);
②Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。
例如：日期格式字符串为 ‘2019-5-1’ , 可以写成 new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)
数字型 2019，10，01
var date = new Date(2019,10,1);
console.log(date); //输入的是10月 返回的是 11月
字符串型 ‘2019-10-1 8:8:8’
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2); //输入的是10月 返回的也是10月
| 方法 | 说 明 |
|---|---|
| getDate () | 返回 Date 对象的一个月中的每一天，值介于 1 ～ 31 之间 |
| getDay () | 返回 Date 对象的星期中的每一天，值介于 0 ～ 6 之间（注： 0为周日 ） |
| getHours () | 返回 Date 对象的小时数，值介于 0 ～ 23 之间 |
| getMinutes () | 返回 Date 对象的分钟数，值介于 0 ～ 59 之间 |
| getSeconds () | 返回 Date 对象的秒数，值介于 0 ～ 59 之间 |
| getMonth() | 返回 Date 对象的月份，值介于 0 ～ 11 之间（注： 0为一月份 ） |
| getFullYear() | 返回 Date 对象的年份，值为 4 位数 |
返回的月份小1个月 记得月份+1
示例：
var date = new Date();
var mon = date.getMonth();
var day = date.getDate()+5;
var weekDay = new Date(2022,mon,day);
var week = weekDay.getDay();
console.log(week);
switch(week){
case 1:
alert("星期一");
break;
case 2:
alert("星期二");
break;
case 3:
alert("星期三");
break;
case 4:
alert("星期四");
break;
case 5:
alert("星期五");
break;
case 6:
alert("星期六");
break;
case 0:
alert("星期日");
break;
default:
alert("输入不正确")
}
深 浅拷贝
// js 分为两种数据类型
// 1. 基础数据类型 number boolean null undefined string
// 2. 引用数据类型 array
浅拷贝 当b发生改变 或者a发生改变 他们之间可以相互看的见 用的是同一个地址 相互之间会受到影响
var a = [1, 2, 3];
var b = a;
深拷贝 ： 重新在堆区开辟一个新的空间出来 a 和 b 之间相互不受影响 深拷贝
var b = JSON.parse(JSON.stringify(a));
String 对象用于处理文本（字符串）
var 字符串对象=new String(参数)
参数 是要存储在 String 对象中或转换成原始字符串的值
var str=new String(“kgc”);
| 类别 | 名称 | 说明 |
|---|---|---|
| 属性 | length | 字符串的长度 |
| 方法 | charAt() | 返回在指定位置的字符（注：字符串中第一个字符的下标是0） |
| concat() | 连接字符串 | |
| replace() | 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 | |
| split() | 把一个字符串分割成字符串数组 | |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置 | |
| lastIndexOf() | 返回一个指定的字符串值最后出现的位置 | |
| match() | 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配 | |
| toLowerCase() | 把字符串转换为小写 | |
| toUpperCase() | 把字符串转换为大写 | |
| substr() | 从起始索引号提取字符串中指定数目的字符（不建议使用） (索引号,数目几个) | |
| substring() | 提取字符串中两个指定的索引号之间的字符 (索引号,索引号) | |
| slice() | 提取字符串的某个部分，并以新的字符串返回被提取的部分 |
根据数据位置返回字符 (index:在这里指的是索引号)
①charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3)); // y
②charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了哪个键
var str = 'andy';
console.log(str.charCodeAt(0)); // 97
③ str[index] H5新增
var str = 'andy';
console.log(str[0]); // a
有一个对象 来判断是否有该属性 对象[‘属性名’]
var o = {
age: 18;
}
if(o['age']){
console.log('里面有该属性');
}else{
console.log('没有该属性');
}
实例：
判断一个字符串"abcoefoxyozzopp" 中出现次数最多的字符，并统计其次数。
核心算法：利用charAt() 遍历这个字符串
把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
遍历对象，得到最大值和该字符
var str ="abcoefoxyozzopp";
var o = {};
for(var i = 0;i<str.length;i++){
var chars = str.charAt(i); //chars 是 字符串的每一个字符
if(o[chars]){ // o[chars] 得到的是属性值
o[chars]++;
}else{
o[chars] = 1;
}
}
consoel.log(o);
// 2.遍历对象
var max = 0;
var ch = '';
for(var k in o){
// k 得到的是 属性名
// o[k] 得到的是属性值
if(o[k]>max){
max = o[k];
ch =k;
}
}//循环完max 就是最大值
console.log(max);
console.log('最多的字符就是'+ch);
var str ='andy';
console.log(str.concat('red'));
substr(‘截取的起始位置’,‘截取几个字符’);
var str1 ='改革春风吹满地';
console.log(str1.substr(2,2)); // 春风
// 第一个2 是索引号的2 就是从第几个开始，第二个2 是取几个字符
替换字符 replace(‘被替换的字符’,‘替换为的字符’); 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a','b')); // bndyandy
实例： 把字符串"abcoefoxyozzopp" 里面所有的 o 替换为 *
var str1 = "abcoefoxyozzopp";
while(str1.indexOf('o') != -1){
str1 = str1.replace('o','*');
} // while 再判断str1 里面有没有 o 直到没有o停止
console.log(str1)
字符转换为数组 split(‘分隔符’);
var str2 = 'red,pink,blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
概念
① Math数学对象 不是一个构造函数，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可。
② Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值、取整、最大值等）可以使用Math 中的成员。
PI 圆周率
console.log(Math.PI); // 一个属性 圆周率
Math.floor(); //向下取整
Math.ceil(); // 向上取整
Math.round(); //四舍五入版 就近取整 ！注意： -3.5 结果是 -3
Math.abs(); // 绝对值
Math.max(); // 最大值
Math.min(); // 最小值
floor 地板 向下取整 往小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
ceil 天花板 向上取整 往大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
console.log(Math.round(1.1)); // 1
conosle.log(Math.round(1.5))； // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1 往大的那边取 -1 > -2 所以结果为-1
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink')); // NaN
函数返回一组数中的最大值。
语法：
console.log(Math.max(1,99,3)); // 99
console.log(Math.max(-1,-10)); // -1
返回值：返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字，则返回NaN。
如果没有参数，则结果为 -Infinity；如果有任一参数不能被转换为数值，则结果为NaN。
console.log(Math.max()); // -Infinity
console.log(Math.max(1,99,'pink')); // NaN
利用对象封装自己的数学对象 里面有PI最大值和最小值
var myMath ={
PI:3.141592653,
max: function() {
var max = arguments[0];
for(var i = 1;i < arguments.length; i++) {
if (argumrnts[i] > max) {
max = arguments[i];
}
}
return max;
},
max: function() {
var min = arguments[0];
for(var i = 1;i < arguments.length; i++) {
if (argumrnts[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(maMath.PI); // 3.141592653
console.log(myMath.max(1,5,9)); // 9
console.log(myMath.min(1,5,9)); // 1
① 返回一个浮点，随机数在范围[0,1)，也就是说，从0（包括0）往上，但是不包括1（排除1） 0 =< x < 1 。
② random() 方法里面不跟参数；
得到一个两数之间的随机数，包括两个数在内
function fc(min,max){
min = Math.ceil(min); //向上取整
max = Math.floor(max); // 向下取整
return Math.floor(Math.random()*(max - min + 1)) + min;
}
fc(小的数,大的数);
随机点名
var arr = ['老大','小二','张三','李四','王五','老六'];
function getRandom(min,max){
return Math.floor(Math,random() * (max - min + 1)) + min ;
}
console.log(arr[getRandom(0,arr.length-1)]);
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
① 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string , number , boolean , undefined , null
唯独 null 返回的是一个空的对象 object 属于bug 如果有个变量我们以后打算存储为对象，暂时没想好放啥，这时候就给 null
② 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用）因此叫做引用数据类型
通过 new 关键字创建的对象（系统对象、自定义对象），如Object、Array 、Date等
堆栈空间分配区别：
① 栈（操作系统） ：由操作系统分配释放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面
②堆（操作系统）：存储复杂类型（对象）、一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 复杂数据类型存放到堆里面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3WjTKgv-1657280263968)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220410163741581.png)]
注意： JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。
① 值类型（简单数据类型）：string , number , boolean , undefined , null
② 值类型变量的数据直接存放在变量（栈空间）中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KniAfyc6-1657280263969)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220410164131254.png)]
① 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象）、如Object、Array、Date等
② 引用类型变量（栈空间）里面存放的是地址，真正的对象实例存放在堆空间中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtazG0EK-1657280263970)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220410164654129.png)]
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实时把变量在栈空间里面的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
function fn(a){
a++;
console.log(a);
}
var x = 10;
fn(x); // 11
console.log(x); // 10
JS基础学习 ECMAScript 基础语法为后面做铺垫，Web APIs是 JS 的应用，大量使用JS 基础语法做交互效果。
**API：**简单的来说，就是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API： 是浏览器提供的一套操作 浏览器功能和 页面元素的 API(BOM 和 DOM)。
比如：让浏览器弹出警示框，直接使用alert(‘弹出’)
总结：
① API 是我们程序员提供的一个接口，帮助我们实现某种功能，会使用就可以了；
② Web API 主要针对与浏览器提供的接口，主要针对于浏览器做交互效果。
③ Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。
**Web APIs : ** BOM 浏览器对象模型、 DOM 文档对象模型
JavaScript基础： ECMAscript 语法
CMAScript是一种语法标准
语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象
编码遵循ECMAScript标准
BOM：Browser Object Model（浏览器对象模型）
提供了独立于内容与浏览器窗口进行交互的对象
DOM：Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档
| 警告框 | window.alert() | 用于确保用户可以得到某些信息 |
|---|---|---|
| 确认框 | window.confirm() | 用于验证是否接受用户操作 |
| 提示框 | window.prompt() | 用于提示用户在进入页面前输入某个值 |
用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
| location.href | 返回当前页面的 URL 或者可以重定向一个url地址 |
|---|---|
| location.pathname | 返回 URL 的路径名----> 当前页面所在的位置 |
| location.assign() | 加载新的文档 |
示例：
<a href="http://www.baidu.com">百度一下a>
<button onclick="asstxt()">点击加载button>
<button onclick="topath()">点击跳转button>
<script type="text/javascript">
function topath(){
window.location.href="http://www.baidu.com"
}
var url = window.location.href;
console.log(url)
var pathname = window.location.pathname;
console.log(pathname)
function asstxt(){
window.location.assign("index.txt")
}
script>
DOM：Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档。是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准 程序接口。
通过DOM接口可以改变网页的内容、结构和样式。
**文档：**一个页面就是一个文档，DOM中使用document表示。
**元素：**页面中的所有标签都是元素，DOM中使用element表示。
**节点：**网页中的所有内容都是节点（标签、属性、文本、注释等）、DOM中使用node表示，也叫DOM树。
① 根据ID 获取
② 根据标签名获取
③ 根据HTML5 新增的方法获取
④ 特殊元素获取
使用 document.getElementById(); 获取带有id的元素对象
var timer = document.getElementById('item');
console.log(timer);
//console.dir() 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
var app = document.getElementById("app");
app.onclick = function(){
alert("点击了div")
}
根据类名获取 获取过来的是伪数组 要查找每一个元素 应该加下标
document.getElementsByClassName()
var item = document.getElementsByClassName('item');
for (var i = 0; i < item.length; i++) {
item[i].onclick = function(){
alert("点击")
}
};
var li = document.getElementsByTagName(“li”);
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick = function(){
alert("点击li")
}
};
var box = document.querySelector(“.box”); 可以通过 id class tag 来进行获取 只能获取单一个
**注意：**返回相同类名的第一个元素 （也可以写标签名）
获取多个
**注意：**返回相同类名的所有元素 对象集合 （也可以写标签名）
var item = document.querySelectorAll(“.item”);
var box = document.querySelector(".box");
console.log(box)
var item = document.querySelectorAll(".item");
for (var i = 0; i < item.length; i++) {
item[i].onclick= function(){
alert("点击")
}
};
var bodyEle = document.body;
console.log(body); // 返回body元素对象
var htmlEle = document.documentElement;
console.log(html); // 返回html元素对象
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性。
innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉(不识别html标签会以文本形式展示)
element.innerText
innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行(识别html标签)
element.innerHTML
| document.write() | 改变 HTML 输出流 |
|---|---|
| 对象.innerHTML=新的 HTML | 改变 HTML 内容 |
| 对象.attribute=新属性值 | 改变 HTML 属性 |
<button id='ldh'>刘德华button>
<button id='zxy'>张学友button>
<img src='../images/ldh.jpg' alt='' title='刘德华' />
<script>
var ldh = document.querySelector('#ldh');
var zxy = document.querySelector('#zxy');
var img = document.querySelector('img');
zxy.onclick = function() {
img.src = '../images/zxy.jpg';
img.title = '张学友';
}
ldh.onclick = function() {
img.src = '../images/ldh.jpg';
img.title = '刘德华';
}
script>
innerText 改变纯文本
//获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//2.注册事件 处理程序
btn.onclick = function(){
// input.innerHTML = '被点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内如是通过value 来修改的
input.value = '被点击了';
//如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
//btn.disabled = true;
this.disabled = true;
//this 指向的是事件函数的调用者 btn是事件源
}
//1.获取元素 所有的小li
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
//让索引号 乘以 44 就是 每个li 的背景坐标 y 就是我们的y坐标
var y = i * 44;
lis[i].style.bakgroundPosition = '0 -'+y+'px';
}
| 语法 | 说明 |
|---|---|
| 对象.style.property=新样式 | 通过id属性获取对象 |
var img = document.getElementById("img");
img.style.width = "400px";
示例：
<div id="app">div>
<script type="text/javascript">
var arr = ['研发编程',"虚拟现实",'研发编程',"虚拟现实",'研发编程',"虚拟现实",'研发编程',"虚拟现实"]
var str = ""
for (var i = 0; i < arr.length; i++) {
str+= "" +arr[i]+""
};
str += "