从JavaScript基础开始学习前端Day09

标准	内容	说明
结构	HTML	网页元素的结构和内容
表现	CSS	网页元素的外观和位置，包括：板式、颜色、大小等
行为	JavaScript	网页模型的定义与交互

2、基础语法

2.1JavaScript简介

2.1.1JavaScript是什么

一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用：

网页特效（监听用户的一些行为让网页做出对应的反馈）

表单验证（针对表单数据的合法性进行判断）

数据交互（获取后台的数据，渲染到前端）

服务端编程（node.js）

2.1.2JavaScript的组成

ECMAScript（JavaScript的语言基础）规定了JavaScript的基础语法核心知识，比如：变量、分支语句、循环语句、对象等等。

Web APIs

DOM（页面文档对象模型）操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM（浏览器对象模型）操作浏览器，比如页面弹窗，监测窗口宽度，存储数据到浏览器等等

2.1.3JavaScript书写位置

内联JavaScript：代码写在标签内部

内部JavaScript：直接写在html文件里，用script标签包住

外部JavaScript：代码写在以.js结尾的文件里，通过script标签，引入到html页面中

2.1.4JavaScript的注释

//单行注释 ctrl+/

/*块注释*/ 快捷键shift+alt+A

2.1.5JavaScript输入输出语法

输出语法：

document.write('要输入的内容')；

alert('要输出的内容')；

console.log('控制台打印')；

输入语法：

prompt('请输入您的姓名：')；

2.2变量

2.2.1变量是什么

计算机中用来存储数据的“容器”，简单理解是一个个盒子。

变量的作用：用来存放数据的。注意变量指的是容器而不是数据。

2.2.2变量基本使用

（1）声明变量：要想使用变量，首先需要创建变量（专业说法：声明变量）

语法：let 变量名

（2）变量赋值：定义了一个变量后，你就能够初始化它（赋值）。在变量名之后更上一个“=”，然后是数值。

（3）更新变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它。

注：let一个变量不能多次声明，let可以一次声明多个变量。

2.2.3变量的本质

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

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

2.2.4变量命名规则与规范

规则：

不能用关键字；

只能用下划线，字母，数字，$组成，且数字不能开头

字母严格区分大小写

规范：

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个字母首字母大写

2.2.5变量拓展——let和var的区别

let为了解决var的一些问题

var声明：

可以先使用再声明

var声明过的变量可以重复声明

比如var有变量提升、全局变量、没有块级作用域等等

结论：以后声明变量统一使用let

2.2.6变量拓展——数组

数组（Array）是一种可以按顺序保存多个数据

let arr = [ ]

let 数组名 = [数组名1，数组名2， ......]

元素：数组中保存的每个数据都叫数据元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得

2.3数据类型

2.3.1数据类型

为什么要给数据分类？

（1）更加充分和高效的利用内存

（2）更加方便程序员使用数据

数据类型分为两大类：

（1）基本数据类型

number 数字型

string 字符串型

boolean 布尔型

undefined 未定义型表示没有赋值

null 空类型表示赋值了，但是内容为空

（2）引用数据类型

object 对象

function 函数

array 数组

2.3.2检测数据类型

console.log(typeof num)

2.4类型转换

2.4.1为什么要类型转换

把一种数据类型的变量转换成我们需要的数据类型

2.4.2隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：+号两边只有一个是字符串，都会把另外一个转成字符串

除了 + 以外的算术运算符，比如 - * /等都会把数据转成数字类型

缺点：转换类型不明确，靠经验才能总结

小技巧：+号作为正号解析可以转换成Number

2.4.3显式转换

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

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

转换成数字型：

Number（数据）：

转成数字类型

如果字符串内容是有非数字，转换失败时结果为NaN（Not a Number）即不是一个数字

NaN也是number类型的数据，代表非数字

parseInt（数据）：只保留整数

parseFloat（数据）：可以保留小数

String（数据）：变量.toString（进制）

3、流程控制

3.1运算符

3.1.1算术运算符

数学运算符也叫算术运算符，主要包括加（+）、减（-）、乘（*）、除（/）、取模即取余数（%）

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行，即先乘除后加减，有括号先算括号里的

3.1.2赋值运算符

以前：num = num + 1

现在：num += 1

3.1.3一元运算符

自增：++，作用：让变量的值 +1

let i = 2
let o = 2
//先自增后运算
console.log(++i)
//先运算后自增
console.log(o++)

输出结果为：i=3 ，o=2

自减： --，作用：让变量的值-1

3.1.4比较运算符

包括：>、<、<=、>=、==（左右两边是否相等）、===（左右两边是否类型和值都相等）、！==（左右两边是否不全等）

注：（1）比较结果只能是Boolean类型，即只会得到true或false

