JavaScript-基础

102 阅读21分钟

一、编程语言

1.1编程

就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。

 

计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

 

1.2计算机语言

是指用于人与计算机之间通讯的语言,是人和计算机之间传递信息的媒介

 

主要分为机器语言,汇编语言和高级语言三大类。

 

计算机最终所执行的都是机器语言,是由“0”和“1”组成的二进制数,二进制是计算机语言的基础

image.png  

1.3编程语言

用来控制计算机的一系列指令,有固定的格式和词汇(不同的编程语言的格式额词汇一样),必须遵守。

 

通用的2种编程语言形式:汇编语言和高级语言

汇编语言:和机器语言实质相同,都是直接堆硬件操作,只是指令采用英文缩写和标识符,容易识别和记忆。

高级语言:C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

image.png  

1.4翻译器

高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,所以需要一个翻译器。

翻译器可以将编写的源代码转换为机器语言,称为二进制化。

image.png  

1.5编程语言和标记语言区别

编程语言有很强的逻辑和行为能力,在编程语言里,你会看到很多if else、for、while等具有逻辑性额行为能力的指令,这是主动的。

标记语言(html)不用于向计算机发出指令,常用于格式化和链接。标记语言存在是用来被读取的,是被动的。

 

二、计算机基础

2.1计算器组成

image.png

image.png  

 

2.2数据存储

1. 计算机内部使用二进制0和1来表示数据。

2. 所有数据,包括文件、图片等最终都是以二进制数据(0和1)的形式放在硬盘中

3. 所有程序,包括操作系统,本质都是各种数据,也以二进制的形式放在硬盘中。

4. 硬盘、内存都是保持的二进制数据。

 

2.3数据存储单位

Bit<byte<kb<gb<tb<...

位(bit):1bit可以保持一个0或1(最小存储单位)

字节(Byte):1B=8b

千字节(KB):1KB=1024B

兆字节(MB):1MB=1024KB

吉字节(GB):1GB=1024MB

太字节(TB):1TB=1024GB

 

2.4程序运行

image.png

1. 打开某个程序时,先从硬盘中把程序的代码加载到内存中

2. CPU执行内存中的代码

 

注意:之所以要内存的一个重要原因,是因为CPU运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保持运行时的数据。

 

三、JavaScript初识

是一种运行在客户端的脚本语言

脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行进行解释并执行

现在也可以基于Node.js技术进行服务器端编程

image.png

3.1 JavaScript的作用

表单动态校验(密码强度检测)(js产生最初的目的)

网页特效

服务端开发(node.js)

桌面程序(Electron)

APP(Cordova)

控制硬件-物联网(Ruff)

游戏开发(cocos2d-js)

 

3.2 HTML/CSS/JS的关系

HTML/CSS标记语言--描述类语言

HTML决定网页结构和内容(决定看到什么)

CSS决定网页呈现给用户的模样

JS脚本语言--编程类语言

实现业务逻辑和网页控制(决定功能)

 

3.3浏览器执行js简介

浏览器分成两部分:渲染引擎和js引擎

渲染引擎:用来解释HTML与CSS,俗称内核,比如谷歌浏览器的blink

Js引擎:也叫js解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如谷歌浏览器的V8

 

