JavaScript基础跟我学-day6

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文主要学习JS的内置对象等相关知识

提示：以下是本篇文章正文内容，下面案例可供参考

一、内置对象

内置对象是指JS语言自带的一些对像，这些对象供开发者使用，帮助我们快速开发；

1.1 内置对象

通俗讲内置对象就是js提前给我们准备好的工具类；

1.2 查文档（MDN）

查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/

1.3 Math对象

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

1.3.1 Math对象常见的属性和方法

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

注意：上面的方法使用时必须带括号

1.4 运用Math对象案例

1.4.1 获取指定范围的随机整数

代码如下（示例）：

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

1.4.2 猜数字游戏

此游戏案例主要练习Math内置对象的使用和if分支语句的练习；

代码如下（示例）：

<script>
  // 猜数字游戏
  // 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; // 退出整个循环结束程序
  }

}
// 要求用户猜 1~50之间的一个数字 但是只有 10次猜的机会
</script>

1.5 Date对象

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

1.5.1 Date对象实例化

注：因为Date对象是一个构造函数，因此使用内部的属性和方法时，必须先用new关键字实例化；

1.5.1.1 获取系统时间

代码如下（示例）：

var date = new Date();
//new Date（）获取的是系统时间，不同的系统输出的时间可能不同；

注：实例化对象即调用构造函数，必须有new关键字和（）；

1.5.1.2 获取输入的时间

代码如下（示例）：

//1、数字型，用逗号隔开
var date = new Date(2022 ，3， 29);
//2、字符串型（常用）
var date = new Date('2022-3-29 12：11：11');

注：时间为字符串型时，需要加引号；

1.5.2 Date实例的方法和属性

代码如下（示例）：

属性、方法名	功能
getFullYear()	获取当年
getMonth()	获取当月（0-11）
getDate()	获取当日
getDay()	获取星期几(周日是0)
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒数

1.5.3 通过Date实例获取总毫秒数

• • 总毫秒数的含义

    ​ 基于1970年1月1日（世界标准时间）起的毫秒数get

  • 获取总毫秒数
    代码如下（示例）：
    方法一：valueOf();
    方法二：getTime();
    方法三：+new Date();
    方法四：Date.now();

    // 实例化Date对象
    var now = new Date();
    // 1. 用于获取对象的原始值
    console.log(date.valueOf())	
    console.log(date.getTime())	
    // 2. 简单写可以这么做
    var now = + new Date();			
    // 3. HTML5中提供的方法，有兼容性问题
    var now = Date.now();
    

注：Date.now();存在兼容性问题

1.6 Array对象

1.6.1 创建数组对象的方式

1.6.1.1 利用数组字面量创建

代码如下（示例）：

 // 1. 利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);

1.6.1.2 利用内置的Array对；

代码如下（示例）：

 //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

注：1、new Array() 不传参数时，创建的是一个空数组；
2、new Array(n) 传入参数是一个数字时，创建的是一个长度为n的空数组；
2、new Array(a ，b) 传入参数是多个数字时，创建的是含有多个元素的数组；

1.6.2 检测是否为数组

1.6.2.1 instanceof Array

代码如下（示例）：

• instanceof 可以判断一个对象是否是某个构造函数的实例

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

1.6.2.2 Array.isArray

代码如下（示例）：

• Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

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

1.6.3 添加和删除数组元素的方法

1.6.3.1 添加数组元素的方法

1、push(): 在数组最后添加元素；
2、unshift()：在数组最前面添加元素；

代码如下（示例）：

// 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) 原数组也会发生变化

注：push（），unshift（）返回的都是新数组的长度；

1.6.3.2 删除数组元素的方法

1、pop（）：删除数组最后一个元素；
2、shift（）；删除数组第一个元素；

代码如下（示例）：

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

注：pop（），shift（）没有参数，返回的是删除的那个元素；

1.6.4 案例

1.6.4.1 筛选数组

代码如下（示例）：

  // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
        var arr = [1500, 1200, 2000, 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);

1.6.4.2 数组排序

代码如下（示例）：

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

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

1.6.5 获得数组索引方法

1.6.5.1 indexOf()

代码如下（示例）：

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

注:indexOf（）方法是从前开始查找，返回的是查找的第一个元素的索引号，若没有查找的元素返回-1；

1.6.5.2 lastIndexOf()

