JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象
2024-06-11 19:34:00
red
red
1、什么是对象？
对象是JavaScript 里的一种数据类型；可以理解为是一种无序的数据集合；用来描述某个事物,例如描述一个人信息
2、对象怎么声明？
let 对象名 = {}
例如：
//声明了一个person的对象
let person = {}
3、对象由哪几部分组成的？
属性和方法组成的。
```go
let 对象名 = {属性名 ：属性值,方法名：函数
}
4、对象访问属性有哪两种方式
对象.属性
对象['属性']
5、对象有顺序吗？
没有
6、两种对象方式有什么不同？
点后面的属性名一定不要加引号[]里面的属性名一定加引号
7、对象中的方法和属性有什么区别？
属性是静态的；方法是动态的
8、对象方法可以传递参数吗？
可以,跟函数使用方法基本一致。
操作对象
增删改查
查：直接 对象.属性
增 改 ：
会去对象里面找是否有 sex 这个属性,如果有则更新值修改；如果没有这个属性，就直接新增属性obj.sex = '男'
删：
//删除 了解
delete obj.uname
console.log(obj)
9、对象是如何声明和使用的？
1、用{}把一堆数据包起来2、多个属性和方法之间用逗号隔开3、console.log输出 方便查看对象里有哪些属性和方法
10、如何动态添加属性和方法？
1、对象如果有这个属性相当于重新赋值
2、对象如果没有这个属性相当于动态添加一个属性
遍历对象
1、对象没有像数组一元的length属性,所以无法确定长度
2、对象里面是无序的键值对,没有规律.不像数组里面有规律的下标。
let obj = {uname : 'andy',age : 18,sex : '男'
}
for (let k in obj) {console.log(k)//打印属性名console.log(obj[k]) //打印属性值
}
11、遍历 对象用哪个语句？
for in
12、遍历对象中, for k in obj,获得对象属性是哪个？活得值是哪个？
获得对象属性是k
获得值是 obj[k]
13、内置对象math？
math对象是JavaScript提供的一个对象
如：random:生成0-1之间的随机数(包含0不包含1)
ceil:向上取整
floor:向下取整
max:找最大数
min:找最小数
pow:幂运算
abs:绝对值
14、生成任意范围随机数？
1、如何生成0-10的随机数？Math.floor(Math.random()*(10+1))
2、如何生成5-10的随机数？Math.floor(Math.random()* (5+1)) +5
3、如何生成N-M之间的随机数？Math.floor(Math.random()* (M - N + 1))+N
**
15、之前用过的内置对象有
**
document.write()
console.log()
案例一 : 声明产品对象
// 声明产品对象let goods = {name: '小米10青春版',num: '100012816024',weight : '0.55kg',address : '中国大陆'}// 对象['属性名']document.write(goods['name']) // 对象.属性名document.write(`名字：${goods.name} ,产品号：${goods.num} 重量：${goods.weight} 产地:${goods.address}`)
案例二 调用方法名
let person = {uname : '刘',age : 18,sex: '男',//方法名:function(){}sayHi: function() {console.log('hi~')},mtv: function(s) {console.log(s)}}console.log(person.uname)//调用函数名person.sayHi()// 实参有内容，形参要传参person.mtv('无间道')
案例三 对象中的方法
//对象是有属性和方法组成的,那么属性和方法都要写在对象里面let dh = {// 属性uname : '刘',// 方法 方法名：function(){}sing: function() {console.log('唱歌')},dance: function(dance) {console.log(dance)}}//外部使用 对象.方法名()dh.sing()dh.dance('开心的马骝')
案例四 ： 对象中的增删改查
这是查 和改
let obj = {uname : '小明',age : 18}// 查 console.log(obj.age)//修改 对象.属性 = 新值obj.age = 82console.log(obj)
删和新增
//新增一个属性 js 可以非常方便的动态新增属性或者方法//会去对象里面找是否有 sex 这个属性,如果有则更新值修改；如果没有这个属性，就直接新增属性let obj = {uname : '小明',age : 18}obj.sex = '男'console.log(obj)obj.sing = function () {console.log('hi')}console.log(obj)//删除 了解delete obj.unameconsole.log(obj)
案例四 遍历对象
let obj = {uname: 'andy',age: 18,sex: '男'}// k是变量名字 这个可以随便起 obj 是对象名字for (let k in obj) {// console.log(k)//打印属性名// console.log(obj[k]) //打印属性值console.log(`${k}:${obj[k]}`) //打印属性名和属性值}
案例五： 对象案例 ； 静态值换成动态值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h2>学生信息</h2><p>将数据渲染到页面中...</p><!-- <table><caption>学生列表</caption><tr><td>序号</td><td>姓名</td><td>年龄</td><td>性别</td><td>家乡</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>2</td><td>小王</td><td>18</td><td>女</td><td>河南省</td></tr><tr><td>3</td><td>小段</td><td>21</td><td>男</td><td>河南省</td></tr><tr><td>4</td><td>小贺</td><td>21</td><td>女</td><td>新疆省</td></tr></table> --><script>//数组 里面可以放任何的数据类型// let arr = [1,'pink',true,undefined,null,{},[]]// console.log(arr)let students = [{ name: '椋焜', age: '18', gender: '男', hometown: '河北省' },{ name: '椋琪', age: '17', gender: '女', hometown: '河南省' },{ name: '英达', age: '18', gender: '男', hometown: '河南省' },{ name: '老鹰', age: '21', gender: '男', hometown: '新疆省' },]// //循环遍历整个对象// for(let i = 0 ; i < students.length ; i++) {// // console.log(students[i])// // 能得到某个对象的值// console.log(students[i].name)// }// 遍历数组// 需求：根据以上数据渲染生成表格// 分析：1、打印表格 头部和尾部document.write(`<table><caption>学生列表</caption><tr><td>序号</td><td>姓名</td><td>年龄</td><td>性别</td><td>家乡</td></tr>`)// 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>`)}document.write(`</table>`)</script>
</body></html>
<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>
案例六 内置对象 就是随便数 向上取整、向下取整、就近取整、
向上取整
console.log(Math.random())//随机数 返回的是0-1之间小数(包括0不包括1)console.log(Math.ceil(1.1))//Math.ceil 向上取整，返回的整数console.log(Math.ceil(1.5))console.log(Math.ceil(1.9))
向下取整
console.log(Math.floor(1.1))Math.floor 向下取整，返回的整数console.log(Math.floor(1.5))console.log(Math.floor(1.9))
就近取整
console.log(Math.round(1.1)) //round 是就近取整，返回的是整数console.log(Math.round(1.5))console.log(Math.round(-1.5)) //这个比较特殊 返回的是-1console.log(Math.round(-1.9))//返回-2 就近取整，负数返回的也是整数
最大值 和最小值
//最大值 最小值 console.log(Math.max(1,5,9,21))console.log(Math.min(1,5,9,21))
案例七 N -M 之间的一个随机数公式
第一步：
//求得是 N -M 之间的一个随机数公式let random = Math.floor(Math.random() * (10-1+1))+1 //每次刷新的是 1-10console.log(random)//封装一个随机函数 min到max//第一步function getRandom(min,max) {return Math.floor(Math.random() * (M-N +1))+N}
第二步：
//第二步 把形参放入到公式里面function getRandom(min,max) {return Math.floor(Math.random() * (max-min +1))+min}getRandom(1,10)console.log(getRandom(1,10))let random = getRandom(1,10)console.log(random)案例八 随机点名案例
// 随机点名案例// 需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中function getRandom(min,max) {return Math.floor(Math.random() * (max-min +1))+min}// 声明一个数组let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']// document.write(`${arr[0]}`) //返回数组第一个赵云//生成一个随机数let random = getRandom(0,arr.length -1)// document.write(`${random}`) //取得数组中的随机下标document.write(`${arr[random]}`) //根据数组的下标取得随机名字
案例九 ： 随机点名，不能重复 （显示名字的时候，数组里边不显示它）
// 随机点名案例 不能重复显示// 分析：1、利用随机函数随机生成一个数字作为索引号// 2、数组[随机数]生成到页面中// 3、数组中删除刚才抽中的索引号// 随机点名案例// 需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中function getRandom(min,max) {return Math.floor(Math.random() * (max-min +1))+min}// 声明一个数组let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']// document.write(`${arr[0]}`) //返回数组第一个赵云//生成一个随机数let random = getRandom(0,arr.length -1)// document.write(`${random}`) //取得数组中的随机下标document.write(`${arr[random]}`) //根据数组的下标取得随机名字// // 从哪里删,删除几个arr.splice(random,1)console.log(arr) //打印 数组,看显示的内容有没有从数组中删掉
案例十 ： 猜字游戏
// 猜数字游戏// 需求:程序随机生成1~10之间的一个数字,用户输入一个数字// 1、如果大于该数字，就提示，数字猜大了，继续猜。// 2、如果小于该数字，就提示，数字猜小了，继续猜。// 3、如果猜对了，就提示猜对了，程序结束。// 分析：// 1、利用随机数生成一个数字// 2、需要一直猜，所以需要不断的循环// 3、因为条件是结果猜对了，就是判断条件退出，用while循环合适// 4、内部判断可以用多分支语句。// ---------------------------------------------------// 1、随机数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}//生成1~10之间的随机数let random = getRandom(1, 10)console.log(random)// 用户输入，不断的弹框 直到输入正确为止。while (true) {let num = + prompt('请您输入一个1~10的数字:')// 1、如果大于该数字，就提示，数字猜大了，继续猜。// 2、如果小于该数字，就提示，数字猜小了，继续猜。// 3、如果猜对了，就提示猜对了，程序结束。// 使用三个分支if( random <num) {alert('私密马赛，您猜大了')}else if ( random > num ) {alert('比亚乃，你猜小了')}else {alert('萨瓦迪卡 ，你猜对了')// return 退出函数break; //break 退出整个循环}}
JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象相关推荐
- javascript实现增删改查
增删改查 增删改查对于学前端的来说,可以说是必修课,在很多的网站中都会遇见这种功能,那么今天,我们就来看看如何使用js来实现正删改查. 首先,我们先模拟一个后台数据,如下: var data = [{ ...
- Elasticsearch Javascript API增删改查
查询 根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...
- 真正的mybatiesPlus一键生成模板(根据对象增删改查分页的controller完善)详
代码都将上传至git 仓库地址 转载请注明出处 https://blog.csdn.net/lioncatch/article/details/114395105 第一步 创建一个数据库加一张表(表注 ...
- js中数组的增删改查遍历迭代过滤
注:最后附有源码,可自行测试,动动手印象更深刻 js中数组的增删改查.排序.遍历.迭代.过滤 1.展开语法 2.解构赋值 3.剩余解构 4.增删改 5.合并拆分 6.查 7.排序 8.遍历 9.迭代 ...
- python通过内置函数测试对象类型_python测试开发（01-递归函数+内置函数）
# 生成器三个方法:send,close throw # send()发送数据 f # def gen(): # for i in range(10): # j=yield i # print(j) ...
- JS-9 JS常见内置类；包装类型；Number类方法与实例方法；Math方法；String类常见方法；数组方法(增删改查+遍历+排序)；时间Date 构造函数+获取信息+设置信息+获取Unix时间戳
目录 1_包装类型 2_Number类补充 3_Math对象 4_String类的补充 4.1_基本使用 4.2_修改字符串 4.3_查找.替换字符串 开头与结尾 4.4_获取子字符串 4.5_其他方 ...
- 纯javascript实现增删改查
效果图: html: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
- python通过内置函数测试对象类型_Python的内置函数
函数名 功能描述 示例 abs() 返回数字的绝对值 abs(-45) divmod() 把除数和余数运算结合起来,返回一个包含商和余数的元组 divmod(7,2) 返回:(3,1) raw_inp ...
- YUDBModel【绿色插件】-对象序列化、反序列化、对象一键增删改查
2019独角兽企业重金招聘Python工程师标准>>> 一.YUDBModel 介绍 架构: 使用runtime和Sqlite实现NSObject扩展类YUDBModel,直接实现( ...
最新文章
- vim 记录阅读信息
- Mybatis choose (when, otherwise)标签
- 【转】刨根究底CSS（2）：CSS中的各种值——初始值，就是默认值吗？
- LeetCode17——Letter Combinations of a Phone Number（手机几个按键对应的字母（符号）组合）
- bootstrap表格插件php,深入了解Bootstrap table表格插件（一）
- 从贝叶斯模型（Bayes）到生成模型（Generative models）（生成式分类器，generative classifier）
- 学习pytorch: API 学习
- SVN安装不成功卸载不干净后如何重装SVN和右键显示SVN
- 自动售货机软件工程课设_饮料自动售货机系统实验.docx
- Hadoop大数据开发技术
- CMOS模拟集成电路设计学习笔记
- java的string的intern_java String的intern()方法
- js 关键技术集合
- uniapp 手写canvas海报（兼容android/ios/h5/微信小程序）
- pandas多列合并成一列
- 19.Oracle数据库SQL开发之 笛卡尔积
- PCIe扫盲——PCIe错误源详解（一）
- 苹果推出iOS15.2正式版，“数字遗产”计划正式上线，你的“继承人”是谁？
- 关系网络数据可视化：1. 关系网络图Gephi
- GSSXI Serv-U v0.13.4 - 可封杀迅雷请求的FTP服务器端