目录
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️⃣堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，引用数据类型存放在堆里面
979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
