十、JavaScript对象

一、对象

创建对象的方法有三种：字面量、new、构造函数。

1.利用字面量创建对象

花括号{}里面包含了表达这个具体事物（对象）的属性和方法

        // 1.利用对象字面量创建对象{}// var obj = {};  // 创建了一个空的对象var obj = {uname: 'black',age: 400,sex: '男',sayHi: function() {console.log('hi~');}}// (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 : 值  属性值// (2) 多个属性或者方法中间用逗号隔开的// (3) 方法冒号后面跟的是一个匿名函数// 2.使用对象// (1) 调用对象的属性  我们采取  对象名.属性名  . 我们理解为 的console.log(obj.uname);  // black// (2) 调用属性还有一种方法  对象名['属性名']console.log(obj['age']);  // 400// (3) 调用对象的方法  sayHi  对象名.方法名()  千万别忘记添加小括号obj.sayHi();  // hi~

案例：

        var dog = {name: 'keke',type: 'alasijia',age: 5,color: 'br',bark: function() {console.log('汪汪汪');},showFilm: function() {console.log('i can act~');}}console.log(dog.name);console.log(dog['age']);dog.bark();dog.showFilm();

2.变量、属性、函数、方法总结

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能

3.利用new Object创建对象

        var obj = new Object();  // 创建了一个空的对象obj.uname = 'black';obj.age = 23;obj.sex = '男';obj.sayHi = function() {console.log('hi~');}// (1) 我们是利用 等号 = 赋值的方法  添加对象的属性和方法// (2) 每个属性和方法之间用 分号结束console.log(obj.uname);console.log(obj.age);obj.sayHi();

案例：

        var obj = new Object();obj.name = '鸣人';obj.sex = '男';obj.age = 19;obj.skill = function(){console.log('影分身术');}console.log(obj.name);console.log(obj['age']);obj.skill();

4.利用构造函数创建对象

（1）为什么需要使用构造函数

因为前面两种创建对象的方式一次只能创建一个对象
我们一次创建一个对象，里面有很多的属性和方法是大量相同的 我们只能复制
因此 我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
又因为 这个函数不一样，里面封装的不是普通的代码，而是 对象
构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

（2）利用构造函数创建对象

构造函数的语法格式：

        function 构造函数名() {this.属性 = 值;this.方法 = function() {}}new 构造函数名();

创建四大天王的对象 相同的属性： 名字 年龄 性别 相同的方法：唱歌

		// 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(typeof ldh);  // objectconsole.log(ldh.name);console.log(ldh.age);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 {}
5.我们的属性和方法前面必须添加 this

利用构造函数创建对象的过程也称为对象的实例化⭐⭐⭐

案例：

		function Hero(uname, type, blood) {this.name = uname;this.type = type;this.blood = blood;this.attack = function(att) {console.log(att);}}var lp = new Hero('廉颇','力量型', 500);console.log(lp.name);console.log(lp.type);console.log(lp.blood);lp.attack('近战');var hy = new Hero('后裔','射手型', 100);console.log(hy.name);console.log(hy.type);console.log(hy.blood);hy.attack('近战');

（3）new关键字执行过程

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

（4）遍历对象

for … in 语句用于对数组或者对象的属性进行循环操作。

        var obj = {name: 'black',age: 18,sex: '男'}// console.log(obj.name);  // black// console.log(obj['age']);  // 18 // console.log(obj.sex);  // 男// for in 遍历我们的对象// for (变量 in 对象) {// }for (var k in obj) {// console.log(k);  // k 变量 输出  得到的是 属性名 name  age  sexconsole.log(obj[k]);  // obj[k] 得到的是 属性值    black   18  男}// 我们使用 for in 里面的变量  我们喜欢写 k 或者 key

二、内置对象

查阅MDN文档

1. Math对象

（1）数学对象Math最大值方法

        // Math 数学对象  不是一个构造函数， 所以我们不需要 new 来调用  而是直接使用里面的属性和方法即可console.log(Math.PI);  // 3.141592653589793console.log(Math.max(1, 99, 3));  // 99console.log(Math.max(-1, -10));  // -1console.log(Math.max(1, 99, 'black'));  // NaNconsole.log(Math.max());  // -Infinity

