JS基础，从JS的组成到JS函数写法

一.计算机的组成

计算机
       |--软件
       |--硬件
   
    |---输入设备
   
    |---输出设备
   
    |---CPU
   
    |---硬盘
   
    |---内存

二.JS的组成

1.ECMAScript

是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript（网景公司）或JScript（蔚然公司），但实际上后两者都是ECMAScript语言的实现和扩产。

ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

2.DOM——文档对象模型

文档对象模型（Document Object Model,简称DOM）是W3C组织推荐的处理可扩展便奥姬语嫣的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

3.BOM——浏览器对象模型

浏览器对象模型（Browser Object Model,简称BOM）是指浏览器对象模型，他提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口、比如弹出框、控制浏览器跳转、获取分辨率等

三.JS的三种书写位置

1.行内式

<input type="button" value="唐伯虎" onclick="alert('点了秋香')">

(1)可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick

(2)注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号

(3)可读性差，在html中编写JS大量代码时，不方便阅读

(4)引号易错性，引号多层嵌套匹配时，非常容易弄混

(5)特殊情况下使用

2.内嵌式

    <script>
        alert('沙漠骆驼')
    </script>

(1)可以将多行js代码写到

(2)内嵌式JS是学习时常用的方式

3.外部式

<script src="./008_my.js"></script>

(1)利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用

(2)引用外部JS文件的script标签中间不可以写代码

(3)使用JS代码量较大的情况

四.注释

1.单行注释————//（Ctrl+/）

2.多行注释————/**/（Shift+Alt+A）

五.输入输出语句

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

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

六.变量

1.1什么是变量

白话：变量就是一个装东西的盒子

通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

1.2变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间

2.1变量的使用

1.声明变量

 var age;//声明一个名称为age的变量

（1）var 是一个JS关键字，用来声明变量（variable变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。

（2）age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2.赋值

age=10；//给age这个变量赋值为10

(1)=用来把右边的值赋给左边的变量空间，此处代表赋值的意思

(2)变量值是程序员保存到变量空间里的值

3.变量的初始化

var age=18;//声明变量的同时赋值为18

（1）声明一个变量并赋值，我们称之为变量的初始化

2.2变量的语法扩展

1.更新变量

一个变量被重新赋值后，它原有的值将会被覆盖，变量的值以最后一次赋的值为准。

var age=18;
    age=21//最后的结果就是age为21,原来的数据18被覆盖掉了

2.同时声明多个变量

同时声明多个变量时，只需要写一个var,多个变量名之间使用英文逗号隔开。

var age=10,name='zs',sex='男'

3.声明变量的特殊情况

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

2.3变量的命名规范

1.由字母、数字、下画线美元符号等组成，如：userAge,num01,_name

2.严格区分大小写，var app和var App是两个变量

3.不能以数字开头

4.不能使用关键字、保留字，如：for,while,new

5.变量的命名必须要有意义，如btn_title,lbl_name

6.遵守驼峰命名法。第一个单词的首字母小写，后面单词的首字母要大写，如：myFirstName

七.数据类型

1.1变量的数据类型

变量是用来存储值的所在处，他们有名字和数据类型，变量的数据类型决定了如何将代表这些值的为存储到计算机的内存中。

JavaScript是一种弱类型或者说是动态语言，这意味着不用提前声明变量的类型，在程序的运行过程中，类型会被自动确定。

1.2数据类型的分类

JS把数据类型分为两类:

·简单数据类型（Number,String,Boolean,Undefined,Null)
·复杂数据类型（object)

a	a	a

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

1.2.1数字型Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）

 var age=21;//整数
 var Age=3.1415926//小数

数字前加0，代表八进制，数字前加0x代表十六进制

数字型范围：

最大值：Number.MAX_VALUE,这个值为：1.7976931348623157e+308

最小值：Number.MIN_VALUE，这个值为：5e-32

数字型三个特殊值：

Infinity,代表无穷大，大于任何数值

-Infinity，代表无穷小，小于任何数值

NaN,Not a number,代表一个非数值

isNaN(x)：用来判断一个变量是否为非数字类型，返回true或者false

      -------x是数字，返回false

      -------x不是数字，返回true

1.2.2字符串型String

字符串型可以是引号中的任意文本，其语法为双引号""和单引号’’

 var strMsg="计算机科学与技术"；//使用双引号标识字符串
    var strMsg2='物联网工程'//使用单引号表示字符串
    
    //常见错误
    var strMsg3=软件工程//报错，没使用引号，会被认为是js代码，但js没有这些语法

因为HTML标签里面的属性使用的是双引号，JS这里更推荐使用单引号

