JavaScript基础笔记(概念版)

JavaScript基础笔记

JavaScript的概念(了解)

JavaScript:简称js,是一种可以嵌入在HTML中的编程语言
js在浏览器上运行
js应用范围
网页特效:用户与网页的交互
服务端:Node.js
移动端:App开发

JavaScript与html的区别
◆本质区别:JavaScript是编程语言,html是标记语言
◆用法区别:html通过表经济实现数据排版、美化,js实现用户与页面的交互
◆解析区别:html由浏览器解析,js由JS引擎解析

JavaScript的代码执行原理
如图所示:

JavaScript的组成部分和作用
js的组成和作用可以分为三个部分,如下:
◆ECMAScript:JS核心,语法规范
◆DOM:操作页面元素的API,实现网页效果
◆BOM:操作浏览器功能的API,实现页面管理

JavaScript的书写方式

js的书写方式大体分为三种方式:
行内模式:

内联模式:

外联模式:

JavaScript注释

**js注释**
	◆单行注释://注释内容
	◆多行注释::/*注释内容*/

JavaScript输出

**控制台输出(调试可用)**
	console.log('想看到的内容')

**页面输出**
	Document.write('要在body中显示的内容,可以有标签')

**用户输入框**
	Prompt('提示信息')

**提示框**
	alert('提示信息')

JavaScript变量

js中有两种变量赋值方式:
	◆var	test; 
		var定义变量的方式,现在开发中基本上不适用,但是作为了解要知道var定义的变量在js调用完后				不会自动释放掉
	◆let test;
		let定义变量的方式是现在开发中的主流使用方式.let与var定义变量的区别在于let定义的作用域在调用完毕之后回吧let这个变量自动释放掉
	以上的释放与否关系到网页与代码的效率.

JavaScript命名规则

编程中的命名规则大同小异,默认多种编程语言可以遵循一个命名规则,规则如下:
◆由字母、数字、下划线组成
◆不能以数字开头
◆区分大小写
◆不能使用关键字
◆不能重复声明同名变量
◆不能与编程语言中的关键字重名
js中的关键字:

js的保留字:

◆复杂名字使用小驼峰：heiMa黑马，firstBlood一血

JavaScript常量

js常量定义后不可以重新赋值
◆定义常量:const常量名=值
◆常量和变量一样使用

JavaScript数据类型

**数据类型:data type,人为规定的数据分类**
◆数据类型分为两大类:基础数据类型和复杂类型
◆基础数据类型分为5小类
	◆三种常用的数据类型:数字number,字符串string,布尔Boolean
	◆两种不常用的数据类型:未赋值underfined,空null

**数字:number用于数学运算**
◆数字包含整数和小数
	◆整数:let	num1=1
	◆小数:let	num2=1.1
◆字母e可用于科学计数法
	◆let num3=2e2

**字符串:string,文本描述,最常见的数字类型**
	◆字符串在js中由三种定义形式
		◆单引号包含
		◆双引号包含
		◆反引号包含(反引号包含内可以使用js变量/常量进行混合书写)(反引号书写方式又称为模板字符串可以内嵌js代码进行书写,书写方式为${js代码})

布尔:Boolean用于判断
	◆布尔类型只有两个值:true/false

未赋值:underfined,表示没有被赋值
	
空:null,区别未赋值
	◆空必须主动赋值:let nu=null

**在无法判断数据类型的时候js中有可以判断方法**
typeof:检测数据的类型

JavaScript运算符和表达式

与其他编程语言相似,js中的算术运算符如下(如有疑惑请自行百度):
	◆+
	◆-
	◆*
	◆/
	◆%

JavaScript Math

js中内置了Math对象,提供高级数学操作,常用操作如下:
	◆随机小数:Math.random()
		◆Math.random()*X 生成0-X的随机数
	◆取整:向上取整Math.ceil(),向下取整Math.floor(),四舍五入Math.round()
	◆最大值/最小值:Math.max(),Math.min()

