JavaScript 对象

一、什么是对象

保存一个值时可以使用变量，保存多个值时可以使用数组，那如果要保存一个人的完整信息呢？
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象必须是一个具体的事物！
对象是由属性和方法组成的（事物的特征和行为）。

二、创建对象

1.字面量创建对象

花括号{ }里包含了表达这个具体对象的属性和方法。

//创建对象
var obj = {
//属性特征
uname: '李华',
age: 16,
sex: '男',
//方法行为
sayHi: function() {
    console.log('hello');
}
}
//使用对象
console.log(obj.age); //16 调用对象（对象名.属性名）
console.log(obj.sayHi()); //hello 不要忘记加小括号

① 里面的属性或者方法我们采用键值对的形式书写，键和值之间用冒号；
② 多个属性或方法中间用逗号隔开；
③ 方法冒号后面跟的是一个匿名函数；
④ 调用对象的属性，第一种是 对象名.属性名，第二种是 对象名[‘属性名’]；
⑤ 调用对象里面的方法，对象名.方法名( )。

属性是属于对象的，不需要声明！

2.new Object 创建对象

var obj = new Object(); //创建了一个空对象
obj.name = '李华';
obj.age = 16;
obj.sex = '男';
obj.sayHi = function() {
console.log('hello');
}
console.log(obj.age); //16
console.log(obj['sex']); //男
console.log(obj.sayHi()); //hello

① 通过等号赋值，添加对象的属性和方法；
② 多个属性或方法中间用封号分隔；
③ Object 注意 O 要大写。

3.构造函数创建对象

我们前面两种创建对象的方式一次只能创建一个对象，大多数时候我们会需要很多属性相同、属性值不同的对象，如果一个一个地去创建或者复制粘贴，代码难免多余繁杂。
因此，我们可以使用构造函数来解决这个问题！
构造函数不同于函数，因为它里面封装的不是普通代码，而是对象。也就是说，构造函数是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

//构造
function Star(uname, age, sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        console.log(sang);
    }
}
//调用
var a = new Star('李华', 16, '男');
var b = new Star('王菲', 37, '女'); //批量生成对象属性
b.sing('mmp'); //生成对象方法
console.log(a.name); //李华

① 构造函数的首字母要大写；
② 调用构造函数时要加 new；
③ 构造函数不需要 return 就可以返回结果；
④ 调用函数返回的是一个对象；
⑤ 构造函数泛指某一大类事物，对象单指某一个确切的事物；
⑥ 我们利用构造函数创建对象的过程也称为对象的实例化；
⑦ new 关键字执行过程：new 构造函数可以在内存中创建一个空的对象，而 this 就会指向刚才创建的空对象，执行代码给这个空对象添加属性和方法，最后返回这个对象。

三、遍历对象

我们使用 for in 来遍历对象。

var obj = {
uname: '李华',
sex: '男',
age: 16
}
for (var k in obj) {
    console.log(k); //输出属性名
    console.log(obj[k]); //输出属性值
}

for 里面的变量无需赋值，且这里的变量我们习惯使用 k 来表示！

四、内置对象

浏览器对象分为三种：自定义对象、内置对象和浏览器对象。
我们上面所说的对象都是自定义对象，自定义对象和内置对象是 JS 的基础内容，而浏览器对象是我们 JS 独有的，这个我们后面再详解。
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而没必要的功能。

1.查阅 MDN 文档

MDN 的官方网址：https://developer.mozilla.org/zh-CN/

① 查阅该方法的功能；
② 查看里面参数的意义和类型；
③ 查看返回值的意义和类型；
④ 通过 demo 进行测试。

如果忘记英文代码，你也可以直接输入汉字进行查阅！

2.Math 对象

Math 数学对象不是一个构造函数，所以不需要用 new 来调用，直接就可以使用！

console.log(Math.PI); //3.1415926
console.log(Math.max(1, 99, 3)); //99
console.log(Math.max(1, 33, 'nihao')); //NaN

2.1 Math 随机数

① Math.random()返回一个随机小数，方法里面不跟参数，小数范围大于等于0且小于1。
② Math.floor(Math.random() * (max - min + 1)) + min得到两个数之间的随机整数，并且包含这两个整数

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

3.日期对象

Date 日期对象是一个构造函数，必须使用 new 来调用！

var date = new Date(); //创建一个日期对象
console.log(date); //打印当前时间

① 日期对象里面也是可以写参数的，如果没写参数则返回当前时间；
② 参数常用的写法有 2022,09,14 和 ‘2022-9-14 7:7:6’ 两种（第二种最常用）；
③ Date 与 Math不同，Date必须实例化后才可以使用。