浏览器本身并不会执行js代码,二是通过内置JavaScript引擎(解释器)来执行js代码,解释引擎执行代码时逐行解释每一句源码(转化为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。

 

3.4 JS的组成

  image.png

 

 

 

 

1. ECMAScript

image.png

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

 

2. DOM——文档对象模型

是W3C组织推荐的处理推荐的处理可扩展标记语言的标准编程接口。

通过DOM提供的接口可以堆页面上的各种元素进行操作(大小、位置、颜色等)

 

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

提供了独立于内容的,可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

 

3.5 JS3种书写位置

1.行内式

image.png

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

注意单双引号的使用:在HTML中我推荐使用双引号,JS中推荐使用单引号

可独享差,在html中编写JS大量代码时,不方便阅读

引号易错,引号多层嵌套匹配时,非常容易弄混

只在特殊情况下使用

 

2.内嵌式

image.png

可以将多行JS代码写到

3.外联式

image.png  

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

引用外部JS文件的Script标签中间不可以写代码

适合于JS代码量比较大的情况

 

3.6 JavaScript输入输出语句

image.png

 

四、变量

变量就是一个装东西的盒子。用于存放数据的容器,通过变量名获取数据,甚至数据可以修改。

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

 

4.1变量的使用

变量在使用时分为两步:1.声明变量 2.赋值

 

1. 声明变量

image.png

Var是一个js关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算后会自动为变量分配内存空间。

Age是自行定义的变量名,通过变量名来访问内存中分配的空间

 

2. 赋值

image.png

= 用来把右边的值赋给左边的变量空间中,此处代表赋值的意思

变量值是人为保存到变量空间里的值

 

3. 变量的初始化

image.png

声明一个变量并赋值,称之为变量的初始化

 

4.2变量语法扩展

1. 更新变量

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

image.png

2. 同时声明多个变量

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

image.png

3. 声明变量特殊情况

image.png

 

4.3变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成

严格区分大小写

不能以数字开头

不能是关键字、保留字。如:var、for、while

变量名必须有意义

遵守驼峰命名法。首字母小写,后面单词的首字母需要大写

推荐翻译网站:有道  爱词霸

 

4.4 常量

常量是一类特殊的变量,常量里的值是不允许改变的,定义时必须赋值。

语法:const 常量名 = 数据;

 

 

五、数据类型

不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,定义不同的数据类型。

 

5.1变量的数据类型

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

image.png

在代码运行时,变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的,运行完毕后,变量就确定了数据类型

JavaScript拥有动态类型,意味着相同的变量可用作不同的类型

image.png

5.2数据类型的分类

JS把数据类型分为两类:

简单数据类型(Number,String,Boolean,Undefined,Null)

复杂数据类型(object)

 

1. 简单数据类型(基本数据类型)

image.png

①数字型Number

JavaScript数字类型既可以保持整数值,也可以小数(浮点数)

image.png

(1)数字型进制

最常见的进制有二进制、八进制、十进制、十六进制

image.png

(2)数字型范围

JavaScript中数值的最大和最小值

image.png

最大值:Number.max_VALUE,这个值是1.7976931348623157e+308

最小值:Number.MIN_VALUE,这个值是5e-32

(3)数字型三个特殊值

 

image.png

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

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

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

 

IsNaN():用来判断一个变量是否为非数字的类型,返回true或者false

image.png  

image.png  

②字符串型String

 

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

image.png

JS推荐使用单引号

 

(1)JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外单内双,外双内单)

image.png

(2)字符串转义符

转义符都是\开头的

 

 

image.png

(3)字符串长度

可通过字符串的length属性可以获取整个字符串的长度

image.png

 

(4)字符串拼接

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

拼接前会把于字符串相加的任何类型转为字符串,再拼接成一个新的字符串

image.png

数值相加,字符相连

 

(5)字符串拼接加强

image.png

常用字符串和变量来拼接,修改变量可以方便的改变里面的值

变量是不能添加引号的,因为加引号的变量会变成字符串

\

③布尔型Boolean

布尔类型有两个值:true和false,其中true表示真(对),而false表示假(错)

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

image.png

 

④Undefined和Null

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

image.png

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

image.png

 

字面量:

在源代码中一个固定值的表示法,表示如何表达这个值

数字字面量:8,9,10

字符串字面量:’程序员’,’大前端’

布尔字面量:true,false

 

5.3数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的,此时不能直接进行假发运算,需要先转换变量的数据类型。

 

常用的转换:

转为字符串类型

转为数字型

转为布尔型

 

5.3.1转换为字符串

image.png

 

ToString()和String()使用方式不一样

三种转换方式,更倾向使用第三种,这一种方式也称之为隐式转换

 

5.3.2转换为数字型

image.png

注意parselnt和parseFloat单词的大小写

 

parseInt:在一个字符串中,从左往右依次提取数字,遇到非数字停止提取(只能提取整数)

 

ParseFloat:在一个字符串中,从左往右依次提取数值,遇到非数值停止提取(可提取小数)

 

5.4数组

声明语法:

Let 数组名 = [数据1,数据2,数据3,...,数据n]

 

数组是按顺序保存,所以每一个数据都有自己的编号

计算机的编号从0开始,  0,1,2,3,4...

在数组中,数据的编号也叫索引或下标

数组可以存储任意类型的数据

 

查看所有元素:

直接输出数组名:console.log(变量名)

 

5.4.1获取数组:

声明数组并获取里面的数据

取值语法:

image.png

通过下标取数据

取出来是什么类型的,就根据这个类型特点来访问

查看数组长度(数据个数):

变量名.length

 

5.4.2遍历数组

