js初级_04

自律每一天，进步每一天，幸福每一天

知识导航：
js中常用内置对象

• Math对象
• Date对象
• Array对象
• string对象

博文脑图大纲：

1. js种常见内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
前两种属于js基础内容，浏览器对象在web API中解释

学习要领：学习一个内置对象的使用，只要学会其常用成员的使用即可

1.1 Math对象

对象：即保存了一些属性和行为的集合。内置:即js封装时帮我们写好的，我们直接拿来用即可
来看一下math对象中保存了哪些有用于我们的信息吧



有些多，头有点疼有么有。其实我们不需要全部掌握只需对它们的功能特性有一些映像即可，用到的时候查询相关文档（w3c等）
不过有些常用的我们还是要熟记一下的。
如下：

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

栗子：

        console.log(Math.PI);
        console.log(Math.floor(1.2));
        console.log(Math.ceil(1.2));
        console.log(Math.round(1.2));
        console.log(Math.abs(-2));
        console.log(Math.max(-2, 3, 4, 1));
        console.log(Math.min(-2, 3, 4, 1));
        console.log(Math.random());

结果：

再单独搞一下Math.random()，它默认是取0-1的值（左闭右开）。但往往这不是我们所需要的范围。那该怎么办呢？
不急js的参考文档上为我们提供了以下方法。我们来体验一下。
（1）得到一个两数之间的随机数

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min; 
}

这句逻辑很简单,拿个栗子说话
本来是范围[0,1)，我需要的是[4,6)。假设在0-1上得到的是0.2，在4-6上的+4不难理解，因为4是底线基数。但为啥还要*2呢？还是拿精度来说。0-1假设被分为了10份，那4-6的岂不就是20份。它在10份的尺度上占了十分之二，等比例到20份的尺度上也要占到十分之二啊。即占了4份为4.4
（2）得到一个两数之间的随机整数

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

只是把两个参数取整了，min向上取整，max向下取整正好丢掉端点的不可取值
最后所得随机值再向下取整。（注意return中单看+min就可以肯定含有最小值。前面最大值向下取整就已经把最大值踢出去了。return中的取值只是保证返回的是整数）
（3）得到一个两数之间的随机整数，包括两个数在内

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

含有最小值的原理和上面一下，来看一下为什么这有了最大值。通过代码发现。它把我们的比例份数放大了1
极限处理法：令max=1.99，min=0 。 参数取整处理之后结果min
=0，max=1 。设随机数0.99看结果，0.99*（1+1）=1.98(不超过3，但包含原max) 。故处理方法提高一份成立

1.2 Date对象

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。

它的方法还是这么的多，但我们还是只需掌握几个常用的。
首先我们先来看一下它构造函数的基本形式（四种）：

1 new Date();
2 new Date(value);
3 new Date(dateString);
4 new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

        // 第一种
        //如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象
        var date01 = new Date();
        console.log(date01);
        //一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自1970年1月1日00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒
        var date02 = new Date(2020);
        console.log(date02);
        // 第三种
        //表示日期的字符串值。该字符串应该能被 Date.parse() 正确方法识别
        //即获取指定时间的日期对象
        var date03 = new Date("2020/1/1")
        console.log(date03);
        // 第四种
        // year:表示年份的整数值。 0 到99会被映射至1900年至1999年， 其它值代表实际年份。 参见 示例。
        // monthIndex:表示月份的整数值， 从 0（ 1 月） 到 11（ 12 月）。
        // day 可选:表示一个月中的第几天的整数值， 从1开始。 默认值为1。

        var date04 = new Date(2020, 1, 1, 11, 10, 00);
        console.log(date04);

Date实例的常见方法：

栗子：

        var date = new Date();
        var year = date.getFullYear();
        var mon = date.getMonth() + 1;//0-11,所以+1
        var day = date.getDate();
        var week = date.getDay();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        console.log("现在是" + year + "年" + mon + "月" + day + "日星期" + week + "， " + hour + "小时" + min + "分钟， " + sec + "秒");

通过Date实例获取总毫米数

获取的是基于1970年1月1日（世界标准时间）起的毫秒数
方法：

        // 获取的三种方法：
        var date = new Date();
        // 1.
        console.log(date.valueOf());
        // 2.
        console.log(date.getTime());
        // 3. h5新增
        console.log(Date.now());

        // 常用简单写法：
        var date02 = +new Date();
        console.log(date02);