3.1 日期格式化

通过上面代码我们可以获取到相应的日期时间，但是它的格式可能不是我们想要看到的样子，比如我们想要 2022-7-9 8:40:23 这样格式的日期，该怎么办呢？
要获取日期指定的部分，需要我们手动去修改日期的格式，具体方法如下：

//我们写一个2022年 9月 14日 星期三
var date = new Date();
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]);
 
//封装一个函数返回当前的时、分、秒，格式 08:09:09
function getTime(){
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds(); 
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());

3.2 总的毫秒数

获取的不是当前毫秒数，而是距离 1970年1月1日过了多少毫秒。（时间戳）

var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//我们还有一种简单的方法可以获取，也是最常用的
var date1 = +new Date(); //new前加个加号返回的就是总的毫秒数
console.log(date1);
//还有更简单的，是H5新增的方法
console.log(Date.now()); //直接输出

3.3 倒计时

① 核心算法：用输入的时间减去现在的时间就是剩余的时间，也就是倒计时。但是不能拿时分秒去相减，这样很容易会减出负数，比如05分减去25分；
② 用时间戳来做。用户输入时间总的毫秒数减去现在时间总的毫秒数，得到的就是剩余时间的毫秒数；
③ 把剩余时间总的毫秒数转换为天、时、分、秒。

转换公式如下：

d = parseInt(总秒数 / 60 / 60 /24);  //计算天数
h = parseInt(总秒数 / 60 / 60 % 24);  //计算小时
m = parseInt(总秒数 / 60 % 60);  //计算分数
s = parseInt(总秒数 % 60);  //计算秒数

//倒计时案例
function countDown(time) {
var nowTime = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - nowTime) / 1000; //剩余总秒数
var d = parseInt(times / 60 / 60 /24);  
d = d < 10 ? '0' + d : d; //当天数小于十天时，以07、08的格式显示会更整齐美观
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 + '秒';
}
var input = prompt('请输入截止时间：'); //可以这样输入 2022-9-20 18:00:00
var a = countDown(input);
console.log(a); 

4.数组对象

4.1 数组创建

创建数组有两种方法，第一种就是我们前面所学的字面量创建数组，第二种是利用 new 关键字创建数组。

var arr1 = new Array(); //创建一个空的数组
var arr2 = new Array(2); //这里的2表示数组的长度为2，里面有两个空的数组元素
var arr3 = new Array(1, 3); //里面有两个数组元素，分别是1和3
 

4.2 检测是否为数组

要求用户输入一个数组，当格式错误时系统要给出提示。

//第一种方法，instanceof运算符检测
var arr = [];
console.log(arr instanceof Array); //true

//第二种方法，Array.isArray(参数)检测
var obj = {};
console.log(Array.isArray(obj)); //false

4.3 添加数组元素

var arr = [1, 3, 5];
arr.push(6); //在数组末尾追加一个元素6，此时的数组长度为4
arr.push('aa', 12); //在数组末尾追加两个元素，中间用逗号隔开
console.log(arr.push(9)); //7 push是有返回值的，push 之后返回的是新数组的长度
arr.unshift('yes'); //在数组的开头添加一个元素yes
console.log(arr.unshift(22)); //与push一样，返回的是新数组的长度

4.4 删除数组元素

var arr = [1, 3, 5];
arr.pop(); //删除数组的最后一个元素5，注意括号里面不跟参数且一次只能删除一个
console.log(arr.pop()); //3 它也有返回值，删了哪个就返回哪个
arr.shift(); //删除数组第一个元素1，删了哪个就返回哪个

4.5 筛选数组

//给出一个数组，要求把数组中工资超过2000的删除
var arr = [1200, 1500, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] <= 2000) {
        //newArr[newArr.length] = arr[i]; 这是我们之前的做法
        newArr.push(arr[i]); //直接在新数组后面追加
    }
} 
console.log(newArr);

4.6 数组排序

① reverse() 颠倒数组中元素的顺序；
② sort() 对数组中的元素进行排序；
③ 无需参数，arr.reverse()、arr.sort()；
④ arr.sort() 只能对个位数进行排序，想要正常使用必须借助函数。

var arr = [13, 3, 7, 66, 54];
arr.sort(function(a,b) {
return a - b; //升序排列
//return b - a; //降序排列
});
console.log(arr);

4.7 获取数组索引

var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.indexOf('blue')); //2 它只返回第一个满足条件的索引号，找不到则返回-1
console.log(arr.lastIndexOf('pink')); //3 lastIndexOf()是从后往前查找的

这两种方法记住第一种 indexOf() 就行！

