学习笔记9_对象

什么是对象

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

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

• 属性：事物的特征，在对象中用属性来表示
• 方法：事物的行为，在对象中用方法来表示

自定义对象

创建对象

1.利用字面量创建对象

采用键值对形式写，键—属性名，值—属性值

var 对象名 = {
	属性名: 属性值,
	...
	属性名: 属性值,
	方法名: fuction(){
		//函数体
	}
}

调用对象的里的东西

1. 用 对象名.属性名 调用属性
2. 用 对象名[‘属性名’] 调用属性
3. 用 对象名.方法名() 调用方法

2.利用 new Object 创建对象

var 对象名 = new Object();		//创建一个空对象
对象名.属性名 = 属性值			//追加属性
...
对象名.属性名 = 属性值
对象名.方法名 = function(){	  //追加方法
    //函数体
}

调用方法和上面的一样

3.用构造函数创建对象

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

• 构造函数名首字符要大写
• 构造函数不需要return来返回值
• 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法

例子

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) // object对象，调用函数返回的是对象
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
//把冰雨传给了sang
var zxy = new Star('张学友',19,'男');

构造函数和对象

• 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
• 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

new在执行时会做四件事

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

遍历对象

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

for(变量 in 对象名字){
    // 代码块
}

例子

var obj = {
    name: '秦sir',
    age: 18,
    sex: '男',
    fn:function() {}
};
//console.log(obj.name);
//console.log(obj.age);
//console.log(obj.sex);

for(var k in obj){
    console.log(k); 		// k 变量 输出得到的是属性名
    console.log(obj[k]);	// obj[k] 得到的是属性值
}

内置对象

内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能。常用的有Math、 Date 、Array、String等

查阅文档

MDN官网查：MDN Web Docs (mozilla.org)

Math对象

1.获取一组数字中的最大值Math.max或最小值Math.min

console.log(Math.max(1,8,3,-3,9));//9

• 只要如果有任一参数不能被转换为数值，则结果为 NaN，但是'18'是可以的
• 如果没有参数，则结果为 -Infinity，Math.min是Infinity

返回一个数组的最大值在前面加上...

var maxnum = Math.max(...[1, 20, 3, 12, 0]);
console.log(maxnum)//20

2.常用的几个方法

// Math数学对象，不是一个构造函数，所以我们不需要new 来调用，而是直接使用里面的属性和方法即可


//三个取整的方法
Math.floor() 	 		// 向下取整
Math.ceil()             // 向上取整
Math.round()            // 四舍五入版   注意-3.5结果是-3 

Math.PI		 			// 圆周率
Math.abs()		 		// 绝对值
Math.max()/Math.min()	// 求最大和最小值 

3.取随机数Math.random

Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，左闭右开，即 [0,1] 。

得到一个两数之间的随机整数，包括两个数在内

function getRandomIntInclusive(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

日期对象

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月(0 - 11)	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几(0 - 6)	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.gerSeconds()

注意：月和星期都是从0开始，但是月的 0 对应的是一月，而星期的 0 对应的是星期天

现在时间案例

var dobj = new Date();//实例化Date()
year = dobj.getFullYear();

months = dobj.getMonth() + 1;//月份从0开始，所以返回值比实际月份小一个月，需要手动  +1  才是正确月份
months = months < 10 ? '0' + months : months;

date = dobj.getDate();
date = date < 10 ? '0' + date : date;

day = dobj.getDay();
var rday = ['日', '一', '二', '三', '四', '五', '六'];//后面可以利用返回的索引值找到正确的星期

hour = dobj.getHours();
hour = hour < 10 ? '0' + hour : hour;

mimute = dobj.getMinutes();
mimute = mimute < 10 ? '0' + mimute : mimute;

second = dobj.getSeconds();
second = second < 10 ? '0' + second : second;

console.log('现在是：' + year + '年' + months + '月' + date + '日 ' + '星期' + rday[day] + ' ' + hour + ':' + mimute + ':' + second);

获取协调世界时至今的毫秒数

协调世界时：1970年1月1日0时0分0秒

四种方法

// 1 .通过 valueOf()  2.getTime() 
// 实例化Date对象
var date = new Date();
console.log(date.valueOf()); 
console.log(date.getTime());

// 3.最常用的写法
var date1 = +new Date();  // +new Date()返回的就是总的毫秒数，
console.log(date1);

// 4. H5中新增的方法 有兼容性问题
console.log(Date.now());

倒计时案例

function countDown(time) {
    var nowTime = +new Date(); //没有参数，返回的是当前时间总的毫秒数
    var inputTime = +new Date(time); // 有参数，返回的是用户输入时间的总毫秒数
    var times = (inputTime - nowTime) / 1000; //times就是剩余时间的总的秒数

    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('2022-4-4 16:00:00'));
var date = new Date;
console.log(date); //现在时间

数组对象

1.检测是否为数组

1. instanceof 运算符，可以判断一个对象是否属于某种类型

2. Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

   var arr = [1, 23];
   var obj = {};
   console.log(arr instanceof Array); // true
   console.log(obj instanceof Array); // false
   console.log(Array.isArray(arr));   // true
   console.log(Array.isArray(obj));   // false
   

2.增删数组元素

方法名	说明	返回值
push(参数1…)	在末尾添加一个或多个元素	返回新的长度length
unshift(参数1…)	在开头添加一个或多个元素	返回新的长度length
pop()	删除数组最后一个元素	返回它删除的元素的值
shift()	删除数组的第一个元素	返回它删除的元素的值

案例

有一个包含工资的数组[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);

3.数组排序

用sort()来对数组进行排序，元素按照转换为的字符串的各个字符的Unicode位点进行排序。返回值是排序后的一个新数组

比较数字

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);// [1, 2, 3, 4, 5]

也可以写成：
var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);// [1, 2, 3, 4, 5]

//上面都是升序排列，若想降序，只需把'a - b'改成'b - a'

翻转数组

用reverse()来翻转数组，返回值就是翻转后的一个新数组

4.数组索引号

indexOf()和lastIndexOf()

语法：arr.indexOf(searchElement[, fromIndex])

• searchElement：要查找的元素
• fromIndex：
  • 开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1
  • -1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推
  • 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组

去重案例

核心思想：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，就添加进新数组，否则不添加

// 封装一个去重的函数 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(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);//['c', 'a', 'z', 'x', 'b']

5.将数组转换为字符串

toString()和join(‘分隔符’)

// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割 green,blue,red
console.log(arr1.join('-')); //  green-blue-red
console.log(arr1.join('&')); // green&blue&red

6.其他常用的

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

字符串对象

1.基本包装类型

JavaScript 提供了三个特殊的引用类型：String、Number和 Boolean

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

2.字符串索引号

字符串对象也有indexOf()和lastIndexOf()方法，使用方法跟数组对象是一样的

3.根据索引返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码	str.charCodeAt(0)
str[index]	获取指定位置处字符	H5新增,IE8+支持和charAt()等效

案例

核心思想：obj创建一个空对象，然后遍历字符串str，如果obj中已经有str的字符对应的对象，就将obj中对应的属性的值+1，如果没有，就在obj中追加属性，并将属性值赋值为1

var str = 'abcoefoxyozzopp';
var obj = {};
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // chars 是 字符串的每一个字符
        if (obj[chars]) { // o[chars]已经存在，则属性值+1
        	obj[chars]++;
        } else {
        	obj[chars] = 1;//不存在，则追加属性，并将属性值赋值为1
    }
}
console.log(obj);

4.字符串的操作方法

方法名	说明
concat(str1,str2,str3…)	concat() 方法用于连接两个或对各字符串。拼接字符串，相当于+
slice(start,end)	从 start 位置开始，截取到 end 位置，左闭右开[ start，end )，索引号可以指赋值
substring(start,end)	从 start 位置开始，截取到 end 位置，也是左闭右开[ start，end )，但是不能写负的索引号

5.替换字符串

replace() 方法用于在字符串中用一些字符替换另一些字符，不过只能替换首次出现的

str.replace(str1,str2)

var str = 'one two three two';
console.log(str.replace('two', 'four'));//只能替换第一次出现的  two  所以结果是  one four three two

6.字符串转换成数组

split() 方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

var month = "Jan,Feb,Mar,Apr,May,Jun";
console.log(month.split(','));//['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']