（2）=是赋值；==是判断，只要求值相等，不要求数据类型一样即可返回true；===是全等，要求值和数据类型都一样返回的才是ture

字符串比较，是比较的字符对应的ASCⅡ码

从左往右依次比较

如果第一位一样在比较第二位，以此类推

比较的少，了解即可

NaN不等于任何值，包括它本身

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

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

3.1.5逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true结果才是true	一假则假
\|\|	逻辑或	或者	符号两边有一个true就为true	一真为真
！	逻辑非	取反	true变false，false变true	真变假，假变真

3.1.6运算符优先级

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

3.2分支语句

3.2.1表达式和语句

表达式是一组代码的集合

语句：js整句或命令，js语句是以分号结束（可以省略）

3.2.2分支语句

If分支语句

单分支、双分支、多分支

（不展开详细概述）

三元运算符

？与：配合使用

语法：

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

switch语句

switch(数据){
    case 值1:
        代码1
        break
    case 值2:
        代码2
        break
    default:
        代码n
        break
}

找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等===的则执行default里的代码

注：

switch case语句一般用于等值判断，不适合区间判断

switch case一般需要配合break关键字使用，没有break会造成case穿透

3.2.3循环语句

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快的找到bug

浏览器打开调试界面

1、按F12打开开发者工具

2、点到sources一栏

3、选择代码文件

断点：在某句代码上加的标点就叫断点，当程序执行到这句有标记的代码时会暂停下来。

while循环

循环：重复执行某段代码，而while：在...期间

while(循环条件){
    要重复执行的代码(循环体)
}
//条件判断是否为真，为真，执行代码，为假，跳出循环

（2）循环的注意事项：

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

循环需要具备三要素：

变量起始值

终止条件（没有终止条件，循环会一直执行，造成死循环）

变量变化量（用自增或者自减）

for循环

for循环基本使用

也是重复执行代码

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for( 声明记录循环次数的变量; 循环条件; 变化值){
    
    循环体

}

for循环和while循环有什么区别？

当如果明确了循环的次数的时候推荐使用for循环

当不明确循环的次数的时候推荐使用while循环

循环退出

循环结束：

continue：结束本次循环，继续下次循环

break：跳出所在的循环

for循环嵌套

for(外部声明记录循环次数的变量;循环条件;变换值){
    
    for(内部声明记录循环次数的变量;循环条件;变化值){
        
        循环体
    
    }
//一个循环里在套一个循环，一般用在for循环里
}

4、数组

4.1数组是什么

数组（Array）是一种可以按顺序保存数据的数据类型

4.1.1声明语法

let 数组名 = [ 数据1,数据2,...,]

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

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

在计算机中的编号是从0开始的

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

4.1.2取值语法

数组名[下标]

4.1.3一些术语

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数。通过数组的length属性获得

4.1.4遍历数组

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

语法：

for(int i = 0; i < 数组名.length;i++){
    数组名[i]
}

4.2操作数组

数组本质是数据集合，操作数据无非是增删改查

语法：

查	查询数组数据	数组[下标]或者我们称之为访问数组数据
改	重新赋值	数组[下标] = 数值
增	数组添加新的数据	arr.push(新增的内容)方法将一个或多个元素添加到数组的末尾，并且返回到数组的新长度 arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并且返回到数组的新长度
删	删除数组中的数据	arr.pop()方法从数组中删除最后一个元素，并返回该元素的值 arr.shift()方法从数组中删除第一个元素，并返回该元素的值 arr.splice(操作的下标，删除的个数)方法删除指定的元素。e.g:arr.splice(start,deleteCount) start起始位置：指定修改的开始位置（从0计数） //从哪里开始删 deleteCount：表示要移除的数组元素的个数可选的。如果省略则默认从指定的起始位置删除到最后 //删几个

5、函数

5.1为什么需要函数

函数：

function，是被设计为执行特定任务的代码块

说明：

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

5.2函数使用

5.2.1函数的声明语法

function 函数名(){
    函数体
}

5.2.2函数名命名方法

和变量命名基本一致

尽量小驼峰命名法

前缀应该为动词

命名建议：常用动词约定

5.2.3函数调用方法

//函数调用，这些函数体内的代码逻辑会被执行
函数名()
//函数一次声明可以多次调用，每一次函数调用函数体里面的代码都会重新执行一次

注：声明（定义）的函数必须调用才会真正被执行，使用()调用函数

5.2.4函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行，函数的功能代码都要写在函数体当中。

5.3函数传参

5.3.1为什么要有参数的函数

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

这样可以极大提高函数的灵活性

5.3.2有参数的函数声明和调用

声明方法：

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

参数列表：

传入数据列表

声明这个函数需要传入几个数据

多个数据用逗号隔开

调佣语法：

函数名(传递的参数列表)
//调用函数时，需要传入几个数据就写几个，用逗号隔开

