javaScript 04 对象的使用
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
🥳博 主：初映CY的前说(前端领域)
🌞个人信条：想要变成得到，中间还有做到！
🤘本文核心：对象概念、对象的属性与方法的使用、常见的内置对象
目录
前言
一、对象是什么？
二、对象使用
1.声明对象
2.1对象中属性
对象属性的书写方式：
对象属性的增删改查操作
2.2对象中方法
对象方法的书写方式：
对象属性的增删改查操作
三.对象的相关操作
四.内置对象
1.1内置对象是什么？
1.2内置对象Math
前言
- 理解什么是对象，掌握定义对象的语法 掌握数学对象的使用
- 掌握数学对象的使用
一、对象是什么？
- 对象 对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。
- 对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
二、对象使用
1.声明对象
let 对象名={ 这里存放属性与方法}
2.1对象中属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
- 名与值之间使用英文 : 分隔
- 多个属性之间使用英文 , 分隔
- 属性就是依附在对象上的变量
- 属性名可以使用 "" 或 '' ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
对象属性的书写方式：
<!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>
<script>
/* 数组[] 有序数据集合
对象{} 无序数据集合 */
// 1.对象的声明
// 方法1：字面量生成对象
// let 对象名 ={}
// 方法二.new关键字生成对象
// let obj = new obj{}
// 2.对象构成
// 对象由属性和方法组成
// 属性由键值对格式组成键值之间用：隔开，属性之间用，隔开。
let goods = {
name : 'iPhone14',
num : 100012816024,
weight : `0.55kg`,
address : '中国大陆',
// 特殊字符的属性名也需要‘’包括起来
'zhi-zao':'china'
}
console.log(goods);
// 注意点：对象里面的属性名可以理解为变量，属性值相当于给变量赋值。
</script>
</body>
</html>对象属性的增删改查操作
我先定义一个名为goods的对象
1.查找对象属性 格式：对象名.属性(返回的是属性值)
左侧查语法，右侧页面查看
2.修改对象属性 格式：对象名.属性 =新值
控制台查看
3.增加对象属性 格式： 对象名.新属性名=新值
控制台查看
4.删除对象属性 格式： delete 对象名.属性名
控制台查看
附上对象属性的增删改查的全部代码与笔记👇
<!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>
<script>
let goods = {
name: 'iPhone14',
num: 100012816024,
weight: `0.55kg`,
address: '中国大陆',
// 特殊字符的属性名也需要‘’包括起来
'produce-where': 'china'
}
// 查找对象 对象名.属性 返回的是属性值
// 特殊属性名写法：[]写属性名
/* 注意点：中括号一定需要引号才能接收变量名可解析变量，不然就当变量解析！！！
点语法解析不了特殊字符*/
// console.log(goods['name']);
document.write(goods['name'])
document.write(goods.name)
// 修改对象 对象名.属性 =新值
// goods.num = 10088611
// 增加对象 对象名.新属性名=新值
// goods.size = '6.1英寸'
// document.write(goods)
// console.log(goods);
// 删除对象
// delete goods.weight
// console.log(goods);
</script>
</body>
</html>2.2对象中方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用 "" 或 '' ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象方法的书写方式：
<!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>
<script>
let person={
name:'初映',
//书写法则同属性一样
sayHi:function(){
console.log('你好呀~');
},
sum:function (x,y){
return x+y
}
}
</script>
</body>
</html>对象方法的增删改查操作
我先定义一个对象存放方法：
1.查找对象方法 格式：对象名.方法名（）
控制台查看
2.修改对象方法 格式：对象名.方法名=function{}
控制台查看
3.增加对象方法 格式：对象名.方法名=function{}
4.删除操作 格式:delete 对象名.方法名
控制台查看
附上对象属性的增删改查的全部代码与笔记👇
<!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>
<script>
let person={
name:'初映',
//书写法则同属性一样
sayHi:function(){
console.log('你好呀~');
},
sum:function (x,y){
return x+y
}
}
//查
// person.sayHi()
// console.log(person.sum(1,2));
// 改
person.sayHi=function(){
return '我已经把这个值给更改喽！'
}
// console.log(person.sayHi());
// 增
person.sing =function(){
console.log('在唱歌');
}
// person.sing()
// 删
delete person.sing
console.log(person);
</script>
</body>
</html>三.对象的相关操作
1.遍历对象 格式：for(变量 in 对象名){}
<!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>
<script>
let person={
name:'初映',
height:184,
sayHi:function(){
console.log('你好呀~');
},
sum:function (x,y){
return x+y
}
}
for(let k in person){
// 这里是访问的属性名
// console.log(k);
// k是变量需要[]解析，点语法无法解析，出现的是属性值
console.log(person[k]);
}
</script>
</body>
</html>控制台查看
2.拓展：数组使用对象中的遍历方式 格式：for(变量 in 数组名){}
<!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>
<script>
let arr = [10,20,30,40,50]
for (let k in arr){
console.log(k);
// 用这个方法输出的是字符串类型的，但是我输出的是数值型，两者类型被改变了
console.log(arr[k]);
}
</script>
</body>
</html>控制台查看
3.数组配合对象渲染数组使用
<!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>
<script>
let students = [
{ name: '小明', age: 18, gender: '蓝', hometown: '河北省' },
{ name: '小红', age: 18, gender: '女', hometown: '河南省' },
{ name: '小美', age: 18, gender: '女', hometown: '河北省' },
{ name: '小绿', age: 18, gender: '蓝', hometown: '山东省' }
]
for (let i = 0; i < students.length; i++) {
console.log(students[i]);
}
</script>
</head>
<body>
</body>
</html>控制台查看
四.内置对象
1.1内置对象是什么？
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
我们之前是用过内置对象 ➢ document.write() ➢ console.log()
1.2内置对象Math
Math对象是JavaScript提供的一个“数学”对象
作用：提供了一系列做数学运算的方法
官方Math文档：Math - JavaScript | MDN (mozilla.org)
web中常用的Math方法：
random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
下面举几个例子：
<!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>
<script>
// ceil()向上取整
console.log(Math.ceil(1.5));//2
console.log(Math.ceil(-1.5));//-1
// floor()向下取整
console.log(Math.floor(-1.5));//-2
console.log(Math.floor(1.5));//1
//max()最大值,字符串会自动转
console.log(Math.max(10,20,30,'50'));
// round()四舍五入
console.log(Math.round(1.5));//2
</script>
</body>
</html>1.2.1Math.random随机数使用
<!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>
<script>
// 规则：左闭右开[0,1 )
console.log(Math.random());
// 获取0-10的随机数
console.log(Math.floor(Math.random()*11));
// 获取5-10的随机数
console.log(Math.floor( Math.random()*6+5));
// 调用网页上的方法
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
// 获取90-100的数
console.log(getRandom(90,100));
</script>
</body>
</html>下面是调用Math官方获取区间值的函数生成的
<!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>
<script>
let ra = getRandom(1, 10)
// 开关思想：flag=true
for(let i=1;i<=3;i++){
let val = +prompt("请输入一个1-10的数字")
if (val > ra) {
alert('数字大了，继续猜~')
} else if (val < ra) {
alert('数字小了，继续猜~')
}
else {
alert('猜对啦~')
break
}
if(val===ra){
alert('猜对啦~')
// flag设置为false停止弹框提示
break
}
if(i===3)
{
alert('三次机会使用结束~')
}
// if(flag){
// alert('三次机会使用结束~')
// }
}
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
</script>
</body>
</html>1.2.2颜色获取案例（这个很重要）
<!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>
<style>
body {
background-color: #fff;
}
div {
display: inline-block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!-- 需求:该函数接收一个布尔类型参数,表示颜色的格式是十六进制还是rgb格式。
①:如果参数传递的是true或者无参数,则输出 一个随机十六进制的颜色
②:如果参数传递的是false,则输出 一个随机rgb的颜色 -->
<script>
console.log(getColor(true));
//document.write（）配合循环页面渲染生成多个数据
for(let i=1;i<60;i++){
document.write(`<div style =background-color:${getColor(true)}></div>`)
}
// 定义方法形参默认为空数组与变量为true(布尔值必须需要变量)
function getColor(arr=[],flag = true) {
// 返回16进制，，16进制最小为#000000-#ffffff
// flag默认是true
if (flag) {
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
// 16进制是#+6个数据，下面是产生六个数据，用const index 接收
for (let i = 1; i < 7; i++) {
// 随机数最大值是数组长度-1因为下标从0开始的
const index = Math.floor(Math.random() * arr.length)
// 数组搭配下标获取数组产生的数据，之后用str接收
str = str + arr[index]
}
// 这个return必须写在循环外面，不然的话第一次循环遇到了return就结束了循环，每次都是随机产生一个值
return str
}
else {
// 返回rgb 255是rgb单个元素的取值为0-255
const r = Math.floor(Math.random() * 256)
const g = Math.floor(Math.random() * 256)
const b = Math.floor(Math.random() * 256)
// 模板字符串拼接输出
return `rgb(${r},${g}.${b})`
}
}
</script>
</body>
</html>| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |