JavaScript基础语法3（函数+对象）

学习使我快乐01

于 2024-09-02 22:17:05 发布

阅读量444

点赞数 14

分类专栏： JavaScript入门到进阶文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_72043867/article/details/141831779

版权

JavaScript入门到进阶专栏收录该内容

3 篇文章 0 订阅

订阅专栏

三、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:绝对值