【前端系列教程之JavaScript】07_JavaScript内置对象
JavaScript内置对象
JavaScript中的对象分为3种：内置对象、自定义对象、浏览器对象
JavaScript 提供多个内置对象：Math/Array/Date....
对象只是带有属性和方法的特殊数据类型。
学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）
可以通过MDN/W3C来查询
内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。
Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN:https://developer.mozilla.org/zh-CN/
如何学习一个方法？
-
方法的功能
-
参数的意义和类型
-
返回值意义和类型
-
demo进行测试
Array对象
Array构造函数
// new关键字创建空数组
var arr = new Array();
// new关键字创建包含元素的数组
var arr = new Array(值1,值2.....值N);
// new关键字创建指定元素个数的数组
var arr = new Array(数值);
// 也可以使用[]直接创建数组
var arr = [];
var arr = [值1,值2.....值N];
// 可以使用length属性获取数组的长度;并且可以给一个数组长度赋值。检测一个对象是否是数组
-
instanceof
-
Array.isArray() HTML5中提供的方法，有兼容性问题
函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断；
sort排序底层源码(了解)：
function sort(array, fnCompare) {
// 外层循环 控制趟数
for (var i = 0; i < array.length - 1; i++) {
// 假设排好序了
var isSort = true;
// 内层循环 控制比较的次数
for (var j = 0; j < array.length - 1 - i; j++) {
if (fnCompare(array[j], array[j + 1]) > 0) {
isSort = false;
// 交换位置
var tmp = array[j];
array[j] = array[j + 1];
array[j + 1] = tmp;
}
}
// 判断是否排好了
if (isSort) {
break;
}
}
}
var arr = [56, 10, 1, 17];
sort(arr, function (a, b) {
return b - a;
})
console.log(arr);Array对象方法
程序运行时通常需要读取数组中的数据，有时候需要对数据进行修改。
（一）读取数据：可以使用索引查询获取数组元素和添加数组元素
（二）添加数据：使用push()方法将新元素添加到数组尾部.
（三）删除数据：可以使用delete()运算符删除指定的元素。
（四）删除末尾元素(更新数据) : pop()方法,该方法会返回删除的元素。
（五）删除顶端的元素 : shift()方法
（六）在数组顶端添加元素 : unshift()方法,返回值为新数组的长度。
（七）字符转换：toString()方法将数组表示为字符串。
（八）join方法输出数组元素。(输出结果会转换成字符串)
（九）数组逆序reverse()：颠倒数组元素的顺序;返回值为逆序后的新数组。
（十）数组排序 sort：
语法 数组名.sort(sortfunction)
sortfunction若省略，默认为从按照ASII字符顺序进行升序排列
sortfunction必须返回：正值、零、负值三者之一。正直表示第一个值大于第二个值，负值反之，零则相等。
var arr1 = [72,33,12,44,24];
arr1.sort(function(a,b){return a-b;});
alert(arr1);
var arr1 = [72,33,12,44,24];
arr1.sort(function(a,b){return b-a;});
alert(arr1);（十一）扩充数组 concat:将多个数组的元素合并为一个新的数组。
（十二）splice方法：删除、替换、插入元素,会更改原数组 第一参数为起始位置索引 第二参数为切取元素个数 第三个参数为插入元素，可选项
（十三）切取数组的一段元素 slice： 切取部分作为新数组返回，不会对原数组改变。 第一参数为起始位置索引(包含) 第二参数为结束位置索引，注意区分splice(不包含) 若省略第二个参数则直接切取到结尾
（十四）toString()/valueOf()
toString() 把数组转换成字符串，逗号分隔每一项
valueOf() 返回数组对象本身
将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现
function myJoin(array, seperator) {
if (array.length == 0){
return '';
}
var str = array[0];
for (var i = 1; i < array.length; i++) {
str += seperator + array[i];
}
return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));
console.log(array.join('-'))将一个字符串数组的元素的顺序进行反转。使用两种种方式实现。
function myReverse(arr) {
if (!arr || arr.length == 0) {
return [];
}
for (var i = 0; i < arr.length / 2; i++) {
var tmp = arr[i];
arr[i] = arr[this.length - i - 1];
arr[arr.length - i - 1] = tmp;
}
return arr;
}
var array = ['a', 'b', 'c'];
console.log(myReverse(array));
console.log(array.reverse());Date对象
Date是JavaScript的内置对象，系统在Date对象中封装了与日期和时间相关的属性和方法。
Date使用UTC1970年1月1日0时开始经过的毫秒数来存储时间。
GMT 格林尼治时间
UTC 国际协调时间
注:January(Jan.)一月； February(Feb.)二月； March(Mar.)三月； April(Apr.)四月； May五月 June(六月； July（jul）七月； August(Aug.)八月； September(Sep.)九月； October(Oct.)十月； November(Nov.)十一月； December(Dec.)十二月
Monday 星期一 Tuesday 星期二 Wednesday 星期三 Thursday 星期四 Friday 星期五 Saturday 星期六 Sunday 星期日Date构造函数
// 无参数的情况下返回值为当前时间。不同浏览器显示的时间格式会有细微差异
var date= new Date();
// 参数为毫秒值,距1970年1月1日（世界标准时间）起的毫秒数
var date = new Date(milliseconds);
// 参数为日期字符串
var date = new Date(dateString);
// 必选值:year, month, day；
var date = new Date(year, month, day, hours, minutes, seconds, milliseconds);Date对象方法
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() 以毫秒设置 Date 对象。Date对象相关的字符串表示方法：
toSting() 获取Date实例的字符串表示
toDateSting() 获取Date的日期部分字符串表示
toTimeSting() 获取Date的时间部分字符串表示
toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
valueOf(): 返回1970年1月1日午夜到指定日期的毫秒数
Date.now(): 返回1970年1月1日午夜到指定日期的毫秒数(HTML5中提供的方法，有兼容性问题)Date对象解析相关方法:
Date.parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
Date.parse()参数支持的时间格式如下：
1/24/2016;得到 Sun Jan 24 2016 10:10:10 GMT+0800
格式不正确会返回 无效的时间
写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {
//如果date不是日期对象，返回
if (!d instanceof Date) {
return;
}
var year = d.getFullYear(),
month = d.getMonth() + 1,
date = d.getDate(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds();
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute:minute;
second = second < 10 ? '0' + second:second;
return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}计算时间差，返回相差的天/时/分/秒
function getInterval(start, end) {
var day, hour, minute, second, interval;
interval = end - start;
interval /= 1000;
day = Math.round(interval / 60 / 60 / 24);
hour = Math.round(interval / 60 / 60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
console.log(getInterval(new Date("2019-12-31"),new Date("2020-5-2")))String对象
字符串是非常重要的数据类型，除了基本字符串外，JavaScript还提供了字符串的引用类型--字符串对象。
字符串对象提供了字符串检索、替换、连接等方法...
字符串的不可变
var str = 'abc';
str = 'hello';
// 当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题String构造函数
可以通过new 关键字创建字符串对象
var str=”hello”; // 字符串字面量
var str=new String(); // 字符串对象注:创建出来的类型虽说不同,但是对于内置的方法和属性都是可以使用的
length 属性返回字符串的长度(字符数)。
String对象方法
charAt(index) 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat([string1,string2...) 连接字符串。
slice(start,end) 提取字符串n到m之间的片断(不包括m位置的字符串)，并在新的字符串中返回被提取的部分。
substring(star,end) 提取字符串中两个指定的索引号之间的字符。大多数情况和上一个作用相同，当参数为负值时会有不同，但这种情况较少用，不做讨论，有兴趣的话自己测试或查下资料
substr(start,length) 从起始索引号提取字符串中指定数目的字符。
split(separator,limit) 把字符串分割为字符串数组。
indexOf(subString[, startIndex]) 检索字符串,返回某个指定的字符串值在字符串中首次出现的位置。注意，如果查找不到会返回 -1
lastIndexOf(subString[, startIndex]) 返回指定字符串在字符串最后出现的位置。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
match() 找到一个或多个正则表达式的匹配。(正则表达式后续课程会讲),该方法会返回一个数组，数组中包含了所符合条件的文本。
replace(rgExp, replaceText) 替换与正则表达式匹配的子串，并返回替换后的字符串，注意原字符串不会改变.
search(rgExp) 回与正则表达式查找内容匹配的第一个子字符串的位置。(与indexOf相似)
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。把字符串中所有的o替换成!
var s = 'abcoefoxyozzopp';
var index = -1;
do {
index = s.indexOf('o', index + 1);
if (index !== -1) {
// 替换
s = s.replace('o', '!');
}
} while(index !== -1);
console.log(s);Math对象
Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供
跟数学相关的运算来找Math中的成员（求绝对值，取整）
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
Math.PI 返回圆周率（约等于3.14159）。
Math.ceil(x) 返回大于等于其数字参数的最小整数。
Math.floor(x) 返回小于等于其数值参数的最大整数。
Math.round(x) 把数四舍五入为最接近的整数。
Math.random() 返回介于 0 和 1 之间的伪随机数。 注:产生的伪随机数介于 0 和 1 之间（含 0，不含 1），也就是，返回值可能为0，但总是小于1。
Math.max(x,y) 返回 x 和 y 中的最高值。
Math.min(x,y) 返回 x 和 y 中的最低值。
Math.abs(x) 返回x的绝对值 全局对象
1、parseInt
parseInt() 函数可解析一个字符串，并返回一个整数。
2、parseFloat方法
parseFloat()函数可解析一个字符串，并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。
3、isNaN()方法
定义和用法
isNaN(x):函数用于检查其参数是否是非数字值。 参数x是要检测的值
如果x是特殊的非数字值NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
isNaN()函数可用于判断其参数是否是NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）,如果把NaN与任何值(包括其自身)相比得到的结果均是false，所以要判断某个值是否是NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。
提示和注释 提示：isNaN()函数通常用于检测parseFloat()和parseInt()的结果，以判断它们表示的是否是合法的数字。当然也可以用isNaN()函数来检测算数错误，比如用0作除数的情况。
基本包装类型
为了方便操作简单数据类型，JavaScript还提供了三个特殊的简单类型类型：String/Number/Boolean
// 下面代码的问题？
// s1是基本类型，基本类型是没有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);
// 当调用s1.substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象, 相当于：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;// 创建基本包装类型的对象
var num = 18; //数值，基本类型
var num = Number('18'); //类型转换
var num = new Number(18); //基本包装类型，对象
// Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如：
var b1 = new Boolean(false);
var b2 = b1 && true; // 结果是什么