JavaScript的基础知识

ECMAScript

JavaScript是一种运行在客户端的编程语言，实现人机交互效果

JavaScript的组成

1. ECMAScript：规定了JavaScript的基础语法
2. Web APIS：DOM操作文档，BOM操作浏览器

JavaScript三种书写位置

1. 内部JavaScript

直接写在html文件当中，用script包住，用script标签写在</body>上面

1. 外部JavaScript

使用script标签的src属性引入外部javaScript属性

1. 内联JavaScript

代码写在标签内部

注释

1. 单行注释：// 快捷键：ctrl+/
2. 多行注释：/**/ 快捷键：shift+alt+/

JavaScript中可以不写结束符，要不写都不写，要写都写

输出语法

1. 文档输出内容

document.write('')

输出的可以是内容，也可以是标签

1. 弹出警告框

alert('')

1. 控制台打印输出

console.log('')

打印到控制台给程序员，在页面中不显示

输入语法

1. 弹出一个对话框

prompt('要提示的内容')

字面量

字面量是描述在计算机中的事/物

变量

变量是用于存储信息的"容器"，变量是存储数据的容器

声明变量

要想使用变量，必须先创建变量

let 变量名

• 声明变量由两部分组成：声明关键字 变量名

let相同的变量只能声明一次，不能重复声明

变量的本质

内存：计算机中存储数据的地方，相当于一个空间

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

字母严格区分大小写，Age和age不是同一个变量

let和var的区别

var声明：

• 可以先使用再声明
• var声明过的变量，可以重复声明

数组

数组是一种将一组数据存储在单个变量名下的方式

let 数组名 = [数据1，数据2，数据3]

数组是有顺序的，每个数据都有自己的编号

计算机的索引从0开始

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

常量

概念：使用const声明的变量叫做常量

当某个变量永远不会改变的时候用const来声明

const 变量名 = 变量值 

常量初始化声明必须赋值

数据类型

基本数据类型：number，string，boolean，undefined，null

引用数据类型：object对象，数组，function函数

JavaScript是一种弱数据类型语言，只有赋完值才知道是什么数据类型

number

number里面有一个特殊值：NaN：表示不是一个数字

NaN是粘性的，对任何数据操作结果都是NaN

string

通过单引号' ' 双引号" "反引号` `包裹的都是string类型的

字符串的拼接：字符串通过+拼接

模板字符串

拼接字符串和变量

语法：字符串用``包裹，进行拼接时用${}包裹住要拼接的字符串或变量

bolean

boolean类型的变量只有两个值true和false

undefined

一个变量未被赋值就叫做未定义类型即undefined类型

undefined+1计算的结果是NaN

null

js中null仅仅是代表空，给变量赋值了但是赋的空值

• undefined表示没有赋值
• null表示赋值了，但是内容为空

把null作为尚未创建的对象，将来变量中是有变量的，但是还未创建，先给赋一个空值

null+1计算的结果是1

检测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型，支持两种语法，得到的结果都一样

prompt和表单取出来的数据默认是string类型的

• 作为运算符：typeof x
• 函数形式：typeof（x）

类型转换

隐式转换

某些运算符在执行的时候，系统内部会自动的将数据类型进行转换，这种转换叫做隐式转换

• 在+的两侧只要有字符串，就会把别的类型转换成字符串类型再进行拼接
• 除了+，其他的算术运算符-，*，/，%都把数据转换成数字类型

显示转换

自己写代码告诉系统该转换成什么类型

转换成数字型：

• Number：转换成数字型，如果字符串内含有非数字，转换失败时结果为NaN即不是一个数字
• NaN是number类型的数据，代表非数字

parseInt(数据)：只保留整数

parseFloat(数据)：可以保留小数

比较运算符

>：左边是否大于右边

<：左边是否小于右边

>=：左边是否大于等于右边

<=：左边是否小于等于右边

==：左右两个值是否相等

===：左右两边是否类型和值都相等

！==：左右两边是否类型和值都不相等

NaN不包含任何人包括他自己

语句

表达式和语句的区别：

• 表达式是可以求值的代码
• 语句是一段可以被执行的一段代码

if语句

if语句有三种使用：单分支，双分支，多分支

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

if(条件){
  满足条件要执行的代码
}


if(条件){
  满足条件要执行的代码
}else{
  不满足条件要执行的代码
}

除了0所有的数字都为真，如果括号的内容不是boolean，会发生隐式转换

除了' '所有字符串都为真

三元运算符

条件?满足条件执行的代码:不满足条件的代码

switch语句

switch(数据){
  case 值1：
	代码
break;
	case	值2：
	代码
break;
	case  值3:
  代码
	break;
	default 值4
	代码
	break;
}

都不满足条件则执行default的代码块

while语句

重复执行一些操作

while：在满足条件期间，重复执行一段代码

while(循环条件){
  要重复执行的代码
}

循环的退出

• continue：结束本次循环，继续下次循环
• break：退出循环

for循环

• 作用：重复终止代码
• 好处：把声明起始值，循环条件，变量值写在一起

for(起始值，循环条件，变量值){
  
}