用循环把数组中每个元素都访问到,一般会用for循环遍历

语法:

image.png

 

5.4.3操作数组

本质是数据集合,操作数据就是 增 删 改 查

image.png

 

5.4.3.1数组增加新的数据

 

1.数组.push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度

语法:

image.png

 

2. 数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度  

语法:

image.png

 

5.4.3.2数据删除元素

 

1.数组.pop() 方法从数组中删除最后一个元素,并返回该元素的值

语法:

  image.png

2.数组.shift()方法从数组中删除第一个元素,并返回该元素的值

语法:

  image.png

3.数组.splice() 方法 删除指定元素

image.png  

起始索引:从0开始

删除的数量,可以指定数量,如果没有指定,则删除从索引位置开始一直到最后的所有元素(如果指定的数量大于剩余的元素数量,不会报错,只会删除剩余的)

 

也可以在删除的元素后面添加任意个新元素

例:arr.splise(2(从第几个开始删),2(删几个), ’新增元素1’,’新增元素2’,’新增元素3’...)

 

 

六、运算符

 

算术运算符:加、减、乘、除、取余(求模)

+:求和

-:求差

*:求积

/:求商

%:取模(去余数)

开发中精彩作为某个数字是否被整除

 

6.1运算优先级

同时使用多个运算符编写程序时,会按照顺序先后执行

优先级越高先被执行,优先级相同以书写从左到右执行

乘、除、取余优先级相同

加、减优先级相同

乘、除、取余优先级大于加、减

使用()可以提升优先级

 

总结:先乘除后加减,有括号先算括号

 

6.2赋值运算符

堆变量进行赋值的运算符

=:将等号右边的值赋予给左边,要求左边必须是一个变量

+=将等号左边的值加上右边里求和

-=将等号左边的值减去右边,求差

*=将等号左边的值乘右边,求积

/=将等号左边的值除右边,求商

%=将等号左边的值除右边,求余数

 

6.3一元运算符

自增:

符号:++

作用:让变量的值+1

用法:

前置自增:

image.png

每执行1次,当前变量数值加1

作用相当于num += 1

 

后置自增:

image.png  

每执行1次,当前变量数值加1

作用相当于num += 1

 

区别:

前置和后置如果在单独使用时(单独一行代码)是没有区别的;

如果非单独使用,++和--写在前面,先执行自增和自减,再使用结果,

++和--写在后面,在这一次先使用这个变量,使用之后再自增和自减,在下一次使用时就已经自增或自减好了。

image.png

自减:

符号:--

作用:让变量的值-1

 

6.4比较运算符

比较两个数据大小、是否相等

>:左边是否大于右边
<:左边是否小于右边
>=:左边是否大于或等于右边
<=:左边是否小于或等于右边
==:左右两边是否相等,将两边的数据进行转换为数值
===:左右两边是否类型和值都相等
!==:左右两边是否不全等
!=:左右两边是否不等

比较结果为boolean类型,即只会得到true或false

 

注意:

字符串比较:是比较祖父对应的ASCII码

从左往右依次比较

如果第一位一样再比较第二位,以此类推

image.png

 

NaN不等于任何值,包括它自己

 

尽量不要比较小数,因为我小数有精度问题

 

不同类型之间比较会发生隐式转换

最终把数据隐式转换成number类型再比较

 

6.5逻辑运算符

image.png

 

 

 

&&:一个为假就为假,如果第一个为假,后面的就不再执行(短路)

先执行第一个表达式,如果第一个表达式的值为false,那么就为false,如果第一个为true,就会继续执行第二个表达式

image.png

 

||:如果第一个为真,直接返回第一个值,后面的不再执行(短路),如果第一个为假,就继续执行后面的

image.png  

短路:只存在于%%和||中,当满足一定条件会让右边代码不执行

image.png

原因:通过左边能得到整个式子的结果,因此没必要再判断右边

运算结果:无论&&还是||,运算结果都是最后被执行的表达式值,一般用在变量赋值。

 

6.6运算符优先级

image.png

 

一次运算符里面的逻辑非优先级最高

逻辑于(&)比逻辑或(|)优先级高

 

七、语句

7.1表达式和语句

表达式: 是一组代码的集合,JavaScript解释器会将其计算出一个结果  

  语句:js整句或命令,js语句是以分好结束(可以省略)

如:if语句  for循环语句

区别:表达式计算出一个值,语句用来自行以使某件事发生(做什么事)

如:表达式:3+4

