JavaScript入门知识点

JavaScript入门知识点

浏览器执行JS简介

浏览器分成两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器，用来读取网页中JavaScript代码，对其处理后运行，比如chrome浏览器的V8

JS的组成

ECMAScript:javascript语法
DOM：页面文档对象模型
BOM:浏览器对象模型

JS有三种书写位置，分别为：
行内（直接写到元素的内部）
可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读
引号易错，引号多层嵌套匹配时，非常容易弄混
特殊情况下使用
内嵌（在head标签下面写script标签，然后写JS）
可以将多行JS代码写到

javascript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert（msg）	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

变量

变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
变量在使用时分为两步：
声明变量
//声明变量
var age；//声明一个名叫age的变量
var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
赋值
age = 10；//age这个变量赋值为10
=用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
变量值是程序员保存到变量空间里的值
变量的初始化
var age = 18；//声明变量同时赋值为18
声明一个变量并赋值，我们称之为变量的初始化
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋值的值为准
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开
声明变量特殊情况

情况	说明	结果
var age；console.log(age);	只声明 不赋值	undef
console.log(age)	不声明 不赋值 直接使用	报错
age = 10;console.log(age)	不声明 只赋值	10

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
JS把数据类型分为两类：
简单数据类型（number，string，boolean，undefined，null）
复杂数据类型（object）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如“张三” 字符串都带引号	“”
Undefined	var a；声明了变量a但是没有给值，此时a= undefined	undefined
Null	var a=null；声明了变量a为空值	null

isNaN（）这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果非数字返回的是true
字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符
转义符都是\开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline的意思
\ \	斜杠\
\ ’	‘单引号
\ ”	“双引号
\t	tab缩进
\b	空格，b是blank的意思

字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性 可以获取整个字符串的长度
字符串拼接
多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
只要有其他字符串和其他类型相拼接，最终的结果是字符串类型
口诀：数值相加，字符相连
我们变量不要写到字符串里面，是通过和字符串相连的方式实现的
变量和字符串相连的口诀：引引加加
布尔型
布尔型有两个值：true和false，其中true表示真（对），而false表示假（错）
true参与加法运算当1来看
false参与加法运算当0来看
Undefined和Null
一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）
undefined和数字相加，最后的结果是NaN
获取变量数据类型
typeof可以用来获取检测变量的数据类型
使用表单、prompt获取过来的数据默认值是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换便来给你的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型
我们通常会实现3种方式的转换：
转换为字符串类型
转换为数字型
转换为布尔型

方式	说明	案例
toString（）	转成字符串	var num=1；alert（num.toString()）;
String（）强制转换	转成字符串	var num =1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+“我是字符串”)；

方式	说明	案例
parseInt（string）函数	将string类型转成整数数值型	parseInt（’78‘）
parseFloat（string）函数	将string类型转成浮点数数值型	parseFloat（’78.21‘）
Number（）强制转换函数	将string类型转换为数值型	Number（’12’）
js隐式转换（- * /）	利用算术运算隐式转换为数值型	‘12’-0

方式	说明	案例
Boolean（）函数	其他类型转成布尔值	Boolean（‘true’）

代表空、否定值会被转换为false，如‘’、0、NaN、null、undefined
其余值都会被转换为true
运算符
运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号
算术运算符
概念：算术运算使用的符号，用于执行两个变量或值的算术运算

运算符	描述	实例
+	加	10+20=30
-	减	10-20=-10
*	乘	10*20=200
/	除	10/20=0.5
%	取余（取模）	返回除法的余数9%2=1

不要直接判断两个浮点数是否相等
递增和递减运算符
如果需要反复给数字变量添加或减去1.可以使用递增（++）和递减（–）运算符来完成
在js中，递增（++）和递减（–）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符
注意：递增和递减运算符必须和变量配合使用
前置递增运算符
++num前置递增，就是自加1，类似于num=num+,但是++num写起来更简单
使用口诀：先自加，后返回值
后置递增运算符
num++后置递增，就是自加1，类似于num=num+1，但是num++写起来更方便
使用口诀：先返回原值，后自加
比较运算符
比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果

运算符名称	说明	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号（大于或者等于）	2>=2	true
<=	小于等于号（小于或等于）	3<=2	false
==	判等号（会转型）默认转换数据类型，把字符串型转换数字型	37==37	true
!=	不等号	37!=37	false
=== !==	全等 要求值和 数据类型都一致	37===‘37’	false

逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断

逻辑运算符	说明	案例
&&	“逻辑与”。简称“与” and	true&&false 一侧假则假，两侧真则真
||	“逻辑或”，简称“或” or	true || false 一侧真则真，两侧假则假
！	“逻辑非”，简称“非” not	！true

短路运算
如果有空的或者否定的为假，其余是真的 0 ‘’ null undefind NaN 这些都为假
短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
逻辑与
语法：表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
逻辑或
语法：表达式1||表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2
赋值运算符
用来把数据赋值给变量的运算符

