首页 > 其他分享 >前端学习笔记-JS篇-05

前端学习笔记-JS篇-05

时间：2024-08-21 13:29:23浏览次数：14  
标签：05 对象 gender age 笔记 JS person let 属性

对象

什么是对象

对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合， 注意数组是有序的数据集合，用来描述某个事物

例如描述一个人：人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能；如果用多个变量保存则比较散，用对象比较统一。

比如描述 班主任 信息： 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示；动态行为 (点名, 唱, 跳, rap) => 使用函数表示。

1. 对象是什么？

对象是一种数据类型；无序的数据的集合

2. 对象有什么特点？

无序的数据的集合；可以详细的描述描述某个事物

对象使用

对象声明语法：let 对象名 = {}        let 对象名 = new object（）

例如：

let person = {}

实际开发中，很多使用的都是花括号{}，{}是对象字面量

对象有属性和方法组成

属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…

方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏...

let 对象名 = {
    属性名：属性值，
    方法名：函数
}

属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。对象属性没有顺序。

  • 属性都是成对出现的，包括属性名和值，它们之间使用英文:分隔
  • 多个属性之间使用英文 , 分隔
  • 属性就是依附在对象上的变量（外面是变量，对象内是属性）
  • 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
let obj = {
    uname :'pink老师,
    age: 18，
    gender:'女’
}

对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法：

解释使用方式
查查询对象对象.属性
改重新赋值对象.属性=值
增对象添加新的数据对象名.新属性名 = 新值
删删除对象中属性delete 对象名.属性名

查

声明对象，并添加了若干属性后，可以使用 . 获得对象中属性对应的值，可称之为属性访问。

语法：对象名.属性 【简单理解就是获得对象里面的属性值】

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
console.log(person.uname)
console.log(person.age)
console.log(person.gender)

查的另外一种写法 

对于多词属性或则 - 等属性，点操作就不能用了。

可以采取： 对象[‘属性’] 方式， 单引号和双引号都阔以

1.对象[‘属性’] 方式， 单引号和双引号都阔以

2.也可以用于其他正常属性，比如：

let person ={
    user-name':'pink老师'，
    age: 18,
    gender:'女'，
}
console.log(person['user-name'])//pink老师
console.log(person['age'])// 18

3.[]语法里面的值如果不添加引号 默认会当成变量解析

总结： 没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [] 语法

改

语法：对象名.属性 = 新值

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
person.gender = '男'
console.log(person.gender)//修改性别为男
console.log(person)

增

语法：对象名.新属性 = 新值

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
person.address = '中国北京'
console.log(person)

删

语法：delete 对象名.属性

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
delete person.gender//删除性别属性
console.log(person)

改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改

对象中的方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

let person = {
    name :'andy',
    sayHi: function(){
        document.write('hi~~')
    }
}

1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔

2. 多个属性之间使用英文 , 分隔

3. 方法是依附在对象中的函数

4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

对象中的方法

声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，称之为方法调用。也可以添加形参和实参。

1. 对象访问方法是如何实现的？

  • 对象.方法()
  • person.sayHi()

2. 对象方法可以传递参数吗？

  • 可以，跟函数使用方法基本一致

遍历对象

for 遍历对象的问题：

  • 对象没有像数组一样的length属性,所以无法确定长度
  • 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

  • 一般不用这种方式遍历数组、主要是用来遍历对象
  • for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
  • 由于 k 是变量, 所以必须使用 [ ] 语法解析
  • 一定记住： k 是获得对象的属性名， 对象名[k] 是获得属性值

1. 遍历对象用那个语句？

  • for in

2. 遍历对象中, for k in obj,获得对象属性是那个，获得值是那个？

  • 获得对象属性是 k
  • 获得对象值是 obj[k]

案例

需求：请把下面数据中的对象打印出来：

// 定义一个存储了若干学生信息的数组

let students = [

{name: '小明', age: 18, gender: '男', hometown: '河北省'},

{name: '小红', age: 19, gender: '女', hometown: '河南省'},

{name: '小刚', age: 17, gender: '男', hometown: '山西省'},

{name: '小丽', age: 18, gender: '女', hometown: '山东省'}

]

需求：根据以上数据渲染生成表格

