05-JavaScript 对象

最新推荐文章于 2024-07-17 20:19:26 发布
最新推荐文章于 2024-07-17 20:19:26 发布
阅读量26 收藏
点赞数
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yfp020907/article/details/132330853
版权

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>
        //万物皆对象
        var obj = {
            name: '于谦',
            age: '50',
            gender: '男',
            sing: function () {
                console.log('抽烟');
                console.log('喝酒');
                console.log('烫头');
            }
        }
        console.log(obj.name);
        console.log(obj['name']);
        obj.sing();
    </script>
</body>

</html>

2.对象的创建方法 ：字面量   使用new Object()   使用构造函数

<!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.字面量
        var obj = {
            //属性（键）：属性值（值）
            name: '张胜男',
            age: 18,
            gender: '男',
            sing: function () {
                console.log('唱');
                console.log('跳');
                console.log('rap');
                console.log('篮球');
            }
        }

        // 访问对象中的属性
        console.log(obj.name);
        console.log(obj['name']);
        console.log(obj.gender);
        console.log(obj['gender']);

        // 访问对象中的方法
        obj.sing();

        // 2.通过new Object 创建对象
        var obj2 = new Object();
        obj2.name = '老舅';
        obj2.age = 20;
        obj2.sing = function () {
            console.log('抽烟');
            console.log('喝酒');
            console.log('烫头');
        }
        console.log(obj2);
        // 访问对象方法
        obj2.sing();

        // 3.构造函数创建对象
    </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>
</head>

<body>
    <script>
        function Fun(name, age, gender, sing) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sing = sing;
        }
        var Fun2 = new Fun('宝玉', 30, '男🚹', function () { console.log('游手好闲'); console.log('喝酒'); });
        console.log(Fun2);
        // 访问对象的属性
        console.log(Fun2.name);
        console.log(Fun2['name']);
        console.log(Fun2.age);
        console.log(Fun2['age']);
        Fun2.sing();

        // 访问对象方法
        Fun2.sing();

        // 构造函数中的this指向当前实例化对象
        // 利用构造函数可以创建多个类似对象
        var Fun3 = new Fun('宝玉', 30, '男🚹', function () { console.log('游手好闲'); console.log('喝酒'); });
        console.log(Fun3);
    </script>
</body>

</html>

4.普通函数和构造函数的区别

<!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>
        // 普通函数
        function fun() {
            console.log('我是普通函数');
        }
        // 直接调用
        fun();

        //封装构造函数
        function Fun(name, age, gender, sing) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sing = sing;
        }
        //通过 new 关键字进行调用
        var Fun2 = new Fun('宝玉', 30, '男🚹', function () { console.log('游手好闲'); });
        console.log(Fun2.gender);

        // 1.普通函数直接调用，构造函数需要通过 new 关键字进行调用
        // 2.this 指向
        //       构造函数this指向当前实例化对象
        //       普通函数 this 默认指向window，如果成为对象中的方法，则指向当前方法对象
        // 3.构造函数不需要 return，默认返回
        // 4.构造函数首字母大写，普通函数一般首字母小写

    </script>
</body>

</html>

5.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>
</head>

<body>
    <script>
        //封装构造函数
        function Fun(name, age, gender, sing) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sing = sing;
        }

        //实例化
        var person1 = new Fun('小亮', 20, '男', function () { console.log('唱歌'); console.log('跳舞'); });
        console.log(person1);
        console.log(person1['name']);
        person1.sing();
        console.log(new Fun('小虎', 18, '男', function () { console.log('烫头'); console.log('说相声'); }));

        // new 关键字都做了什么
        // 1.创建一个空对象
        // 2.this指向该对象
        // 3.通过 this 给对象添加属性和方法
        // 4.隐式返回 this
    </script>
</body>

</html>

6.遍历对象

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var obj = {
            name: '于谦',
            age: 50,
            gender: '男',
            sing: function () {
                console.log('抽烟');
                console.log('喝酒');
                console.log('烫头');
            }
        }
        // 遍历对象 for..in  只能通过  []
        for (var key in obj) {  //key代表属性
            console.log(key);
            // console.log(obj.key);
            console.log(obj[key]);
        }

    </script>
</body>

</html>

7.对象的分类

<!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.1 本地对象 Number,String,Boolean,Array,Function,Date,Object,RegExp
              // 1.2 内置对象 Global(全局对象)和Math,使用内置对象不需要new 实例化
        //   2.宿主对象  window对象  document对象
        //   3.自定义对象  开发人员自己定义的对象
    </script>
</body>

</html>

8.数组对象

<!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.字面量
        var arr = [1, 2, 3, 4, 5];
        // 2.使用 new Array()
        var arr1 = new Array(6, 7, 89, 0);

        // 封装new Aaary() 方法
        function newArr() {
            var arr = [];
            if (arguments.length == 1) {
                arr.length = arguments[0];
            } else {
                for (var i = 0; i < arguments.length; i++) {
                    arr.push(arguments[i]);
                }
            }
            return arr;
        }
        var arr2 = newArr(3, 4, 5, 6);
        console.log(arr2);

        // 数组的排序  sort() 方法

        // arr.sort()    只能对十以内的数字进行排序

        arr.sort(function (a, b) {
            return a - b;//升序     b-a 降序
        });
        console.log(arr);
    </script>
</body>

</html>

9.字符串对象

<!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>
        var atr = 'abc';

        var str2 = new String('def');
        console.log(str2);

        // 通过索引下标访问某个字符
        console.log(str2[0]);
        // 通过.length 属性访问字符串长度
        console.log(str2.length);

        // 能访问下标和长度,就可以遍历字符串
    </script>
</body>

</html>

10.字符串对象的操作方法：！！！字符串的任何操作方法都不改变原字符串

<!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>
        var str = '  朝辞白帝彩云间，千里江陵一日还，两岸猿声啼不住，轻舟已过万重山。  '

        console.log(str.length);

        //字符串的操作方法都不会改变字符串本身

        // charAt() 方法 返回指定索引处的字符
        console.log(str.charAt(10));  //传入一个下标

        // charCodeAt()方法 返回指定字符的 Unicode 编码
        console.log(str.charCodeAt(10)); //传入一个下标

        // String.fromcharCode() 方法 输入一个 Unicode编码返回对应的字符
        console.log(String.fromCharCode(69));  //65-90 A-Z   97-122  a-z

        // concat() 方法 连接两个或多个字符串
        console.log(str.concat('唐', '李白'));

        // slice() 方法 复制数组的片段，包含开始位置，不包含结束位置
        console.log(str.slice(0, 5));

        // substring() 方法 用于提取两个指定下标之间的字符,不包含结束位置
        console.log(str.substring(0, 5));

        // split(分割符号（从哪里开始分割），数组的最大长度) 方法 将字符串分割为字符串数组
        console.log(str.split('，', 2));

        // 检索方法
        console.log(str.includes('山'));
        console.log(str.indexOf('云', 6));
        console.log(str.lastIndexOf('舟'));

        // search() 方法，检索字符串当中的子字符串，如果匹配成功，则返回在字符串中首次匹配项的索引，匹配失败返回‘-1’
        console.log(str.search('千里'));

        // replace()方法，用于在字符串中用一些字符替换另一些字符
        console.log(str.replace('朝辞白帝彩云间', '床前明月光'));

        // trim() 方法，用于去除字符串两边的空白
        console.log(str.trim());
    </script>
</body>

</html>

11.总结

<!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.对象 :万物皆对象
        // 2.对象的创建方法:字面量  new Object()  构造函数
        // 3.构造函数创建对象 要通过new调用,this指向实例化对象
            //   构造函数的this 指向实例化对象
            //   普通函数的this 默认指向window,如果this作为方法,则指向该方法所属对象
        // 4.new 关键字 创建一个空对象,this指向该对象,通过this给对象添加属性和方法,隐式返回this
        // 5.遍历对象 :通过for...in遍历对象,只能通过 []进行访问
        // 6.对象分类:内部对象(本地对象,内置对象。内置对象使用时不需要实例化),宿主对象,自定义对象
        // 7.数组对象：sort() 方法排序
        // 8.字符串对象

        // 9.字符串对象的操作方法，都不改变字符串本身
        // charAt()       输入一个索引，返回索引对应的字符
        // charCodeAt()   输入一个索引，返回索引对应字符的Unicode编码
        // String.fromCharCode() 返回输入字符的Unicode编码
        // concat()       用于连接两个或多个字符串
        // slice()        复制字符串，包含开始位置，不包含结束位置
        // substring()    提取介于两个下标之间的字符，不包含结束的位置
        // substr()       从指定下标开始，抽取指定数目的字符
        // split()        把一个字符串分割成字符串数组，第一个参数表示分割符号，第二个参数表示数组长度
        // includes()     检索字符串是否包含某个字符
        // indexOf()      检索字符串某个字符第一次出现的位置
        // lastIndexOf()  检索字符串中某个字符最后一次出现的位置
        // search()       检索字符串中指定的子字符串，匹配成功返回首次匹配项的索引，失败返回 -1
        // replace()      用于在字符串当中用一些字符替换另一些字符
        // trim()         去除字符串两边的空白
        // toUpperCase()  将小写字母转换为大写字母
        // toLowerCase()  将大写字母转换为小写字母
    </script>
</body>

</html>

