JavaScript基础 —— 学习第四天（完结）-CSDN博客

本文链接：https://blog.csdn.net/qq_63342197/article/details/136778431

本文详细介绍了JavaScript中的对象概念，包括其定义、语法、属性操作（增删改查）、方法调用以及数组和对象的使用。还涵盖了基本数据类型和引用数据类型的区分，以及如何在HTML中应用这些知识进行DOM操作和渲染表格。

摘要由CSDN通过智能技术生成

一、对象

（一）对象介绍

对象：object 是 JavaScript 里面的一种数据类型可以看作一种无序的数据的集合

可以详细的描述某个事物 null 是空对象

对象是由属性和方法组成的

属性：手机特征大小颜色什么的

方法：能进行的一些行为手机打电话

<body>
  <script>
   let 对象名 = {
    属性名: 属性值, （属性名最好不要叫做name）
    方法名: 函数
   }
  </script>
</body>

（二）对象语法

第一种语法用大括号去定义

<body>
  <script>
   let 对象名 = {}
  </script>
</body>

第二种语法（先了解）

<body>
  <script>
   let 对象名 = new Object()
  </script>
</body>

（三）属性

属性之间用逗号分隔开属性冒号接具体的属性值

建立一个有很多属性的对象：

<body>
  <script>
    let goods = {
      goodsname: '臭豆腐',
      num: '123',
      weight: '18kg',
      address: '小区里'
    }
    console.log(goods)
  </script>
</body>

1.对象属性的增删改查

查

查找对象的某个属性

对象名.对象的属性名

<body>
  <script>
    let goods = {
      goodsname: '臭豆腐',
      num: '123',
      weight: '18kg',
      address: '小区里'
    }
    console.log(goods.address)
  </script>
</body>

第二种特殊情况：如果想起什么-什么的属性名就得加上引号变成字符串类型的，如果对象里面的属性值是字符串类型的，可以用第二种形式的书写方式。

对象名['类名'] 必须加引号

<body>
  <script>
    let goods = {
     'goods-name': '臭豆腐',
      num: '123',
      weight: '18kg',
      address: '小区里'
    }  
    console.log(goods['goods-name'])
  </script>
</body>

改

更改对象的属性值

对象名.要改的属性值 = 新的属性值

<body>
  <script>
    let goods = {
      goodsname: '臭豆腐',
      num: '123',
      weight: '18kg',
      address: '小区里'
    }
    goods.address = '中央大街'
    console.log(goods.address)
  </script>
</body>

增

往对象中增加新的属性

对象名.新属性 = 新值

<body>
  <script>
    let goods = {
      goodsname: '臭豆腐',
      num: '123',
      weight: '18kg',
      address: '小区里'
    }
    goods.value = '100万'
    console.log(goods.value)
  </script>
</body>

删（了解即可）

删除对象的属性

delete 对象名.要删的属性

<body>
  <script>
    let goods = {
      goodsname: '臭豆腐',
      num: '123',
      weight: '18kg',
      address: '小区里'
    }
    delete goods.value
    console.log(goods.value)
  </script>
</body>

（四）方法

1.方法介绍

数据行为性的信息一些动作本质是函数

就是在对象里面的函数在对象里面叫方法在对象外面叫函数

2.调用方法

对象名.方法名()

document.write() 就是典型的调用方法

<body>
  <script>
    let goods = {
      goodsname: '臭豆腐',
      eat: function () {
        console.log('好吃')
      }
    }
    goods.eat()
  </script>
</body>

（五）遍历对象

对象里面数据是无序的所以不能用前面的 for 循环来写遍历输出了

我们要用一种新的 for 循环

1.for 新语法

下面代码能打印出数组的下标是字符串格式的所以很少用来遍历数组经常用来遍历对象

k 是键值的意思 key 也可以换成别的字母但是这样专业一点

<body>
  <script>
  let arr = ['red', 'blue', 'yellow']
  for(let k in arr) {
    console.log(k)
  }
  </script>
</body>

2.for 遍历对象

下面代码 k 打印出的是对象中的属性 ’uname‘ ’age‘ ’gender‘ 这些且是字符串类型

<body>
  <script>
  let obj = {
    uname: '一个人',
    age: 18,
    gender: '男'
  }
  for(let k in obj){
    console.log(k)
  }
  </script>
</body>

