js学习第八篇：javaScript内置对象

二十、JavaScript内置对象

1.内置对象的分类

JavaScript中的对象分3种：自定义对象、内置对象、浏览器对象

• 前两个对象属于ECMAScript，是JS基础内容；
• 最后的浏览器对象是JS独有的，在JavaAPI中详解

2.什么是内置对象

内置对象 是指JS语言自带的一些对象，供开发者使用，主要包括一些最基本常用的功能（属性和方法）

• 优点：帮助我们快速开发
• 常见内置对象：Math、Date、Array、String等

3.怎么查文档-了解内置对象的使用方法

【文档网站】：MDN、W3C

【MDN*】：提供有关开发网络技术（Open Web）的信息，包括HTML、CSS和万维网及HTML5应用的API

【网站地址】：https://developer.mozilla.org/zh-CN/

(1)先在网站中查阅该方法的功能

(2)查看其中的参数的意义和类型

• 注意参数带[]表示可有可无

(3)查看返回值的意义和类型

(4)写一个demo进行测试

4.Math对象*

是一个内置对象，具有数学常数和函数的属性和方法，并非函数对象。

• Math不是一个构造器，即静态方法**（不需要new直接用）**

（1）Math.PI

圆周率，是一个圆的周长和直径之比≈3.14159

console.log(Math.PI);

（2）Math.max(参数)

求一组数的最大值，传入要比较的一组数即可（正负都可）

• 传入的数值必须是可以转换成数值的，否则->NaN
• 传入的数值为空，返回-infinity

（3）Math.abs(参数)

传入参数计算绝对值，同时参数必须为可转为数值型

• 传入数值必须为可转化成数值的,否则->NaN
• 传入数值为空，返回NaN

（4）Math.floor(数值)

向下取整

console.log(Math.floor(1.1));//1
console.log(Math.floor(1.9));//1
console.log(Math.floor(-1.1))//-2

（5）Math.ceil(数值)

向上取整

（6）Math.roud( 数值)

四舍五入

（7）常用Math函数

5.Math.random()

随机数方法

（1）作用

