JS-Math、日期、字符串、数组对象

目录

• 内置对象
• 查文档
• Math对象
• 日期对象
• 数组对象
• 字符串对象

一、内置对象

• JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
• 前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的，我们JS API讲解
• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
• 内置对象最大的有点就是帮助我们快速开发
• JavaScript提供了多个内置对象：Math、Date、Array、String等

二、如何学习对象中的方法

1. 查阅该方法的功能
2. 查看里面参数的意义和类型
3. 查看返回值的意义和类型
4. 通过 demo 进行测试

三、Math 对象

3.1、Math 概述

Math 对象 不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

// Math 数学对象  不是一个构造函数，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
Math.PI                                  // 圆周率
Math.floor ( )                         //  向下取整
Math.ceil ( )                           //  向上取整
Math.round ( )                      //  四舍五入 就近取整  注意  -3.5  结果是  -3
Math.abs ( )                          //   绝对值
Math.max ( ) / Math.min ( )  //   求最大值和最小值

// 1. 绝对值方法
console.log( Math.abs( 1 ) ); // 1
console.log( Math.abs( -1 ) ); //1
console.log( Math.abs( '-1' ) ); // 隐式转换  会把字符串型 -1 转换为数字型
console.log( Math.abs( 'pink' ) ); // NaN

// 2. 三个取整方法
// (1) Math.floor( )  地板   向下取整  往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1

// (2) Math.ceil( )     ceil 天花板 向上取整  往最大了取值
console.log(Math.ceil(1.1));  // 2
console.log(Math.ceil(1.9));  // 2

// (3) Math.round( )   四舍五入  其他数字都是四舍五入，但是 .5特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1

3.2、Math 对象随机数方法

// 1. Math 对象随机数方法 random( ) 返回一个随机的小鼠   0 =< x < 1
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log(Math.random( ));
// 4. 我们想要得到两个数之间的随机整数 并且 包含这 2 个整数
// Math.foor(Math.random( ) * (max - min +1 )) + min;
function getRandom(min, max) {
        return Math.floor(Math.random( ) * (max - min + 1)) + min
}
console.log(getRandom(1,10));
// 5. 随机点名
var arr = ['张三', '张三1', '张三2', '张三3'];
// console.log(arr[0]);
console.log(arr[ getRandom(0,arr.length - 1 )]);

案例：猜数字游戏

程序随机生成一个1~10之间的数字，并让用户输入一个数字

1. 如果大于该数字，就提示，数字打了，继续猜
2. 如果小于该数字，就提示数字小了，继续猜
3. 如果等于该数字，就提示才对了，结束程序

// 猜数字游戏
// 1. 随机生成一个1~10 的整数  我们需要用到 Math.random( )方法
// 2. 需要一直猜到正确为止，所以需要一直循环
// 3. while 循环更简单
// 4. 核心算法，使用 if else  if 多分支语句来判断大于、小于、等于
function getRandom(min,max) {
      return Math.floor(Math.random( ) * (max - min + 1)) + min;
}
var random = getRandom(1,10);
while (true) {  // 死循环
     var num = prompt('你来猜?  输入1~10之间的一个数字');
     if (num > random) {
           alert('你猜大了');
      } else if( num < random) {
           alert('你猜小了');
      } else {
           alert('太棒了，猜对了');
           break; // 退出整个循环结束程序
       }
}

##### 案例：封装自己的数学对象
利用对象封装自己的数学对象 里面有PI最大值和最小值
````javascript
// 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
var myMath = {
    PI ：3.141592653,
    max : function( ) {
           var   max = arguments[ 0 ];
           for (var i = 1; i< arguments.length; i++) { 
                 if(arguments[ i ] >max) {
                     max = arguments[ i ];
                 }
            }
            return max;
},
      min : function( ) {
           var   min = arguments[ 0 ];
           for (var i = 1; i< arguments.length; i++) { 
                 if(arguments[ i ] < min) {
                     min = arguments[ i ];
                 }
            }
            return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1,5,9));
console.log(myMath.min(1,5,9));

四、日期对象

4.1、Date 概述

• Date 对象 和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
• Date 实例用来处理日期和时间

4.2、Date ( ) 方法的使用

1. 获取当前时间必须实例化

var now = new Date( );
console.log(now);

