JS基础知识汇总

js基础

计算机语言

1.机器语言  可读性差
2.汇编语言  还是没有达到人类的语言
3.高级语言

编译性语言和解释性语言

编译性语言:java c c++（一次性把所有的代码翻译成机器语言然后运行）
解释性语言：js php ruby python（翻译一行，运行一行）

软件和程序

软件：由多个程序组成，完成特定的功能
程序：完成指定功能的命令（代码）
程序：数据结构+算法
数据结构：把数据存储到计算机中
算法：解决问题的方法和步骤

程序设计的步骤

1.软件计划
2.需求分析和定义
3.软件设计（数据结构和算法）
4.实施
5.测试
6.更新和维护（运营）

程序设计常见的错误

1.语法错误
2.逻辑错误：（语法正常，代码可编译，运行结果和预期结果不一致）
3.运行错误：算法有问题（死循环）

算法及算法特点

算法
1.自然特点
2.伪代码
3.流程图（亿图软件）
算法特点
1.有穷性：算法包含有限的操作步骤。
2.确定性：每个步骤都是确定的。
3.有零个或多个输入
4.有一个或多个输出
5.有效性

js规范

ECMA：制定js规范的组织。javascript是ECMA规范的具体实现。
ES5
ES6版本

判断一条语句是否结束通过分号

标识符

语句格式：关键字  标识符  表达式   分号
可以用作：变量名  数组    函数名  对象名等
命名规则：
硬性规则：
1.可以由数字（但是不能以数字开头）、字母、下划线和美元符号
（不允许包含其他特殊符号）
2.不能用关键字和保留字
3.区分大小写（大小写特敏感）
软性要求：
1.望文知意

标识符的表现形式

1.大驼峰命名法（每个单词首字母大写）UserName
2.小驼峰命名法（除了第一个单词其他字母大写）userName
3.蛇形命名法：user_Name
4.匈牙利命名法：匈牙利命名法：先写数据类型，再写标识符 S_username、N_password

数据类型及如何查看数据类型

基本数据类型

1.Number数值型（可以进行计算） 
类型有整数 实数 NaN
NaN的两个特点
1.所有内容与NaN计算得到的值都是NaN
NaN是一个值，不是一个数字，但是他的类型是一个数字，代码表示这句话就为
let i=1;
let j;
console.log(j); undefined
let like=j+i; undefined与i计算出来就是一个非数值，即NaN
console.log(like);  输出出来为NaN
console.log(typeof like); number 但是打印出来的类型时number

2.NaN不等于任何值，包括它自己，（与任何值比较得到的结果都是false）
let i = NaN / undefined; 
所有内容与NaN计算得到的值都是NaN，运用的是第一个特点。
console.log(i);   NaN
console.log(NaN == NaN);//false 
（与任何值比较得到的结果都是false）运用的是第二个特点

2.string（字符串）
3.Boolean（布尔）
4.null（空）
这个类型只有一个值为null，表示一个空的对象
let i=null;
console.log(typeof i); 打印i的类型为object

5.undefined
这个类型中只有一个值，就是undefined
表示声明变量，只是没有赋值就使用了undefined
let like;
console.log(like);  undefinded
console.log(typeof like);  undefinded

区别：
console.log(like);  like is not defined
console.log(typeof like); undefined
打印一个未声明的变量类型时，值就为undefined;
6.symbol（唯一）

引用数据类型

object

如何查看数据类型

typeof 标识符/具体值
实例  console.log(typeof 1234);

查看和运行js文件和清屏处理

查看当前文件夹下的所有内容（文件、文件夹、系统文件） dir命令
如何运行js文件 node 文件名.扩展名
运行文件的前提，首先要在运行文件所在的文件夹中。

如何进入到一个文件夹中 cd 文件名
如何出一个文件夹cd..返回上一级

清屏cls

声明变量

先声明 后使用,
格式：关键字 标识符 var like;

声明变量可以使用的关键字
var（ES5） let  const（ES6）
三者之间的区别：
归属于ES5和ES6
var可以重复声明，let和const不可以
var可以变量提升，let和const不可以
当没有写关键字时，默认值为var

声明变量中的报错

1.重复声明报错 SyntaxError: Identifier '标识符' has already been declared
实例
let like；
const like；

2.用未声明的标识符 is not defined
console.log(like);
let like；

3.声明未赋值   undefined
let like;
console.log(like);

let like;
console.log(like);//undefined
console.log(typeof like);//undefined

变量赋值

let i=1;变量初始化——声明赋值一起

作用域（确定变量的可用范围）

全局作用域
作用于整个js文件      在全局作用域声明的变量叫全局变量

局部作用域
寻找大括号，即一个大括号产生一个局部作用域，在局部作用域声明的变量叫局部变量

关于作用域的详细实例

例1  定义了一个全局变量
let like=1;  全局作用域 声明的变量也是全局变量
{
console.log(like); 通过上面的全局变量输出值为1
}
console.log(like);输出值为1