结果：

这里所有知道的实例：
（1）将毫秒转为距今多少天：

        var date02 = +new Date();
        console.log(date02);
        var time = date02 / 1000;
        var s = parseInt(time % 60);//默认是浮点数换为整数
        var m = parseInt(time / 60 % 60);
        var h = parseInt(time / 60 / 60 % 24);
        var d = parseInt(time / 60 / 60 / 24);
        console.log(d);
        console.log("距今已经" + d + "天" + h + "时" + m + "分" + s + "秒");

(2)扩展，求自定义时间距现在时刻的倒计时。10以内的前面补0

        function getCount(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var t = (inputTime - nowTime) / 1000;
            var s = parseInt(t % 60);
            s = s < 10 ? "0" + s : s;
            var m = parseInt(t / 60 % 60);

            m = m < 10 ? "0" + m : m;
            var h = parseInt(t / 60 / 60 % 24);
            h = h < 10 ? "0" + h : h;
            var d = parseInt(t / 60 / 60 / 24);
            d = d < 10 ? "0" + d : d;

            console.log("倒计时：" + d + "天" + h + "时" + m + "分" + s + "秒");

        }
        getCount("2020,2,1 20: 00: 00");

1.3 数组对象

JavaScript的 Array 对象是用于构造数组的全局对象。
它的原型中提供了遍历和修改元素的相关操作。

先来回忆一下创建数组的两种方式：
（1）字面量方式

var arr = [1,2,3];

(2)利用构造函数：

var arr = new Array();

这里需要注意的是： 使用需要使用构造函数Array创建非空数组，可以在创建数组时传入参数，参数传递规则如下：1. 如果只传入一个参数，则参数规定了数组的长度；2.如果传入了多个参数，则参数称为数组的元素

1.3.1 instanceof 运算符

可以用instanceof来检测是否是数组
instanceof 可以判断一个对象是否是某个构造函数的实例，返回值是boolean型
栗子：

//利用通过Array构造函数创建的实例一定是个数组对象
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);

同时h5为新增了一个检测数组的方法（Array.isArray()）：

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

1.3.2 数组元素的增删

方法如下：

栗子（不要像我这样输出数组吆）

        var arr = [1, 2];
        console.log(arr);
        var newLength01 = arr.push(3, 4);
        console.log(arr + "当前的长度" + newLength01);

        var newLength02 = arr.unshift(-1, 0);
        console.log(arr + "当前的长度" + newLength02);

        var date01 = arr.pop();
        console.log(arr + "删除的元素为" + date01);
        var date02 = arr.shift();
        console.log(arr + "删除的元素为" + date02);

结果：

1.3.3 数组排序

数组中有对数组本身排序的方法，部分方法如：

主要功能介绍：
（1）reverse方法实现数组元素翻转：

        var arr = [1, 2, 3];
        console.log(arr.reverse());

结果：

（2）sort方法通过传入参数来设置升序、降序排序

        var arr = [3, 98, 5, 6, 7];
        console.log(arr.sort(function(a, b) {
            return a - b;
        }));

return a-b：是升序
return b-a；是降序
结果：

1.3.4 得到数组元素索引号

我们可用通过数组的索引号获取数组元素，当然也可以通过数组元素获取数组的索引号。
方法一：indexOf（从前往后找，返回找到第一个满足条件的。找不到则返回-1）

        var arr = ["a", 2, 3, 2, 5];
        console.log(arr.indexOf(2));

结果：

方法二：lastIndexOf（与方法不同的是它是从后往前找）

        var arr = ["a", 2, 3, 2, 5];
        console.log(arr.indexOf(2));
        console.log(arr.lastIndexOf(2));

**结果：**返回的是后面的那个2的索引号。

1.3.5 数组转换为字符串

两种方法：
方法一：toString方法,返回值字符串

       var arr = ["a", 2, 3, 2, 5];
        console.log(arr.toString());

方法二：join（参数为设置的分隔符）

        var arr = ["a", 2, 3, 2, 5];
        console.log(arr.join("-"));

1.3.6 其他常用方法

方法：

（1）concat
基本语法：arrayObject.concat(arrayX,arrayX,......,arrayX)其中参数arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值： 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
栗子：

        var arr01 = [0, 1, 2];
        var arr02 = [3, 4, 5];
        console.log(arr01.concat(arr02));

