【前端系列教程之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/

如何学习一个方法？

1. 方法的功能

2. 参数的意义和类型

3. 返回值意义和类型

4. 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作除数的情况。

<script>
    var loginName = parseInt('amigo1121');
    if(isNaN(loginName)) {
        //如果loginName不是数值,执行如下语句
        alert("parseInt('amigo1121')的结果是: " + loginName);
    } else {
        alert("parseInt('amigo1121')的结果是数值!");
    }
</script>

基本包装类型

        为了方便操作简单数据类型，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;		// 结果是什么