<!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>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>
    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <!-- script写到这里 -->
        <script>
            // 1. 数据准备
            let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
                { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
            ]
            // 2. 渲染页面
            for (let i = 0; i < students.length; i++) {
                document.write(`
                <tr>
                    <td>${i + 1}</td>
                    <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>

内置对象

内置对象是什么？

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math

介绍：Math对象是JavaScript提供的一个“数学”对象

作用：提供了一系列做数学运算的方法

Math对象包含的方法有：

如何生成0-10的随机数呢？  Math.floor(Math.random() * (10 + 1))

如何生成5-10的随机数？     Math.floor(Math.random() * (5 + 1)) + 5

如何生成N-M之间的随机数  Math.floor(Math.random() * (M - N + 1)) + N

随机点名案例

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是不允许重复显示

分析： ①：利用随机函数随机生成一个数字作为索引号 ②：数组[随机数] 生成到页面中 ③：数组中删除刚才抽中的索引号 

<body>
  <script>
    let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    // 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
    let random = Math.floor(Math.random() * arr.length)
    // 2. 页面输出数组里面的元素 
    document.write(arr[random])
    // 3. splice(起始位置(下标), 删除几个元素)
    arr.splice(random, 1)
    console.log(arr)
  </script>
</body>

 猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字

  • ①：如果大于该数字，就提示，数字猜大了，继续猜
  • ②：如果小于该数字，就提示，数字猜小了，继续猜
  • ③：如果猜对了，就提示猜对了，程序结束
<body>
  <script>
    // 1. 随机生成一个数字 1~10
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    console.log(random)
    // 需要不断的循环
    while (true) {
      // 2. 用户输入一个值
      let num = +prompt('请输入你猜的数字:')
      // 3. 判断输出
      if (num > random) {
        alert('您猜大了')
      } else if (num < random) {
        alert('您猜小了')
      } else {
        alert('猜对啦，真厉害')
        break  // 退出循环
      }
    }
  </script>
</body>

Math - JavaScript | MDN (mozilla.org)

拓展

术语解释

术语解释举例
关键字在JavaScript中有特殊意义的词汇let、var、function、if、else、 switch、case、break
保留字在目前的JavaScript中没意义，但未 来可能会具有特殊意义的词汇int、short、long、char
标识（标识符）变量名、函数名的另一种叫法无
表达式能产生值的代码，一般配合运算符出 现10 + 3、age >= 18
语句一段可执行的代码If () for(）

基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的 栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面

 1. 简单类型的内存分配

  • 值类型（简单数据类型）： string ，number，boolean，undefined，null l
  • 值类型变量的数据直接存放在变量（栈空间）中

 2.复杂类型的内存分配

  • 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
  • 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

 

标签：05,对象,gender,age,笔记,JS,person,let,属性
From： https://blog.csdn.net/Yvonne_hjj/article/details/141389113

相关文章

  • ssm物流信息管理系统+jsp
    文章目录目录文章目录论文目录项目介绍开发环境系统实现论文参考论文目录1绪论1.1 选题背景1.2选题意义1.3研究内容2 系统开发技术2.1MySQL数据库2.2IDEA简介2.3SSM框架2.4Vue框架3系统分析3.1可行性研究3.1.1经济可行性3.1.2......
  • JS获取位置、滚动条、尺寸的总结
    鼠标位置page：pageX、pageY，当前鼠标距离页面的横纵坐标client:clientX、clientY，鼠标相对于视口的坐标offset：offsetX、offsetY，鼠标相对于事件源padding-box的坐标screen:screenX、screenY，鼠标相对于屏幕x、y，等同于clientX、clientYmovement：movementX、movementY，只在鼠标......
  • Node.js 的 模块化
    Node.js中的模块Node.js遵循了CommonJS模块化规范，CommonJS规定了模块的特性和各模块之间如何相互依赖每个模块内部，module变量代表当前模块module变量是一个对象，它的exports属性（即module.exports）是对外的接口加载某个模块，其实是加载该模块的module.exports属性。r......
  • JSP基于SSM会议室预定系统7e5h3（程序+源码+数据库+调试部署+开发环境）
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容一、研究背景与意义随着企业规模的不断扩大和会议活动的日益频繁，会议室资源的管理与预定成为了一个亟待解决的问题。传统的手工管理方式不仅效率低......
  • JSP基于ssm的二手手机商城rk2i3程序+源码+数据库+调试部署+开发环境
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表技术要求:开发语言：JSP前端使用:HTML5，CSS，JSP动态网页技术后端使用SpringBoot，Spring技术主数据库使用MySQL开题报告内容一、项目背景与意义随着科技的快速......
  • JSP基于servlet技术实现游戏娱乐平台55c2v
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表技术要求:开发语言：JSP前端使用:HTML5，CSS，JSP动态网页技术后端使用SpringBoot，Spring技术主数据库使用MySQL开题报告内容一、项目背景随着互联网技术的飞速......
  • JSP基于JSP的新闻发布及管理系统51u85--（程序+源码+数据库+调试部署+开发环境）
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表技术要求:开发语言：JSP前端使用:HTML5，CSS，JSP动态网页技术后端使用SpringBoot，Spring技术主数据库使用MySQL开题报告内容一、项目背景与意义在信息爆炸的时......
  • 2024-08-21 关于vue3中使用emit的一些笔记
    问题1：emitisnotdefinedwatch(()=>content.value,(val)=>{emit('input',val);});原因：直接使用了未定义的emit导致报错。解决方案：使用vue3中的defineEmits函数定义一个可以定义触发的函数，比如constemit=defineEmits(['input']);此处的emit只是一个变量，你可......
  • 随机森林学习笔记概述
    随机森林（RandomForest）是一种集成学习方法，它通过构建多个决策树并将它们的预测结果进行投票或平均来提高预测性能。随机森林在许多实际应用中表现出了很好的性能，尤其是在分类和回归问题上。以下是关于随机森林的一些学习笔记概述：1.基本概念  集成学习：通过组合多个弱学习......
  • 783java jsp SSM校园兼职管理系统（源码+文档+开题+运行视频+讲解视频）
      项目技术：SSM+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境：Tomcat7.x,8.x,9.x版本均可4.硬件环境：windows7/8......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99