1.字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双单，外单内双）

	var strMsg="计算机'科学'与技术"；//使用双引号标识字符串
    var strMsg2='物联"网"工程'//使用单引号表示字符串
    
    //常见错误
    var strMsg3='软件工程"//报错，不能单双引号搭配

2.字符串转义符

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

3.字符串长度

字符串是由若干个字符串组成的，这些字符的数量就是字符串的长度，通过字符串length属性可以获取到整个字符串的长度

 	var strMsg='计算机科学与技术'
    alert(strMsg.length)

4.字符串的拼接

多个字符串之间可以使用+进行拼接，其拼接方式为：字符串+任何类型=拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，在拼接成一个新的字符串

	//字符串"相加"
    alert('hello'+' '+'word')//得到hello word
    //数字字符串"相加"
    alert('100'+'100')//得到100100
    //数值字符串+数值
    alert('11'+12)//得到1112

口诀：数值相加，字符相连

5.字符串拼接加强

	var age=18;
    console.log('gln'+age+'岁了')

1.2.3布尔型Boolean

布尔类型有两个值：true和false，其中true表示真，而false表示假

布尔型和数字型相加的时候，true的值为1，false的值为0

	console.log(true+1)//得2
    console.log(false+1)//得1

1.2.4 Undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)

一个声明变量给null值，里面存的值为空

	var a;
    console.log(a)//undefined
    console.log(a+'计算机科学与技术')//undefined计算机科学与技术
    console.log(11+a)//NaN
    
    var b=null;
    console.log(b+'计算机科学与技术')//null计算机科学与技术
    console.log(11+b)//11

1.3获取变量的数据类型

typeof可以用来获取监测变量的数据类型

	var num=10
    console.log(typeof num)

通过控制台颜色可看出数据类型：

数字（深蓝色）：数字型

数字（黑色）：字符串型

true等（深蓝色）：布尔型

undefined/null等（浅灰色）

1.4数据类型转换

把一种数据类型的变量转换成另一种数据类型。

三种方式的转换：

1.转为字符串类型( var num=1; )

方式	说明	案例
toString()	转成字符串	alert(num.toString());
String()强制转换	转成字符串	alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	alert(num+‘字符串a’)

2.转为数字型

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

·注意parseInt和parseFloat单词的大小写，是重点

·隐式转换是我们在进行算术运算的时候，JS自动转换的数据类型

3.转为布尔型

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

·代表空、否定的值会被转换为false，如’’,0,NaN,null,undefined

·其余值都会被转换为true

八.扩展阅读

1.编译和解释语言的区别

1.概述

计算机不嫩直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。

程序语言翻译成机器语言的工具，成为翻译器。

·翻译器翻译的方式有两种：编译和解释。

两种方式之间的区别在于翻译的时间点不同

编译器是在代码执行之前进行编译，生成中间代码文件

解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行时，也称之为解释器）（边解释边执行）

2.执行过程
类似于请客吃饭：

编译型语言：首先把所有菜做好，才能上桌吃饭

解释型语言：好比吃火锅，边涮边吃，同时进行

2.标识符、关键字、保留字

1.标识符：指开发人员为变量、属性、函数、参数取的名字

标识符不能是关键字或保留字

2.关键字：是指JS本身已经使用了的字，不能再用他们充当变量名、方法名

包括：break,case,continue,default,delete,do,else,finally.function,if ,

     in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with

3.保留字：实际上就是预留的关键字，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名

包括：boolean,byte,char,class,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中常用的运算符有：算术运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符

1.算术运算符

1.概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

运算符 描述 实例

• 加     	10+20=30    
  

• 减     	10-20=-10   
  

• 乘     	10*20=200   
  

/ 除 20/10=2
% 取余（取模） 返回除法的余数9%2=1

2.浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算数计算时其精度远远不如整数

var result=0.1+0.2//结果不是0.3，而是0.30000000000000004
console.log(0.07*100)//结果不是7，而是7.0000000000000001

所以不要直接判断两个浮点数是否相等！

3.表达式和返回值

表达式由数字、运算符、变量等组成的式子

2.递增和递减运算符

i++称为后置递增运算符

++i称为前置递增运算符

i–称为后置递减运算符

–i称为前置递减运算符

var a=0,b=0,c=0,d=0,i=1;
a=i++;//此时a=1,i=2
b=++i//此时b=2,i=3
c=i--//此时c=3,i=2
d=--i//此时d=1,i=1

小结：（递减同理）

前置递增和后置递增运算符可以简化代码的编写，让变量的值+1，比以前写法更简单

单独使用时，运行结果相同

