【前端笔记14】javascript6 内置对象

本文基于 【黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门】P155-190内容所做笔记，涉及大量的概念及方法，自求多福。

---

一、内置对象

javaScript 中的3中对象：自定义对象、内置对象、浏览器对象(js特有)
内置对象：JS自带的一些对象，为开发者提供常用的或是基本而必要的功能(属性和方法)，例如：Math、Date、Array、String等

查文档MDN
方式：Mozilla开发者网络(MDN)，提供有关开放网络技术的信息，包括HTML、CSS、万维网及HTML5应用的API。

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

Math对象

Math不是一个构造函数，而是一个内置对象，具有数学常数和函数的属性和方法

	// 圆周率
	Math.PI
	// 输出一组数中的最大值
	Math.max(值1, 值2, ...)
	// 绝对值
	Math.abs()
	// 向下取整,向上取整
	Math.floor(值)
	Math.ceil(值)
	// 四舍五入
	Math.round()	// .5向大数取

	// 随机数函数：randon()返回一个0~1的随机小数[0,1)
	// 生成0-10
	Math.floor(Math.randm() * (10 + 1))		// +1：可取到10
	// 得到包含两数的随机整数
	function getRandon(min, max){
		Math.floor(Math.random() * (max - min + 1 )) + min;
	}

Date对象

注意：只能通过构造函数来实例化日期对象：以常规函数调用(即不加new操作符)将返回一个字符串，而不是一个日期对象

// 使用Date
	var data = new Date();
	// 返回当前日期的年 : 
	data.getFullYear()
	// 返回当前月份：
	data.getMonth() + 1
	// 返回当前日期：
	data.getDate()
	// 返回当前星期：
	data.getDay()

//时、分、秒
	h = data.getHours;
	h = h < 10 ? '0' + h : h;		// 补0
	data.getMinutes
	data.getSeconds

时间戳：

	// 时间戳获取，距离1980年1月1日总的毫秒数
	// valueOf()   getTime()
	var date = new Date();
	date.valueOf()
	date.getTime
	// 简单写法
	var date1 = +new Date();
	// H5新增
	Date.now()

1. 若无参数，返回系统当前时间
2. 若有时间参数，返回参数时间

数组对象

回顾：创建数组
1.var arr = [1, 2, 3];
2. var arr1 = new Array(1, 2, 3);

判断是否为数组

1. 待测值 instanceof Array
2. Array.isArray(待测值)

添加删除数组元素

// 1. push：给数组追加新的元素，返回新数组长度
var arr = [1, 2, 3];
length = arr.push(4, '5');	// length = 5

// 2. unshift 在开头添加元素，返回新数组长度
arr.unshift('red', 'p');

// 3. pop()：删除数组最后一个元素，返回删除元素
// 4. shift()：删除数组第一个元素，返回删除元素

应用实例：

	// 1. 筛选出所需元素
	var arr = [1500 ,1200, 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]);
		}
	}

数组排序

// 1.reverse()：颠倒数组中元素顺序，返回改变后的新数组
	var arr = [1,2,3];
	arr.reverse();		// arr[3,2,1]
// 2.sort()：对数组的元素进行排序，返回改变后的新数组
	var arr = [1,4,7,13,77];
	arr.sort();			// arr[1,13,4,7,77]
	// 
	arr.sort(function(a,b){retrun a - b;})	// 升序
	arr.sort(function(a,b){retrun b - a;})	// 降序

数组索引

	// 1. indexOf()：查找给定元素的第一个索引号，返回索引号/-1
	var arr = ['a', 'b', 'c', 'b'];
	arr.indexOf('b');	// 1
	// 2. lastIndexOf()：查找给定元素的最后一个索引号，返回索引号/-1
	arr.lastIndexOf('b');	// 3

数组转化为字符串

	// 1. toString()
	var arr = [1, 2, 3];
	arr.toString();		// arr = ['1', '2', '3']
	// 2. join('分割符')
	console.log(arr.join('||'));		// 输出：1||2||3

