JavaScript中的对象，常用内置对象和数据类型

一、对象

1.概念

什么是对象？

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

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

属性：事物的特征，在对象中属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

手机：
	属性——大小、颜色、尺寸和厚度等等
	方法——打电话、发短信、玩游戏

2.为什么需要对象

保存一个值的时候，可以使用变量、保存多个值可以使用数组。

如果要保存一个人的完整信息呢？

如：将“张三丰”的个人信息保存起来 var arr = [‘张三丰’,‘男’，100，100，…]

上述例子中用数组保存数据的缺点：数据只能通过索引来访问，开发者就需要非常清晰的记得所有数据的排行才能准确的获取数据，而当数据量庞大的时候，不可能做到记忆所有的数据的索引值。


为了让更好地存储一组数据，对象就应运而生：对象中的每项数据设置了属性名词，可以访问数据更加语义化，数据结构清晰，表意明显，方便开发者使用

var person = {
    "name":"张三丰",
    "sex":"男",
    "age":100,
    "height":100
}

JS中对象表达结构更加清晰，更强大。

3.创建对象的三种方式

3.1 利用newObject创建

语法

//语法1:创建一个空对象
var  对象名 = new Object();//创建了一个空的对象

// 语法2：给对象中添加属性和值
对象名.属性名 = 值;


// 语法3：给对象添加方法
对象名.方法名 = function(){
   //...
}


// 语法4：如何获取对象中的属性
对象名.属性名


//语法5：如何调用对象中的方法
对象名.方法名();

案例

//利用new  Object创建对象
var zsf = new Object();  //创建了一个空的对象
//给对象添加属性
zsf.name = '张三丰'; //给对象中添加属性和值
zsf.age = 100;
zsf.sex = '男';

//给对象添加方法
zsf.sayHi = function(){
    console.log('张三丰说：你好!');
}

console.log(zsf.name);
console.log(zsf.sex);

//调用对象中的方法
zsf.sayHi();

3.2 利用字面量的方式创建

语法

//语法：
var 对象名 = {
    属性1: '值1',
    属性2: '值2,
    ...
    方法名1:function(){
        //..
    },
	方法名2:function(){        //..
    }
}

案例

//通过字面量的方式创建对象
var ldh = {
    name:'刘德华',
    age:61,
    sing:function(){
        console.log('刘德华唱了：忘情水');
    },
    eat:function(){
        console.log('我会吃饭');
    }
}
//获取属性值
console.log(ldh.name);
//调用对象中的方法
ldh.sing();
ldh.eat();

3.3 利用构造函数创建

我们为什么需要构造函数：

因为我们前面两种创建对象的方式一次只能创建一个对象。因为我们一次创建了一个对象，里卖弄很多的属性和方法是大量相同的，我们只能复制。

我们可以利用函数方法，重复这些相同的代码，我们把这个函数称之为构造函数，因为这个函数不一样的，里卖弄封装的不是普通的代码，而是对象，

**构造函数：**就是把我们对象里面一些相同的属性和方法抽取（抽象）出来封装到函数里面

//构造函数
function Star(uname,uage){
    this.name = uname;
    this.age = uage;
    this.sing = function(sang){
        console.log('我在唱歌:' + sang);
    };
    this.eat = function(){
        console.log('我爱吃饭');
    }
}

//通过构造函数，构造出一个刘德华
var ldh = new Star('刘德华','55');
console.log(ldh.name);
console.log(ldh.age);
ldh.sing('冰雨');
ldh.eat();
var zxy = new Star('张学友',60);
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('吻别');

4.new关键字执行过程

function Star(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}
/*
            new执行过程：
                1.new构造函数可以在内存中创建一个空对象
                2.this 就会执行刚辞创建的空对象
                3.执行构造函数里面的代码，给这个空对象添加属性和方法
                4.返回这个对象
 */
//创建对象
var ldh = new Star('刘德华',20,'男');

5.遍历对象

var obj = {
    name:'蔡徐坤',  //key:value
    age:19,
    sex:'男',
    fn:function(){
        console.log('fn执行了');
    }
}

//遍历对象
for(var k in obj){
    //得到属性的值  对象[key]
    console.log(k + '    ' + obj[k]);
}