数组

声明数组的方式

1. 字面量声明数组

let arr = [1,2,'pink']

1. 使用Array的构造函数创建数组

let arr = new Array(数据1，数据2，数据3)

• 数据是按顺序保存，所以每个数据都有自己的编号
• 从0开始计算
• 在数组中，编号也叫做索引或下标

新增数组

目标：掌握利用push向数组中添加元素

push方法是将一个或多个元素添加到数组末尾，并返回数组的新长度

unshift方法是将一个或多个元素添加到数组开头，返回的数组新长度

删除数组

目标：能够删除数组元素

1. 数组.pop()：从数组中删除末尾一个元素，并返回删除的元素
2. 数组.shift()：从数组开头删除一个元素，并返回删除的元素
3. 数组.splice()：删除指定元素，第一个参数：起始位置，第二个元素：删除几个元素

arr.splice(起始位置,删除几个元素)

函数

函数可让代码复用性提高，提高开发效率

function：是被设计为执行特殊任务的代码块

• 函数的声明语法

function 函数名(){
  	函数体
}

• 函数的调用

具名函数的调用可以写在任何的位置

函数名()

声明的函数必须调用才会被真正执行，使用()调用函数

函数传参

如果函数完成功能需要调用者传入数据，那么就需要有参数的函数

这样可以极大的提高代码的灵活性

function 参数名(参数列表){
  函数体  
}

参数列表中的参数叫做形参，调用函数时传入的参数是实参，是实参传给形参

形参只在函数内有效

如果不传入参数的话，会是两个undefined相加，结果是NaN，不想结果是NaN，可以给参数赋默认值

函数的返回值

把结果返回给调用者，当结果需要返回数据的时候，使用return关键字

对执行结果的拓展性更高，

return后面的代码不会被执行

return 数据

返回数据后用一个变量接收

作用域

通常来说，一段代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域

作用域的使用提高了程序逻辑的局限性，增强了程序的可靠性，减少了名字冲突

• 全局作用域：作用于所有代码执行的环境
• 局部作用域：作用域函数内部的代码环境，就是局部作用域，因为跟函数有关系，所以也叫做函数作用域

作用域特殊情况：在函数内部没有声明直接使用，也当作全局变量使用，但是强烈不推荐使用

变量的访问原则

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在作用域中还会诞生一个作用域
• 访问原则：在能够访问到的情况下，先访问局部，如果局部中没有再访问全局

匿名函数

没有名字的函数，无法直接使用

• 函数表达式
• 立即执行函数

函数表达式

将匿名函数直接赋值给一个变量，并通过变量名进行调用，我们将这个称为函数表达式

let fn = function(){
  函数体
}

匿名函数的调用只能写在函数表达式的后面

立即执行函数

立即执行函数可以有名字

立即执行函数的写法

(function(){
  
})()

多个立即执行函数相邻时，要加分号进行隔离

立即执行函数的第二种写法

(function(形参列表){
  
}(实参列表))

逻辑中断

逻辑与：&&的逻辑中断：一假则假，如果进行逻辑与判断时，前面的为假，后面的代码就不执行了，如果都是真，输出最后一个真值

逻辑或：| |的逻辑中断：一真则真，如果进行逻辑或判断，前面的为真， 后面的代码就不执行了，如果都是真，输出第一个真值

对象

对象：JavaScript里的一种数据类型

对象通常用来描述某个事物

对象可以看作是一个无序的数据集合

对象使用

声明对象的语法

let 对象名 = {
  属性名:属性值
	方法名:函数
} 
let 对象名 = new Object()

对象由属性和方法共同组成

多个属性之间用，隔开

属性-查

语法：对象名.属性名

对象名['属性名']：当属性名中含有不允许存在的符号时用单引号包裹住，只能用这种方法

简单来说就是获取对象里面的属性值

属性-改

语法：对象名.属性值 = 新值

属性-增

语法：对象名.新属性 = 新值

在其他语言中，无法这样操作，但JavaScript的容忍性好

属性-删

语法：delete 对象名.属性

对象中的方法

数据行为性的信息称为方法，其本质是函数

let person = {
  uname:'lady',
  sayHi:function(){
    document.write('hi~~~')
  }
}

• 方法是由方法名和函数共同构成的，他们之间用：分隔
• 方法是依附在对象中的函数
• 多个方法之间用，分隔

遍历对象

对象里面是无序的键值对，没办法使用下标

for in循环

for(let k in arr){
  
}

在遍历数组的时候：k代表的数组的下标，arr[k]代表对应下标的值

在遍历对象的时候：k代表的对象的属性名,obj[k]代表对应属性名的属性值，得到的属性名是被字符串包裹住的属性名

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math

Math对象是JavaScript提供的一个数学对象

提供了一系列做数学运算的方法

Math中有许多提供好的方法，可以通过文档进行查看

简单数据类型和引用数据类型

简单数据类型：在存储变量的时候存储的是值本身，因此叫做值类型，存放在栈当中

引用数据类型：在存储变量的时候存储的是地址，因此叫做引用数据类型，通过new关键字来创建对象，存放在堆当中