语句:alert()弹出对话框

某些情况下,也可以把表达式理解为语句,因为它在计算结果,也在做事

 

7.2分支语句

程序三大流程控制语句

顺序结构:从上往下执行

分支结构:根据条件选择执行的代码

循环结构:某段代码被重复执行

image.png

 

7.2.1  if语句

If语句有三种使用:单分支、双分支、多分支

 

单分支使用语法:

image.png

括号内的条件为true时,进入大括号里执行代码

小括号内的结果若不是布尔类型时,会发生隐式转换为布尔类型

 

双分支if语法:

image.png

 

多分支if语法:

image.png

释义:

先判断条件1,若满足条件1就执行代码1,其他的不执行

若不满足则向下判断条件2,满足条件2执行代码2

若依然不满足继续往下判断,以此类推

若以上条件都不满足,执行else里的代码n

注:可以写N个条件

 

7.2.2三元运算符

符号:  ?与:配合使用

语法:

image.png

一般用来取值

 

7.2.3 Switch分支语法

语法:

Switch(变量) {

case 值1:

代码块1

break;

case 值2:

代码块2

break;

case 值3:

代码块3

break;

......

default:

缺省代码块

}

 

switch内的break是可以省略的;

根据Switch后的变量于case的值匹配情况,将程序转向不同的代码块执行,当代码执行结束后,遇到break就会跳过Switch的结构,继续后面代码执行,当所有的值都不匹配时执行缺省代码块,case结构可以有多个,default也可以省略

 

Switch与if的区别:

if条件常用于表示一个范围;

switch条件是一个值与多个具体值的匹配

 

一般遇到一个变量和多个具体值的匹配用switch,因为效率高于使用if

 

八、循环

重复执行某段代码

8.1 while循环

语法:

image.png

释义:

跟if语句很像,都要满足小括号里的条件为true才会进入执行代码

While大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,知道括号内条件不满足,即跳出。

 

注意:

循环本质是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程

所以,循环需要具备三要素:

1. 变量起始值

2. 终止条件(没有终止条件,循环会一直执行,造成死循环)

3. 变量变化量(用自增或者自减)

  image.png

8.2 for循环

image.png  

8.2.1退出循环

循环结束:

Continue:结束本次循环,继续下次循环

Break:跳出所在的循环.

 

8.2.2循环嵌套

For嵌套循环

image.png

一个循环里再套一个循环,一般用在for循环里

九、函数

Function,是被设计为执行特定任务的代码块

可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的目的是有利于精简代码方便复用

 

声明语法:

image.png

 

命名规范

和变量名基本一致

尽量用小驼峰式命名法

前缀应该为动词

命名建议:常用动词约定

image.png  

9.1函数的调用

函数声明定义了之后,并不会自动的执行,需要手动调用

调用函数就会执行函数中的所有代码

 

语法:

image.png

注:声明(定义)的函数必须调用才会真正被执行,使用()调用函数

 

经常使用的alert(),parseInt()这些名字后面跟小括号的本质都是函数的调用

 

9.2函数传参

声明语法:

image.png

参数列表:

传入数据列表

声明这个函数需要传入几个数据,需要传入几个就写几个,用逗号隔开

 

单个参数:

image.png

多个参数:

image.png

 

9.2.1形参和实参

形式参数

在定义方法时声明的参数,在方法()中声明的

image.png

特定:

声明前,它是一个参数的占位,说明调用方法需要传递值过来

调用时,形参是方法的局部变量,只有在方法中可以使用,在方法外不可以使用

 

实际参数

实际存在的一个值,他是一个真正的值

在调用时设置的

 

调用方法传递参数,就是实参为形参赋值的过程

 

9.3函数返回值

当调用一个函数,会返回一个结果出来的,就是有返回值的函数

 

当函数需要返回数据出去时,用return关键字

语法:

image.png

在函数体中使用return关键字能将内部的执行结果交给函数外部使用

函数内部智能运行1次return并且return后面代码不会再被执行,所以return要换行写

Return会立即结束当前函数

函数可以没有return,这种情况函数默认返回值为undefined

函数内部如果想返回多个数据,需要将多个数据组成数组

函数的参数可以是任何类型,函数的返回值额可以是任何类型

 

9.4作用域

限定一段程序代码中所用到的名字的可用性的代码范围。提供程序逻辑的局部性,增强程序的可靠性,减少名字冲突

  image.png

 

9.4.1变量访问原则--作用域链

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

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