（2）封装自己的数学对象

        // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值var myMath = {PI: 3.141592653,max: function() {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;},min: function() {var min = arguments[0];for (var i = 1; i < arguments.length; i++) {if (min > arguments[i]) {min = arguments[i];}}return min;}}console.log(myMath.PI);  // 3.141592653console.log(myMath.max(1, 5, 9));  // 9console.log(myMath.min(1, 5, 9));  // 1

（3）Math绝对值和三个取整方法

        // 1.绝对值方法console.log(Math.abs(1));  // 1console.log(Math.abs(-1));  // 1console.log(Math.abs('-1'));  // 1   隐式转换  会把字符串型  -1  转换为数字型console.log(Math.abs('pink'));  // NaN// 2.三个取整方法// (1) Math.floor()   地板  向下取整  往最小了取值  console.log(Math.floor(1.1));  // 1console.log(Math.floor(1.9));  // 1// (2) Math.ceil()  天花板  向上取整  往最大了取值console.log(Math.ceil(1.1));  // 2console.log(Math.ceil(1.9));  // 2// (3) Math.round()  四舍五入  其他数字都是四舍五入，但是 .5  特殊  它往大了取console.log(Math.round(1,1));  // 1console.log(Math.round(1.5));  // 2console.log(Math.round(1.9));  // 2console.log(Math.round(-1.1));  // -1console.log(Math.round(-1.5));  // 这个结果是 -1

（4）Math随机数方法random()

random() 返回一个随机的小数 0 <= x < 1
这个方法里面不跟参数

        console.log(Math.random());   

我们想要得到两个数之间的随机整数 并且 包含着两个整数

        // Math.floor(Math.random() * (max - min + 1)) + min;function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}console.log(getRandom(1, 10));// 随机点名var arr = ['张三', '李四', '王五', '小明', '小红'];console.log(arr[getRandom(0, arr.length - 1)]);

2. 日期对象

（1）Date日期对象的使用

Date 对象和 Math 对象不一样， 它是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间
使用：
（1）获取当前时间必须实例化：

        var now = new Date();console.log(now);  // Sat Mar 22 2025 16:10:46 GMT+0800 (中国标准时间)

（2）Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为 ‘2019-5-1’ ，可以写成newDate(‘2019-5-1’) 或者 new Date(‘2019/5/1’)

        var data1 = new Date(2019, 10, 1);console.log(data1);  // Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)  返回的是11月 不是12月var data2 = new Date("2019-10-1 8:8:8");console.log(data2);  // Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)

（2）格式化日期年月日星期

        var date = new Date();console.log(date.getFullYear());  // 返回当前日期的年  2025console.log(date.getMonth() + 1);  // 3  月份  返回的月份小一个月  0-11  记得月份 + 1console.log(date.getDate());  // 22  返回的是  几号console.log(date.getDay());  // 6   周一返回的是 1 周六返回的是 6 但是 周日返回的是 0// 写一个  2025年  3月  22日  星期六var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);  // 今天是：2025年3月22日 星期六

（3）格式化日期时分秒

        var date = new Date();console.log(date.getHours());  // 时console.log(date.getMinutes());  // 分console.log(date.getSeconds());  // 秒// 要求封装一个函数返回当前的时分秒function getTime() {var time = new Date();var h = date.getHours();h = h < 10 ? '0' + h : h;var m = date.getMinutes();m = m < 10 ? '0' + m : m;var s = date.getSeconds();s = s < 10 ? '0' + s : s;return h + ':' + m + ':' + s;}console.log(getTime());  // 17:18:03

（4）Date总的毫秒数（时间戳）

        // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数  而是距离1970年1月1号过了多少毫秒数// 1.通过valueOf()  getTime()var date = new Date();console.log(date.valueOf());  // 1742635411825console.log(date.getTime());  // 1742635411825// 2.简单的写法（最常用的写法）var date1 = +new Date();  // +new Date()  返回的就是总的毫秒数console.log(date1);  // 1742635411825// 3.HS 新增的  获得总的毫秒数console.log(Date.now());  // 1742635411825