例2  全局变量与局部变量同时存在的情况
let like=1;  全局作用域 声明了一个全局变量 
{
let like=2;  局部作用域 声明一个局部变量
当新声明的局部变量与全局变量名字相同
不会发生重复声明，因为局部变量作用域仅为括号中的内容。
console.log(like);输出值为2
}
console.log(like);输出值为1

例3 当局部变量与全局变量相同，不会发生重复声明。
let like=1;
{
   like=2;
   console.log(like);  2
}
  console.log(like);  2

例4  var声明的变量为全局变量
{
var likelike=1;
这句中var在括号中声明的是全局变量所以括号内外的值计算出来都是1
console.log(likelike); 1
}
console.log(likelike); 1

这句与上句相比，声明变量没有关键字，但是默认值为var
所以为全局变量，输出结果也都为1
{
 like=1;
 console.log(like); 1
}
console.log(like);  1

例5
{
let like=2;
console.log(like); 输出值为2 
}
console.log(like);
 这句执行后显示not defined 因为上面括号中定义的变量为一个局部变量
所以没有声明变量是不能输出。

任何值与undefined计算得到NaN

此实例主要介绍关于为赋值undefined时参与运算隐式转换NaN的情况
let i=1;
let j; 此时j未赋值
console.log(j); 此时输出会显示undefined
let like=i+j; 声明like=i+j 此时参与运算时j值undefined将隐式转换为NaN
console.log(like); 
计算结果为NaN，因为上一句中的j已经转为NaN,并且NaN参与运算都会得到NaN
console.log(typeof like); number (NaN是一个值  非数字 但是类型是数字)

1.string类型

1.1引号嵌套和转义符

let i = "123";
i = 'abc';
1.不同引号之间可以嵌套
i = "我是'like'";
i = '我是"like"';

2.相同引号嵌套需要添加转义符
i = '我是\'like\'呀';
console.log(i, typeof i);  我是'like'呀  string

1.2字符串模板

补充字符串模板
 1、内容可以换行输入，显示时，也是换行显示
 2、内容中的变量可以用${变量名}，来进行变量值的获取与展示

 ${}占位符
 大括号里放：表达式
 
 注：字符串模板中，输入了空格。会是转换成一个空格的字符串。
 即会考虑空格的存在。

1.21字符串模板实例

实例
 let classroom = "信管班";
 i = '我们班是${classroom}班'; 用的引号没有用字符串模板
 console.log(i);
 i = `${123+1}我们是最胖的！${classroom}`; 
 用了字符串模板并且表达式中也能进行运算
 console.log(i);

2.取整、向上取整、向下取整、四舍五入

i = 123.01;
console.log(Math.round(i));   四舍五入 123 后续加入取整位数计算
console.log(Math.ceil(i));    向上取整 124
console.log(Math.floor(i));   向下取整 123

3.数据转换

3.1其他类型转boolean的几种特殊false情况

以下的值都会转换成false。即除了以下的值之外都会得到true;
let like = 0;
like = -0;
like = undefined;
like = null;
like = "";
like='';
like=``;
like=NaN;
console.log(NaN == NaN);//false
因为NaN参与判断运算得到的结果也是NaN,此时NaN会转化为boolean中的false

f63=false;

4.显式转换

5.隐式转换

运算公式会触发隐式转换，会把非数值，转换成数值
let i = 1 - "2";     把字符串的2，变成数字2

i = 1 - undefined;   undefined转换数字后为NaN
i = 1 - "ABC";       "ABC"转换数字后为NaN

i = 1 - null;        null转换数字后为0
i = 1 - false;       false转换数字后为0

i = 1 - true;        true转换数字后为1

5.1隐式转换特殊实例

 console.log(i);
 i = 1 - "1";
 console.log(i);   0
 console.log(typeof i);  number 通过-运算会把字符串隐式转为数字
 
  console.log(i);
 i = 1 + "1";
 console.log(i);   2
 console.log(typeof i);  string 通过+拼接时最终输出的将会是字符串
 
引申的便捷的转换方式
把一个String类型的数字转换为Number类型（-）
let like= "123";
console.log(like- 0); number

把一个Number类型的数字转换为String类型（+）
let like= 123;
console.log(like + ""); string

6.运算符

6.1算术运算符（+、-、*、/、%）

let i = 1 + 2;
i = 1 - 2;
i = 1 * 2;
i = 1 / 2;
i = 1 % 2;
console.log(i);

6.2一元运算符

6.2.1赋值运算符

let like= 6;
like+= 1;  like=like+1;代表将like+1的值再赋值给like
like-= 1;
like*= 1;
like/= 1;
like%= 1;

6.2.2自增自减

自增或自减在变量之后，先使用，再计算i++、i--
1.先计算返回结果，与变量相同
2.将变量自增1

自增或自减在变量之前，先计算，再使用++i、--i
1.计算返回结果，变量+1
2.变量自增1

6.2.2.1自增自减实例

