三、JavaScript基础第三天(函数+对象)
1.函数
-
函数的使用
-
函数声明
function 函数名(){ 函数体 }
-
函数名命名规范:
- 与变量命名基本规范一直
- 尽量使用小驼峰式命名法
- 前缀尽量为动词
-
函数调用:函数名()
-
-
函数传参
function 函数名(参数列表){ 函数体 }
- 形参:声明函数时写在函数名小括号里的参数,参数不用声明
- 实参:调用函数时写在函数名小括号里的参数,实参可以为变量
- 函数传参设置默认值(防止出现结果为NaN的情况出现,使函数更严谨)
-
函数返回值
- return 数据
- 返回多个数据:使用数组
-
作用域:程序中名字的可用性的代码范围
- 全局作用域:整个script内部/整个js文件代码环境
- 全局变量:函数外部let的变量,在整个全局作用域中使用
- 局部作用域:函数内的代码环境
- 局部变量:函数内部let的变量,只能在函数内部使用
注意:在局部作用域中没有声明,直接赋值当做全局变量来看,但不推荐这样写
-
变量访问原则:先访问当前作用域,若没有则向上一层作用域查找——就近原则
-
匿名函数:
- 没有名字的函数,不能直接使用,使用方法如下两种:
- 函数表达式:
let fn = function(){ 函数体 } fn()
- 立即执行函数——避免全局变量的污染
- 结尾必须加分号,且结尾的小括号是实参,中间的小括号是形参
<script> //第一种写法: (function (形参) { let num = 10 })(实参); (function (形参) { let num = 20 })(实参); //第二种写法: (function(形参){函数体}(实参)) </script>
- 匿名函数与具名函数区别:具名函数的调用可以写到任何位置,但匿名函数必须先写表达式后调用
2.对象
-
对象的定义——是一种数据类型,是无序的数据集合,描述某个事物
-
对象的使用:
-
对象声明:
let 对象名 = {} | let 对象名 = new Object()
-
对象由属性和方法组成
- 属性:信息或特征(名词)
- 方法:功能或行为(动词)
let person = { uname: '小明', age: 18, gender: '女', sing: function () { console.log('如果可以') } }
- 对象使用——增删查改
- 查:对象名.属性名 | 对象名[ ‘ 属性名 ’ ](属性名为字符串时使用,通常在遍历对象时使用)
- 增:对象名.新属性名=新属性值
- 改:对象名.属性名=属性值
- 删:delete 对象名.属性名
-
-
遍历对象——输出对象中所有元素
-
使用 for in
let person = { uname: '小明', age: 18, gender: '女', sing: function () { console.log('如果可以') } } for (let k in person) { console.log(k) console.log(person[k]) }
-
案例:渲染学生信息表格
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap.min.css"> <title>Document</title> </head> <body> <table class="table"> <tr> <th scope="col">序号</th> <th scope="col">姓名</th> <th scope="col">年龄</th> <th scope="col">性别</th> <th scope="col">家乡</th> </tr> <script> let students = [ { name: '小红', age: 18, gender: '女', hometown: '陕西省' }, { name: '小明', age: 19, gender: '男', hometown: '北京市' }, { name: '小王', age: 20, gender: '女', hometown: '云南省' }, { name: '小李', age: 21, gender: '女', hometown: '河北省' } ] for (let i = 0; i < students.length; i++) { document.write(` <tr> <th scope="row">${i + 1}</th> <td>${students[i].name}</td> <td>${students[i].age}</td> <td>${students[i].gender}</td> <td>${students[i].hometown}</td> </tr> `) } </script> </table> </body> </html>
-
-
内置对象——调用JS内部准备好的对象
-
Math对象(其余内置属性与方法可以在mdn网站查询)
- random:生成0-1之间的随机数(不包含1)
console.log(Math.floor((10 + 1) * Math.random())) //0-10之间的随机数 let arr = ['red', 'green', 'blue'] let random = Math.floor(Math.random() * 3) console.log(random) console.log(arr[random])
取N-M之间的随机数:Math.random()*(M-N+1)+N
- ceil:向上取整
- floor:向下取整
- max:找最大数
- min:找最小数
- pow:幂运算
- abs:绝对值
-