返回一个浮点数，默认范围在[0，1）

（2）参数

不需要传入参数

（3）如何改变得到的数值范围

• 公式如下：

Math.random()*(max-min)+min;

• 如：

得到2~10之间的浮点数 Math.random()*8+2;

（4）取得范围内的整数

Math.random()*(max-min)+min;

• 范围 ：左闭右开 [ )

function getRandomInt(min,max){
     min = Math.ceil(min)//将传入的min向下取整
     max = Math.floor(max)//将传入的max向上取整
     return Math.floor(Math.random()*(max-min)+min);
   }

（5）随机输出数组元素

①首先定义数组并赋值

②定一个生成随机范围内整数的函数

• 注意范围：左闭右开

③随机生成下标值 ：Math.random()*(max-min)+min;

• 此公式生成的下标刚好为：左闭右开----数组不越界

④输出arr[随机下标]即可。

var arr = ['腻腻','吸吸','呵呵','哈哈'];
function getRandomInt(min,max){
 min = Math.ceil(min);
 max = Math.floor(max);
 return Math.floor(Math.random()*(max-min)+min);
}
alert(arr[getRandomInt(0,arr.length)]);

6.封装自身的Math对象

7.常用Math方法

8.Date()日期对象*

是一个构造函数，必须使用new来创建

（1）使用方法

1️⃣使用Date()必须要new

var date = new Date();

（2）参数常用写法

• 无参数：根据当前时间，创建一个Date对象
• 数字型：年，月，日 如：2019，10，01
• 字符串： '年-月-日 时 : 分 : 秒' 如：‘2019-10-1 8: 8 : 8'

【字符串最为常用，因为数字型会出现+1月的问题，需要设置配置文件】

var date1 = new Date(2019,10,1);
var date2 = new Date('2020-10-1 10:10:10')；

（3）日期格式化

如果想要某种固定格式，可以获取指定部分手动得到：

• 注意月份要+1哦，否则会小1月

• 示例----时间倒计时

    <script>//年月日 格式：00:00:00
   var date = new Date();
  function getTime1(){
       
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var day = date.getDay();
        var days = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        return year + '年' + month + '月' + dates + '日'+days[day];

    }
    function getTime2(){
        //时
        var hour = date.getHours();
        hour = hour > 10? hour : '0'+hour;
        //分
         var minute = date.getMinutes();
         minute = minute >10 ? minute : '0' + minute;
        //秒
        var second = date.getSeconds();
        second = second > 10 ? second : '0' + second;
        return hour + ':' + minute + ':' + second;
    }
    alert(getTime1());
    alert(getTime2());

    </script>

（4）获取Date总毫秒数（时间戳）

-距1970年1月1日到现在，常用于需要永不重复数的情况

1️⃣date.valueOf(参数)方法

 var date = new Date();
 console.log(date.valueOf());
 

2️⃣date.getTime(参数)方法

var date = new Date();
console.log(date.getTime());

即可得到现在时间距离1970年1月1号总的毫秒数

3️⃣直接用+号*

var date = +new Date(参数);
console.log(date);

4️⃣H5新增的Date.now()，获得总毫秒数

• 浏览器版本过低可能不识别

console.log(Date.now());

以上四个方法：

①未传入参数，则返回当前时间总的毫秒数

②传入参数，则返回传入时间的总毫秒数

（5）倒计时案例

用输入的时间（活动开始时间）－当前时间 = 剩余时间

但因为时分秒不能进行减法操作，容易成负数

• 所以应用时间戳,思路如下：

1️⃣用将来的时间戳-现在的时间戳 = 剩余毫秒数

2️⃣再将剩余毫秒数的时间戳--->除以1000换算成秒-->时分秒

        function countDown(time){
            //1.获取当前的时间的毫秒数
            var nowTime = +new Date();
            //2.获取设置的福利时间的毫秒数
            var inputTime = +new Date(time);
            //3.得到剩余时间的秒数
            var times = (inputTime - nowTime)/1000;
            //4.利用公式+parseInt得到整型的天、时、分、秒
            //   利用三目表达式-->考虑输出 00的形式
            var days = parseInt(times/60/60/24);
            var hour = parseInt(times/60/60%24);
            hour = hour>10?hour:'0'+hour;
            var minute = parseInt(times/60%60);
            minute = minute > 10 ? minute : '0'+hour;
            var second = parseInt(times%60);
            second = second > 10? second : '0' + second;
            //5.返回最终结果
            return days +'天' + hour + '时' + minute + '分'+ second +'秒';
        }
        //调用
        console.log(countDown('2023-3-5 18:00:00'));

9.数组对象*

【回顾：】

• 创建数组对象的两种方式：
  • ①字面量方式
  • ②new Array(参数)
    • 参数为空，仅表示创建数组
    • 参数为单个数，仅表示创建有多少个元素的数组
    • 参数为逗号分隔的一组数，表示其中元素值各为什么的数组

（1）检测是否为数组

①instanceof运算符

js中instanceof可以用于检测值是否为数组类型，返回值为布尔型

• Array是数组关键字，相当于判断 变量 是否为 数组这个类的实例

变量名 instanceof Array

• 在java中instanceof是用于查看对象是否为一个类的实例【本质一样】

②Array.isArray（参数）

• H5新增的方法，ie9以上版本可用

Array.isArray( 要判断的变量名 )

（2）添加元素

①数组名.push() --末尾添加

• 在数组末尾添加一个或多个数组元素

1️⃣带参数

• 可多个，逗号分隔

数组名.push(参数)；//向数组后追加参数中的数组元素

2️⃣注意：

• 数组名.push( ) 返回值的是新数组长度
• push( ) 中的参数直接写即可
• push( ) 后原数组也会变化

②数组名.unshift--开头添加

• 在数组开头添加一个或多个数组元素

1️⃣带参数

• 可多个

数组名.unshift(参数)；//在数组前添加参数中的数组元素

2️⃣注意：

• 数组名.push( ) 返回值的是新数组长度
• push( ) 中的参数直接写即可
• push( ) 后原数组也会变化

（3）删除元素

①pop() 删除末尾元素

删除末尾最后一个元素，一次删一个

1️⃣不带参数

• 一次只能删一个

数组名.pop()；//注意没有参数+返回值是被删除的元素

2️⃣返回值

数组名.pop（）返回值是被删除的元素

3️⃣注意：

• 数组名.pop()一次只删除一个元素
• 数组名.pop()返回值是被删除的元素
• 数组名.pop()不用传参数

②shift() 删除开头元素

删除开头的第一个元素

1️⃣不带参数

数组名.shift();//删除开头第一个元素+返回被删除的值

2️⃣返回值

数组名.shift () 完毕后，返回被删除的元素

3️⃣注意：

• 数组名.shift()一次只删除一个元素
• 数组名.shift()返回值是被删除的元素
• 数组名.shift()不用传参数

③ 添加和删除的区别

push( 参数 )添加元素到最后

unshift( 参数 ）添加元素到开头

-------数组名.push( )/数组名 . unshift( ) 返回值是数组的长度

---

pop( )删除最后元素

shift( )删除开头元素

--------数组名.pop( ) / 数组名.shift( ) 返回值是被删除的元素

（4）翻转数组

reserve()可用于翻转一个数组，

1️⃣不带参数

数组名.reserve()；//即可翻转该函数

2️⃣示例

var arr = ['pink,'red,'blue'];
arr.reverse();

（5）冒泡排序

sort()可用于给数组排序

1️⃣不带参数

• 无法对两位数进行排序

数组名.sort();//即可将该数组排序，默认为升序

2️⃣示例

var arr = [1,4,1,8,5,4,4];
arr.sort();//个位数好用，两位数✖

3️⃣升序排序固定写法

• 为解决两位数排序问题，常用写法为 a-b

var arr1 = [13,4,77,1,7];
arr1.sort(function(a,b){
    return a- b;
});
console.log(arr1);

4️⃣降序排序固定写法

• 为解决两位数排序， b-a

var arr1 = [13,4,77,1,7];
arr1.sort(function(a,b){
    return b - a;
});
console.log(arr1);

（6）获取元素索引

• 可通过索引方法，将数组中元素所对应的下标返回得到。

①indexOf( )

数组名.indexOf( 元素 )从前向后开始查找第一个满足条件的元素,返回其下标。

• 有 -> 返回下标值
• 没有->返回-1

1️⃣带参数

数组名.indexOf(元素，[起始的位置])；

2️⃣示例

var arr = ['red','green','blue','pink'，'blue']；
console.log(arr.indexOf('blue));//2
                        //可得到blue元素的下标值

3️⃣有重复元素时

数组名.indexOf(元素)，仅返回第一个满足条件的索引号

即：有两个重复的blue元素，返回第一个blue元素的下标

4️⃣没有要查找的元素时

返回-1

②lastIndexOf()

数组名.lastIndexOf( 元素 )用于从后向前查找第一个满足条件的元素，返回其下标。

• 有->返回下标值
• 没有->返回-1

1️⃣有参数->返回下标值->没有返回-1

var arr = ['red','green','blue','pink'，'blue']；
console.log(arr.indexOf('blue));//4
                        //可得到blue元素的下标值

（7）数组去重

利用数组名.indexOf(元素)，判断新数组元素在旧数组中是否存在，不存在就数组名.push(元素)追加进新数组

（8）数组转换为字符串

①toString()

toString( )将我们的数组转换为字符串，分隔符为逗号

1️⃣toString() 无参数

数组名.toString()；

2️⃣返回值

返回值为转为成的字符串，是以逗号分隔

②join(分隔符)

数组名.join(分隔符)将数组转化为字符串，分隔符自行定义

1️⃣join() 可有参可无参

数组名.join(分隔符);

2️⃣返回值

返回值为转化成的字符串，分隔符为自行定制的

（9）其他数组方法

①连接两个数组-concat( )

连接两个或三个数组，不影响原数组

1️⃣有参数

数组1.concat(数组2)//在数组1后拼接数组2

2️⃣返回值

返回一个拼接后的新的数组

3️⃣不影响原数组

②数组截取-slice( )

1️⃣参数可有可无

slice( begin,end )

• start 表示数组开始处下标，没有默认为0

• begin表示数组结束处下标，没有默认到最后

• 设置了begin的值后【不包括begin】

  负值表示从后往前

数组名.slice()//从后到尾
数组名.slice(start)//从start 到尾
数组名.slice(start, end)//从start到end

2️⃣返回值

返回值为被截取的新数组

3️⃣不影响原数组

4️⃣示例：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

③修改删除数组元素-splice( )

1️⃣有参数

splice( 第几个开始修改，要删除的个数 ，插入的元素)

• start 数组下标，从哪个位置开始

  • 这个位置指的是，添加元素的位置/删除元素的位置

  • ∴-1 arr3.splice(-2,0,'djj')//这个djj看起来加在倒数第二

  • 为负数时，从后向前；超出表示第一个

• deleteCount 删除的元素个数

• item 要添加进数组的元素

数组名.splice(start)
数组名.splice(start, deleteCount)
数组名.splice(start, deleteCount, item1)
数组名.splice(start, deleteCount, item1, item2, itemN)

2️⃣返回值

返回值为被删除的元组组成的新数组

• 没有删除，返回空数组 []

3️⃣影响原数组

4️⃣示例：

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Array ["Jan", "Feb", "March", "April", "May"]


months.splice(-1,0,'hhhhhh');
//这个hhh会放在原先数组最后一个的位置，但因为没有删除最后一个，所以原先最后一个的'May'会被顶到最后一个
console.log(months);
 Array ["Jan", "Feb", "March", "April","hhhhhh"， "May"]

10.字符串对象

（1）字符串的不可变性

不可变指的是里面的值不可变，虽然看上去可以改变内容，但其实只是开辟了新的空间，让str指向了另一个空间，原先空间的值没变

[❗：字符串的所有操作都是开辟一个新空间，再去指向]

• 由此要尽量少对字符串进行重新赋值和拼接！！！！

（2）返回字符所在位置

①indexOf()

字符串变量.indexOf(str，begin)。返回字符串中指定字符所在位置

1️⃣有参数

• str 表示要查找的字符

• begin 表示从哪个位置开始（从0开始）

  也可以没有，默认从开头开始

字符串变量.indexOf(str,begin)；//返回查找元素所在位置下标

2️⃣返回值

• 找到，返回值为字符所在的位置（从0开始哦）,同时都返回第一个找到的
• 没找到，返回-1

②lastIndexOf( )

字符串变量名.lastIndexOf( )同上，不过是从后向前查找

③计算某字符出现的位置+次数

    var str = 'asdahjgsdajhsgdjaa';
        //1.首先确定字符串中是否有该字符
        var index = str.indexOf('a');
        //2.定义count变量用于计数
        var count = 0;
        //①如果index不为-1，表示有该字符，进行循环
        while(index != -1){
            count++;
            console.log(index,count);
            //②继续寻找该字符，但开始位置从上一个找到该字符的位置+1开始
            index = str.indexOf('a',index+1);
            
        } 

（3）根据位置返回字符

①charAt(index)

字符串变量名.charAt(index) 可以根据位置返回对应的字符

1️⃣有参数

• index 表示下标，从0开始

字符串变量名.charAt(index);//返回该字符串下标的值

2️⃣返回值

下标对应的值

3️⃣应用场景-----遍历所有字符串

利用循环+str.length+charAt(index)，让循环变量作为index即可循环打印字符串的所有元素。

②charCodeAt(index)

字符串变量名.charCodeAt(index) 获取指定位置处字符的ASCⅡ码

1️⃣有参数

• index 为想获取ASCⅡ码的字符值下标

字符串变量名.charCodeAt(index)；//返回值为ASCⅡ码哦

2️⃣返回值

为指定位置字符的ASCⅡ码

3️⃣应用场景-----判断用户输入的键

③str[index]

H5新增的,ie+8以上支持

数组变量名[index],即可获取下标所对应的元素

1️⃣有参数

• index 为要查找字符值的下标

数组变量名[index];
var str = 'asadfasd';
console.log(str[1]);//返回值为下标所对的值

2️⃣返回值

为字符串中该下标对应的值

④统计出现最多的字符+次数

• 1.创建一个对象

• 2.遍历字符串的值

• 3.判断对象中是否有该属性

  ---注意因为是字符串，只能用对象名[属性]的方式

  • 之前有，属性值+1

  • 之前无，属性值=1

  • 【对象名[属性名]的过程就完成了追加】

• 4.遍历结果对象--找最大的

  • 因为对象属性=字符 ，属性值=出现次数
  • 利用maxChar和max求出现最多字符+次数
  • 利用for(k in 对象名)｛
  • ​ //k是属性名,对象名[k]才是值
  • ｝

         var str = 'aaaaasdhssssssssssjg';
        //1.创建对象
        var o = {};
        //2.遍历字符串的每个元素
        for(var i = 0;i < str.length; i++){
            var tempt = str.charAt(i);
            // 3.查看对象中有没有该属性
            //因为此时的tempt是字符串，有' '，所以应该用对象名['属性']的形式
            if(o[tempt]){
                //有该属性，属性值+1
                o[tempt]++; 
            }else{
                //无该属性，属性值=1
                o[tempt] = 1;
            }
        }
         //打印输出o对象，就可以看到
        //其中的属性（字符）+属性值（出现次数）
        console.log(o);
   //3.遍历结果对象，
        //找到出现次数最多的字符=属性值最大的属性，输出结果
        var maxChar = '';
        var max = 0;
        for(k in o){
            if(o[k] > max){
                max = o[k];
                maxChar = k;
            }
        }
        console.log('出现次数最多的字符是'+maxChar+'出现了'+max+'次');

• 运行结果：

（4）拼接+截取字符串

①concat(str1,str2...)

用于将多个字符串拼接在一起，等价于+

②substr(start,length)

从start位置开始，截取length个长度字符

1️⃣有参数

• start 表示开始的下标值 （从0开始）
• length表示截取几个字符

字符串变量.sustr(start,length)；//返回值为截取的字符串

2️⃣返回值

为截取的字符串

3️⃣示例

var str = '改革春风吹丰满';
console.log(str1.substr(2,2));//输出：春风

③slice(start,end)

从start位置开始，截取到end位置，end值取不到，可取负值

④substring(start,end)

从start位置开始，截取到end位置，end取不到，同上，但是不接受负值。

（5）替换字符串

①replace( 被替换的字符，替换为的字符 )

1️⃣有参数

• 前一个为被替换，后一个为替换
• 只替换第一个字符

字符串变量名.replace(被替换，替换为);//返回值为替换后的数组

2️⃣返回值

替换后的数组

3️⃣示例

var str = 'andaaay';
console.log(str.replace('a','b'))//只把第一个a替换成b
//输出：bndaaay

4️⃣替换字符串中重复的值

利用循环+replace(被替换，替换)，因其一次只能替换一次

• 循环结束条件： 数组变量.indexOf(字符) = -1表示没有该字符
  • 有，继续替换
  • 没有，退出循环

   //将字符串'abcoeffoooosasd'中的o替换为*
        var str = 'abcoeffoooosasd';
        //1.判断字符串是否有该字符
        while(str.indexOf(['o']) != -1){
            //2.循环替换
            str = str.replace('o','*');
        }

• 输出结果：

（6）字符串转化为数组

①split（分隔符）

join(分隔符)是把数组转化为字符串

1️⃣有参数

• 设置以xxx为分隔符进行分割，默认？？？？？？
• 分割的字符串一定要有符号分开，否则看做一起的

字符串变量名.split(分隔符);//返回值为转化后的数组

2️⃣返回值

转化后的数组

3️⃣示例

var str1 = 'red,blue,color';
console.log(str1.split(','));//以,分开这些字符
//输出 ['red','blue','color']

var str2 = 'red&blue&color';
console.log(str2.split('&'));//以&分开这些字符

（7）转换大小写

①toUpperCase( )

将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。

1️⃣无参数

字符串变量名.toUpperCase();//返回值为大写形式

2️⃣返回值

• 不会影响原字符串

返回一个新数组，转换的字符串大写形式

3️⃣示例

const sentence = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toUpperCase());
// Expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."

②toLowerCase( )

会将调用该方法的字符串值转为小写形式，并返回。

1️⃣无参数

字符串变量名.toLowerCase（）；//返回小写的字符串

2️⃣返回值

• 不影响原先的字符串

会将调用该方法的字符串值转为小写形式。

3️⃣示例

console.log('中文简体 zh-CN || zh-Hans'.toLowerCase());
// 中文简体 zh-cn || zh-hans

console.log( "ALPHABET".toLowerCase() );
// "alphabet"