2. Date ( ) 构造函数的参数 如果括号里面有时间，就返回参数里面的时间。 例如日期格式字符串为 '2019-5-1', 可以写成 new Date( '2019-5-1') 或者 new Date('2019/5/1')

// Date( ) 日期对象  是一个构造函数  必须使用 new 来调用创建我们的日期对象
var arr = new Array( );  // 创建一个数组对象
var obj = new Object( ); // 创建了一个对象实例
// 1. 使用Date  如果没有参数  返回当前系统的当前时间
var date = new Date( );
console.log(date);
// 2. 参数常用的写法  数字型  2019，10，01  或者是  字符串型 '2019-10-1 8:8:8'
var data1 = new Date(2019,10,1);
console.log(data1); // 返回的是 11月  不是 10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);

4.3、日期格式化（年、月、日）

需要获取日期指定的部分，需要手动得到这种格式

* 方法名              说明                                         代码
* getFullYear( )   获取当年                                  d.getFullYear( )
* getMonth( )     获取当月（0-11）                     d.getMonth( )
* getDate( )        获取当天日期                            d.getDate( ) 
* getDay( )         获取星期几（周日 0  到周六 6）  d.getDay( )
* getHours( )      获取当前小时                            d.getHours( )
* getMinutes( )   获取当前分钟                            d.getMinutes( ) 
* getSeconds( )   获取当前秒钟                            d.getSeconds( )

// 格式化日期  年月日
var date = new Date( );
console.log(date.getFullYear( ));  // 返回当前日期的年  2019
console.log(date.getMonth( ) + 1);  // 月份  返回的月份小1个月  记得月份+1
console.log(date.getDate( ));   // 返回的是  几号 
console.log(date.getDay( ));  // 周一返回的是1 周六返回的是6  但是  周日返回的是 0
// 我们写一个2019年 5月 1日 星期三
var year = date.getFullyear( );
var month = date.getMonth( ) + 1;
var dates = date.getDate( );
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = getDay( );
console.log('今天是' + year + '年' +month + '月' + dates +'日' + arr[day]);

4.4、日期格式化（时、分、秒）

var date = new Date( );
console.log(date.getHours( ));  // 时
console.log(date.getMinutes( )); // 分
console.log(date.getSeconds( )); // 秒
//  要求封装一个函数返回当前的时分秒  格式 08:08:08
function getTime( ) {
       var time = new Date( );
       var h = time.getHours( );
       h = h < 10 ? '0' + h : h;
       var m = time.getMinutes( );
       m = m <10 ？'0' + m :m;
       var s = time.getSeconds( ); 
       s = s < 10 ? '0' + s : s;
       return h + ':' + m + ':' + s;
}
console.log(getTime( ));

4.5、获取日期的总的毫秒形式（毫秒数）

Date 对象是基于1970年1月1日（世界标准时间)起的毫秒数） 我们经常利用总的毫秒数来计算时间，因为它更精确

// 获得Date总的毫秒数（时间戳）不是当前时间的毫秒数  而是距离1970年1月1日过了多少毫秒数
// 1. 通过  valueOf( )  getTime( )
var date = new Date( );
console.log(date.valueOf( ));  // 就是  我们现在时间  距离1970.1.1 总的毫秒数
console.log(date.getTime( ));
// 2. 简单的写法（最常用的写法）
var date1 = +new Date( );  // +new Date( )  返回的就是总的毫秒数
console.log(data1);
// 3. H5 新增的  获得总的毫秒数
console.log(Date.now( ));

案例：倒计时效果

做一个倒计时效果

案例分析：
1、核心算法 ：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的
2、用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
3、把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒 ）
转换公式如下：
* d = parseInt(总秒数/60/60/24);  // 计算天数
* h = parseInt(总秒数/60/60%24); // 计算小时
* m = parseInt(总秒数/60%60);    // 计算分数
* s = parseInt(总秒数/60);  // 计算当前秒数

function countDown(time) {
      var nowTime = +new Date( );  // 返回的是当前时间总的毫秒数
      var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
      var times = (inputTime - nowTime) / 1000; // times 是剩余时间总的秒数
      var d = parseInt(times / 60 / 60 / 24); // 天
      d = d < 10 ? '0' + d : d;
      var h = parseInt(times / 60 / 60 % 24); // 时
      h = h < 10 ? '0' + h : h;
      var m = parseInt(times / 60 % 60); // 分
      m = m < 10 ? '0' + m : m;
      var s = parseInt( times / 60);   // 当前的秒 
      s = s < 10 ? '0' + s : s;
      return d + '天' + h + '时' + m +'分' + s + '秒';
}
console.log(countDown('2019-5-1 18:00:00'));
var date = new Date( );
console.log(date);