let i = 1;
console.log(i++);  1  输出结果为1 但是此时i已经自增为2
console.log(++i);  3  通过上面i=2计算出值为3

let i = 3;
let j = --i + ++i - i++ + ++i;
onsole.log(j);  7
i  2 3 4 5   i的值变化情况
   2+3-3+5=7 计算结果

6.2.3自增自减也适用于number以外的数据，当前值会被转换为number

let i = "123"; //122
i = "123abc" //NaN
i = "abc" //NaN
i = true // 0
i = false // -1
i = 3.14; //2.14

console.log(--i);

6.3比较运算符（结果为boolean）

6.3.1关系运算符

let like=1;
   lsq=2;
console.log(like< lsq);    true
console.log(like>= lsq);   false  

ASCII码
ASCII码获取具体的值（字符与字符之前的比较）
like1 = "a"; 值大
like2= "A"; 值小

输入的内容会按位比较
like1= "2a";
like2= "1b";

注：字符与数值进行比较，字符会转换成NaN，而NaN与任何数比较都会得到false
like1= "C";
like2= 1;

6.3.2相等和不等

console.log(null == undefined); //true
console.log(null == 0); //false
console.log(undefined == 0); //false

console.log(5 == true); //false
console.log(NaN == NaN); //false   NaN与任何数比较都会得到false
console.log(NaN != NaN); //true
console.log("NaN" != NaN); //true   
console.log("NaN" == NaN); //false  NaN与任何数比较都会得到false

6.3.3全等和不全等（比较内容和类型）

console.log(1 === 1);     true
console.log(1 === "1");   false

console.log(1 !== 1);     false
console.log(1 !== "1");   true

6.4逻辑运算符（！、&&、||）

6.4.1 非！

console.log(!true);     false
console.log(!1);        false
console.log(!"");       true
console.log(!Infinity); false
console.log(!!NaN);     false          此处计算的值都与那些特殊取假的值有关

6.4.2且&& （一假全假，计算时即找假）

 表达式1 && 表达式2
 看表达式1的值是不是假，如果是假直接返回。
 如果表达式1的值是真，则返回表达式2的值。
 
 补充：
 一个&,会触发"位运算"
 把十进制转换成二进制，按位进行"与"运算，得到的结果，再转成十进制返回。
 let i = 3 & 7;
 console.log(i);//3

6.4.3或|| （一真全真，计算时即找真）

 表达式1 || 表达式2
 看表达式1的值是不是真，如果是真直接返回。
 如果表达式1的值是假，则返回表达式2的值。

6.5三目运算符

 格式：  表达式1 ?  表达式2  : 表达式3;
 功能：条件判断
 原理： 如果表达式1为真，返回表达式2的值，反之则返回表达式3的值。

const rs = require("readline-sync");
console.log("请您输入三个数");
console.log("请您输入第一个数");
let a = rs.question() - 0;
console.log("请您输入第二个数");
let b = rs.question() - 0;
console.log("请您输入第三个数");
let c = rs.question() - 0;
(a > b ? max = a : max = b) > c ? console.log(`您输入的最大值是${max}`) : console.log(`您输入的最大值是${c}`)

7.条件分支语句

7.1 单分支：

if(条件){   条件为真执行代码
代码1;
代码2;
代码n
}

7.2 双分支

if(条件){
条件为真
代码块
}
else{
条件为假
代码块
}
let num=1;
if (isNaN(Num1)) {
console.log(`您输入的${Num},不是数字`);
} else {
console.log(`您输入的${Num},是数字`);
}

7.3 多分支

判断用户的输入是否大于10，大于输出C，小于输出D，如果不是数字输出B
let year = rs.question(); 获取用户输入，值赋值给year

if (isNaN(year)) {
console.log("B");
} else if(year>=10){
console.log("C");
}else{
console.log("D");
}

if (inputNum != parseInt(inputNum)) {   通过取整与本身判断相等能排除出是否为纯数字

console.log("您输入不是一个纯数字！！！！");

} else if (inputNum >= 1 && inputNum <= 5) {

console.log("工作日");

} else if (inputNum == 6 || inputNum == 7) {

 console.log("休息日");

} else {

console.log("您输入的不是1-7之间的数字！！！！");

}

7.4 switch选择

格式:
switch（匹配值）{    不加break当满足条件会一直向下执行
case 表达式1:代码1
break;
case 表达式2:代码2
break;
case 表达式3:代码3
break;
default:console.log("Error") default为默认值
当所有case不匹配，则执行default的代码块
}
匹配值的结果与表达式的结果相匹配，如果全等，则执行代码块。
匹配方式为全等，内容和类型都要相等。

通过switch来判断是当年第几天实例
第一步需要做的是让用户输入年月日
console.log("请输入年份");
let inputYear = rs.question() - 0;

console.log("请输入月份");
let inputMonth = rs.question() - 0;

console.log("请输入日子");
let inputDays = rs.question() - 0;