如果函数中海油函数,那么在这个作用域中就又可以诞生一个作用域

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

 

就近原则

image.png

9.5匿名函数

image.png

函数表达式:将匿名函数赋值给一个变量,并且通过变量名进行调用

 

语法:

image.png  

 

调用:

image.png

 

其中函数的形参和实参使用跟具名函数一致

 

9.5.1立即执行函数

避免全局变量之间的污染

语法:

image.png

多个立即执行函数要用;隔开,不然会报错

 

十、对象(object)

JavaScript里的一种数据类型

 

对象声明的语法:

image.png

 

对象由属性和方法组成

属性:信息或叫特征(名词)

方法:功能或叫行为(动词)

image.png

 

10.1对象的属性

数据描述的信息,一般是名词性的

属性都是成对出现的,包括属性名和值,他们之间使用英文:分隔

多个属性之间使用英文,分隔

属性就是依附在对象上的变量(外面是变量,对象内是互相)

属性名可以使用””或’’,一般情况下省略,除非名词遇到特殊符号如空格、中横线等

 

10.2对象的属性访问

声明对象,并添加了若干属性后,可以使用.或[]获得对象中属性 对应的值,

获取对象里面的属性值

 

 

 

 

 

2种方式:

点形式: 对象.属性

image.png

 

[]形式:  对象[‘属性’]

image.png

区别:

点后面的属性名不能加引号

[]里面的属性名加引号,除非它是一个变量

 

如果属性名称存在,就返回对应的值,如果属性名称不存在就返回undefined

 

10.3对象的方法

数据行为学的信息,一般是动词性的,本质是函数

 

1. 方法是由方法名和函数两部分构成,他们之间使用:分隔


2. 多个属性之间用英文,分隔

3. 方法是依附在对象中的函数

4. 方法名可以使用” ”或’ ’,一般情况下省略,除非名称遇到特殊符号如空格、中横线等

 

10.4操作对象

对象本质是无序的数据集合,操作数据就是 增 删 改 查

语法:

image.png

 

10.4.1对象获取

对象.属性名称

对象[‘属性名称’]

对象[变量]

 

10.4.2对象添加

语法:

对象.新属性名称=值  

对象[‘新属性名称’]=值

对象[新属性名称变量]=值

如果当前属性对象中不存在就是添加

 

10.4.3对象修改

对象.属性名称=新值

对象[‘属性名称’]=新值

对象[变量]=新值

如果对象的属性名称存在,就是修改

 

10.4.4对象删除

 Delete 对象.属性

如果属性不存在,也不会报错

 

10.5遍历对象

对象没有想数组一样的length属性,所以无法确定长度

对象里面是无序的键值堆,没有规律,不想数组里面有规律的下标

 

语法:

For(let key(键) in 对象) {}

in:是关键字,不能缺少

对象:是你想遍历的对象

键:每次遍历时获取到的对象的键(属性名称)

 

一般不用这种方式遍历数组,主要是用来遍历对象

Key是获取对象的属性名,对象名[key]是获取属性值

10.6内置对象math

JavaScript提供的一个“数学高手”对象

提供了一系列做属性运算的方法

random:生成0-1之间的随机数(包含0不包含1ceil:向上取整

floor:向下取整

max:找最大数

min:找最小数

pow:幂运算

abs:绝对值

math对象在线文档

 

10.6.1随机生成N-M之间的随机数

 

公式:Math.floor(Math.random()*(M-N+1))+N

image.png

 

十一、拓展

11.1 var和let的区别

1.var声明的变量会进行声明的提升;

let声明的变量避讳进行任何的提升,㔿先声明赋值再使用

2.var声明的变量没有块级(结构块)作用域的概念(不是指函数),他会挂载到全局widow;

let声明的变量有块级作用域,作用域是当前变量所在的结构块{}(有效作用域:从定义这个变量开始到他所在}结束)

3.var允许声明同名变量,后面的会将前面的覆盖

let不需要声明同名变量,会报错

 

11.2常用字符串方法

 

tolowerCase():把字符串转为小写,返回新的字符串

toUpperCase():把字符串转为大写,返回新的字符串

substring():提取字符串中结余两个指定下标之间的字符,包含起始下标位置的字符,但是不包含终止下标位置的字符

indexOf():返回某个指定的子字符串在字符串中第一次出现的索引位置,如果没有查找到则返回-1

substr():返回从指定下标开始指定长度的子字符串

split():把字符串分割成字符串数组