JS学习658~669(对象)

最新推荐文章于 2024-08-06 12:58:11 发布
最新推荐文章于 2024-08-06 12:58:11 发布
阅读量167 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/126999444
版权

1 对象

1.1 什么是对象?

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。

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

  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在对象中用方法来表示(常用动词)

1.2 为什么需要对象

保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?这时用JS的对象表达更清楚

2 创建对象的三种方式

在JavaScript中,现阶段我们可以采用三种方式创建对象(object) :

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

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>
    <script>
        // 利用字面量创建对象
        var obj = {}; // 创建了一个空的对象
        var obj = {
            uname: '张三丰',
            age: 18,
            sex: '男',
            sayHi: function() {
                console.log('hi~');
            }
        }
        // (1) 里面的属性或者方法我们采取键值对的形式 键 属性名: 值 属性值
        // (2) 多个属性或者方法中间用逗号隔开的
        // (3) 方法冒号后面跟的是一个匿名函数
        // 2. 使用对象
        // (1) 调用对象的属性 我们采取 对象名.属性名  .我们理解为 的
        console.log(obj.uname);
        // (2)调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3)调用对象的方法 sayHi  对象名.方法名  千万别忘记添加小括号
        obj.sayHi();
    </script>
</head>
<body>
    
</body>
</html>
变量、属性、函数、方法总结
  • 变量:单独声明并赋值,单独存在
  • 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
  • 函数:单独存在的,通过“函数名()”的方式就可以调用
  • 方法:对象里面的函数称为方法,方法不需要声明，使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。
<!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>
        // 变量属性、函数、方法的区别
        // 1. 变量和属性相同点 他们都是用来存储数据的
        var num = 10;
        var obj = {
            age: 18,
        }
        console.log(obj.age);
        // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
        // 2. 函数和方法的相同点 都是实现某种功能 做某件事
        // 函数是单独声明 并且调用的 函数名()单独存在的
        // 方法 在对象里面 调用的时候 对象.方法()
    </script>
</head>
<body>
    
</body>
</html>

2.2 利用new Object创建对象

跟前面学的new Array()原理一致

<!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>
        // 利用 new Object 创建对象
        var obj = new Object();  // 创建了一个空的对象
        obj.uname = '张三丰';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
            console.log('hi~');
        }
        // (1)我们是利用 等号 = 赋值的方法 添加对象的属性和方法
        // (2) 每个属性和方法之间用 分号结束
        console.log(obj.name);
        console.log(obj['sex']);
        obj.sayHi();
    </script>
</head>
<body>
    
</body>
</html>

2.3 利用构造函数创建对象

构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

<!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>
        // 因为前面两种创建对象一次只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function() {
                console.log('冰雨');
            }
        }

        var zxy = {
            uname: '张学友',
            age: 58,
            sing: function() {
                console.log('李香兰');
            }
        }
        // 因为我们一次创建一个对象,里面很多属性和方法是大量相同的 我们只能复制
        // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为构造函数
        // 又因为这个函数不一样, 里面封装的不是普通代码,而是对象
        // 构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>
</head>
<body>
    
</body>
</html>

eg:

<!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>
        // 利用构造函数创建对象
        // 创建四大天王的对象  相同的属性: 名字 年龄 性别   相同的方法: 唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李兰香');

        // 1. 构造函数名字首字母大写
        // 2. 构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数必须使用new
        // 4. 我们只要new Star() 调用函数就创建一个对象  ldh {}
        // 属性和方法前面必须添加 this
    </script>
</head>
<body>
    
</body>
</html>
练习

利用构造函数创建两个英雄对象。函数中的公共部分包括:姓名属性(name),类型属性(type),血量属性(blood)和攻击方式(attack).

  • 廉颇 力量型 500血量 攻击:近战
  • 后羿 射手型 100血量 攻击:远程
<!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>
        function Hero(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(attack) {
                console.log(attack);
            }
        }
        var lp = new Hero('廉颇', '力量型', '500');
        var hy = new Hero('后羿', '射手型', '100');
        lp.attack('近战');
        hy.attack('远程');
    </script>
</head>
<body>
    
</body>
</html>

2.4 构造函数和对象

  • 构造函数,如Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)
  • 创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化
<!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>
        // 构造函数和对象
        // 1. 构造函数  明星  泛指的某一大类   它类似于java语言里面的 类(class)
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        // 2. 对象 特指 是一个具体的事物 刘德华 == { name:'刘德华', age:18, sex:'男', sing: f }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(ldh);
        // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
    </script>
</head>
<body>
    
</body>
</html>

3 new关键字

new在执行时会做四件事情:

  1. 在内存中创建一个新的空对象
  2. 让this指向这个新的对象
  3. 执行构造函数里面的代码,给这个新对象添加属性和方法
  4. 返回这个新对象(所以构造函数里面不需要return)

4 遍历对象属性

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>
    <script>
        // 遍历对象
        var obj = {
            name: 'pink老师',
            age: 18,
            sex: '男',
            fn: function() {}
        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        // for in 遍历
        // for (变量 in 对象) {

        // }
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k]得到的是  属性值
        }
        // 我们使用 for in 里面的变量 我们喜欢写k  或者  key
    </script>
</head>
<body>
    
</body>
</html>
小结
  1. 对象可以让代码结构更清晰
  2. 对象复杂数据类型object
  3. 本质:对象就是一组无序的相关属性和方法的集合
  4. 构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果.都统称为苹果
  5. 对象实例特质一个事物
  6. for…in语句用于对对象的属性进行循环操作
