JS学习笔记（一）

一.初识JS

1.运行在客户端的脚本语言，java是编译型语言，JS是解释型语言
2.不需要编译，运行过程中由js解释器逐行进行解释并执行
3.现在也可以基于Node.js技术实现服务器编程
4.JS的组成
ECMAScript（JavaScript语法）；DOM（页面文档对象模型）；BOM（浏览器对象模型）；
5.JS书写位置
行内式：直接写到元素的内部,HTML中使用双引号，JS中推荐使用单引号
内嵌式：写在<script></script>里
外部：先新建文件，然后<script src="my.js"></script>
6.JS注释
单行注释：//快捷键：shift+/
多行注释：/* 注释内容*/默认的快捷键shift+alt+a,可以修改
7.JS输入输出语句
浏览器弹出警示框：alert（msg）
浏览器控制台打印输出信息（测试用）：console.log(msg)
浏览器弹出输入框，用户可以输入：prompt（info）
8.数据类型内存分配
简单数据类型：栈
复杂数据类型：堆

二.变量

1.变量概述
变量：程序在内存中申请的一块用来存放数据的空间，我们通过变量名获取并修改数据
2.变量的使用
初始化：声明一个变量并赋值var myname='....'
3.语法扩展
变量以最后一次赋值为准；
可以同时声明多个变量，用逗号隔开；
只声明不赋值，结果是undefined，不声明不赋值直接使用会报错，不声明直接赋值可以使用
4.命名规范
严格区分大小写；
不能是关键字、保留字；
变量命名要有意义；
驼峰命名法。首字母小写，后面单词的首字母需要大写；

三.数据类型

1.数据类型简介
JS是一种弱类型或者说动态语言 不用提前声明变量的类型，在运行中通过等号右边的值来确定，变量的数据类型可以变化
2.数据类型的分类
简单数据类型，复杂数据类型

3.简单数据类型：
①数字型：Number
八进制：0开头
十六进制：0x开头
最大值：Number.MAX_VALUE
最小值：Number.MIN_VALUE
无穷大：Infinity
无穷小：Infinity
非数值：NaN，判断非数字：isNaN（）是数字返回false，不是数字返回true
②字符串型
字符串型引号可以为单引号、双引号
JS可以用单引号嵌套双引号，双引号嵌套单引号（外单内双，外双内单）
字符串转义字符以“\”开头，需要写在引号里
用length获取字符串长度
字符串拼接：字符串+任何类型=拼接之后的新字符串（数值相加，字符相连）
字符串拼接加强：字符串和变量拼接
③布尔型
布尔型有两个值：true（1） | false（0）
④undefined:一个变量申明但未赋值
undefined和数字相加结果是NaN
⑤null空值
null和数字相加返回是原先的数字

4.数据类型检验
代码格式：typeof 变量名
注意：prompt取过来的值是字符类型

5.数据类型转换
①转换为字符串类型：变量.toSring（）| String(变量)（强制转换）| 加号拼接字符串
②转换为数字型：parselnt（string）（整数）| parseFloat（sting）（浮点数）| Number（string）| 利用算数运算隐式转换
③转换为布尔型：Boolean（）
空、否定值会被转换为false（undefined，null，NaN，0）
其余值被转换为true

四.运算符

1.算数运算符+,-,*,/,%
不要直接判断两个浮点数是否相等
浮点数算数运算里面会有精度问题

2.递增和递减运算符
递增++递减：--
前置：先自加或自减，后返回值
后置：先返回原值，后自加或自减

3.比较运算符
返回布尔值，>,<,>=,<=,==(会转换数据类型),!=,===（全等于：值和数据类型完全一致）

4.逻辑运算符
对布尔值运算的运算符，返回值也是布尔值
与:&&（两侧都为true，结果才为true）
或:||（只要两侧中一侧为true，结果就为true）
非！
逻辑中断：如果左边的表达式值可以确定结果时，就不再继续计算右边的表达式的值

5.赋值运算符=，+=，-=，*=，/=，%=