再定义一个count来统计天数
let count = 0;

重点是：
1.计算月份不能将当月月份计算进去，那样当月相当于计算一整月，只需要最后结果加上用户输入的日子即可。
 2.月份倒着进行，因为程序要一直往下执行，才能这样才能计算出输入月份之前的所有月份的累加值。
 3.2月份是一个节点，需要进行判断闰年，平年。
switch (inputMonth - 1) {
    case 11:
        count += 30;
    case 10:
        count += 31;
    case 9:
        count += 30;
    case 8:
        count += 31;
    case 7:
        count += 31;
    case 6:
        count += 30;
    case 5:
        count += 31;
    case 4:
        count += 30;
    case 3:
        count += 31;
    case 2:
        if (inputYear % 400 == 0 || (inputYear % 4 == 0 && inputYear % 100 != 0)) {
            count += 29;
        } else {
            count += 28;
        }
        case 1:
            count += 31;
}
count += inputDays;    
console.log(`您输入的${inputYear}年${inputMonth}月${inputDays}日，是${inputYear}年的第${count}天`);

8.循环语句

使用场景：同一块代码需要执行多次以上，则使用循环。

8.1 while循环

while（条件）{
     代码块;    判断条件为真时，则执行代码块；直到条件为假时才终止循环。
}


do...while
 
格式：
do{
代码块;     先执行一次代码块，再进行条件判断
}
while(条件)
条件为真时，则再次执行代码块;直到条件为假时才终止循环。
 break会终止当前循环

8.2 for循环

for(表达式1;表达式2;表达式3){
  代码块;
} 执行表达式1 判断表达式2 如果为真执行代码块 再计算表达式3 再判断2

9.数组

9.1如何创建数组（两种方式）

 创建数据的方式

1、字面量方式(推荐)
格式：关键字  标识符  赋值符号 中括号 分号
例：let arr=[1,2,3];
 
2、构造函数方式
格式:关键字  标识符  赋值符号 new Array();
例：let arr1=new Array();
以上两种方式创建的数组，数据类型都为Object

元素和元素的索引

数组中的每个数据叫元素。
每个元素，所在数组的位置是唯一的，位置是个数字即（下标或着索引）
下标或索引的起始值为0

需要使用某个元素，则添加该元素的下标即可。
例：arr[0],即数组中的第一个元素值。

9.2数组的操作（类似数据库的增删查改）

数组的操作（增、删、改、查）都是对数组的索引或者下标进行
 
增：arr[n]=true  n>数组的元素个数
删：delete arr[0]  位置继续占用，后面的数据不会向前移动
改：arr[0]="A"
查：arr[0]
特殊实例
delete arr[0]; 删除下标为0的元素
console.log(arr[0]); //undefined  删除之后输出相当于输出一个定义了但是为赋值的数组
console.log(arr);//[ <1 empty item>, 2, 3, <3 empty items>, 4 ]  删除之后只是其中的没有了，但是元素所占的空间还在。

9.3数组的操作（遍历）

属性 length(长度)
方法一：通过for循环遍历
for(let i =0; i<arr.length;i++){
console.log(typeof arr[i],arr[i]);
}
方法二：键值对

获取数组的所有元素（值）
for(let i of arr){
console.log(i+2);  输出时候能进行运算
}

获取数组的所有元素的下标（键）
for(let i in arr){
console.log(i);
}

9.4数组第一位和最后一位的增删(数组的方法)

第一位进行

在数组的第一位进行添加
arr.unshift(添加的内容)
例：arr.unshift(0);

删除数组的第一位元素
arr.shift()小括号中添加内容无效
例：arr.shift();

最后一位
在数组的最后一位进行添加
arr.push(添加的内容)
例：arr.push("true","a");

删除数组的最后一位元素
arr.pop()小括号中添加内容无效
例：arr.pop();

9.5 concat() 方法

在原数组的基础上添加内容，并把结果返回给一个新数组。（不会改变原数组内容）
arr = [1,2,3];
let arr1 = arr.concat("A","B","C");

console.log("arr:"+arr);

console.log(`arr1:${arr1}`);

9.6 slice()方法（不会修改原数组内容）

主要内容就是参数接收个数

当参数为1个 即从这个参数为下标的值开始一直到最后一位
当参数为2个 从这个参数为下标的开始，到第二个参数为下标的值，但是第二个参数为下标的不会取。

特殊情况：当给的参数为负值，则用当前数组的长度与其相加，得到的结果按照上述内容进行截取。
注：当条件不满足时（截取范围大于或小于数组长度），则返回空数组

9.7splice()方法 （会影响原数组内容）

 接收1个参数：表示从这个参数为下标的值开始截取，一直截取到数组的最后一个元素。

 接收2个参数：第1个参数表示开始截取的下标，第2个参数表示截取的个数。
 
 splice的重要用途
 接收3个参数：

 第1个参数表示开始截取的下标
 第2个参数表示截取的个数
 第3个参数是添加的内容
 注：当第2个参数为0时，可以实现插入功能。
 接收n个参数：
 从第3个参数开始，都是添加的内容。

9.8 解构（将引用数据类型转换为基本数据类型）

特殊实例：关于数组的值个数定义的变量个数不匹配时    
arr=[1,2,3];
let [a,b,c,d,e]=arr;

console.log(a);//1

console.log(b);//2

console.log(c);//3

console.log(d);//undefined

console.log(e);//undefined

当匹配值时中间为未给变量接值
arr=[1,2,3];
let [a,,b]=arr;
console.log(a);//1
console.log(b);//3

适用场景（两个变量值的互换）
 let i =1,j=2;

 console.log(i,j);

 [i,j] = [j,i];

 console.log(i,j);

9.9 扩展运算符…

功能：类似拆分
let str="like";
arr = [...like];
console.log(arr);

如何输出最大值
arr = [12,3,4,5,6,77];
console.log(Math.max(...arr));

通过
let username = 1;
arr=[1,2,3,4,1,5,5];
console.log(arr.indexOf(username));//0   只能找一个然后输出下标
console.log(arr.lastIndexOf(username));//4  
  indexof和lastIndexOf不相等证明在该数组有重复的数

username=6;
console.log(arr.indexOf(username));//-1
console.log(arr.lastIndexOf(username));//-1   
相等证明username=6; 在该数组中不存在

特殊实例：
indexOf和lastIndexof都无法查找NaN是否存在（都会返回-1）

9.10 数组和字符串的相互转换

9.10.1 数组转字符串（join）

arr=[1,2,3]; 数组
let str=arr.join(""); 定义一个字符串，然后用于接收
console.log(typeof str,str);//string 123

str = arr.join(","); 加入了分隔符之后输出时也会带有分隔符
console.log(typeof str,str);//string 1,2,3

9.10.2 字符串转数组（split）

str = "F63-123";
console.log(str.split("-"));  
如果没有写分隔符，会把字符串内容按位存储到数组中。

9.11 reverse()数组的倒序输出(下标倒序) （会改变原数组）

arr = ["A","B","C"];  定义一个名为arr的数组
arr1 = arr.reverse(); 定义一个名为arr1的数据用于接收倒序后的数组
console.log(arr);  [ 'C', 'B', 'A' ]
console.log(arr1); [ 'C', 'B', 'A' ]

9.12 数组的排序 sort() （会改变原数组）

arr = [7, 1, 3, 2, 45, 5];
console.log(arr.sort());//[1, 3, 2, 45, 5,7]

 arr1 = arr.sort(
function (a, b) {  创建了一个函数
return a-b;        升序
这里reture只能写一个 
return b-a;      降序
 }
);
console.log(arr);     [ 45, 7, 5, 3, 2, 1 ]
console.log(arr1);    [ 45, 7, 5, 3, 2, 1 ]

9.13 数组中元素的判断

every() 每一项的判断都是true时，才返回true

some()  有一项的判断都是true时，才返回true

9.14 copyWithin() 指定位置的元素，复制到其它位置（会改变原数组）

arr = ["A", "B", "C", "D", "E", "F", "G"];
arr.copyWithin(5,2,4); 先从第二个参数开始看
console.log(arr);//[ 'A', 'B', 'C', 'D', 'E', 'C', 'D' ]
第1个参数：从该位置进行替换 
第2个参数：从该位置开始复制,默认为0，如果给负数，就是倒数
第3个参数：到该位置停止复制（停止读到数据），默认值数据长度，如果给负数，就是倒数

9.15 fill() 使用指定的值，填充数组 （会改变原有数组）

arr = [1,2,3];
console.log( arr.fill(7) );   [7,7,7]   
console.log(arr.fill(7,1));   [ 1, 7, 7 ]
console.log( arr.fill(7,1,2));[ 1, 7, 3]
第一个参数：指定的值
第二个参数：填充起点  都是针对下标
第三个参数：填充的结束

9.16 如何判断是否存在NaN

arr = [1,2,7,3,5,NaN];

arr1 = arr.indexOf(NaN);
let arr2 = arr.lastIndexOf(NaN);
let arr3 = arr.findIndex(
 like => Object.is(NaN,like)
);

console.log(arr1);  -1
console.log(arr2);  -1
console.log(arr3);  5

10 集合

集合和数组相同点，集合也能存储多个数据

但是集合里面的值唯一性  即相同值出现次数只有一次

10.1 创建集合

let set1 = new Set([1,2,2,3,5,4,4]);  创建集合  

console.log(set1);  Set { 1, 2, 3, 5, 4 }   
打印集合 创建时虽然有重复值，但是打印就不会重复，体现值的唯一性。

10.2 集合属性

集合的属性  size返回集合的元素个数    类似于数组中的length

console.log("集合的长度是："+set1.size);  5

10.3 集合的增加（add） 删除（delete） 查（has） 清空（clear）