五、数组对象

5.1、复习 创建数组的两种方式

// 创建数组的两种方式
// 1. 利用数组字面量
var arr = [1,2,3];
console.log(arr[0]);

// 2. 利用 new Array（）
// var arr1 = new Array( );  // 创建了一个空的数组
// var arr1 = new Array(2); // 这个 2 表示  数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示  里面有2个数组元素  是 2和3
console.log(arr1);

5.2、检测是否为数组

// 检测是否为数组
// (1) instanceof 运算符  它可以用来检测是否为数组
var arr = [ ] ;
var obj = [ ] ;
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数）H5新增的方法  ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

5.3、添加删除数组元素的方法

* 方法名                   说明                                                                                          返回值
* push(参数1,....)      末尾添加一个或多个元素，注意修改原数组                                    并返回新的长度
* pop( )                   删除数组最后一个元素，把数组长度减1 无参数、修改原数组          返回它删除的元素的值
* unshift(参数1....)    向数组的开头添加一个或更多元素，注意修改原数组                       并返回新的长度
* shift( )                  删除数组的第一个元素，数组长度减1无参数、修改原数组               并返回第一个元素的值

// 添加删除数组元素方法
// 1. push( ) 在我们数组的末尾 添加一个或者多个数组元素  push 推
var arr = [ 1, 2, 3 ];
// arr.push(4,'pink');
console.log(arr.push(4,'pink');

console.log(arr);
// (1) push 是可以给数组追加新的元素
// (2) push( ) 参数直接写  数组元素就可以了
// (3) push 完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化

// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));

console.log(arr);
// (1) unshift 是可以给数组追加新的元素
// (2) unshift( ) 参数直接写  数组元素就可以了
// (3) unshift 完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化

// 3. pop( ) 它可以删除数组的最后一个元素
console.log(arr.pop( ));
console.log(arr);
// (1) pop 是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop( ) 没有参数
// (3) pop 完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化

// 4. shift( ) 它可以删除数组的第一个元素
console.log(arr.shift( ));
console.log(arr);
// (1) shift 是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) shift( ) 没有参数
// (3) shift 完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化

5.4、案例：筛选数组

有一个包含工资的数组[1500,2000,1200,2100,1800],要求把数组种工资超过2000的删除，剩余的放到新数组里面

var arr = [1500,2000,1200,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 ]);
   }
}
console.log(newArr);

5.5、数组排序

* 方法名           说明                                            是否修改原数组
* reverse( )       颠倒数组中元素的顺序，无参数      该方法会改变原来的数组  返回新数组
* sort( )            对数组的元素进行排序                   该方法会改变原来的数组 返回新数组

// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse( );
console.log(arr);

// 2. 数组排序（冒泡排序）
var arr1 = [ 13, 4, 5 ,66 , 1];
arr1.sort(function(a,b){
         // return a - b;  升序的顺序排列
         return b - a; // 降序的顺序排列
});
console.log(arr1);

5.6、数组索引方法

* 方法名                说明                                             返回值
* indexOf( )           数组中查找给定元素的第一个索引  如果存在返回索引号 如果不存在，则返回-1
* lastIndexOf( )      在数组中的最后一个的索引， 如果存在返回索引号 如果不存在，则返回-1

// 返回数组元素索引号方法  indexOf(数组元素）作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
var arr = [ 'red', 'green', 'pink'];
console.log(arr.indexOf('blue'));  // -1

// 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号  从后面开始查找
var arr = [ 'red', 'green', 'pink' , 'blue'];
console.log(arr.lastIndexOf('blue'));  // 4  索引号还是从前面开始 只是查找的时候从后面查找

5.7、案例：数组去重（重点案例）

有一个数组 [ 'c','a','z','a','x','a','x','c','b' ], 要求去除数组中重复的元素