JavaScript 值比较

js的比较结果为boolean结果,有六种比较方式,.如下:
	◆>
	◆<
	◆>=
	◆<=
	◆==
	◆!=
	对比只要值的大小相同即可,例如:'1'==1的结果为ture
拓展:在js中有全等比较,拥有两种比较方式:
	◆===:全等,两边的值和类型都要相同
	◆!==:不全等,意义如上

JavaScript 逻辑运算

js中有三种逻辑运算
	◆&&
	◆||
	◆!
短路运算:已经确定结果,不需要继续运算(在开发中尽量将能确定结果的表达式往前放)
在逻辑运算中符号拥有自己的优先级,不过利用(表达式)可以提升优先级,例如+-*/.如下:

JavaScript 特殊运算补充

Null和underfined比较:它们都表示的是没有的意思.
◆null == underfined
◆null !== underfined

JavaScript 特殊数字和isNan判定

◆NaN代表一切不是数字的数字
◆NaN与任何数据的运行结果都是NaN
◆NaN与任何数据的判定结果都是false
◆isNaN()才能判定NaN
举例:'abc'-1 结果为NaN
		NaN+1	结果为NaN(NaN参与的任何运算最终都是NaN)
NaN与任何数据的比较结果都是false
	◆NaN==NaN得到的结果为false
NaN只能用过isNaN()进行判定
	◆isNaN('abc')的结果为true
	◆isNaN(123)的结果为false
	◆isNaN('123')的结果为false

JavaScript 字符串比较

字符串是按照字符顺序进行比较.

JavaScript 显式转换

Number()将其他类型转数字
	◆数值型字符串转数字,其他NaN,如'123'=>123,'123a'=>NaN
	◆布尔true=1,false=1
	◆Undefined为NaN
	◆Null为0
	
String()将其他类型转字符串
	◆所见即所得

Boolean()将其他类型转布尔
	◆6种false情况
	◆0,0.0,'',NaN,undefined,null

JavaScript 隐式转换

js隐式转换采用Number转数字,String转字符串,Boolean转布尔
	◆转数字:算数运算符,正好+,数字参与的比较
	◆转字符串:字符串拼接
	◆转布尔:逻辑非

JavaScript parse系列-字符串转数字

实际开发一般是字符串转数字,使用parse系列
	◆parseInt('123.1a')=>123
	◆parseFloat('123.1a')=>123.1
	◆转换规则:以数字开头,到有效数字截至

JavaScript流程控制

流程控制:控制代码执行的顺序
	◆顺序结构:代码从上往下,从左往右顺序执行
		◆赋值除外:从"="右边往左边执行
	◆分支结构:代码根据条件选择代码执行
			if分支
	◆循环结构:代码根据条件重复执行某段代码
			for循环
			foreach()循环(用来遍历数组)

JavaScript数组

js中的数组定义方式:
	◆let arr=[](一维数组)
	◆let arr=[['1','2']['1','2']](二维数组)
	◆数据存储数据使用逗号分隔:['a','b']
js通过下标操作元素
	◆修改元素值:数组[已存在下标]=新值
	◆新增元素:数组[不存在下标]=新增
js数组长度
	◆获取数组元素数量:数组.length
	◆数组长度=数组当前最后一个元素的下标+1
	◆利用length动态添加元素:数组[数组长度]=新元素
	◆数组长度可以用来控制数组元素的数量:数组.length=指定长度(保留指定长度的元素:从前面开始)
[]与Array定义数组的区别
	New	Array()也可以定义数组
		◆[]是语法糖,是new	Array()的简写方式
		◆[数字]代表一个元素,new Array(数字)代表数组的元素个数
		◆[3]表示三个元素,new	Array(3)表示有一个元素3.唯一特殊情况

JavaScript函数

