目录
1.函数
1.1函数声明
函数:被设定为执行特定任务的代码块
作用:实现代码复用,提高开发效率
函数声明语法:
function 函数名() {
函数体
}
函数名命名规范:
- 和变量名基本一致
- 尽量采用小驼峰命名法
- 前缀应该为动词
命名建议:常用动词约定
1.2函数调用
调用语法:
函数名()
📖Note:
- 声明的函数必须调用才会真正的执行
- 声明一次,可以进行多次调用
1.3函数传参
根据声明参数列表,传入数据列表
声明这个函数需要传入的数据(多个数据用逗号隔开),调用时传递对应个数的参数
1.4形参和实参
形参:声明函数时写在函数名右边小括号里的参数
实参:调用函数时写在函数名右边小括号里的参数
尽量保持形参和实参个数一致
逻辑中断的应用,形参如果不被赋值,就是undefined
实参个数小于形参个数:返回NaN
实参个数大于形参个数:伪数组
函数传参:
缺省值传参,形参可以看作是函数内部的局部变量
1.5函数的返回值
执行完特定任务(函数)后,把任务的结果返回给调用者
关键字:return
📖Note:
- 函数不一定都需要返回值,如alert()函数
函数名太长的简便写法
📖Note:
- 函数内部只能有一个返回值,return之后后面的代码不会执行
- 函数可以没有return,这种情况下默认返回值为undefined
return返回多个值:数组
1.6作用域
一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性代码范围就是这个名字的作用域
- 全局作用域:作用于所有代码执行的环境(整个script标签内部)或者一个独立的js文件
- 局部作用域:作用于函数内的代码环境,就是局部作用域,一般指的是函数的作用域
- 块级作用域:块作用域由{}限定
在JS中,根据作用域的不同,变量可以分为:
- 全局变量:函数外部定义的变量,在任何区域都可以访问
- 局部变量:函数内部定义的变量,只能在当前函数内部访问和修改
- 块级变量:{}内部定义的变量,只能在块作用域内访问
变量的特殊情况:
- 如果一个变量在函数内部或者在块级作用域内部,变量没有声明,直接赋值,也可以当作全局变量,但不推荐这样的写法
- 函数内部的形参可以看作是局部变量
不同作用域下,可能存在变量命名冲突的情况
变量的访问原则:作用域链
根据内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
查找原则:先在局部域查找,再去全局域查找,都没有则报错,遵循就近原则
1.7匿名函数
将匿名函数赋值给一个变量,并且通过变量名称进行调用,我们将这个称为函数表达式
语法:
let fun = function() {
函数体
}
在webAPI中大量使用
1.8立即执行函数
立即执行函数:无需调用,立即执行
语法:
- (function ( ) { 函数体 }) ();
- (function ( ) { 函数体 } () );
使用场景:避免全局变量之间的污染
多个立即执行函数之必须以分号隔开,要不然会报错
案例:时间转换
计算公式:
小时:h = parseInt(总秒数/60/60%24)
分钟:m = parseInt(总秒数/60%60)
秒:s = parseInt(总秒数%60)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 输入
let second = +prompt('请输入秒数:')
// 转换
function getTimes(seccond) {
let h = parseInt(second / 60 / 60 % 24)
let m = parseInt(second / 60 % 60)
let s = parseInt(second % 60)
// 补0
h < 10 ? '0' + h : h
m < 10 ? '0' + m : m
s < 10 ? '0' + s : s
// 返回
return [h, m, s]
}
// 输出
let arr = getTimes(second)
document.write(`
${second}秒的转换结果是:
${arr[0]}时${arr[1]}分${arr[2]}秒
`)
</script>
</body>
</html>
2.对象
2.1对象的属性和方法
对象:JS中的一种数据类型
可以理解为一种无序的数据集合,用来详细的描述某个事或物的特征
对象声明语法:
- let 对象名 = { }
对象由属性和方法组成:
1️⃣属性:数据描述性的信息
- 属性都是成对出现的,包括属性名和属性值,它们之间用英文冒号 : 分隔
- 多个属性之间使用英文 , 分隔
- 属性就是依附在对象上的变量(外面是变量,对象内是属性)
- 属性名可以使用""或'',一般情况下省略,名称中有特殊符号时不能省略
2️⃣方法:功能或行为
let 对象名 = {
属性名:属性值,
方法名:函数
}
📖Note:
- 方法是由方法名和函数两部分构成,它们之间使用 :分隔
- 多个方法之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用""或'',一般情况下省略,名称中有特殊符号时不能省略
2.1属性访问
属性访问:
声明对象,并添加了若干属性后可以使用 . 或 [ ] 获得对象中属性对应的值
访问方法:
2.2操作对象:
查:
- 对象.属性 或 对象['属性']
- 对象.方法()
改:
- 对象.属性 = 值
- 对象.方法() = function() { }
增:
- 对象名.新属性名 = 新值
删:
- delete 对象名.属性名
2.3遍历对象
对象没有length属性,且对象里面存储的是无序的键值对,不能像数组一样遍历
遍历对象:
let obj = {
uname = '张三',
age = 18,
sex = '男'
}
//for in语法遍历对象
for (let k in obj) {
console.log(k) //打印属性名
console.log(obj[k]) //
}
📖Note:
- k是个变量,存储的是字符串型的uname,age,sex
- k === 'uname' ==='age' ==='sex'
3.数组对象
数组中可以存放对象
学生信息表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
/* 除了第一个孩子外 设置样式 */
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<script>
let students = [
{uname: '张三', age: 18, gender: '男', hometown: '陕西省'},
{uname: '李四', age: 19, gender: '女', hometown: '陕西省'},
{uname: '王五', age: 20, gender: '女', hometown: '陕西省'},
{uname: '任六', age: 18, gender: '男', hometown: '陕西省'}
]
// 表格的头
document.write(`
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
`)
// 中间数据
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<td>${i + 1}</td>
<td>${students[i].uname}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>
`)
}
// 表格的尾
document.write(`
</table>
`)
</script>
</body>
</html>
4.内置对象
JS内部提供的对象,包含各种属性和方法给开发者调用
如:document.write()
4.1内置对象Math
提供一系列数学运算的方法:
random:生成0~1之间的随机数(包括0但不包含1)
ceil:向上取整
floor:向下取整
max:找最大数
min:找最小数
pow:幂运算
abs:绝对值
.... .....
Math对象方法文档:Math - JavaScript | MDN (mozilla.org)
4.2随机数生成函数
生成N~M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N
4.3基本数据类型和引用数据类型
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型
值类型:简单数据类型/基本数据类型,在存储变量中存储的是值本身,因此叫做值类型,如string,number,boolean,undefined,null
引用类型:复杂数据类型,在存储变量中存储的仅仅是地址(引用),因此叫做引用数据类型,通过new关键字创建的对象(系统对象,自定义对象),如Object,Array,Date
堆栈空间分配区别:
1️⃣栈(操作系统):由操作系统自动分配释放存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈,简单数据类型存放在栈里面
2️⃣堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收,引用数据类型存放在堆里面