（5）倒计时

        function countDown(time) {var nowTime = +new Date();  // 返回的是当前时间总的毫秒数var inputTime = +new Date(time);  // 返回的是用户输入时间总的毫秒数var times = (inputTime - nowTime) / 1000;  // times 是剩余时间总的秒数  1秒 = 1000 毫秒var d = parseInt(times / 60 / 60 / 24);  // 天d = d < 10 ? '0' + d : d;var h = parseInt(times / 60 / 60 % 24);  // 时h = h < 10 ? '0' + h : h;var m = parseInt(times / 60 % 60);  // 分m = m < 10 ? '0' + m : m;var s = parseInt(times % 60); // 当前的秒s = s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';}console.log(countDown('2025-3-22 20:00:00'));

3. 数组对象

（1）数组创建的两种方式

        // 1.利用数组字面量var arr = [1, 2, 3];console.log(arr[0]);  // 1// 2.利用new Array()// var arr1 = new Array();  // [] 创建了一个空的数组// var arr1 = new Array(2);  // (2) [空属性 × 2]   这个 2 表示 数组的长度为 2  里面有 2 个空的数组元素var arr1 = new Array(2, 3);  // (2) [2, 3]     等价于 [2, 3] 这样写表示  里面有2个数组元素  是 2和3console.log(arr1);

（2）检测是否为数组两种方式

1.instanceof 运算符 它可以用来检测是否为数组

        var arr = [];var obj = {};console.log(arr instanceof Array);  // trueconsole.log(obj instanceof Array);  // false

2.Array.isArray(参数); H5新增的方法 ie9以上版本支持

        var arr = [];var obj = {};console.log(Array.isArray(arr));  // trueconsole.log(Array.isArray(obj));  // false

（3）添加、删除数组元素

        // 添加删除数组元素的方法// 1. push() 在我们数组的末尾  添加一个或多个数组元素  push  推var arr = [1, 2, 3];// arr.push(4, 'pink');console.log(arr.push(4, 'pink'));  // 5console.log(arr);  // [1, 2, 3, 4, 'pink']// (1) push 是可以给数组追加新的元素// (2) push() 参数直接写  数组元素就可以了// (3) push 完毕之后，返回的结果是 新数组的长度// (4) 原数组也会发生变化// 2. unshift() 在我们数组的开头  添加一个或者多个数组元素console.log(arr.unshift('red', 'purple'));  // 7console.log(arr);  //  ['red', 'purple', 1, 2, 3, 4, 'pink']// (1) unshift 是可以给数组前面追加新的元素// (2) unshift() 参数直接写  数组元素就可以了// (3) unshift 完毕之后，返回的结果是 新数组的长度// (4) 原数组也会发生变化// 3. pop() 它可以删除数组的最后一个元素console.log(arr.pop());  //  pinkconsole.log(arr);  // ['red', 'purple', 1, 2, 3, 4]// (1) pop 是可以删除数组的最后一个元素  记住一次只能删除一个元素// (2) pop() 没有参数// (3) pop 完毕之后，返回的结果是 删除的那个元素// (4) 原数组也会发生变化// 4. shift() 它可以删除数组的第一个元素console.log(arr.shift());  // redconsole.log(arr);  // ['purple', 1, 2, 3, 4]// (1) shift 是可以删除数组的第一个元素  记住一次只能删除一个元素// (2) shift() 没有参数// (3) shift 完毕之后，返回的结果是 删除的那个元素// (4) 原数组也会发生变化

（4）筛选数组

有一个包含工资的数组[1500,1200,2000,2100,1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面

        var arr = [1500, 1200, 2000, 2100, 1800];var newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] < 2000) {newArr.push(arr[i]);}}console.log(newArr);  //  [1500, 1200, 1800]

（5）数组排序

        // 1. 翻转数组var arr = ['pink', 'red', 'blue'];arr.reverse();console.log(arr);  //  ['blue', 'red', 'pink']// 2. 数组排序（冒泡排序）var arr1 = [3, 4, 7, 1]arr1.sort();console.log(arr1);  //  [1, 3, 4, 7]// 但是var arr1 = [13, 4, 77, 1, 7]arr1.sort();console.log(arr1);  //  [1, 13, 4, 7, 77]  按照个位的大小排序了// 解决方法var arr1 = [13, 4, 77, 1, 7]arr1.sort(function(a, b) {// return a - b;  // [1, 4, 7, 13, 77]  //升序的顺序排列return b - a;  // [77, 13, 7, 4, 1]  // 降序的顺序排列});console.log(arr1);