js函数:将代码存储起来,可以多次调用
	◆function,存储代码,允许多次调用实现代码复用
	◆定义函数
		◆function	函数名(){//函数体}
	◆函数调用:函数不会自己运行,,调用才会执行代码
		◆函数名()
函数的其他其他声明方式
	◆有名函数
	◆匿名函数(自调用函数)
		◆将函数定义在一个调用结构内:(function(){})
		◆自调用函数是匿名函数:实名没有意义
		◆自调用函数只能调用一次
		◆自调用函数因为所有东西定义在函数内部:所以与外界无关
	函数可以当作实参
		◆有名函数传参:函数名即可
		◆匿名函数传参:直接写函数,function(){}
**arguments关键字**	
	◆接受所有实参
	◆是一个伪数组
	◆函数不确定参数个数的时候使用

JavaScript对象

对象:比数组更好的描述数据
	◆对象定义:let ob={}
	◆对象里面的数据叫做属性,属性由两部分组成
		◆属性名:描述属性的名字,字符串,但是不需要引号
		◆属性名:任意数据类型
		◆属性名和属性值用冒号":"连接,属性之间用逗号分隔
	◆对象访问:专属语法,对象.属性名||数组语法:对象['属性名']

JavaScript对象操作

	CRUD增删改查
		crud是指在做计算处理时的增加(Create)、检索(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写.CRUD程序员是指只会做增查改删的程序员,有点贬义,也不乏一些程序员喜欢用CRUD自嘲。
	◆C:Create新增,R:Read查询,U:Update修改,D:Delete删除
	◆对象新增:对象.新属性名=值||对象['新属性名']=值
	◆对象修改:对象.已有属性名=新值||对象['已有属性名']=新值
	◆对象删除:delete 对象.已有属性名||delete对象['已有属性名']
	◆对象读取:如果属性名不存在,那么读到的值为undefined
	补充::对象的属性名可以是数字：let obj = {0:’黑马’,1:’前端’},数字属性名的访问方式只能是数组形式：obj[0],对象属性名也可以有引号包裹：本质是字符串 let obj = {“name”:”黑马”}
	
	对象的完整声明方式:
		◆ 对象的完整声明方式：new Object({属性名:”属性值”})

JavaScript复杂对象

◆对象的属性值可以是数组、对象以及函数
◆复杂对象的访问:点语法和数组方式都可以
for-in遍历对象
	◆对象属性的下标(属性名不是数字),无法共享简单for循环的数字子增长
	◆for-in遍历对象:for(let key in obg){
		◆key是对象的每个属性名
		◆访问属性值:obj[key]	:这是唯一形式
	}

JavaScript内置对象this

◆函数里面会产生一个变量this
◆谁调用函数,this就指向谁
◆函数都是对象在调用:this代指对象
◆普通函数里面的this指向window对象
	◆定义函数:function fn(){}===window.fn=function(){}
	◆调用函数:fn()===window.fn()
函数里面会产生一个this
	◆回调函数可以理解为都是window在调用
	◆回调函数里面的this都指向window

JavaScript内置对象Date

Date:获取时间日期信息
	◆获取Date对象:let date=new Date()
	获取时间方式如下:

!!获取指定时间对象(尚未测试,日后补充)
◆字符串日期对象:new Date(‘年-月-日 时:分:秒’)
◆时间戳日期对象:new Date(时间戳数字)
◆指定时间日期对象:new Date(年,月,日,时,分秒)
时间例题:

JavaScript String字符串对象

字符穿对象:字符串.方法()	(需要测试,日后补充)
	◆length:获取字符串长度
		字符串.length	显示字符串的长度
	◆indexOf():查找字符串中是否包含目标字符
		字符串.indexOf(目标字符)	查找从左到右的第一个目标字符然后返回字符串下标位置
		字符串.lastIndexOf()		从右到左查找
	◆slice()/substr()/substring():截取字符串
		字符串.slice(截取的位置,向后截取的个数,向后添加的元素1,元素2...)
		其余两个用法大致相同,不做另外介绍
	◆split():分解字符串
		字符串.split('分解符')	分解符用来判断如何分隔,没有参数默认分隔为一个字符串,参数为''分隔为一个参数的数组
	◆replace():替换字符
		没有查找到默认值为-1
		字符串.replace(字符串中的原字符,字符串替换的字符)	默认从左到右替换第一个
		字符串.replaceAll()	替换所有
	◆大小写转换:字符串.toUpperCase()
						 字符串.toLowerCase()

JavaScript Array数组对象

数组简单操作:不修改数据本身
	◆indexOf():查找元素
		数组.indexOf('查找的元素')	查找从左到右的第一个符合的元素,并显示数组下标,没有显示-1
		数组.lastIndexOf()		从右到左查找
	◆join():将数组元素拼接成字符串
		将数组元素拼接成字符串,没有参数默认为逗号,有参数按照参数分隔
	◆slice():截取数组
		截取数组的指定元素,与字符串同理
	◆forEach():遍历,通过回调函数操作数组元素
		数组.forEach(function(数组下标,数组下标值,整个数组){内置代码})
		可以只有一个/两个/三个参数
	◆filter():过滤,通过回调函数控制过滤条件
		过滤数组函数,使用方法与forEach()同理,内置代码内设置过滤条件
	◆map()
		处理数组元素函数,使用方法与上同理,内置代码内输入处理方式
	◆Array.isArray():判断数据是不是数组
		伪数组不算数组
修改数组本身
	◆pop():去除数组最后一个元素
	◆push():添加元素
	◆splice():替换元素(可用于删除指定位置元素)
	◆sort():排序,通过回调函数改变排序规则
	◆shift():将数组第一个元素从其中删除,并且返回第一个值
	◆unshift():将一个元素加入数组的第一个位置

JavaScript JSON对象(重要)

JavaScript Object Notation,是一种轻量级的数据交换格式
◆json格式字符串:是一种针对复合数据类型编程的有格式的字符串形式
	◆一般是为了将对象变成有格式的字符串,也允许包括数组
◆json格式字符串中:所有的字符串都必须使用双引号包裹,数字除外
◆json字符串是js通信进行复杂数据交换的常用方式
◆json格式:'{"name":"张三","age":"18","hobby":["篮球","足球"]}'
◆json对象的转换极其严格,需要注意
◆json对象变字符串:stringify()
◆字符串变对象:parse()

JavaScript 作用域

◆js作用域:变量可以访问的范围
◆作用域的作用:限定访问区间,防止变量污染
◆ES5作用域:
	◆全局作用域:全局变量
	◆局部作用域:局部变量(函数内部)
◆块级作用域:{}内部
◆变量的访问原则:就近原则

JavaScript 变量传值方式(掌握)

◆值传递
	值传递是简单数据类型中的传递,该传递过程不会导致变量的值随着改变而改变
◆引用传递(掌握)
	引用传递时复杂数据类型中的传递,通过相同的内存地址进行传递值,内存地址的值改变会导致变量的值也跟着改变
	◆引用传递:变量保存的是数据的内存地址
		◆引用传递原理:复杂数据类型的存储,变量保存的是数据的内存地址
		◆变量传值:新变量保存的是变量保存的内存地址,两个变量指向同一个内存地址
			◆两个变量其中一个改变内容,会导致另外一个跟着改变 (重要)
◆共享传递(js没有真正的引用传值)
	◆真正的引用传值是两个变量指向同一个内存地址后,不管如何修改,都是指向同一个内存地址
	◆共享引用:Call by Sharing
		◆引用传递后如果变量修改的是指定内存地址的内容:修改是彼此影响
		◆如果重新指定变量的内存地址或者值(重新赋值):彼此就会断开引用

JavaScript 基本包装类型

基本包装类型:本身基本错误,却可以调用对象API
	◆三种基本包装类型:数字、字符串、布尔
	◆基本包装类型工作原理
		◆系统检测到基本类型:数字、字符串、布尔
		◆系统生成对应对象:Number()、String()、Boolean()
		◆调用对应API
		◆释放对象