代码如下（示例）：

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

注：lastIndexOf（）方法是从后开始查找，返回的是查找的第一个元素的索引号，若没有查找的元素返回-1；

1.6.5.3 数组去重案例

代码如下（示例）：

 // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
        // 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
        // 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
        // 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
        // 封装一个 去重的函数 unique 独一无二的 
        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()
        var demo = unique(['blue', 'green', 'blue'])
        console.log(demo);

1.6.6 数组转换成字符串的方法

1.6.6.1 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

1.6.6.2 其它方法

1.7 String对象

1.7.1 基本包装类型

基本包装类型就是将简单的数据包装类型包装成复杂的数据，这样基本数据类型就有了属性和方法
JS提供了三个特殊的引用类型：String、Number、Boolean；

js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

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

1.7.2 字符串的不可变

字符串的不可变指的是字符串的值不可变，当给字符串重新赋值时，只是字符串的地址改变了，原有的数据仍然存在。

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

1.7.3 根据字符返回位置

和数组一样使用indexOf()方法能够根据字符返回其所对应的索引号；
indexOf(‘查找的字符’ ，从哪个位置开始)。

代码如下（示例）：

// 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春'));
        console.log(str.indexOf('春', 2)); // 从索引号是 3的位置开始往后查找

注：indexOf（‘查找的字符’，起始的位置），起始的位置是指索引号对应的符号，包括此索引号对应的符号；

1.7.4 根据位置返回字符

1、charAt(‘index’)
2、charCodeAt(‘index’)
3、 str[index]（H5新增）
代码如下（示例）：

 // 根据位置返回字符
        // 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]); // a

1.7.5 案例（判断字符串中出现次数最多的字符）

代码如下（示例）：

 //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心算法：利用 charAt(） 遍历这个字符串
        // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        // 遍历对象，得到最大值和该字符

        for (var i = 0; i < str.length; i++) {
    
    
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) {
    
     // o[chars] 得到的是属性值
                o[chars]++;
            } else {
    
    
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
    
    
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
    
    
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);

1.7.6 字符串的操作方法

1、concat();
**2、substr();(常用)
3、slice();
4、substring();
5、replace();

// 字符串操作方法
        // 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 是取几个字符

注：substr()，常用；

1.7.7 字符串转换成数组的方法

split（‘分隔符’）；
被转换的字符串必须要有相同的元素连接在一起不然不能分割，因为是一个字符；

分割之后的结果保存在一个数组中，最后返回值是数组；

    <script>
        var str = '老王&今年&十六岁&老王&加油&老王！';
		// ["老王", "今年", "十六岁", "老王", "加油", "老王！"]
        console.log(str.split('&'));
    </script>

注：数组转换成字符串的方法是join（’-’）;

1.8 简单数据类型和复杂数据类型

1.8.1简单数据类型（值类型）：

简单数据类型/基本数据类型，在存储时变量中存储的是值本身；

String（字符串）、Number（数值型）、Boolean（布尔型）、undefined、null

null返回的是一个空对象object，如果有个变量我们打算要存储为对象，暂时没有想好放啥，这时候我们就直接给null值

1.8.2复杂数据类型（引用类型）:

在存储时变量中存储的仅仅是地址（应用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象，自定义对象），比如：object,Array,Date等等都是；

1.8.3简单数据类型和复杂数据类型的存放空间

简单数据类型存放在栈空间；

复杂型数据类型只在栈中存放地址（用16进制表示），地址指向了堆中的数据；

一般来说，*栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null…以及**对象变量的指针***，这时候栈内存给人的感觉就像一个线性排列的空间，每个小单元大小基本相等，栈内存中的变量一般都是已知大小或者有范围上限的，算作一种简单存储。

而***堆内存***主要负责像对象Object这种变量类型的存储，堆内存存储的对象类型，数据对于大小这方面一般都是未知的，（所以这大概也是为什么null作为一个object类型的变量却存储在栈内存中的原因）。

1.8.4简单数据类型（值类型）作为参数传递：

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值赋值了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

一句话：简单的数据类型传参就是将栈内存里面的值直接赋值给形参；

1.8.5复杂数据类型（引用类型）作为参数传递：

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

一句话：复杂数据类型是将栈内存里面的地址赋值给了形参，然后依据地址去堆内存中查找对应的参数值；