add()方法返回一个新的set
delete(删除的值)、delete(value) 删除某个元素,返回新集合
clear()清空集合，没有返回值
存在查找的元素返回true,反之返回false

10.4 集合值唯一的应用

可以将数组去重
1.需要将数组转为集合
2.将集合转回数组

let arr=[1,2,3,3,4,6];  
let set1=new set(arr);  数组转集合 转完实现去重
let arr=array.from(set1); 或者用 let arr=[...set1] 利用扩展运算符

10.5 扩展运算符的适用场景

1、集合转数组
2、字符串转数组
3、并集、交集、差集

let set1 = new Set([4, 5, 6]);
let set2 = new Set([5, 6, 7]);

并集
let union = new Set([...set1, ...set2]);
console.log(union);                     Set { 4, 5, 6, 7 }

交集
let intersect = new Set(
    [...set1].filter(x => set2.has(x))
);
console.log(intersect);                 Set { 5, 6 }

差集
let difference = new Set(
    [...set1].filter(x => !set2.has(x))
);
console.log(difference);               Set {4}

11 函数

11.1 函数的功能作用

函数可以实现一定功能（封装）

用户调用，才执行

11.2 创建函数

1.字面量 
格式： 关键字 函数名（参数）｛代码块｝
例子：
 function like(){
 console.log("like");
}  未调用 输出不了值

function like() {
  console.log("like");
 }
 like();对函数进行调用 能输出值
 
 2.函数表达式的方式
 格式：关键字 函数名  = function （参数）｛代码块｝
 
 1、匿名函数表达式
 let like = function () {
    console.log(1);
  }
  console.log(like.name); //like
  like(); //1

 2、命名函数表达式
 let fun1 = function fun2() {
    console.log(1);
 }
 console.log(fun1.name); //fun2
 fun1(); //1

11.3 函数参数

形参：创建函数时添加的变量
实参：调用函数时添加的变量，即把实参变量的值赋值给对应的形参。
注：实参可以是具体的值（常量）
 
形参注意事项：
 1、不可以添加let 或 const
 2、ES5不可以重复添加相同名字
    ES6 取最后一个相同名字的值

11.4 形参与实参个数不同问题

注：在传统开发语言中，个数不同会报错，即不执行。但是js不会 
1. 形参>实参
   1.多的形参值为undefinded
2.实参>形参
   1.多的实参不使用
   
   
在最后添加一个扩展运算的变量(获取多的实参) 数组
必须写在最后一个形参位置（尾形参）

arguments获取所有实参的内容（类数组）
类数组：
 1、可以用下标取值arguments[0]
 2、可以用length获取长度（个数）
 3、但不能数组的方法，例push()会报错。
 注：函数名.length取的是形参个数

11.5 函数返回值

返回值
格式： 关键字  表达式
例子： return   1+2;
功能：不仅会把表达式的结果返回，并且会结束函数
所有的函数都必须有返回值。如果没有写return。
则计算机会在函数体最后补写一句 return undefined
注：retrue会终止函数

11.6 函数作用域

函数作用域
形参会覆盖全局变量，但不会改变全局变量。
即在函数中用形参的值，而不是用全局变量的值。

11.7 箭头函数

创建箭头函数(不含参)
let x = ()=>{}

箭头函数特点
 1、声明函数更简洁
 2、只有一个形参不用加小括号
 3、只有一条语句不用加大括号
 4、只有一条语句，并且需要返回这个表达式的值，不需要写return
 5、不会把自己的this绑定到函数上

 6、不可以作构造函数
 7、arguments不可用
 适用场景（交集、差集）

11.8 随机函数

随机函数
random()//0-1数值，但不包括1
let rNum = Math.random();
console.log(rNum);

12.对象

12.1创建对象

关键字 标识符={
键名1：键值1，
键名2：键值2，
键名n：键值n
}
键值可以是任意数据类型的数据
如果键值是非函数的数据，键名就叫对象的属性
如果键值是函数的数据，键名就叫对象的方法

12.2 添加属性

name="like";
age="24";

12.3 添加方法

like.games=function(){
console.log("1")
}

12.4 删除属性

delete obj.name;
console.log(obj.name)
删除后得到的结果为undefind

12.5 删除方法

delete obj.say；
console.log（obj.say());
删除后得到的结果为not a function

12.6 取对象的键名和键值

console.log(object.keys(obj)); 	    取键名
console.log(object.values(obj)); 	取键值
console.log(object.entries(obj)); 	取键名和键值
以上均不包括symbol

String 的方法

利用下标进行查找内容
console.log(str7.charAt(1));  B

输出当前字符的ASCII码
console.log(str7.charCodeAt(1));  66

通过ASCII码找对应的数字
console.log(String.fromCharCode(66));//B

其它数据类型转字符串
let num =true;
str8 = num.toString();
console.log(typeof str8,str8);