作业1
  1. 创建一个电脑对象,该对象要有颜色、重量、品牌、型号,可以看电影、听音乐打游戏和敲代码。
  2. 创建一个按钮对象,该对象中需要包含宽,高,背景颜色和点击行为。
  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>
        // 1.
        function Computer(color, weight, brand, type) {
            this.color = color,
            this.weight = weight,
            this.brand = brand,
            this.type = type,
            this.listen = function(music) {
                console.log(music);
            }
            this.game = function(game) {
                console.log(game);
            }
            this.code = function(code) {
                console.log(code);
            }
        }
        var computer = new Computer('red', 20, '华为', 'xx');
        computer.listen('华尔兹');
        // 2.
        function Button(width, height, backcolor) {
            this.width = width;
            this.height = height;
            this.backcolor = backcolor;
            this.click = function(aru) {
                console.log(aru);
            }
        }
        var button = new Button(20, 10, 'yellow');
        button.click('消失');
        // 3.
        function Car(weight, color, brand) {
            this.weight = weight;
            this.color = color;
            this.brand = brand;
            this.zairen = function() {
                console.log('可以载人');
            }
            this.lahuo = function() {
                console.log('可以拉货');
            }
            this.gengtian = function() {
                console.log('可以耕田');
            }
        }
        var car = new Car(100, 'black', '奔驰');
        car.zairen();
    </script>
</head>
<body>
    
</body>
</html>
作业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>
    <script>
        function reverse(arr) {
            newArr = [];
            for (var i = arr.length - 1; i >= 0; i -- ) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = [3, 7, 5, 66, 21, 2];
        console.log(reverse(arr1));
    </script>
</head>
<body>
    
</body>
</html>
  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>
    <script>
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i ++ ) {
                for (var j = 0; j < arr.length - i - 1; j ++ ) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([5, 1, 3, 7, 2]);
        console.log(arr1);
    </script>
</head>
<body>
    
</body>
</html>
小项目:做一个简易计算器
<!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>
        var choice = parseInt(prompt('欢迎使用简易计算器:\n1.加法运算;\n2.减法运算;\n3.乘法运算;\n4.除法运算;\n5.退出;\n请输入您的选项:'));
        while (choice != 5) {
            var a = prompt('请输入一个数值:');
            var b = prompt('请输入一个数值:');
            var res;
            switch(choice) {
                case 1:
                     res = parseInt(a) + parseInt(b);
                     alert(res);
                     break;
                case 2:
                     res = parseInt(a) - b;
                     alert(res);
                     break;
                case 3:
                     res = parseInt(a) * b;
                     alert(res);
                     break;
                case 4:
                     res = parseInt(a) / b;
                     alert(res);
                     break;
                default:
                    break;
            }
            choice = parseInt(prompt('欢迎使用简易计算器:\n1.加法运算;\n2.减法运算;\n3.乘法运算;\n4.除法运算;\n5.退出;\n请输入您的选项:'));
        }
    </script>
</head>
<body>
    
</body>
</html>
前进的北极熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习Javascript中的对象
05-28
学习Javascript中的对象
JavaScript学习笔记之JS对象
11-28
JavaScript中的对象是编程的核心概念，尤其在JS中，它们提供了数据结构和操作这些数据的方式。在本篇学习笔记中，我们将重点关注两种基本的对象类型：日期对象（Date）和数组对象（Array）。 首先，让我们来看看...
JavaScript学习笔记之创建对象
10-22
在JavaScript中对象是一种基本的数据类型，在数据结构上是一种散列表，可以看作是属性的无序集合，除了原始值其他一切都是对象。这篇文章主要给大家介绍JavaScript学习笔记之创建对象，需要的朋友参考下吧
JavaScript学习笔记（二） js对象
12-11
对象 javascript中的对象是可变键控集合。在javascript中，数组、函数、正则表达式都是对象。 对象是属性的容器。其中每个属性都拥有名字和值。属性的名字可以是包括空字符串在内的任意字符串。属性值可以是除...
牛客JS题（二十一）数组扁平化
不起眼小菜菜的博客
08-04 832
注释很详细，直接上代码……
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 854
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1253
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 714
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
RN高级interview
流星雨的博客
07-31 527
RN高级interview
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 506
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2912
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 126
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
社交媒体分享预览图片和内容修改
最新发布
wangweiscsdn的博客
08-06 155
社交媒体分享链接时的预览图片和内容
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 497
（4）index.html 单页入口，提供id为app的挂载点。
Pinia和vueX的区别是什么，刷新数据丢失怎么处理？
ggq53219的博客
08-01 480
Pinia和Vuex都是Vue.js生态系统中的状态管理库，它们在设计理念、使用方式、性能以及生态系统支持等方面存在一些差异。以下是对Pinia和Vuex主要区别的详细分析，以及处理数据刷新丢失问题的建议。
elementUI，vue，前端判断时间是否有交集(重合)方法
peepeeman的博客
08-01 407
前端根据24小时制，判断所选时间是否存在重复情况
探索 Electron：打造深度书籍挖掘机的搜索体验
ztK63LrD的博客
08-03 410
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
【Material-UI】Autocomplete 组件的局限性（Limitations）详解
lph159的博客
08-05 690
在某些情况下，您可能需要为 Autocomplete 组件提供自定义的。此时，务必确保滚动容器具有属性。这样可以确保在使用键盘导航时，滚动行为的正确性。虽然 Material-UI 的 Autocomplete 组件提供了强大的功能，但开发者在使用时需要注意其一些局限性。通过合理设置组件属性和处理可能出现的问题，可以提升组件的用户体验和可访问性。希望本文能帮助您更好地理解和应用 Autocomplete 组件中的局限性。如果您有任何问题或建议，欢迎交流探讨。
【问题解决方案】npm install报错问题：npm ERR! - 多种解决方案，总有一种可以解决
weixin_73002968的博客
08-01 834
欢迎技术类的问题到这里提出，我会逐个解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值