连接数组，数组截取，数组删除

	// 连接：concat(数组1，数组2，数组...)，返回拼接后的数组
	
	// 截取：slice(begin, end)		// 开始，结束，返回截取后的数组
	// 删除：splice(begin, number)	// 开始，删除的个数，返回删除后的数组

基本包装类型

表现：简单数据有了对象的属性和方法
原因：js把简单数据类型包装成的了复杂数据类型

	// 举例：str有了 .length的方法，而该方法对象才有
	var str = 'abcd';
	console.log(str.length);	// 输出：4

	//包装过程
	// 1. 把简单数据类型包装成复杂数据类型
	var temp = new String('abcd');
	// 2. 把临时变量的值给str
	str = temp;
	// 3. 销毁临时变量
	temp = null;
	

字符串对象

字符串的不可变性：字符串变量再次赋值时，原值仍存在，新值保存在新的地址里，而不是替换原值的位置。

不要大量拼接，再赋值字符串变量，以节省空间

字符串所有方法，都不会修改字符串本身

字符串索引

	// 1. indexOf('待查字符',[始查位置]);
	var str = 'abcd,cde';
	str.indexOf('c');	// 2
	str.indexOf('c',3)	// 5，从第3位往后查找
	
	// 2. lastIndexOf()

根据位置返回字符(重点)

	// 1. charAt(index)根据位置，返回字符
	// 2. charCodeAt(index)根据位置，返回字符的ASCII码
	// 3. str[index]根据位置，返回字符	(H5新增)

字符串操作方法(重点)

	// 1. concat()：连接字符串
	var str = 'andy';
	str.concat('red');	// str = 'andyred'
	// 2. substr(start,length)：
	var str1 = 'abcd';
	str1.substr(1, 3);		// bcd
	// 3. slice(start, end)：截取，不包含end
	// 4. substring(start, end)：截取，不包含end，不接受负值

替换字符

	// 1. replace()
	var str = 'abcda';
	str.replace('a', 'b');	// str = 'bbcda'
	
	// 多字符替换
	var str1 = 'abcda';
	while(str1.indexOf('0') !== -1){
		str1 = str1.replace('a','b');	
	}	// str1 = 'bbcdb'

字符转换为数组

回顾 join：把数组转换为字符串

	var str = 'a,b,c';
	str.split(',')	// str = ['a', 'b', 'c'];
	var str1 = 'a&b&c';
	str1.split('&') // str = ['a', 'b', 'c'];
)

大小写转换

	// 1. toUpperCase()
	// 2. toLowerCase()

---

二、简单数据类型与复杂数据类型

简单数据类型：值类型，存储时变量中存储的是值本身

• 如：string, number, boolean, undefined, null
• null 返回的是空对象
  复杂数据类型：引用类型，存储时变量中存储的仅仅是地址(引用)
• new创建的变量
• 如：Object, Array, Date

堆和栈

js并无堆和栈的概念，但因js基于其他语言开发，隐含堆栈概念，这里为方便理解

操作系统的内存中：

1. 栈：由操作系统自动分配释放函数的参数值、局部变量值等，存放简单数据类型
2. 堆：存储复杂类型，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，存放复杂数据类型

简单数据类型传参

描述：函数的形参可看作一变量，当将一值类型变量作参数传给函数形参时，实际是把变量再栈空间里的值复制了一份给形参，故在方法内对形参做任何修改，都不影响外部变量

function fn(a){
	a++;
	console.log(a);	// 11
}
var x = 10;
fn(x);
console.log(x);	// 10

复杂数据类型
描述：函数的形参可看作一变量，当将一引用类型变量作参数传给函数形参时，实际是把变量再栈空间保存的堆地址复制给形参，形参实参保存同一个堆地址，故操作的是同一对象

function Person(name){
	this.name = name;
}
funtion f1(x){	// x = p
	console.log(x.name);	// 2.输出：张学友
	x.name = '刘德华';	
	console.log(x.name);	// 3.输出：刘德华
}
var p = new Person('张学友');
console.log(p.name);	// 1.输出张学友
f1(p);
console.log(p.name)		// 4.输出刘德华

---

---

若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending