JavaScript学习05-对象、简单类型与复杂类型

对象

一组无序的属性和方法的集合，所有事物都是对象
对象由属性和方法组成
属性：对象里的变量，事物的特征，名词，大小、颜色、重量…
方法：对象里的函数，事物的行为，动词，跑、跳、吃…

三种对象

自定义对象，内置对象，浏览器对象
前两个属于ECMAScript, 浏览器对象JS独有

创建对象三种方式

字面量创建对象

var obj1={}
var obj2={
	name: '张三',
	age: 18,
	sex: '男',
	sayHi: function(){
		console.log('hi');
	}
}

对象的属性或方法采用键值对形式
多个属性与方法用逗号隔开
方法后面跟的是匿名函数

//使用对象属性 对象名.属性名  或者  对象名['属性名']
console.log(obj2.name);
console.log(obj2['name']);

//使用对象方法  对象名.方法名()
obj2.sayHi();

函数是单独声明的，直接函数名调用
方法是在对象里声明，使用对象调用

new Object创建对象

var obj = new Object();
obj.name= '张三';
obj.age= 18;
obj.sex= '男';
obj.sayHi= function(){
		console.log('hi');
	}
console.log(obj2.name);
console.log(obj2['name']);

用=给对象添加属性、方法，用分号隔开

构造函数创建对象

把对象里面相同的属性和方法抽象出来封装到函数里

//定义
function 构造函数名(形参){
	this.属性=值;
	this.方法=function(形参){}
}

//调用
new 构造函数名(实参);
对象.方法名(实参);

function People(n,a){
	this.name=n;
	this.age=a;
	this.run=function(run){
		console.log('run'+run);
	}
}
var xiaoming=new People('xiaoming',18);
xiaoming.run(1);

构造函数名首字母要大写
属性和方法前面必须加this
返回一个对象，不需要return
利用构造函数创建对象的过程成为对象实例化

new关键字

new 构造函数在堆内存创建了一块存储空间，放一个空对象
this 指向创建的空对象，构造函数里的代码给这个空对象添加属性和方法，最后返回这个对象
每一次new 一个对象都在内存空间开辟一个新空间，指针指向不同的地址所以能创造不同的对象实例，地址不同，内容不同

遍历对象属性

var obj={
	name: '张三',
	age: 18,
	sex: '男',
	sayHi: function(){
		console.log('hi');
	}
}
for(var k in obj){
	console.log(k);   // name  age  sex  sayHi
	console.log(obj[k]);   //张三  18  男   f(){console.log('hi');}
}

内置对象

JS语言自带的一些对象，提供一些常用的或最基本而必要的属性和方法
比如 Math, Date, Array, String…

Math对象

不是构造函数，可直接调用属性和方法

Math.PI      //圆周率
Math.max();     //最大值  返回传入参数的最大值，不传参返回-Infinity，参数有非数字返回NaN
Math.min();     //最小值  返回传入参数的最小值，不传参返回Infinity，参数有非数字返回NaN
Math.floor();   //向下取整   1.1返回1，1.9返回1
Math.ceil();   //向上取整   1.1返回2，1.9返回2
Math.round();   //四舍五入，负数往大的取  1.1返回1，1.5返回2，-1.1返回-1，-1.5返回-1
Math.abs();   //绝对值  会把字符串形式的数字转为数字型  传入非数字返回NaN
Math.random();  //返回一个随机小数[0，1）

//得到两个数之间的随机数，包括这两个数，b<a
Math.floor(Math.random() * (a-b+1)) +b

Date对象

是一个构造函数，必须使用new调用创建日期对象

创建方式

var date=new Date();  //无参数，返回当前系统时间
var date=new Date(2022,1,1);  //数字参数，年月日
var date=new Date('2022-1-1 8:8:8');  //字符串参数，年-月-日 时：分：秒  
var date=new Date('2022/1/1');
var date=new Date('2022-1-1');

getDay()周一到周六是1~6，周日是0
getMonth()从0开始

时间戳

//当前距离1970年1月1日总毫秒数
var date=new Date();
//1.
date.valueOf();
//2.
date.getTime();
//3.
var date1= +new Date();
//4.
var date2= Date.now();

//转化公式
总秒数= 时间戳/1000;
day= parseInt( 总秒数 /60 /60 /24);
hour= parseInt( 总秒数 /60 /60 %24);
minutes= parseInt( 总秒数 /60 %60);
second= parseInt( 总秒数 %60);

应用：倒计时

function countTime(time){
	var nowTime= +new Date();
	var inputTime= +new Date(time);
	var times= (inputTime-nowTime) /1000;
	var day= parseInt( times /60 /60 /24);
	var hour= parseInt( times /60 /60 %24);
	var minutes= parseInt( times /60 %60);
	var second= parseInt( times %60);
	day=addZero(day);
	hour=addZero(hour)
	minutes=addZero(minutes);
	second=addZero(second);
	return '还有' + day + '天' + hour + '时' + minutes + '分' + second + '秒';
}
function addZero(x){
	return x < 10 ? '0'+x : x;
}

应用：日期格式化

function getTime(){
	var date=new Date();
	var year=date.getFullYear();
	var month=date.getMonth()+1;
	var dates=date.getDate();
	var arr=['周日','周一','周二','周三','周四','周五','周六'];
	var day=arr[date.getDay()];
	return year+'年'+month+'月'+dates+'日 '+day;
}

Array对象

两种创建方式

字面量方式和new Array()

var arr1=[1,2,3];
var arr2=new Array();   //创建一个空数组
var arr3=new Array(2);   //创建数组长度为2，值为undefined
var arr4=new Array(2,3);  //创建数组值为2和3，长度为2

检测是否为数组

//1. instanceof 运算符
var arr=[];
console.log(arr instanceof Array);   //true

//2.  IE9以上支持
console.log(Array.isArray(arr));  

添加删除数组元素

var arr=[1,2,3];
arr.push(参数);  //数组末尾添加一个或多个元素，修改原数组，返回新长度
arr.pop();   //删除数组最后一个元素，数组长度减一，修改原数组，返回删除的元素值
arr.unshift(参数);   //数组开头添加一个或多个元素，修改原数组，返回新长度
arr.shift();   //删除数组第一个元素，数组长度减一，修改原数组，返回第一个元素值

删除一次只能删一个

arr.push(4,'red');  //添加两个值4、red，不是在4索引添加red，

数组排序

var arr=[2,1,3,11];
arr.reverse();  //倒序输出， 11 3 1 2
arr.sort();  //按个位数升序排列，改变原来的数组  1 11 2 3

arr.sort(function(a,b){
	//return a-b;  //升序排列
	return b-a;   //降序排列
})

数组索引方法

arr.indexOf(数组元素);   //从头开始找，返回第一个符合数组元素的下标，没有返回-1
arr.lastIndexOf(数组元素);   //从尾开始找，返回数组元素的下标，没有返回-1

数组转为字符串

var arr=[1,2,3,5];
arr.toString();    //1,2,3,5   值用逗号隔开的字符串
arr.join();    //1,2,3,5   用逗号隔开数组元素
arr.join('-');   //1-2-3-5  
arr.join('&');   //1&2&3&5

其他方法

arr.concat(数组1，数组2，数组3...);   //连接数组
arr.slice(start,end);   //切片   截取从start位置到end位置
arr.splice();   //删除或添加数组

String对象

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

var str='xxx';

//实际做了以下步骤
var temp=new String('xxx');   //包装成复杂类型
str=temp;   //赋值
temp=null;   //销毁临时变量

类似的还有Number、Boolean

字符串的不可变

字符串值不可变，看上去是变了，实际上是开辟了新内存空间，指向新空间

var str='abc';
str='cde';
//abc依然在内存中，新开辟空间存储cde，让str指向cde

索引方法

var str='abcdefg';
str.indexOf(字符元素);   //从头开始找，返回第一个符合字符元素的下标，没有返回-1
str.lastIndexOf(字符元素);   //从尾开始找，返回字符元素的下标，没有返回-1

str.charAt(索引);   //返回指定索引位置的字符
str.charCodeAt(索引);   //返回指定索引位置的字符ASCII码
str[索引];   //返回指定索引的字符  IE8+支持

字符串方法

str.concat('字符串1','字符串2','字符串3'...);   //连接字符串
str.substr(start,len);   //从start位置截取len个字符，逐渐废弃
str.substring(start,end);   //截取[start,end)的字符串
str.replace('a','x');   //将字符串中的所有a替换为x
str.split(分隔符);  //以分隔符将字符串分割成数组，分隔符在字符串中
str.toUpperCase();   //转为大写
str.tolowerCase();  //转为小写

简单类型和复杂类型

简单类型：又叫基本数据类型或值类型，存储时存储的是值本身
比如：string, number, boolean, undefined, null
复杂类型：又叫引用类型，new创建的对象，存储时（在栈中）存储的是地址，真实实例在堆内存中
比如：Object, Array, Date…

堆和栈

栈：存放简单数据类型，操作系统自动分配释放
堆：存放复杂数据类型，程序员手动释放或者由垃圾回收机制释放
JS没有堆栈的概念

传参

简单类型传参：把形参看作变量，传参时，把实参在栈中的值复制给了形参，所以在方法内修改形参的值不会改变实参
复杂类型传参：把形参看作变量，把引用类型传递给形参时，是把变量在栈中的地址复制给了形参，所以在方法内改变形参的值，会影响实参的值，操作的是同一个对象

function Person(name){
	this.name=name;
}
function func(x){
	console.log(x.name);   //aaa
	x.name='xxx';
	console.log(x.name);    //xxx
}
var p=new Person('aaa');
console.log(p.name);    //aaa
func(p);
console.log(p.name);    //xxx