与其他代码一起用时，执行结果会不一样

后置：先把值给别人，再给自己加1

前置：先自加，后运算

开发时，大多使用后置递增，并且代码独占一行

3.比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值作为比较运算的结果

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

注意：
（1）程序中的等于符号是==，默认会转换数据类型，会把字符串型的数据转换为数字型，只要求值相等

（2）全等符号是===，要求两侧的值和数据类型都相等，才为真

4.逻辑运算符

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

逻辑运算符	说明	案例
&&	与and	true&&false
||	或or	true||false
！	非not	!true

口诀：

&&:两个为真才为真，其余情况皆为假

||:两个为假才为假，其余情况皆为真

!：真为假，假为真

---

逻辑中断：

原理：当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

1.逻辑与

若前面为假，后面则不再参与运算

2.逻辑或

若前面为真，后面则不再参与运算

5.赋值运算符

用来把数据赋值给变量的运算符

逻辑运算符	说明	案例
=	直接赋值	var a=‘1’
+=,-=	加,减一个数后再赋值	var a=1;a+=5//则a为6
*=,/=,%=	乘，除，取模一个数后再赋值	var b=3;b*=3//则b为9

6.运算符优先级

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

十. JS流程控制

1.分支

1.流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果有着直接的影响，很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序

2.顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数代码都是按照顺序结构执行的。

3.分支流程控制

1.if语句

1.语法结构

	//1.单分支语句（若条件表达式成立，则执行“语句”，反之，不执行）
    if(条件表达式){
       语句
       }
    
    
    //2.双分支语句（若条件表达式成立，则执行“语句1”，若不成立，则执行“语句2”）
    if(条件表达式){
        语句1
    }
    else{
        语句2
    }
    
    
    //3.多分支语句（若"条件表达式1"成立，则执行“语句1”，若不成立，则看“条件表达式2”是否成立，若成立，则执行“语句2”，若不成立则执行“语句3”）
    if(条件表达式1){
        语句1
    }
    else if(条件表达式2){
        语句2
    }
    else{
        语句3
    }

2.三元表达式

语法结构：

条件表达式？表达式1：表达式2

若条件表达式成立，则执行"表达式1"，否则执行"表达式2"

3.switch语句

主要针对变量设置一些列特定值的选项时用的

语法结构：

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

通过表达式的值和case后面跟着的选项值相匹配，若匹配的上就执行该case内的语句，若配不上，就执行default内的语句

注意事项：

1.开发中，表达式内的值常写成变量

2.表达式和各个value相匹配时，必须是全等

3.若当前的case里面没有break，则不会退出switch

4.switch语句与if else if语句的区别

（1）一般情况下，它们两个语句可以相互替换

（2）switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断

（大于等于某个范围）

（3）switch语句进行条件判断后直接执行到程序的条件语句，效率更高，而if…else语句有几种条件，就得判断多少次

（4）当分支比较少时，if…else语句的执行效率比switch语句高

（5）当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

2.循环

1.for循环

语法结构：

	for(初始化变量；条件表达式；操作表达式)
    {
        循环体
    }

初始化变量：就是一个普通变量，通常作为计数器来使用

条件表达式：用来决定每一次循环是否继续执行，不满足条件则终止循环

操作表达式：是每次循环最后执行的代码，经常用于改变计数器的数值

2.while循环

语法结构：

while(条件表达式){
        循环体
    }

当条件表达式为真，则执行循环体，否则退出循环

3.do while循环

语法结构：

	do{
        循环体
    }while(条件表达式)

跟while不同的是，do…while是先执行一次循环体，再判断条件表达式，如果条件表达式结果为真，则继续执行循环体，否则退出循环

3.continue和break

continue关键字用于立即跳出本次循环，继续下一次循环

break关键字用于立即跳出整个循环（循环结束）

十一.JS命名规范和语法格式

1.标识符命名规范

变量、函数的命名必须要有意义

变量的名称一般用名词

函数的名称一般用动词

2.操作符规范

操作符的左右两侧各保留一个空格

3.单行注释规范

// 单行注释前面注意有个空格

4.其他规范

打完符号打空格

十二.数组

1.创建数组

1.利用new关键字创建数组

	var arr=new Array();//创建一个新的空数组

2.利用数组字面量创建数组（常用）

 	var arr=[];
    var arr1=[a,1,'张三',true];//其中这些数据被称为数组元素，这种方式称为数组初始化，由此可看出数组中可以存放任意类型的数据

2.获取数组元素

·数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从0开始）

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引值]”的形式来获取数组中的元素。

console.log(arr1[2])//得到张三