1、 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复得元素只保留一个，放到新数组中去重
2、 核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
3、 我们怎么知道该元素没有存在？ 利用新数组 indexOf(数组元素) 如果返回 -1 就说明 新数组里面没有改元素
function unique(arr) {
       var newArr = [ ] ;
       for (var i = 0; i < arr.length; i++) {
            if (newArr.indexOf(arr[ i ] === -1) {
                  newArr.push(arr[ i ]);
             }
        }
        return newArr;
}
var demo = unique( [ 'c','a','z','a','x','a','x','c','b' ] )
console.log(demo);

5.8、数组转换为字符串

* 方法名            说明                                                               返回值
* toString( )      把数组转换成字符串，逗号分隔每一项               返回一个字符串
* join('分隔符')   方法用于把数组中的所有元素转换为一个字符串  返回一个字符串

// 数组转换为字符串
// 1. toString( ) 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString( ));  // 1,2,3

// 2. join( 分隔符 )
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join( )); // green, blue, pink
console.log(arr1.join('-'));  // green-blue-pink
console.log(arr1.join('&'); // green&blue&pink

六、字符串对象

6.1、基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊得引用类型：String、Number 和 Boolean。 基本包装类型 就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

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

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

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

6.2、字符串得不可变

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

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量 'abc' 不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串得不可变
// 由于字符串得的不可变，在大量拼接字符串的时候会有效率问题
var str  = '';
for (var i = 0; i < 1000000; i++){
     str += i; 
}
console.log(str);  //这个结果需要花费大量时间来显示，因为需要不断地开辟新的空间

6.3、根据字符返回位置

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串
* 方法名                                              说明
* indexOf('要查找的字符',开始的位置)   返回指定内容在原字符串中的位置，如果找不到就返回 -1 ，开始的位置是 index 索引号
* lastIndexOf( )                                  从后往前找，只找第一个匹配的
````javascript
// 字符串对象  根据字符返回位置  str.indexOf('要查找的字符',[起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春',3));  // 从索引号是 3的位置开始往后查找

6.4、案例：

查找字符串 'abcoefxyozzopp' 中所有o出现的位置以及次数

1、核心算法：先查找第一个o出现的位置
2、然后  只要indexOf 返回的结果不是 -1 就继续往后查找
3、因为indexOf 只能查找第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
var str = 'abcoefxyozzopp' ;
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    cosnole.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是：' + num);

6.5、根据位置返回字符（重点）

* 方法名                        说明                                                                    使用
* charAt( index )           返回指定位置的字符( index 字符串的索引号)            str.charAt( 0 )
* charCodeAt( index )       获取指定位置处字符的ASCLL码（ index 索引号）     str.charCodeAt( 0 )
* str[ index ]               获取指定位置处字符                                               HTML5 , IE8+支持，和charAt( )等效

// 根据位置返回字符
// 1. charAt( index )  根据位置返回字符
var str = 'andy';
console.log(str.charAt( 3 ));
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
     console.log(str.charAt( i ));
}

// 2. charCodeAt( index )  返回相应索引号的字符ASCII值  目的： 判断用户按下了哪个键
console.log( str.charCodeAt(0)); // 97

// 3. str[ index ]  H5 新增的
console.log(str[ 0 ]);

6.6、字符串的操作方法（重点）

• 方法名 说明
• concat(str1,str2,str3...) concat( ) 方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
• substr(strat, length) 从start位置开始（索引号），length 取的个数 重点记住几个
• slice(strat, end） 从start位置开始，截取到end位置，end取不到（他们俩都是索引号）
• substring(start,end) 从start位置开始，截取到end位置，end取不到，基本和slice 相同 但是不接受负值

// 字符串操作方法
// 1. concat('字符串1', '字符串2'...)
var str = 'andy';
console.log(str.concat('red'));

// 2. substr('截取的起始位置','截取几个字符');
var str1 = '改革春风吹满地';
console.log(str1.substr(2,2)); // 第一个2  是索引号的2  从第几个开始  第二个2 是取几个字符

6.7、替换字符 (replace) 和 字符转换为数组split('分隔符')

// 1. 替换字符 replace('被替换的字符','替换为的字符')  它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a','b');
// 有一个字符串 'abcoefoxyozzopp' 要求吧里面所有的 o 替换为 *
var str1 =  'abcoefoxyozzopp';
while (str1.indexOf('o') !== 1) {
   str1 = str1.replace( 'o', '*');
}
console.log(str1);

// 2. 字符转为数组 split('分隔符')   前面我们学过 join 吧数组转换为字符串
var str2 = ' red, pink, blue';
console.log(str2.splet(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));