6.运算符优先级
一元运算符里面的逻辑非优先级很高；
逻辑与比逻辑或优先级高；
小括号的优先级最高

五.流程控制

1.流程控制
顺序结构、分支结构、循环结构

2.顺序结构
按照先后顺序，依次执行

3.分支流程控制
（1）if语句
语法结构：if（条件表达式）{ }
执行思路：if表达式中的表达式为真，执行花括号里面的内容
（2）if else双分支
语法结构：if（条件表达式）{语句1 } else { 语句2 }
执行思路：表达式为真，执行语句1，表达式为假，执行语句2
（3）if else if 多分支语句
语法规范：

if(表达式1){ 语句1}
else if(表达式2){ 语句2 }
...
else {结束语句}

执行思路：同C语言，只有一个语句可以执行
（4）三元运算符
语法结构：条件表达式 ？ 表达式1 ：表达式2
条件表达式为真：执行表达式1
条件表达式为假：执行表达式2
（5）switch语句
语法结构：

switch(表达式){
	case value1:
		语句1;
		break;
	case value2：
		语句2;
		break;
	default:
		执行最后的语句;
		
}

执行思路：表达式的值和case后面的选项值匹配上，匹配上就执行，都没有匹配则执行default后的语句
注意：匹配时是 全等，如果当前的case里面没有break，则不会退出switch，是继续执行下一个case

4.循环控制
（1）目的：重复执行某些语句
（2）for循环
语法格式：for（初始化变量;条件表达式;操作表达式）{循环体}
（3）双重for循环
语法结构：

for(外层初始化变量;外层条件表达式;外层操作表达式){
	for(内层初始化变量;内层条件表达式;内层操作表达式){
		执行语句
	}
}

（4）while循环
语法格式：while（条件表达式）{ 循环体}
（5）do while循环
语法格式do{ 循环体 } while（条件表达式）
先执行一次循环体，再判断条件
（6）continue和break
continue：立即跳出本次循环，继续下一次循环
break：立刻跳出整个循环

六.数组

1.创建数组
代码格式：var arr=[];数组里面的数据用逗号分开
2.获取数组元素
用数组下标（从0开始）：数组名[索引号]
3.遍历数组：循环
4.求数组长度：数组名.length
5.数组中新增元素
①修改length长度，多出来的为undefined类型
②修改索引号
不要直接给数组名赋值，否则里面的元素会直接没有

七.函数

1.函数使用：
（1）声明函数：
关键字自定义：function 函数名（形参1,形参2，...）{ }
函数表达式：var 变量名 = function（）{ }

（2）调用函数：函数名（实参1,实参2，...）;函数可以调用函数

2.函数参数
函数实参的个数大于形参的个数，会取到形参的个数
如果实参的个数小于形参的个数，最终结果为NaN

3.函数返回值
只要函数遇到return，就把后面的结果返回给函数的调用者，并终止函数；
return只能返回一个值，如果有多个，返回的结果是最后一个值；
函数没有return，则返回undefined

4.arguments的使用
arguments对象是当前函数的一个内置对象，存储了传递的所有实参；
arguments按照伪数组形式（伪数组：不是真正意义上的数组，没有真正数组的一些方法）；
我们可以按照数组的方式遍历arguments；
只有函数才会有arguments对象；

八.作用域

1.作用域
全局作用域：整个script标签或者一个单独的js文件
局部作用域：函数内部

2.变量的作用域
全局变量：在全局作用域下的变量
局部变量：局部作用域下的变量，只在函数内部使用
注意：在函数内部没有声明直接赋值的变量是全局变量，函数的形参也可以看成局部变量
js在es6时候新增的块级作用域

3.作用域链
如果函数中还有函数，那么在这个作用域中就又可以的那声一个作用域。根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，这种结构成为作用域链。（就近原则）

九.预解析

JS解析器在运行JS代码时分两步：预解析和代码执行
预解析：JS引擎会把js里面所有的var，function提升到当前作用域的最前面；
变量预解析：把所有变量提升到当前作用域的最前面，而不提升赋值操作；
函数预解析：把所有函数声明提升到当前作用域的最前面，但不调用
代码执行：按照代码书写顺序从上往下执行；