结果：

（2）slice
基本语法：arrayObject.slice(start,end),参数：start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值：：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。(不会像循环链表那样循环回去哦)
栗子：

        var arr = [1, 2, 3, 4, 5];
        console.log(arr.slice(-3, -1)); //3,4

结果：

splice
基本语法：
arrayObject.splice(index,howmany,item1,.....,itemX)，参数：index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。
返回值： 包含被删除项目的新数组，如果有的话。(该方法会改变原始数组。)
栗子：

        var arr = [1, 2, 3, 4, 5];
        console.log(arr.splice(0, 4, 8, 9)); //删除元素为1,2,3,4
        //在0索引处删4的元素并添加8,9 。最后数组结果应为8,9,5
        console.log(arr);

结果：

1.4 字符串对象

首先得接受一下js的基本包装类型：
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
看下面的一个栗子：

// 下面代码有什么问题？
var str = 'gongxiaobai';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

// 1. 生成临时变量，通过构造函数的方式将简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

字符串的不可变性
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
​由于字符串的不可变，在大量拼接字符串的时候会有效率问题

下面来介绍方法

1.4.1 根据字符返回位置

方法一：indexOf，返回某个指定的字符串值在字符串中首次出现的位置。
基本语法：
stringObject.indexOf(searchvalue,fromindex)参数：searchvalue 必需。规定需检索的字符串值。fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
说明：
该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
栗子：

        var str = "aabbcc345eeff";
        console.log(str.indexOf("345")); //没写formindex参数默认从0开始。打印值应为6
        console.log(str.indexOf("345", 5));//当然写了这个顺序结果也没差，只是找到的更快

结果：

方法二：lastIndexOf,返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
基本语法
stringObject.lastIndexOf(searchvalue,fromindex),参数与上同
说明：

• 与上的方法相同只是前者从前往后找，这个从后往前，不过要注意的是如果在 stringObject 中的 fromindex 位置之前存在 searchvalue，则返回的是出现的最后一个 searchvalue 的位置。
• 如果找到一个 searchvalue，则返回 searchvalue 的第一个字符在 stringObject 中的位置

栗子：

        var str = "aabbee345eeff";
        console.log(str.lastIndexOf("ee")); //9
        console.log(str.lastIndexOf("ee", 6)); //4

结果：

1.4.2 根据位置返回字符

方法一： charAt()，返回指定位置的字符
基本语法：
stringObject.charAt(index)参数：index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
栗子：

        var str = "aabbee345eeff";
        console.log(str.charAt(0));

结果：

方法二： charCodeAt(),返回指定位置的字符的 Unicode 编码(ASCII码)
基本语法：
stringObject.charCodeAt(index),参数：index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
栗子：

        var str = "aabbee345eeff";
        console.log(str.charCodeAt(0));

结果：

方法三： str[index],h5新增
栗子：

        var str = "aabbee345eeff";
        console.log(str[0]);

结果：

1.4.3replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符(或替换一个与正则表达式匹配的子串。)，其使用格式如下：

字符串.replace(被替换的字符串， 要替换为的字符串);
//标准型：
stringObject.replace(regexp/substr,replacement)
参数：
regexp/substr	必需。规定子字符串或要替换的模式的 RegExp 对象。
请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。

replacement	必需。一个字符串值。规定了替换文本或生成替换文本的函数。

栗子：

        var str = "aabbee345eeff";
        console.log(str.replace("aa", "rr"));

结果：

1.4.4split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
基本语法：
stringObject.split(separator,howmany),参数：separator起始字符，howmany切割长度.如果把空字符串 ("") 用作 separator，那么 就从stringObject字符串的起始位置开始
或者：
stringObject.split(分隔符);作用如把字符串’'name=gongxiaobai"转为"[name,gongxiaobai]"这样的数组
栗子：

        var str = "aabbee345eeff";
        console.log(str.split("", 5));

结果：

1.4.5其他常用方法

栗子：

        var str01 = "gong";
        var str02 = "xiaobai";
        console.log(str01.concat(str02));
        // substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
        console.log(str01.substr(0, 4));
        // slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
        console.log(str02.slice(4)); //后面参数不写默认到最后
        // substring() 方法用于提取字符串中介于两个指定下标之间的字符。参数是非负整数
        console.log(str02.substring(0, 4));

结果：