二、JS内置对象

1 什么是JS内置对象

JavaScript中的对象分为3种：

自定义对象
内置对象
浏览器对象

前面的两种对象是JS基础内容，属于ECMAScript，第三个浏览器对象属于JS独有的。JS API讲解内置对象就是指JS语言自带的一些对象，这些对象提供给开发者使用，并提供了一些常用的或者是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发。

JavaScript种提供了多个内置对象：Math、Date、Array、String等等。

2 查文档

查找文档：学习一个内置对象的使用，只要学会了其常用成员和使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。

Mozilla开发网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括了HTML、css和万维网及HTML5应用的API

MDN: https://developer.mozilla.org/zh-CN/

3 Math

Math 不是一个函数对象。Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。

属性、方法	功能
`Math.PI`	圆周率，一个圆的周长和直径之比，约等于 `3.14159`。
`Math.floor(x)`	返回小于一个数的最大整数，即一个数向下取整后的值。
`Math.ceil(x)`	返回大于一个数的最小整数，即一个数向上取整后的值。
`Math.abs(x)`	返回一个数的绝对值。
`Math.max([x[, y[, …\]]])`	返回零到多个数值中最大值。
`Math.min([x[, y[, …\]]])`	返回零到多个数值中最小值。
`Math.random()`	返回一个 0 到 1 之间的伪随机数。
`Math.round(x)`	返回四舍五入后的整数。

案例一

//Math数学对象，不是一个构造函数，所以我们不需要用new来调用,而是直接使用里面的属性和方法即可
console.log(Math.PI);  //PI一个属性，圆周率
console.log(Math.max(1,99,3,100,20,6));  //100
console.log(Math.min(1,10,20,-1,9,7));   //-1
console.log(Math.max(1,99,10,'abc'));    //NaN
console.log(Math.max());    //-Infinity

案例二

利用对象封装自己的数学对象，里面由PI和最大值和最小值