（6）获取数组元素索引

        // indexOf(数组元素)  作用就是返回该数组元素的索引号  从前面开始查找// 它只返回第一个满足条件的索引号// 它如果在该数组里面找不到元素，则返回的是 -1var arr = ['red', 'green', 'blue', 'pink', 'blue'];console.log(arr.indexOf('blue'));  // 2var arr1 = ['red', 'green', 'pink'];console.log(arr1.indexOf('blue'));  // -1// lastIndexOf(数组元素)  作用就是返回该数组元素的索引号  从后面开始查找var arr2 = ['red', 'green', 'blue', 'pink', 'blue'];console.log(arr2.lastIndexOf('blue'));  // 4

（7）数组去重案例

        // 封装一个  去重的函数  unique  独一无二的function unique(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {if (newArr.indexOf(arr[i]) === -1) {newArr.push(arr[i]);}}return newArr;}var demo = unique(['blue', 'green', 'blue']);console.log(demo);  // ['blue', 'green']

（8）数组转换为字符串

        // 1.toString()  将我们的数组转换为字符串var arr = [1, 2, 3];console.log(arr.toString());  // 1,2,3// 2.join(分隔符)var arr1 = ['green', 'blue', 'pink'];console.log(arr1.join());  // green,blue,pinkconsole.log(arr1.join('-'));  // green-blue-pinkconsole.log(arr1.join('&'));  // green&blue&pink

4. 字符串对象

（1）基本包装类型

        // 基本包装类型var str = 'andy';console.log(str.length);  // 4// 对象 才有 属性和方法  复杂数据类型才有  属性和方法// 简单数据类型为什么会有 length 属性呢？// 基本包装类型：  就是把简单数据类型  包装成为了  复杂数据类型// (1) 把简单数据类型包装为复杂数据类型var temp = new String('andy');// (2) 把临时变量的值 给 strstr = temp;// (3) 销毁这个临时变量temp = null;

（2）字符串不可变

虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

（3）根据字符返回位置

字符串的所有方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

        // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])var str = '改革春风吹满地，春天来了';console.log(str.indexOf('春'));  // 2console.log(str.indexOf('春', 3));  // 8  // 从索引号是 3 的位置开始往后查找

（4）求某个字符出现的位置以及次数

        var str = "abcoefoxyozzopp";var index = str.indexOf('o');var num = 0;while (index !== -1) {console.log(index);num++;index = str.indexOf('o', index + 1);  // 3 6 9 12}console.log('o出现的次数是' + num);  // 4

（5）根据位置返回字符

        // 根据位置返回字符// 1. charAt(index) 根据位置返回字符var str = 'andy';console.log(str.charAt(3));  // yfor (var i = 0; i < str.length; i++) {console.log(str.charAt(i));  // a n d y}// 2. charCodeAt(index)  返回相应索引号的字符ASCII值  目的：判断用户按下了哪个键console.log(str.charCodeAt(0));  // 97// 3. str[index]  H5新增的console.log(str[0]);  // a

（6）统计出现次数最多的字符

        var str = 'abcoefoxyozzopp';var o = {};for (var i = 0; i < str.length; i++) {var char = str.charAt(i);  // char 是 字符串的每一个字符if (o[char]) {  // o[char] 得到的是属性值o[char]++;} else {o[char] = 1;}}console.log(o);// 2. 遍历对象var max = 0;var ch = '';for (var k in o) {if (o[k] > max) {max = o[k];ch = k;}}console.log(max);console.log('最多的字符是' + ch);

（7）拼接以及截取字符串

        // 字符串操作方法// 1. concat('字符串1', '字符串2'……)var str = 'andy';console.log(str.concat('red'));  // andyred// 2. substr('截取的起始位置', '截取几个字符');var str1 = '改革春风吹满地';console.log(str1.substr(2, 2));  // 春风

（8）替换字符串以及转换为数组

        // 1. 替换字符 replace('被替换的字符', '替换为的字符') 它只会替换第一个字符var str = 'andyandy';console.log(str.replace('a', 'b'));  // bndyandy// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *var str1 = 'abcoefoxyozzopp';while (str1.indexOf('o') !== -1) {str1 = str1.replace('o', '*');}console.log(str1);  // abc*ef*xy*zz*pp// 2. 字符转换为数组  split('分隔符')   前面我们学过 join 把数组转换为字符串var str2 = 'red, pink, blue';console.log(str2.split(','));  // ['red', ' pink', ' blue']var str3 = 'red&pink&blue';console.log(str3.split('&'));  // ['red', ' pink', ' blue']// 其他：// toUpperCase()  转换大写// toLowerCase()  转换小写