let str9 ="ABC";
console.log(str9.startsWith("A"));   是不是以实参开始
console.log(str9.endsWith("B"));     是不是以实参结束

 去空格
 let str10 = " abc ";
 let str11  = str10.trimLeft();
 let str12  = str10.trimRight();
 let str13  = str10.trim();

重复字符串
let str10 = " abc ";
console.log(str10.repeat(2));    abc  abc

几个固定函数

Math
向上取整ceil()
向下取整floor()
四舍五入round()
最大值max()
最小值min()
随机数random()

正则表达式

RegExp: Regular Expression  正则表达式
功能:设置字符串的匹配模式（pattern)

用户输入的字符串，1、是否满足条件 2、获取满足条件的值

创建正则表达式

创建正则表达式
1、字面量
let re = /匹配模式/
2、构造函数
let re = new RegExp(匹配模式);

13. BOM(Broswer Object Model)

windows对象：浏览器窗口对象

所有BOM对象的顶层对象

navigation对象：浏览器对象

包含所有浏览器的相关信息

screen对象：屏幕对象

包含所有屏幕的相关信息

history对象：历史对象

包含用户访问的历史信息

location对象：路径对象

包含网站路径的相关信息

document对象：文档对象

包含了html文档的相关信息（属于BOM，内容较多，单独分了个类叫DOM）

14. DOM （Document Object Model）文档对象模型

节点类型	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

14.1 DOM节点获取方式

<body>
    <div id="identity" class="father">
        <img src="" alt="">
        <div id="like" class="father">
            <p><span></span></p>
            <p></p>
        </div>
        <p></p>
    </div>
    <script>
        // // 旧的方式获取元素节点
        // const body = document.body;
        // // 输出结果获取到的是body及body的内容
        // console.log(body);

        // // 快速获取元素节点的方式      id
        // const divEle = document.getElementById("like");
        // console.log(divEle);


        // //h5新增
        // // 快速获取元素节点的方式     querySelector
        // //  获取一个   （只有一个不会是数组）
        //  const divEle=document.querySelector(".father");  
        //  console.log(divEle);

        // //  获取所有      (得到一个数组)
        // const divEle = document.querySelectorAll(".father");
        // console.log(divEle);

        // //快速获取元素节点的方式      tagName  得到的是个数组
        // const divEle = document.getElementsByTagName("div")[0]; 
        // console.log(divEle);

        // 快速获取元素节点的方式      className 得到的是个数组
        // const divEle = document.getElementsByClassName("father")[0];
        // console.log(divEle);

        // // 通过关系节点查找元素    找父级和子级
        // const divEle = document.getElementById("like");
        // console.log(divEle.parentElement);
        // console.log(divEle.firstElementChild);
        // console.log(divEle.lastElementChild);
        // console.log(divEle.children[0]);  //得到的是一个数组

        // // 通过兄弟元素查找元素    上一个兄弟和下一个
        // const divEle = document.getElementById("like");
        // console.log(divEle.previousElementSibling);
        // console.log(divEle.nextElementSibling);
    </script>
</body>

14.2 元素节点操作（创建，添加，删除，替换，复制）

创建节点
const h1Ele=document.creatElement("h1");

添加节点方法一
1.确定给谁添加节点
const temp=document.body;
2.添加节点
temp.appendChild(h1Ele);  往后面插入节点   
 /也可以直接写为document.body.appendChild(h1Ele)

添加节点方法二
1.确定给谁添加节点
const temp=document.body;
2.找关系节点
const divEle=documenet.querySlector("#box");
3.添加节点
temp.insertbefore(h1Ele,divEle);   id为box的节点前面插入

删除节点
1.const temp=document.body;
2.temp.remove(h1Ele);     
父级.remove(); 

替换节点
body.replace(h1Ele,divEle)

复制节点
cloneNode（）
divEle.cloneNode(true);   写true是连同里面的内容

14.3 文本节点操作

1.创建节点
const temp1=document.creatElement("h1");
const temp2=document.creatElement（"h2"）;
2.添加节点
document.body.appendChild(temp1);
document.body.appendChild(temp2);
3.添加文本
temp1.innertext=`内容`;
temp2.HTML=`内容`;  

14.4 属性节点操作

1  首先获取需要操作属性的节点
 例如  const imgEle = document.querySelector("img");
2  imgEle.alt = "456"; 通过.属性获取
console.log（imgEle.alt）就可以获取属性值
两个特殊情况
class属性 写为imgEle.className
for属性   写为label.htmlfor

自定义属性的操作
在标签中自定义了属性例如 data-like（自定义必须加data-）
在获取时 写为 imgEle.dataset.like

getAttribute()
imgEle.getAttribute("data-aaa");  得到属性
imgEle.setAttribute("a", "b");    设置属性
imgEle.removeAttribute("alt");    删除属性
imgEle.hasAttribute("alt");       判断是否存在属性

针对于类名

console.log(imgEle.classList); 查看类名

imgEle.classList.add("a");  添加类名
imgEle.classList.remove("123");  删除类名
imgEle.classList.contains("123");  是否存在类名
imgEle.classList.toggle("123"); 判断是否存在  不存在就添加一个 存在就不添加