yfp020907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript--BOM对象介绍
qq_45656036的博客
11-05 5586
一 js–BOM对象 window 对象 2. navigator 对象 3. location 对象 4. history 对象 5. screen 对象 代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象） window对象 方法1: window .open( ) 打开新窗口 格式: .open(‘url地址’,’是否在新窗口中打开’,’新窗口设置’) _self 本窗口 _blank 新窗口 方法2: 打开对象.close() 关闭打开的新窗口 方法3:
3-JavaScript高级教程-面相对象程序设计.pptx
07-29
JavaScript是一种面向对象的编程语言，但与传统的基于类的语言不同，它没有内置的类概念。在JavaScript中，对象被定义为“无序属性的集合”，这些属性可以包含基本值、其他对象或者函数。对象的每个属性都有一个名字...
JavaScript 对象初探--创建对象
热门推荐
Mr_Bobcp的博客
01-22 1万+
目录JavaScript对象概念JavaScript类型一、js中的对象二、自定义对象属性和方法创建对象方式一、对象字面量二、内置构造函数三、工厂模式四、自定义构造函数的方法五、原型模式六、组合使用构造函数模式和原型模式七、动态原型模式八、寄生模式九、稳妥构造函数模式 JavaScript对象概念 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 在 JavaScript 中，对象是拥有属性和方法的数据。 JavaScript类型 一、js中的对象 内置对象：JS提供的 宿主对象
JavaScript内置对象-Math对象
qq_46112274的博客
11-24 3190
JavaScript内置对象1、内置对象2、查文档2.1、MDN2.2、如何学习对象中的方法3、Math内置对象3.1、求最大值3.2、封装自己的数学对象3.3、Math概述3.3.1、Math绝对值和三个取整方法3.3.2、Math.Random()随机数方法、随机点名3.3.3、猜数字游戏 1、内置对象 2、查文档 2.1、MDN MDN官网：https://developer.mozilla.org/zh-CN/ MDN官网JavaScript文档：https://developer.mozill
JS基本语法-JavaScript中的常用对象3-window对象，即窗口对象
记录和分享程序人生的点点滴滴
12-31 1560
window对象的使用，以及如何打开一个网页，用window.open。
JavaScript-数学对象（Math）
StupidlyGrass的博客
01-17 4192
JavaScript数学对象（Math）
第4章--JavaScript对象.pptx
04-14
JavaScript对象是编程语言中的核心概念，它是一种无序的数据集合，由多个键值对（key-value）构成。在JavaScript中，对象可以被视为属性和方法的容器。本章深入讲解了JavaScript对象的创建、特性和实战应用。 4.1 ...
Photoshop-CS6-JavaScript.zip
05-17
2. **Photoshop对象模型**：JavaScript在Photoshop中的工作原理是通过与Photoshop的对象模型交互。对象模型包含了所有可以操作的元素，如文档、图层、选区等。了解这些对象及其属性和方法是编写有效脚本的关键。 3....
advice:建议-javascript对象的功能mixin
05-21
将功能混合添加到对象。 建议提供了多种方法来修改对象的方法和属性。 它使得重用代码和组合功能以创建对象行为成为可能。网站访问以获取更多信息发展测试与覆盖生成测试和覆盖率报告： grunt文献资料要从源代码...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 755
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 658
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 514
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
高职软件技术实训室
whwzzc的博客
07-17 604
当前，软件行业正处于高速发展阶段，对人才的需求呈现出多元化、高精尖的特点。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线html、css、js、jquery、vue等前端开发环境，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线java、python等后台语言，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。
JavaScript 常见数学用法
2302_77250325的博客
07-17 185
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
ReactRouter v6升级的步骤
feixin369的博客
07-14 353
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
最新发布
yuan5025的博客
07-17 391
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
商品详情使用富文本编辑器
m0_74356429的博客
07-13 164
2、因为好多页面都需要用到，封装富文本编辑器组件。3、在商品编辑和商品添加页面添加富文本编辑器。Editor.vue代码。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 284
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
javascript的高级用法(循环实现数组map方法)
阿乐的博客
07-13 511
值得一提的是，map的第二个参数就是第一个参数回调中的这个点。如果第一个参数是箭头函数，则设置第二个 this 将无效，因为箭头函数的词法绑定。另一个是稀疏数组的处理，HasOwnProperty 用于判断当前下标的元素是否存在于数组中，欢迎大家在评论区交流。使用方法：将selfMap注入到Array.prototype中（下面数组的迭代方法也是如此）
1.16 JavaScript高级-面向对象.pdf
10-27
JavaScript高级-面向对象.pdf中介绍了JavaScript中的内置对象、面向对象编程入门、基本包装类型、变量、作用域和内存管理等内容。 在JavaScript中，Global(全局)对象是一个特殊的对象，它不存在于ECMAScript中。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值