3.遍历数组

遍历就是把数组中的每个元素从头到尾都访问一次

var arr2=['zs','ls','ww','zl']
for(var i=0; i<arr2.length;i++)//arr2.length是arr2数组的长度
{
    console.log(arr2[i])
}

4.数组中新增元素

1.通过修改length长度新增数组元素

 var arr2=['zs','ls','ww','zl']
    arr2.length=5;//把我们数组的长度修改为了5，这里面应该有5个元素，空值默认为undefined

2.通过修改数组索引新增数组元素

 var arr2=['zs','ls','ww','zl']
    arr2[3]='qq'//追加数组元素
    arr2[1]='zla'//替换数组元素

十三.函数

1.函数的使用

函数的使用分为两步：声明函数和调用函数

//声明函数
function 函数名(){
    函数体
}

//传参时
function 函数名(形参1，形参2，...，形参n){
    函数体
}

注意：

（1）function是声明函数的关键字，全部小写

（2）函数是做某件事情，函数名一般是动词

（3）函数不调用自己不执行

2.调用函数

语法格式：

 函数名（）；//调用函数的时候千万不要忘记加小括号
    
    //传参时
    函数名（实参1，实参2，...，实参n）

3.函数形参和实参匹配问题

如果实参个数多于形参，则，取到形参个数为止。

function getSum(a, b) {
            var sum = 0;
            for (; a <= b; a++)
                sum += a
            console.log(sum);
        }
getSum(1, 10,12);

//得到的结果为55

如果实参个数少于形参，则，为NaN

  function getSum(a, b) {
                var sum = 0;
                for (; a <= b; a++)
                    sum += a
                console.log(sum);
            }
    getSum(1);
    
    //得到的结果为NaN
    //因为b可以看作是不用声明的变量，由于b没用接受值，结果就是undefined

4.函数的返回值

1.return语句

（1）语法格式：

function 函数名（）{
    return 结果；
}
函数名（）;

（2）终止函数功能：return后面的语句不会被执行

（3）return只能返回一个值，若是用逗号隔开多个值，一最后一个为准,若想返回多个值，则可以使用数组形式

function getSum(a,b){
    return [a+b,a-b,a*b,a/b]
}
console.log(getSum(1,2))

（4）函数如果没用return ,则返回undefined

5.arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScript中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

·具有length属性

·按索引方式存储数据

·不具有数组的push，pop等方法

function fun(){
    console.log(arguments)//里面存储了所有传递过来的实参
}
fun(1,2,3)

注：

只有函数才有arguments对象，而且每个函数都内置好了这个arguments

6.函数的两种声明方式

1.利用函数关键字自定义函数（命名函数）

function fun(){
    ...
}
fun();

2.函数表达式(匿名函数)

 var 变量名=function(){};
    
    //eg.
    var fun=function(){
        console.log('函数表达式，到此一游')
    }
    fun();

注意：

（1）fun是变量名，而非函数名

（2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数

（3）函数表达式也可以进行传递参数

十四.作用域

1.全局作用域和局部作用域

实际上就是一个名字（变量）在某个范围内起作用和效果

目的：为了提高程序的可靠性，减少命名冲突

js的作用域（es6）之前，分为：全局作用域和局部作用域，现阶段的js没有块级作用域，js也是在es6的时候新增了块级作用域

块级作用域{}:if{}、for{}

   //在java中，这样写是不能在if以外的地方调用num的
    if(3<5)
        var num=10;
    
    
    //在JS中,支持在if外部使用num
    if(3<5)
        var num=10;
    console.log(num)

全局作用域：在整个script标签或者是一个单独的js文件内的

局部作用域(函数作用域)：存在于函数内部，只在函数内部起效果

2.全局变量和局部变量

(1)全局变量：在全局作用域下的变量
注意：如果在函数内部没用声明直接赋值的变量也属于全局变量

(2)局部变量：在局部作用域下的变量

注意：函数的形参也看作为局部变量

 <scrpit>
        var a='你好啊';//全局作用域下的全局变量
    	
    function fun(){
        var b=12;//局部作用域下的局部变量
    }
    
    </scrpit>

---

比较全局变量和局部变量（从执行效率来看）：全局变量只有浏览器关闭的时候才会销毁，比较占内存资源

3.作用域链

1.只要是代码就至少有一个作用域

2.写在函数内部的局部作用域

3.如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域

4.根据内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就成为作用域链

5.特点：就近原则

var num=10;

function fun1(){
    var num=20;
    
    function fun2(){
        console.log(num);//结果得20，因为往外找，先找到fun1对num的定义及赋值
    }
}
fun1();