14.5 关于样式的操作

也是先获取需要操作样式的节点 再进行操作
const divEle = document.querySelector("div");
第一种写法   divEle.style.width="100px";

第二种写法
Object.assign(divEle.style,{
width:"100px",
height:100px,
backgroundColor="red",
})

补充知识
样式表样式（外部、内部）
 console.log(document.styleSheets[0].rules[0].style.backgroundColor);
最终样式
getComputedStyle(divEle).height;

获取元素尺寸
clientWidth/clientHeight
console.log(divEle.clientHeight);
offsetWidth/offsetHeight
console.log(divEle.offsetHeight);

获取元素位置
offsetLeft/offsetTop
divEle.offsetLeft; 

15 事件的三要素

1.事件源：指的是绑定事件的元素
2.事件类型：js监测到的行为 （如点击移入移出等）
3.事件处理函数：事件发生执行的操作

设置事件监听器
1.DOM 0级（html事件监听器） 意思就是将事件写在元素标签中

2.标准DOM O级 事件监听器
优点：兼容性好
缺点：同一个事件源身上同类型的事件只能绑定一个
节点.onclick=function(){
代码块
}

3.DOM2事件监听器(事件类型不需要写on)
节点.addEvenlistener("click",function(){
代码块
})

DOM 0级删除事件
节点.事件类型=null  例如 divEle.onclick=null 直接让事件为空
DOM2级删除事件
divEle.removeEventListener("click",test)
function test(){

}  写法跟时间函数的一种相同(之所以将函数写在外面是为了删除是将整个事件删除)

15.1补充事件流

事件流是指事件在页面上的传播顺序（默认都为冒泡型）
冒泡型事件流（从里到外）
捕获型事件流（从外往里）
DOM事件流（两种都支持）

15.2 鼠标事件

鼠标事件是通过DOM 0或者DOM2对事件类型进行操作（
例如 divEle.onclick=function（）{

}
divEle.addEventlistener("click"，test)
function test（）{

}
鼠标事件的分组如下：
mousedown鼠标按下/mouseup鼠标松开
mouseenter鼠标移入/mouseleave鼠标移开   类型与hover效果

mouseover鼠标放上/mouseout鼠标拿开   
此事件不光针对改元素 如果事件源有子集移入时也会继续over，移出时也会继续out 
mousemove总的一个移动事件
事件可以针对整个文档即document  即可以将document作为事件源 效果即为整个屏幕

15.3 事件目标

事件目标 event.target：获取触发事件的元素
console.log(event.target);
console.log(this); 绑定事件的元素（事件源）

 2. 鼠标事件相关的属性
鼠标相对于文档显示区的坐标  clientX/clientY
console.log(event.clientX, event.clientY);
鼠标相对于页面的坐标  pageX/pageY
console.log(event.pageX, event.pageY);
鼠标相对于屏幕的坐标  screenX/screenY
console.log(event.screenX, event.screenY);
鼠标相对于触发事件的元素的坐标 offsetX/offsetY
console.log(event.offsetX, event.offsetY);

15.4 键盘事件的相关属性

键盘事件相关的属性
const inputEle = document.querySelector("input");
inputEle.onkeydown = function(event) {
1. keyCode
console.log(event.keyCode);  // 键值码
altKey/ctrlKey/shiftKey
if(event.keyCode === 13 && event.shiftKey) {
console.log("hello");
}
}

15.5 阻止事件

1. 阻止事件的默认行为
const aEle = document.querySelector("a");
aEle.onclick = function(event) {
event.preventDefault();
}
2. 阻止事件流
event.stopPropagation();

16 事件委托

原理：就是利用事件的冒泡原理，把子元素身上的事件委托在更大范围父元素处理
适用场景：
1.子元素动态生成的情况。原因是动态生成的子元素经常会修改，
如果将事件绑定在自己身上，一旦该元素删除时，事件源就没有了，事件就无法进行。
所以将事件委托在较为固定的父元素身上。
2.大量子级都需绑定同一事件的时候。 他们都拥有一个共同的父级
所以将事件直接委托给父级做。

示例：
<script>
        // 先获取到要进行事件委托的两个元素
        const ol = document.getElementById("ol");
        const li = document.querySelectorAll("li");
        // 设置事件类型
        ol.addEventListener("click", function (event) {
            // 判断点击目标是否为相应点击的对象
            if (event.target.nodeName == "LI") {
                event.target.onmousedown = function () {
                    event.target.style.backgroundColor = "red";
                }
            }
        })
    </script>

17 表单

表单的特殊属性
checked   required   readonly  disabled 会变灰（无法使用和点击）

焦点
获得焦点  onfocus
失去焦点  onblur

onput 内容改变就触发 用于密码验证

onchange 内容改变并失去焦点 下拉列表内容更换
onsubmit和onreset的事件绑定在form表单上