赋值运算符	说明	案例
=	直接赋值	var usrName=‘我是值’
+=、-=	加、减一个数后在赋值	var age=10；age+=5；//15
*=、/=、%=	乘、除、取模 后在赋值	var age=2；age*=5；//10

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先* / % 后+ -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后||
7	赋值运算符	=
8	逗号运算符	，

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

JS流程控制-分支

if分支的语法结构
if （条件表达式） {
//执行语句
}
执行思路
如果if里面的条件表达式结果为真 true则执行大括号里面的执行语句
如果if条件表达式结果为假，则不执行大括号里面的语句，则执行if语句后面的代码
if else双分支语句
if（条件表达式）{
//执行语句1
} else{
//执行语句2
}
执行思路
如果表达式结果为真，那么执行语句1，否则执行语句2
if else if语句（多分支语句）
if（条件表达式1）{
//语句1
} else if（条件表达式2）{
//语句2
} else if（条件表达式3）{
//语句3
} else {
//最后的语句
}
执行思路
如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句 依次类推
三元表达式
三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式
语法结构：
条件表达式 ？ 表达式1 ： 表达式2
执行思路：
如果条件表达式结果为真，则返回表达式1的值
如果条件表达式结果为假，则返回表达式2的值
switch语句
switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch
语法结构 switch 转换、开关的意思 case 小例子或者选项的意思 break退出的意思
switch（表达式）{
case 值1：
执行语句1；
break；
case 值2：
执行语句2；
break；
…
default：
执行最后的语句；
}
执行思路
利用我们的表达式的值和case后面选项值相匹配，就执行case里面的语句，如果都没有匹配上，那么执行default里面的语句
switch注意事项
我们开发里面表达式我们经常写成变量
我们表达式的值和case里面的值相匹配的时候是全等，必须是值和数据类型一直才可以（全等）
如果当前的case里面没有break则不会退出switch，是继续执行下一个case
switch语句和if else if语句的区别
一般情况下，它们两个语句可以相互替换
switch…case语句通常处理case为比较确定值得情况，而if…else…语句更加灵活，常用于范围判断（大于等于某个范围）
switch语句进行条件判断后直接执行到程序得条件语句，效率更高，而if…else语句有几种条件，就得判断多少次
当分支比较少时，if…else语句的执行效率比switch语句高
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰
for循环
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的种植条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
for循环主要用于把某些代码循环若干次，通常跟计数有关系，其语法结构如下：
for（初始化变量；条件表达式；操作表达式）{
//循环体
}
初始化变量就是var声明的一个普通变量，通常用于作为计数器使用
条件表达式就是用来决定每一次循环体是否执行 就是终止的条件
操作表达式是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增或者递减）
双重for循环
语法结构
for（外层的初始化变量；外层的条件表达式；外层的操作表达式）{
for（里层的初始化变量；里层的条件表达式；里层的操作表达式）{
//执行语句
}
}
外层循环循环一次，里面的循环执行全部
while循环
while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环
语法结构：
while（条件表达式）{
//循环体代码
}
执行思路：
先执行条件表达式，如果结果为true，则执行循环体代码，如果为false，则退出循环体，执行后面代码
执行循环体代码
循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件扔为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束
里面应该有计数器 初始化变量
里面也有操作表达式 完成计数器的更新 防止死循环
do while循环
do while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环
语法结构：
do{
//循环体
} while(条件表达式)
continue关键字
continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）
break关键字
break关键字用于立即跳出整个循环（循环结束）
数组
数组（Array）：就是一组数据的集合 存储在单个变量下的优雅方式
利用new创建数组
数组的字面量是方括号[]
声明数组并赋值称为数组的初始化
数组的索引
索引（下标）：用来访问数组元素的序号（数组下标从0开始）
数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素
遍历数组

var arr = ['red','green','blue'];
for (var i = 0; i < 3; i++){
	console.log(arr[i]);
}

数组的长度
使用“数组名.length”可以访问数组元素的数量（数组长度）
数组中新增元素
可以通过修改length长度以及索引号增加数组元素
可以通过修改length长度来实现数组扩容的目的
length属性是可读写的
冒泡排序：
是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小），一次比较两个元素

函数

声明函数
function 函数名（）{
//函数体
}
//function声明函数的关键字 全部小写
//函数是做某件事情，函数名一般用动词
调用函数
函数名（）
用函数的参数实现函数重复不同的代码
function 函数名（形参1，形参2…）{//在声明函数的小括号里是形参（形式上的参数）

}
函数名（实参1，实参2....）；//在函数调用的小括号里面是实参（实际的参数）
	//形参是接收实参的  形参类似于一个变量
	函数的参数可以有也可以没有，个数不限
	如果实参的个数多于形参的个数，会取到形参的个数   多余的形参定义为undefined 最终的结果就是NaN

return语句
function 函数名（）{
return 需要返回的结果；
}
函数名（）
//我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（）通过return实现
//只要函数遇到return就把后面的结果返回给函数的调用者 函数名（）=return后面的结果