十.对象

1.对象
对象：属性+方法

2.创建对象的三种方式
（1）利用字面量创建：var obj = { } 创建一个空对象
里面的属性或者方法采用键值对的形式：属性名：值；
多个属性和方法用逗号隔开；
方法冒号后面跟的是一个匿名函数；
调用对象的属性采取对象名.属性名或者对象名['属性名']；
调用对象的方法：对象名.方法名()；
（2）利用new Object创建：var obj =new Object()
利用等号赋值的方法添加属性和方法；
每个属性和方法之间用分号隔开；
（3）利用构造函数创建对象（创建多个对象）
构造函数：把对象里面一些相同的属性和方法抽象出来封装到函数里面；
语法格式：function 构造函数名（形参）{ this.属性=值; this.方法=function();}
new 构造函数名(实参)；
构造函数首字母大写；
构造函数不需要return就可以返回结果；

3.new关键字
new构造函数在内存中创建一个空的对象，this就会指向刚才创建的空对象；
执行构造函数里面的代码，就给这个空对象添加属性和方法，最后返回这个对象；

4.遍历对象
代码格式for(key in obj) { } ，key为属性名，obj[key]是属性值

十一.内置对象

JS中的对象包括：自定义对象，内置对象，浏览器对象
可以利用MDN查阅文档
1.Math对象
圆周率：Math.PI
向下取整（往小取）：Math.floor()
向上取整(往大取)：Math.ceil()
绝对值：Math.fabs()
四舍五入：Math.round()注意.5往大了取
最大最小值：Math.max() | Math.min()
随机数：Math.random()返回值左闭右开；不跟参数；
得到两个数之间的随机整数并包含这两个整数Math.floor(Math.random() * (max-min +1) +min)

2.日期对象
日期对象Date()是一个构造函数，只能通过new实例化日期对象
没有任何参数则返回当前时间；
参数常用的写法：数字型2023,10,1或者字符串型'2023-10-1 8:8:8'
获取当年：getFullYear()
获取当月：getMonth()返回的月份小一个月，0-11
获取当日：getDate()
获取星期几：getDay()周一：1，周六：6，周日：0
时，分，秒：getHours(),getMinutes(),getSeconds()
获取日期总的毫秒形式距离1970年：valueOf() | getTime() | Date.now()

3.数组对象
（1）利用var arr1 = new Array()只有一个参数时表示数组长度，多个值表示数组元素
（2）检测是否为数组运算符：instanceof | Array.isArray()
（3）添加数组元素：
在数组末尾添加一个或者多个元素：push（数组元素）返回的结果是新数组的长度，原数组也会发生变化；
在数组的开头添加一个或者多个元素：unshift(数组元素)
（3）删除数组元素
删除数组最后一个元素：pop()返回的结果是删除的那个元素
删除数组的第一个元素：shift()返回删除的那个元素
（4）数组排序sort() | 翻转数组reverse()
排序：

arr1.sort(function(a,b){
	return a-b; //升序的顺序排列
	return b-a;  //降序的顺序排列
});

（5）数组索引
只返回第一个满足条件的索引号：indexOf()，找不到则返回-1；
返回最后一个满足条件的索引号：lastIndexOf(),找不到则返回-1；
（6）数组转换为字符串toString() | join(分隔符)

4.字符串对象
字符串是不可变的，字符串所有的方法会返回一个新的字符串
（1）根据字符返回位置
代码格式：indexOf（'要查找的字符',开始的位置）| lastIndexOf（）
（2）根据位置返回字符
代码格式：charAt(index) | charCodeAt(index)（返回ASCII值）| str[index]
（3）字符串操作方法
连接字符：contact('字符串1','字符串2'...)
截取字符：substr（'截取的起始位置','截取几个字符'）
替换字符：replace（'被替换的字符','替换为的字符'）只替换第一个字符
转换为数组：split（'分隔符'）