下面有一个重点案例 —— 《数组去重》，需要你去掌握！

① 题目：有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]，要求去除数组中重复的元素。
② 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复元素只保留一个放到新数组中去 重。
③ 核心算法：遍历旧数组，然后拿着旧数组元素到新数组中去查找，如果该元素在新数组中没有出现过，我们就将该元素添加到新数组，否则不添加。
④ 如何判断元素是否已经存在？你是否注意到了我们上面刚讲完的 indexOf() 方法，当它返回-1的时候，就代表它没有找到这个元素，也就是说该元素不存在。
⑤ 具体代码如下：

function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        var indexs = newArr.indexOf(arr[i]);
        if (indexs === -1) {
            newArr.push(arr[i]);
        } 
    }
    return newArr;
}
var arrs = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
var demo = unique(arrs);
console.log(demo);

4.8 数组转换字符串

var arr = [1, 2, 3];
console.log(arr.toString()); //1,2,3 不跟参数，逗号分隔
var arr1 = [4, 5, 6];
console.log(arr.join('-')); //4-5-6 可以自定义分隔符，参数即分隔符

5.字符串对象

5.1 基本包装类型

提问：复杂数据类型才有属性和方法，简单数据类型怎么会有 length 属性呢？
所谓基本包装类型，就是把简单数据类型包装成复杂数据类型！
包装过程分为三步：

var temp = new String('andy'); //把简单数据类型包装成复杂数据类型
str = temp; //把临时变量的值赋给str
temp = null; //销毁这个临时变量

5.2 字符串不可变

① 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，是在内存中开辟了一个新的内存空间；
② 不要大量地拼接字符串，反复地开辟内存空间只会让你的程序很卡。

5.3 根据字符返回位置

var str = '春眠不觉晓，处处闻啼鸟。';
console.log(str.indexOf('处')); //6
console.log(str.indexOf('处', 7)); //7 参数后面可跟起始查找位置，这里起始索引为7

这里依然是一个典型例子，认真思考掌握！

① 题目：查找字符串 “abcoefoxyozzopp” 中所有 o 出现的位置及出现次数。
② 核心算法：先查找第一个 o 出现的位置，只要 indexOf() 返回的结果不是-1，就继续往后查找。
③ 你知道 indexOf() 只能查找到该元素第一次出现的位置，你有没有想到我们上面所说的，参数后面是可以跟起始查找位置的，所以后面的查找，要改变起始位置当前索引加1，继续查找。
④ 具体代码如下：

var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var count = 0;
 while (index !== -1) {
     console.log(index);
     count++;
     index = str.indexOf('o', index + 1);
 }
 console.log('o出现的次数是：'+ count);

5.4 根据位置返回字符

var str = 'andy';
console.log(str.charAt(2)); //d
console.log(str[2]); //d 等效于上
console.log(str.charCodeAt(0)); //97 返回相应索引号的字符ASCII值

5.5 统计出现次数最多的字符

核心算法：利用 charAt() 遍历字符串，接着把每个字符都存储给一个对象，如果对方没有该属性，则为其添加此属性，并将其属性值设置为1，如果已存在该属性，则属性值加一。
单个字符就是属性名，属性值用来统计字符出现的次数！

//1.统计各字符出现的次数
var str = 'abcoefoxyozzopp';
var o = {}; //创建一个空对象
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i);  //遍历字符串中的每一个字符
    if (o[chars]) {
        o[chars]++;  //o[chars]得到的是属性值
    }
    else {
        o[chars] = 1;
    }
}
//2.统计出现次数最多的字符
var max = 0;
var ch = '';
for (var k in o) {
    //k得到的是属性名，o[k]得到的是属性值
    if (o[k] > max) {
        max = o[k];
        ch = k;
    }
}
alert('出现最多的字符是：' + ch + '，共出现了' + max + '次！');

5.6 拼接以及截取字符串

var str = 'andy';
console.log(str.concat('red', 'blue')); //andyredblue 但我们更习惯用加号拼接字符串 
var str1 = '春眠不觉晓';
console.log(str.substr(2, 2)); //不觉 第一个2是开始位置的索引号，第二个2是截取的长度

5.7 替换字符串以及转换为数组

//单个字符替换
var str = 'andy';
console.log(str.replace('a', 'b')); //bndy 将a替换成b

//要求把字符串里面所有的o都替换成*
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
    str1 = str1.replace('o', '*'); //将发现的第一个o替换成*
}
console.log(str1);

//字符串转换为数组
var str = 'red&blue&green';
console.log(str.split('&')); //split('分隔符') 这里的分隔符指字符串的划分符号