function getResult（）{
	return 666；
}
getResult（）；
console.log(getResult());

return终止函数
return语句之后的代码不被执行
arguments的作用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JS中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
具有length属性
按索引方式储存数据
不具有数组的push()、pop()等方法
JS作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域，作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
js的作用域在es6之前分为全局作用域和局部作用域
全局作用域：整个script标签或者是一个单独的JS文件
局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
在JS中，根据作用域得不同，变量可以分为两种：全局变量和局部变量
全局变量：在全局作用域下的变量
注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量
局部变量：在局部作用域下的变量 后者在函数内部的变量就是局部变量
注意：函数的形参也可以看做局部变量
从执行效率来看全局变量和局部变量
全局变量只有浏览器关闭得时候才会销毁，比较占用内存资源
局部变量当我们程序执行完毕就会销毁，比较节约内存资源
作用域链
只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能够被内部函数访问，就称作作用域链
JS预解析
JS引擎会把js里面所有的var还有function提升到当前作用域的最前面
预解析分为变量预解析（变量提升）和函数预解析（函数提升）
变量预解析：就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
函数提升：就是把所有的函数声明提升到当前作用域的最前面 不调用函数
对象
在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等
对象是由属性和方法组成的
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
在JS中，现阶段我们可以采用三种方式创建对象（object）
利用字面量创建对象
对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法

var obj = {
	uname：'张三'，
	age：18，
	sex：'男'，
	sayHi：function（）{
		console.log('hi~')
	}
}
//里面的属性或者方法我们采取键值对的形式  键就是属性名 ： 值就是属性值
//多个属性或者方法中间用逗号隔开的
//方法冒号后面跟的是一个匿名函数
//2.使用对象
//(1)调用对象的属性值，我们采取 对象名.属性名
console.log(obj.uname);
//(2)调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//3.调用对象的方法    对象名.方法名()  千万别忘记添加小括号
obj.sayHi();

​ 利用new Object创建对象

var obj = new Object();
obj.uname = '张三';
obj.age = 18;
obj.sex = '男'
obj.sayHi = function(){
	console.log('hi~')
}
//我们是利用等号=赋值的方法添加对象的属性和方法
//每个属性和方法之间用分号结束
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

​ 利用构造函数创建对象
​ 可以利用函数的方法重复一些相同的代码，我们称为构造函数
​ 这个函数里面封装的不是普通代码，而是对象
​ 构造函数就是把我们对象里面一些相同的属性和代码抽象出来封装到函数里面
​ 构造函数语法格式：

function 构造函数名(){
	this.属性=值；
	this.方法=function()
}
//调用函数
new 构造函数名();

function Star(uname,age,sex){
	this.name=uname;
	this.age=age;
	this.sex=aex;
	this.sing = function(sang){
		console.log(sang);
	}
}
var ldh=new Star('刘德华',18,'男')
console.log(typeof 1dh);//检测是否为对象
//我们构造函数不需要return就可以返回结果
//构造函数名字首字母要大写
//我们调用构造函数必须使用new
//我们只要new Star()调用函数就创建一个对象
//我们的属性和方法前面必须添加this

变量和属性
相同点：他们都是用来存储数据的
不同点：
变量：单独声明并赋值 使用的时候直接写变量名，单独存在
属性：在对象里面的，不需要声明的，使用的时候必须是 对象.属性
函数和方法
相同点：他们都是实现某种功能 做某件事
不同点：
函数：是单独调用的 并且调用的 函数名() 单独存在的
方法：在对象里面 调用的时候 对象.方法()
构造函数和对象的区别
构造函数，如Stars(),抽象了对象的公共部分，封装到了函数里面，它泛指一大类(class)
创建对象，如new Stars(),特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
遍历对象
for…in语句用于对数组或者对象的属性进行循环操作

//语法格式：
for (变量 in 对象){

}

var obj = {
	name：'小明'，
	age：18，
	sex：'男'
}
for (var k in obj){
	console.log(k);//k变量输出得到的是属性名
	console.log(obj[k]);//obj[k] 得到的是属性值
}

内置对象
js中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)
内置对象最大的优点就是帮助我们快速开发
JS提供了多个内置对象：Math、Date、Array、String等
学习内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询
Math数学对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可
Date()日期对象，是一个构造函数，必须使用new来调用创建我们的日期对象
简单数据类型和复杂数据类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型
值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string、number、boolean、undefined、null
引用类型：复杂数据类型，在存储时变量中存储的仅仅时地址(引用)，因此叫做引用数据类型,通过new关键字创建的对象(系统对象、自定义对象)，如Object、Array、Date等
堆栈空间分配区别
栈(操作系统)：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面，里面直接开辟一个空间存放的是值
堆(操作系统)：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，复杂数据类型存放到堆里面
值类型变量的数据直接存放在变量（栈空间）中
复杂数据类型首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据