5.3.3形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如num1 = 10 ）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

使用过的alert('打印'),parseInt('11')，Number（'11'）本质上都是函数调用的传参

5.4函数返回值

5.4.1为什么要让函数有返回值

函数：函数是被设计为执行特定任务的代码块

缺点：把计算机后的结果处理方式写死了，内部处理了

优点：把处理结果返回给调用者

5.4.2用return返回数据

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

语法：return 数据

function fn(){
        return 20
}
//fn()
//return 相当于 执行了一句话 fn() = 20
document.write(fn())
//输出20

//进一次深入研究 有的时候函数名字比较长
function getMyResult(){
    return 20
}
//document.write(getMyResult())
let re = getMyResult()
document.write(re)
//输出20

细节：

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

函数内部只能一次return，并且return后面代码不会再被执行，所以return后面的数据不要换行写

return会立即结束当前函数，退出函数的作用，return后面的代码不在执行

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

5.5作用域

5.5.1作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域，作用域的使用提高了程序的逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域	全局有效	作用于所有代码执行的环境（整个script标签内部）或者一个独立的.js文件
局部作用域	局部有效	作用于函数内的代码环境，就是局部作用域，因为跟函数有关系，所以也称之为函数作用域
块级作用域	{}内有效	块级作用域由{ }包括，if语句和for语句里面的{}等

5.5.2变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为：

全局变量	函数外部let的变量	全局变量在任何区域都可以访问和修改
局部变量	函数内部let的变量	局部变量只能在当前函数内部访问和修改
块级变量	{}内部的let变量	let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问

变量有一个坑，特殊情况：

变量函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐，但是有一种情况，函数内部的形参可以看做是局部变量。

5.5.3变量访问原则——作用域链

原则：作用域链：采取就近原则的方式来查找变量最终的值

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

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

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

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

5.6匿名函数

5.6.1匿名函数

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

语法：

let fn = function(){
    //函数体
}

调用：fn() //函数名

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

5.6.2立即执行函数

场景介绍：避免全局变量之间的污染

语法：

//方法1
(function(x,y){
    console.log(x+y) 
})(1,2);

//方法2
(function(){
console.log(11)
}());

//不需要调用，立即执行

注：多个立即执行函数要用分号隔开，要不然会报错

6、对象

6.1什么是对象

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

可以理解为是一种无序的数据集合

可以用来详细的描述某个事物

比如描述人的信息：

静态特征：可以使用数字，字符串，数组，布尔类型等表示（如：身高，体重）

动态行为：使用函数表示（如：唱，跳，rap）

6.2对象使用

6.2.1对象声明语法

let 对象名 = { }

6.2.2对象那个有属性和方法组成

属性：信息或叫特征（名词）

方法：功能或叫行为（动词）

let 对象名 = {
    
    属性名: 属性值,
    方法名: 函数
}

6.2.3属性

数据描述性是信息称为属性，如人的姓名、身高、年龄、性别等，一般都是名词性的

let person = {
    uname:'andy',
    age:18,
    sex:'男'
}

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

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

属性就是依附在对象上的变量（外面是变量，对象内是属性）

属性名可以使用 " " 或 ' ' ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

6.2.4属性访问

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，称之为属性访问

简单理解就是获得了对象里面的属性值

6.2.5对象中的方法

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

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

方法是由方法名和函数两部分构成，它们之间使用冒号 : 分隔

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

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

方法名可以使用 " " 或 ' ' ,一般情况下省略，除非名称遇到特殊符号加空格、中横线等

6.2.6对象中的方法访问

声明对象，并添加了若干方法后，可以使用，调用对象中函数，称之为方法调用

let person = {
    name: 'andy',
    sayHi: function(){
        document.write('hi~~')
    }
}
//对象名.方法名()
person.sayHi()

注：千万别忘了给方法名后面加小括号

6.3操作对象

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

语法：

查	查询对象	对象.属性或者对象['属性'] 对象,方法()
改	重新赋值	对象.属性 = 值对象,方法() = function(){}
增	对象添加新的数据	对象名.新属性名 = 新值
删	删除对象中的属性	delete 对象名.属性名

6.4遍历对象

能够遍历输出对象里面的元素

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

对象里面是无序的键值对，没有规律，不像数组里面有规律的下标

let obj = {
    name:'小明',
    age:18,
    sex:'男'
}
//for in 循环语句
//语法
//for (let k in 对象){}
//k 变量 k 或者 key
for(let k in obj){
    console.log(k)    //属性名
    console.log(obj[k])    //属性值
    // k === 'uname' === 'age' === 'sex'
    // obj['sex'] === 18
}

遍历对象的语句——for in

遍历对象中，for k in obj，获得对象属性的是哪个，获得值是那个？

获得对象属性的是k

获得对象值是obj[k]