//利用对象封装自己的数学对象，里面由PI和最大值和最小值
var myMath = {
    PI:3.141592653589793,
    max:function(){  //求传入数据中的最大值
        if(arguments.length == 0){
            return -Infinity;
        }
        var max = arguments[0];
        for(var i = 1; i < arguments.length; i++){
            if(arguments[i] > max){
                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);  //PI一个属性，圆周率
console.log(myMath.max(1,99,3,100,20,6));  //100
console.log(myMath.min(1,10,20,-1,9,7));   //-1
console.log(myMath.max(1,99,10,'abc'));    //NaN
console.log(myMath.max());    //-Infinity

案例三

Math绝对和三个取整方法

//1.绝对值方法
console.log(Math.abs(1)); //1
console.log(Math.abs(-1)); //1
console.log(Math.abs('-1')); // 隐式转换，会把字符串-1转换成数字型
console.log(Math.abs('abc')); //NaN

//2.三个取整方法
//2.1 Math.floor();  floor:地板，向下取整，往最小的取
console.log(Math.floor(1.1));  //1
console.log(Math.floor(1.9));  //1

//2.2 Math.ceil();    ceil:天花板,向上取整，往最大的取
console.log(Math.ceil(1.1));  //2
console.log(Math.ceil(1.9));  //2

//3. Math.round()   round:四舍五入
console.log(Math.round(1.1));  //1
console.log(Math.round(1.5));  //2
console.log(Math.round(1.9));  //2

console.log(Math.round(-1.1));  //-1
console.log(Math.round(-1.5));  //-1

案例四

Math对象随机数方法

//Math对象随机数方法  random:随机,返回的数范围：  0 <= x < 1
//这个方法里面不跟参数
console.log(Math.random());

//我们想要得到两个数之间的随机整数 
//          Math.floor(Math.random() * (max - min + 1) + min);
//每次随机数字是1 ~ 3  max = 3  min = 1
// var max = 3,min = 1;
// var r = Math.floor(Math.random()*(max - min + 1) + min);
// console.log(r);

//封装成一个函数，以后你传给我最大值和最小值，我就给你返回一个随机数
function getRandom(min,max){
    return Math.floor(Math.random()*(max - min + 1) + min);
}

var r = getRandom(1,3);
console.log(r);

//随机点名
var arr = ['张三','李四','王五','柯震东','房祖名'];
var index = getRandom(0,arr.length - 1) //随机索引（0，数组长度-1）
console.log(arr[index]);

案例五

需求：随机生成1~100之间的一个数字，用户通过prompt输入一个数字，和随机生成的数字比较，如果猜大了就提示猜大了，然后用户重新输入，如果猜小了就提示用户猜小了然后用户重新输入，直到用户猜对了程序才结束

//封装成一个函数，以后你传给我最大值和最小值，我就给你返回一个随机数
function getRandom(min,max){
    return Math.floor(Math.random()*(max - min + 1) + min);
}
//1.生成1~100的随机数
var r = getRandom(1,100);

//2.猜数字
while(true){
    var num = parseInt(prompt('请输入数字：'));
    if(num > r){
        alert('猜大了');
    } else if(num < r){
        alert('猜小了');
    } else {
        alert('恭喜！猜对了');
        break;//结束循环
    }
}

4 日期对象

该实例呈现时间中的某个时刻。Date是一个构造函数，所以使用的时候需要实例化（new）之后才能使用其中具体的方法和属性

4.1 实例化Date

获取当前时间必须实例化：
- 获取当前时间
  - ```
  var now = new Date();
```
- 获取指定的时间
  - ```
  var mynow = new Date('2024/9/1');
```

//1.实例化
var date = new Date();
console.log(date);  //Mon Oct 14 2024 11:26:00 GMT+0800 (GMT+08:00)

//2.带参数
var date2 = new Date(2024,9,1);
console.log(date2);  //Tue Oct 01 2024 00:00:00 GMT+0800 (GMT+08:00)


//3.带参
var date3 = new Date('2022-10-10 08:08:08');
console.log(date3);  //Mon Oct 10 2022 08:08:08 GMT+0800 (GMT+08:00)

**注意：**如果创建实例时没有传入参数，则得到的日期对象是当前时间对应的日期对象

4.2 Date常用的属性和方法

方法名	说明
`getFullYear()`	获取年
`getMonth()`	获取月（0 ~ 11）
`getDate()`	获取日
`getDay()`	获取星期几（周日0，其它周一1，周2…）
`getHours()`	获取小时
`getMinutes()`	获取分钟
`getSeconds()`	获取秒

//1.创建日期对象
var date = new Date();
var year = date.getFullYear(); //年
var month = date.getMonth() + 1;  //月（从0 ~ 11）
var dates = date.getDate(); //日
var week = date.getDay(); //获取的是星期 (星期天是0)
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

var hours = date.getHours(); //时
var minutes = date.getMinutes(); //分钟
var seconds = date.getSeconds();//秒
console.log(year + '-' + month + '-' + dates + ' ' + arr[week] + ' ' + hours + ':' + minutes + ':' + seconds);

4.3 毫秒数

通过Date获取总毫秒数

总毫秒数的含义
- 基于1970年1月1日起到你获取的这一刻所经历的毫秒

获取总毫秒数

//实例化对象
var now = new Date();

//1.用于获取对象的原始值（两个都是）
console.log(now.valueOf());
console.log(now.getTime());

//2.简单写
//HTML5种提供的写法
var now2 = Date.now();
console.log(now2);

var now3 = + new Date();
console.log(now3);

5 数组对象

5.1 数组创建方式

字面量
- ```
var arr = [1,'test',true];
```
new Array();
- ```
var arr = new Array();
```
- 创建的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组的时候传入参数，参数传递的规则如下：
  - 如果只传入一个参数，则参数规定了数组的长度
  - 如果传入了多个参数，则参数是数组种的元素

//通过构造函数创建数组
//var arr2 = new Array(5);  //只传入一个参数，表示设置数组的长度
var arr2 = new Array(5,1); //传入的是多个参数，表示设置数组中的元素

5.2 检测是否为数组

5.2.1 instanceof

instanceof 运算符:可以判断一个对象是否是某个构造函数的实例

//instanceof 运算符:可以判断一个对象是否是某个构造函数的实例
var date = new Date();
var arr = new Array();

console.log(date instanceof(Array)); //false
console.log(date instanceof(Date)); //true
console.log(arr instanceof(Array)); //true

5.2.2 Array.isArray()

Array.isArray() 用于判断是否一个对象是数组

//instanceof 运算符:可以判断一个对象是否是某个构造函数的实例
var date = new Date();
var arr = new Array();

console.log(date instanceof(Array)); //false
console.log(date instanceof(Date)); //true
console.log(arr instanceof Array); //true

console.log(Array.isArray(arr)); //true

5.3 添加删除数组元素

数组中由进行增加、删除元素的方法

方法名	说明	返回值
`push(参数1...)`	末尾添加一个或多个元素（注意：会修改原来的数组）	返回新的长度
`pop()`	删除数组最后一个元素，把数组的长度减少1，没有参数（注意：会修改原来的数组）	返回它删除的元素的值
`shift()`	删除数组的第一个元素，数组的长度减少1，没有参数（注意：会修改原来的数组）	并返回第一个元素的值
`unshift(参数1...)`	向数组的开头添加一个或多个元素（注意：会修改原来的数组）	并返回新的长度

**总结：**push、unshift是添加元素的方法。pop和shift是删除元素的方法

        /*
            添加或删除数组中的元素
            1.添加元素
                push(元素1,元素2,...):往数组的末尾添加元素
                unshift(元素1,元素2,...):往数组的开头添加元素
            2.删除元素
                pop():该方法没有参数，删除数组中的最后一个元素；返回的是删除的最后一个元素
                shift():该方法没有参数，删除数组中的第一个元素；返回的是删除的第一个元素
        */
var arr = [1,2,3];
//1.添加元素
// arr.push(4);  //往数组的末尾添加元素
var a1 = arr.push(4,5); //用push方法后，将返回新的数组的长度

console.log(a1);

//arr.unshift(0);
var a2 = arr.unshift(-1,0);
console.log(a2);


//2.删除元素
arr.pop();
// var a3 = arr.pop();
// console.log("被删除的数是：" + a3);

var a4 = arr.shift();
console.log('被删除的是：' + a4);

console.log(arr);
console.log(arr.length);

5.4 数组排序

数组中由对数组本身排序的方法

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新的数组
sort()	对数组中的元素进行排序	该方法会改变原来的数组，返回新的数组

var arr1 = new Array(5,7,3,8,2);

//1.要求升序排序
arr1.sort();

//循环遍历输出
for(var i = 0; i < arr1.length; i++){
    console.log(arr1[i]);
}


var arr2 = new Array('jack','admin','aben','back','rose','hello');
arr2.sort();
for(var i = 0; i < arr2.length; i++){
    console.log(arr2[i]);
}

console.log("*************************************");

//2.翻转
arr2.reverse();
for(var i = 0; i < arr2.length; i++){
    console.log(arr2[i]);
}

冒泡排序

如果传入function (a,b) {return a - b;} ;则为升序排序
如果传入function (a,b) {return b - a;} ;则为降序排序

var arr1 = new Array(5,7,3,8,10,11,2);
arr1.sort(function(a,b){
    // return a - b; //升序
    return b - a;  //降序
});
console.log(arr1);

5.5 数组索引方法

数组中由获取数组指定元素索引的方法

方法名	说明	返回值
`indexOf()`	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在返回-1
`lastIndexOf()`	在数组中的最后一个的索引	如果存在返回索引号，如果不存在返回-1

var arr = ['red','green','blue','pink','skyblue','blue']
//indexOf()数组中查找给定元素的第一个索引.如果存在返回索引号，如果不存在返回-1
var index1 = arr.indexOf('blue');
console.log(index1); //2

//lastIndexOf()在数组中的最后一个的索引,如果存在返回索引号，如果不存在返回-1
var index2 = arr.lastIndexOf('blue');
console.log(index2); //5

var index3 = arr.indexOf('abc');
console.log(index3); // -1

数组中元素去重复

//目标：把数组中重复的元素去掉
//核心算法：遍历数组，然后拿着旧数组元素取查询新的数组，如果该元素在新数组里面没有出现就添加，有不加
// var arr = ['blue','skyblue','pink','blue']

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 arr = ['c','a','b','d','a','c'];
var newArr = unique(arr);
console.log(newArr);

5.6 其它方法

方法名	说明	返回值
`concat()`	链接两个或多个数组，不影响原来的数组	返回一个新的数组
`slice()`	数组截取 slice(begin，end)	返回被截取项目的新的数组
`splice()`	数组删除splice(第几个开始,要删除的个数)	返回被删除项目的新的数组注意：这个会影响原来的数组

//1.concat('字符串1','字符串2',...)
var str1 = 'red';
var str2 = 'hello',str3 = 'world';

console.log(str1.concat(str2));
console.log(str1.concat(str2,str3));

//2.substr('截取开始的位置','截取的字符个数')
var str = 'helloworld';
//要求，获取hello
var mystr = str.substr(0,5);
console.log(mystr);

//要求，获取world
var mystr2 = str.substr(5,5);
console.log(mystr2);

//将一个字符串中的字符替换成别的
//replace它不会改变原来的字符串 

var str = 'helloWorld,世界你好!this is my first replace'
//将第一个的o，都替换成z
//str = str.replace('o','z'); //第一个参数是要调换的，第二个参数是替换为

//将素有的o都替换成z
str = str.replaceAll('o','z');

str = str.replace('世界你好','hahaha');
console.log(str);

5.7 数组转字符串

var arr1 = [1,2,3];
//1.toString()  可以将数组转换成字符串
var str1 = arr1.toString();
console.log(str1); //1,2,3

//2.join(连接符号)
var str2 = arr1.join();
console.log(str2); //1,2,3

var str3 = arr1.join('-');
console.log(str3); //1-2-3

var str4 = arr1.join('&');
console.log(str4); //1&2&3

5.8 字符串对象

5.8.1 基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number 和Boolean

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了复杂数据类型的属性和方法

var str = 'admin';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型。

//上面的代码默认会经历下面的过程

//1.生成临时变量，把简单类型包装成为复杂类型
var temp = new String("admin");
//2.赋值给我们声明的变量
var str = temp;
//3.销毁临时变量
temp = null;

5.8.2 字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但实际上是内存中的地址发生了变化，内存中重新开辟了一个新的内存空间

5.9根据位置返回字符

字符串通过基本包装类型可以调用部分方法来实现操作字符串，以下是根据位置返回字符

方法名	说明	使用
`charAt(index)`	返回指定位置（索引）的字符（index表示字符的索引号）	str.charAt(0)
`charCodeAt(index)`	获取指定位置处字符ASCⅡ码（index索引号）	str.charCodeAt(0);
`str[index]`	获取指定位置处字符	HTML5中charAt()等效

在上述方法中，charCodeAt(index)方法返回的是指定位置上字符对应的ASCⅡ码

在这里插入图片描述

查找字符串中某个字符出现的次数

//需求：查找'aaodfosafoad23scx'找o出现的位置及次数
var str = 'aaodfosafoad23scx';
var index = str.indexOf('o');
var num = 0; //o出现的次数

while(index != -1){ //能找到o
    //console.log(index);
    num++; //加1
    index = str.indexOf('o',index + 1);
}

console.log(num);

判断一个字符串’aaodfosafoad23scx’中出现次数最多的字符，并统计其次数


//判断一个字符串'aaodfosafoad23scx'中出现次数最多的字符，并统计其次数
//核心算法：利用charAt()

var str = 'aaodfosafboabdb2b3sbcx';
var o = [];  //用来存储每个字符出现的次数
for(var i = 0; i < str.length; i++){
    var chars = str.charAt(i); //chars是字符串中的一个字符
    if(o[chars]){ //o[chars]得到是属性值
        o[chars]++;
    } else {
        o[chars] = 1;
    }
}
console.log(o);

//遍历o数组
var max = 0;
var ch = '';//次数最多的字符
for(var k in o){
    // console.log(k + '----->' + o[k]);
    if(o[k] > max){
        max = o[k]; //获取最大值
        ch = k;//次数最多的字符
    }
}

console.log('最多的字符：' + ch + ',出现了：' + max);