重点：

for 遍历打印 obj 中属性的值的语法很重要不能用 obj.k 虽然k是下标但是 k 是字符串类型的变量就是 'uname' 'age' 'gender' 而obj.属性名属性名必须是不是字符串的形式，所以我们得用另一种形式的针对字符串的调用输出方式就是上面的 obj['属性名']，而k本来就是字符串我们直接就写 obj[k] 就能成功调用实现遍历。

（六）数组对象

数组类型的对象

用数组的 [ ] 中括号包含对象的大括号就能定义成功

<body>
  <script>
    let obj = [
      { uname: '张三', age: 18, gender: '男' },
      { uname: '李四', age: 58, gender: '男' },
      { uname: '王五', age: 18, gender: '男' },
      { uname: '陈六', age: 19, gender: '女' }
    ]
  </script>
</body>

三种打印方式：能打印出我们想要的元素

<body>
  <script>
    let obj = [
      { uname: '张三', age: 18, gender: '男' },
      { uname: '李四', age: 58, gender: '男' },
      { uname: '王五', age: 18, gender: '男' },
      { uname: '陈六', age: 19, gender: '女' }
    ]
    for(let i = 0;i < obj.length;i++)
    {
      console.log(i)             打印索引号
      console.log(obj[i])        打印每个对象
      console.log(obj[i].uname)  打印每个对象的名字
    }
  </script>
</body>

（七）内置对象

JavaScript 内部给我们规定好的对象

例如 document.write()

1.内置对象 - math

数学对象

调用属性：调用PI

math.PI

调用方法：

math.cell(参数) 向上取整

math.floor(参数) 向下取整和passInt() 很像但是passInt() 里面能放字符串能

math.round(参数) 四舍五入

math.max(参数，参数。。。)

math.min(参数，参数。。。)

math.abs(参数) 求绝对值

随机数

math.random() 返回一个 [0, 1] 间的小数

在数组中随机选取一个数

<body>
  <script>
    let arr = ['red', 'green', 'blue']
    let random = Math.floor(Math.random() * arr.length)  
    console.log(arr[random])
  </script>
</body>

生成 N - M 之间的数

Math.floor(Math.random() * (M - N + 1)) + N

<body>
  <script>
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let a = getRandom(1, 10)
    console.log(a)
  </script>
</body>

二、一些专业知识

1.关键字

有特殊意义的词汇比如 let var function if else 等

2.保留字

目前没意义但可能未来会有意义 int short long char

3.标识符

变量名函数的另一种叫法

4.表达式

一些式子配合运算符出现 1 + 1

5.语句

可执行的代码

6.基本数据类型和引用数据类型：

基本数据类型：简单类型 string number Boolean undefined 储存的是值主要存放在栈中

直接把值存到栈中

引用数据类型：复杂数据类型通过 new 创建的对象 object array date 都是引用类型存的是地址

主要存在堆中，它们是把地址存到栈中然后把数值存到堆去

练习：渲染表格

将数组对象内的信息渲染到页面表格中。

结果展示：

代码部分：

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    table {
      border-collapse: collapse;
    }
    th,
    td {
      border: 1px solid gray;
      padding: 10px 20px;
      border-collapse: collapse;
      text-align: center;
    }

    tr:hover {
      background-color: antiquewhite;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <script>
      let student = [
        { uname: '张三', age: 18, gender: '男' },
        { uname: '李四', age: 58, gender: '男' },
        { uname: '王五', age: 18, gender: '男' },
        { uname: '陈六', age: 19, gender: '女' }
      ]

      for (let i = 0; i < student.length; i++) {
        document.write(`
         <tr>
            <td>${i + 1}</td>
            <td>${student[i].uname}</td>
            <td>${student[i].age}</td>
            <td>${student[i].gender}</td>
          </tr>
        `)
      }
    </script>
  </table>

</body>


</html>

练习：猜数字

结果展示：

代码部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

<body>
  <script>
    random = Math.floor(Math.random() * 10) + 1
    while (1) {
      let x = +prompt('请猜测这个数字')
      if (random === x) {
        alert('猜对啦 厉害！！！')
        break
      }
      else if (x > random) {
        alert('有点儿大')
        continue
      }
      else {
        alert('有点儿小')
        continue
      }
    }
    console.log(random)
  </script>
</body>


<ml>