JavaScript 笔记:
初识 JavaScript
目录
1. 什么是 JavaScriptavaScript 是一种本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。
2. JS的组成
2.1 ECMAscriptECMAscript 是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或JScript,但实际上后两者是 ECMAscript 语言的实现和扩展。
ECMAscript:ECMAscript规定了JS的编程语法和基础核心知识,是所有浏览器厂商沟通遵守的一套JS语法工业标准。
2.2 DOM ——文档对象模型
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。 通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
2.3 BOM ——浏览器对象模型
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
3. JS书写位置
JS 有3种书写位置,分别为行内、内嵌和外部。3.1 行内式 JS
<input type="button" value="你好" οnclick="alert('Hello World'))">
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
3.2 内嵌 JS<script>
alert('Hello World~!');
</script>
可以将多行JS代码写到
内嵌 JS 是学习时常用的方式
3.3 外部 JS文件<script src="my.js"></script>
利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况
JavaScript 系列笔记——ECMAscript(壹)
目录
变量
1. 变量的概述
1.1 什么是变量
白话:变量就是一个装东西的盒子。
通俗:变量是用于存放数据的容器。我们通过 变量名 获取数据,甚至数据可以修改。
1.2 变量在内存中的存储
本质:变量是程序在内存中申请的一块用来存放数据的空间。
类似我们酒店的房间,一个房间就可以看做是一个变量。
2. 变量的使用
变量在使用是分为两步:1. 声明变量 2. 赋值
2.1 声明变量
JavaScript有三种声明方式。
var 声明一个变量,可选初始化一个值
let 声明一个块作用域的局部变量,可选初始化一个值。
const 声明一个块作用域的只读常量
let age // 声明一个名称为age 的变量
- let 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
- age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
2.2 赋值
age = 10 // 给age 这个变量赋值为 10
- = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
2.3 变量的初始化
let age = 18 // 声明变量同时赋值为 18
声明一个变量并赋值, 我们称之为变量的初始化。
3. 变量语法扩展
3.1 更新变量
一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
let age = 18
age = 81 // 最后的结果就是81 因为 18被覆盖掉了
3.2 同时声明多个变量
同时声明多个变量时,只需要写一个let, 多个变量名之间使用英文逗号隔开。
let age = 10, name = 'FH', sex = 2;
3.3 声明变量特殊情况
情况 | 说明 | 结果 |
---|---|---|
let age;console.log(age) | 只声明 不赋值 | undefined |
console.log(age) | 不声明 不赋值 直接使用 | 报错 |
age = 10;console.log(age) | 不声明 只赋值 | 10 |
4. 变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。18age 是错误的
- 不能 是关键字、保留字。例如:var、for、while
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
数据类型
1. 数据类型简介
1.1 为什么需要数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利 用存储空间,于是定义了不同的数据类型。
简单来说,数据类型就是数据的类别型号。比如 姓名“张三”,年龄18,这些数据的类型是不一样的。
1.2 变量的数据类型
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的 内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会 被自动确定。
let age = 10 // 这是一个数字型
let areYouOK = '是的' // 这是一个字符串
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。
1.3 数据类型的分类
JS 把数据类型分为两类:
- 基本数据类型(Number,String,Boolean,Undefined,Null)
- 引入数据类型 (object)
2. 基本数据类型
2.1 基本数据类型
Number | 数字型,包含 整型值和浮点型值,如 21、0.21 | 0 |
Boolean | 布尔值类型,如 true、false,等价于 1 和 0 | false |
String | 字符串类型,如 '张三' 注意咱们js 里面,字符串都带引号 | "" |
Undefined | var a; 声明了变量a 但是没有赋值,此时 a = undefined | undefined |
Null | var a = null; 声明了变量a 为空值 | null |
2.2 数字型 Number
JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。
let age = 21 // 整数
let Age = 21.3747 // 小数
2.3 字符串类型 String
字符串型可以是引号中的任意文本,其语法为 双引号"" 和 单引号''
let strMsg = "你好" // 使用双引号表示字符串
let strMsg2 = '你也好' // 使用单引号表示字符串
// 常见错误
let strMsg3 = 你好 // 报错,没使用引号,会被认为是js代码,但js没有这些语法
因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。
2.4 布尔型 Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
console.log(true + 1) // 2 参与加法运算当1来看
console.log(false + 1) // 1 参与加法运算当0来看
2.5 Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
let variable
console.log(variable) // undefined
console.log('你好' + variable) // 你好undefined
console.log(11 + variable) // NaN
console.log(true + variable) // NaN
一个声明变量给 null 值,里面存的值为空
let vari = null
console.log('你好' + vari) // 你好vari
console.log(11 + vari) // 11
console.log(true + vari) // 1
3. 获取变量数据类型
3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
let num = 18
console.log(typeof num) // 返回 number
3.2 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8,9,10
- 字符串字面量:'程序员',"大前端"
- 布尔字面量:true,false
4. 数据类型转换
4.1 什么是数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换:
- 转换为字符串类型
- 转换为数字型
4.2 转换为字符串
toString()
let num = 1
alert(num.toString())
String()强制转换
let num = 1
alert(String(num))
加号拼接字符串
let num = 1
alert(num + '我是字符串')
- toString() 和 String() 使用方式不一样。
- 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一种方式也称之为隐式转换。
4.3 转换为数字型
parselnt(string)函数,将string类型转成整数数值型
parselnt('78')
parseFloat(string)函数,将string类型转成浮点数值型
parseFloat('78.21')
Number()强制转换函数,将string类型转成数值型
Number('12')
js 隐式转换( - * / ),利用算术运算隐式转换为数值型
'12' - 0
- 注意 parseInt 和 parseFloat 单词的大小写
- 隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型
4.4 转换为布尔型
Boolean()函数,其他类型转成布尔值
Boolean('true')
- 代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined
- 其余值都会被转换为 true
console.log(Boolean('')) // false
console.log(Boolean(0)) // false
console.log(Boolean(NaN)) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(123)) // true
console.log(Boolean('你好吗')) // true
console.log(Boolean('我很好')) // true
运算符
1. 运算符
运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript 中常用的运算符有:
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
2. 算数运算符
2.1 算数运算符概述
概念:算数运算使用的符号,用于执行两个变量或值的算术运算。
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 10 + 20 = 30 |
- | 减 | 10 - 20 = -10 |
* | 乘 | 10 * 20 = 200 |
/ | 除 | 10 / 20 = 0.5 |
% | 取余数(取模) | 返回除法的余数 9 % 2 = 1 |
2.2 浮点数的精度问题
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
console.log(0.1 + 0.2) // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100) // 结果不是 0.7,而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等!
2.3 表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算法、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们称为返回值
3. 递增和递减运算符
3.1 递增和递减运算符概述
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(--)运算符完成。
递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,称为前置递增(递减)运算符,放在变量后面时,称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。
3.2 递增运算符
1. 前置递增运算符
++num 前置递增,就是自加1,类似于 num = num + 1。
使用口诀:先自加,后返回原值
2. 后置递增运算符
num++ 后置递增,就是自加1,类似于 num = num + 1。
使用口诀:先返回原值,后自加
3.3 前置递增和后置递增小结
- 前置递增和后置递增运算符可以简化代码的编写,让变量的值+ 1比以前写法更简单
- 单独使用时,运行结果相同
- 与其他代码联用时,执行结果会不同
- 后置:先原值运算,后自加(先人后己)
- 前置:先自加,后运算(先已后人)
4. 比较运算符
4.1 比较运算符概述
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算符后,会返回一个布尔值(ture / false)作为比较运算的结果。
< | 小于号 | 1 < 2 | true |
> | 大于号 | 1 > 2 | false |
>= | 大于等于号(大于或等于) | 2 >= 2 | true |
<= | 小于等于号(小于或等于) | 3 <= 2 | false |
== | 判等号(会转型) | 37 == 37 | true |
!= | 不等号 | 37 != 37 | false |
=== !== | 全等 要求值和 数据类型都一致 | 37 === '37' | false |
4.2 =小结
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边值是否相等(注意此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
console.log(18 == '18') // true
console.log(18 === '18') // false
5. 逻辑运算符
5.1 逻辑运算符概况
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | “逻辑与”,简称 “与” and | true && false |
|| | “逻辑或”,简称 “或” or | true || false |
! | “逻辑非”,简称 “非” not | ! true |
5.2 逻辑与&&
两边都是 ture 才返回 true,否则返回 false
5.3 逻辑或||
两边都是 false 才返回 false,否则返回 true
5.4 逻辑非!
逻辑非 ( ! ) 也叫取反符,用来去一个布尔值相反的值,如 true 的相反值是 false
let isOk = !true
console.log(isOk) // false
5.5 短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
1. 逻辑与
- 语法:表达式1 && 表达式2
- 如果第一个表达式的值为真,则返回表达式2
- 如果第一个表达式的值为假,则返回表达式1
2. 逻辑或
- 语法:表达式1 || 表达式2
- 如果第一个表达式的值为真,则返回表达式1
- 如果第一个表达式的值为假,则返回表达式2
console.log(123 || 456) // 123
console.log(0 || 456) // 456
console.log(123 || 456 || 789) // 123
6. 赋值运算符
概念:用来把数据赋值给变量的运算符
= | 直接赋值 | var usrName = '我是值'; |
+=、-= | 加、减一个 数 后再赋值 | var age = 10; age+=5; // 15 |
*=、/=、%= | 乘、除、取模 后再赋值 | var age = 2; age*=5; // 10 |
let age = 10
age += 5 // 相当于 age = age + 5
age -= 5 // 相当于 age = age - 5
age *= 10 // 相当于 age = age * 10
7. 运算符优先级
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
流程控制
1. 流程控制
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
2. 顺序流程结构
它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。
3. 分支流程控制 if 语句
3.1 分支结构
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
JS 语言中提供了两种分支结构语句
- if 语句
- switch 语句
3.2 if 语句
1. 语法结构
// 条件成立执行代码,否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个语句。
2. 执行流程
3.3 if else 语句(双分支语句)
1. 语法结构
// 条件成立 执行 if 里面代码,否则执行else里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码语句
} else {
// [否则] 执行的代码
}
2. 执行流程
3.4 if else if 语句(多分支语句)
1. 语法结构
// 适合于检查多种条件。
if (条件表达式1) {
语句1
} else if (条件表达式2) {
语句2
} else if (条件表达式3) {
语句3
...
} else {
// 上述条件都不成立执行此处代码
}
2. 执行流程
4. 三元表达式
三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式。
语法结构
// 条件表达式 ? 表达式1 : 表达式2
// 如果条件表达式结果为真 则返回 表达式1的值 ,如果条件表达式结果为假,则返回 表达式2的值
let num = 10
let result = num >= 5 ? '是的' : '不是的' // 表达式是有返回值的 返回是的
5. 分支流程控制 switch 语句
5.1 语法结构
switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项是,就可以使用 switch。
switch (表达式) {
case value1:
// 表达式 等于 valur1 时要执行的代码
break
case value2:
// 表达式 等于 valur2 时要执行的代码
break
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
注意事项
1. 我们开发里面,表达式我们经常写成变量
2. 我们 表达式 的值 和 case 里面的值相匹配的时候是 全等,必须是值和数据类型一致才可以
3. break 如果当前的case里面没有break,则不会退出switch,会继续执行下一个case
5.2 switch 语句和 if else if 语句的区别
- 一般情况下,它们两个语句可以相互替换
- switch...case 语句通常处理case为比较确定值的情况,而 if...else...语句更加灵活,常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而 if...else 语句有几种条件,就得判断多少次。
- 当分支比较少时,if...else 语句的执行效率比 switch 语句高。
- 当分支比较多时,switch 语句的执行效率比较高,而且结构更清晰。
流程控制-循环
1. 循环
循环的目的:可以重复执行某些代码
在 JS 中,主要有三种类型的循环语句:
- for 循环
- while 循环
- do...while 循环
2. for 循环
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句。
2.1 语法结构
for 循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
}
// 1. 初始化变量 就是用let 声明的一个普通变量,通常用于作为计数器使用
// 2. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 3. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
for (let i = 1; i <= 100; i++) {
console.log('你好')
}
3. 双重 for 循环
3.1 双重 for 循环概述
很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形、打印一个倒直角三角形等,此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在 for 循环语句中,可以再嵌套一个 for 循环,这样的 for 循环语句我们称之为双重for循环。
3.2 语法结构
for (外层初始化变量; 外层条件表达式; 外层操作表达式) {
// 执行语句;
for (里层的初始化变量; 里层条件表达式; 里层操作表达式) {
// 执行语句;
}
// 1. 可以把里面的循环看做是外层循环的语句
// 2. 外层循环一次,里面的循环执行全部
4. wihile 循环
while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,知道表达式不为真时结束循环。
当条件表达式为true,则执行循环体,否则退出循环。
语法结构
while (条件表达式) {
// 循环体
}
5. do wihile 循环
do...while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
语法结构
do {
// 循环体代码 —— 条件表达式为 true 时重复执行循环体代码
} while (条件表达式)
注意:先执行循环体,再判断,do...while循环语句至少会执行一次循环体代码
6. continue break
6.1 continue 关键字
continue 关键字用于立即跳出本次循环,继续下一次循环。
代码实现:
// continue 关键字 退出本次(当前次数的循环) 继续执行剩余次数循环
for (let i = 1; i <= 5; i++) {
if (i == 3) {
continue // continue退出本次循环 直接跳到 i++
}
console.log(i) // 输出 1 2 4 5
}
6.2 break 关键字
break 关键字用于立即跳出整个循环(循环结束)。
代码实现:
for (let i = 1; i <= 5; i++) {
if (i == 3) {
break // break 退出个循环
}
console.log(i) // 输出 1 2
}
数组
1. 数组的概念
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
// 普通变量一次只能存储一个值
let num = 10
// 数组一次可以存储多个值
let arr = [1,2,3,4,5]
2. 创建数组
2.1 数组的创建方式
JS 中创建数组有两种方式:
- 利用 new 创建数组
- 利用数组字面量创建数组
2.2 利用 new 创建数组
let 数组名 = new Array()
let arr = new Array() // 创建一个新的数组
2.3 利用数组字面量创建数组
// 1. 使用数组字面量方式创建空的数组
let 数组名 = []
// 2. 使用数组字面量方式创建带初始值的数组
let 数组名 = ['小白', '小黑', '大黄']
- 数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
2.4 数组元素的类型
数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。
let arrStus = ['小白', 12, true, 1.1]
3. 获取数组中的元素
3.1 数组的索引
索引(下标):用来访问数组元素的序号(数组下标从0开始)。
let arr = ['小白', '小黑', '大黄'] // 对应着索引号:0,1,2
数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过 “数组名[索引]” 的形式来获取数组中的元素。
这里的访问就是获取得到的意思
// 定义数组
let arrStus = [1, 2, 3]
// 获取数组中第二个元素
alert(arrStus[1])
4. 遍历数组
遍历:就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。
let arr = ['red', 'green', 'blue']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// i 是计数器,当索引号使用,arr[i] 是第 i 个数组元素
5. 数组中新增元素
以通过修改 length长度 以及 索引号 添加数组元素
5.1 通过修改 length 长度新增数组元素
- 可以通过修改 length 长度来实现数组扩容的目的
- length 属性是可读写的
let arr = ['red', 'green', 'blue']
arr.length = 5 // 把数组长度修改为5,里面应该有5个元素
console.log(arr)
console.log(arr[3])
console.log(arr[4])
其中索引号是3,4的空间没有给值,就是声明变量为给值,默认值就是 undefined。
函数
1. 函数的概念
函数:就是封装了一段可被调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2. 函数的使用
函数在使用时分为两步:声明函数和调用函数。
2.1 声明函数
// 声明函数
function 函数名() {
// 函数体代码
}
- function 是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的,所以通常我们将函数名命名为动词,比如 getSum
2.2 调用函数
// 调用函数
函数名() // 通过调用函数名来执行函数体代码
- 调用的时候不要忘记添加小括号
- 口诀:函数不调用,自己不执
注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
3. 函数的参数
3.1 形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
参数 | 说明 |
---|---|
形参 | 形式上的参数,函数定义的时候传递的参数,当前并不知道是什么 |
实参 | 实际上的参数,函数调用的时候传递的参数,实参是传递给形参的 |
参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
3.2 函数形参和实参个数不匹配问题
参数个数 | 说明 |
---|---|
实参个数等于形参个数 | 输出正确结果 |
实参个数多于形参个数 | 只取到形参的个数 |
实参个数小于形参个数 | 多的形参定义为undefined,结果为NaN |
function getSum(num1, num2) {
console.log(num1 + num2)
}
getSum(1, 2) // 3 实参个数等于形参个数 正常输出结果
getSum(1, 2, 3) // 3 实参个数多于形参个数 会取到形参的个数
getSum(1) // NaN 实参个数小于形参个数 多余的形参定义为undefined 最终的结果就是 NaN
注意:在JavaScript中,形参的默认值是undefined。
4. 函数的返回值
4.1 return 语句
function 函数名() {
return 需要返回的结果
}
函数名()
- 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名(),通过 return 实现的。
- 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果。
4.2 return 终止函数
return 语句之后的代码不被执行。
function getSum(num1, num2) {
return num1 + num2 // return 后面的代码不执行
alert('不会执行')
}
console.log(getSum(1, 2))
4.3 return 的返回值
return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。
function fn(num1, num2) {
return num1, num2
}
console.log(fn(1, 2)) // 2
4.4 函数没有 return 返回 undefined
函数都是有返回值的
- 如果有return则返回return后面的值
- 如果没有return则返回undefined
5. arguments 的使用
当我们不确定有多少个参数传递的时候,可以用 arguments 来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。 所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
arguments 展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push,pop 等方法
对象
1. 对象
1. 1 什么是对象?
现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书一辆汽车、一个人可以是“对象”,一个数据库、一张网页、 一个与远程服务器的连接也可以是 “对象”。
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
2. 创建对象的三种方式
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):
- 利用字面量创建对象
- 利用 new Object 创建对象
- 利用构造函数创建对象
2.1 利用字面量创建对象
对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
{ } 里面采取键值对的形式表示
- 键:相当于属性名
- 值:相当于属性值,可以是任意类型的值
let obj = {
uname: '张三',
age: 18,
sex: '男',
sayHi: function() {
console.log('你好')
}
}
对象的调用
- 对象里面的属性调用:对象.属性名 ,这个小点 . 就理解为 “的”
- 对象里面属性的另一种调用方式:对象[ '属性名' ] ,注意花括号里面的属性必须加引号
- 对象里面的方法调用:对象.方法名() ,方法名后面必须加括号
console.log(obj.uname) // 调用名字属性
console.log(obj['age']) // 调用名字属性
obj.sayHi() // 调用 sayHi 方法属性,后面必须加括号
2.2 利用 new Object 创建对象
let obj = new Object()
obj.uname = '张三'
obj.age = 18
obj.sex = '男'
obj.sayHi = function() {
console.log('hi')
}
// 利号用等赋值的方法 添加对象的属性和方法
2.3 利用构造函数创建对象
构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起构造函数使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
function 构造函数名() {
this.属性 = 值
this.方法 = function() {}
}
new 构造函数名()
- 构造函数名字首字母大写
- 构造函数不需要 return 就可以返回结果
- 调用构造函数必须使用 new
- 属性和方法前面必须添加 this
3. new 关键字
new 在执行时会做四件事情:
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码,给这个新对象添加属性和方法。
- 返回这个新对象(所以构造函数里面不需要return)。
4. 遍历对象
for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象) {
// 代码块
}
for (let k in obj) {
console.log(k); // k 变量 得到是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值
}
小结
- 对象可以让代码结构更清晰。
- 对象复杂数据类型object。
- 本质:对象就是一组无序的相关属性和方法的集合。
- 构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
- 对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。
- for...in语句用于对对象的属性进行循环操作。
持续更新中 —— 8-15