JavaScript 快速入门五

js 内置对象

内置对象

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

内置对象:

**内置对象就是指 JS 语言自带的一些对象，**这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

内置对象优点:

内置对象最大的优点就是帮助我们快速开发

常见内置对象:

Math、 Date 、Array、String等

Math 对象

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

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值

<script>
        // Math对象不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
    
        console.log(Math.PI); // 一个属性 圆周率
 

        // 三个取整方法
        // (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


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

       //最大和最小值方法 Math.max()  Math.min()
       //可以传多个值比较，是不是比我们自己在对象里写的比较大小的方法好 
       console.log(Math.max(1, 99, 3)); // 99
       console.log(Math.min(-1, -10)); // -10
    </script>

除此之外还有 随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1 。

得到一个两数之间的随机整数，包括两个数在内

Math.floor(Math.random() * (max - min + 1)) + min

 <script>
        // Math对象随机数方法   random()  返回一个随机的小数  0 =< x < 1
        // 这个方法里面不跟参数
        //0 =< x < 1
        console.log(Math.random());
        //取随机整数     用Math.floor()向下取整       0
        console.log(Math.floor(Math.random()));
        //0 =< x < 8
        console.log(Math.random()*8);
        //0 1 2 3 4 5 6 7 
        console.log(Math.floor(Math.random()*8));
        //1 2 3 4 5 6 7 8    取1到8之间并包括1和8的随机数
        console.log(Math.floor(Math.random()*8)+1);
        //2 3 4 5 6 7 8      取2到8之间并包括2和8的随机数
        console.log(Math.floor(Math.random()*7)+2);
        //console.log(Math.floor(Math.random()*（8-2+1）)+2);
        


        // 我们想要得到两个数之间的随机整数 并且 包含这2个整数
        // Math.floor(Math.random() * (max - min + 1)) + min;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));


        // 随机点名  
        var arr = ['大哥', '老仙', '卢本伟', 'PDD', 'UZI', 'SKIRO'];
        // console.log(arr[0]);
        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>

案例

猜数字游戏

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

1. 如果大于该数字，就提示，数字大了，继续猜；

2. 如果小于该数字，就提示数字小了，继续猜；

3. 如果等于该数字，就提示猜对了， 结束程序。

//分析：
// 随机生成一个1~10 的整数  我们需要用到 Math.random() 方法和上面的得到两个数之间的随机整数并且包含这2个整数的函数
// 需要一直猜到正确为止，所以需要一直循环。
// while 循环更简单
// 核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。

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

日期对象 Date

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

// 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 date1 = new Date(2019, 10, 1);
        console.log(date1); // 返回的是 11月 不是 10月    Fri Nov 01 2019 00:00:00 GMT+0800 
        var date2 = new Date('2019-10-1 8:8:8'); 
        console.log(date2);//Tue Oct 01 2019 08:08:08 GMT+0800


      

GMT+0800 格林尼治时间 不作了解。

日期格式化

<script>
        // 格式化日期 年月日 
        var date = new Date();
        console.log(date.getFullYear()); // 返回当前日期的年  2020
        console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
        console.log(date.getDate()); // 返回的是几号
        //比较特殊   周一返回的是1  周六返回的是6  但是周日返回的是 0
        console.log(date.getDay()); 
        // 我们用代码写一个 2020年 10月 7日  星期三      难点主要在怎么获取星期 1 2 3 4 5 6 0
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
    </script>

<script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒


        // 封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            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(getTimer());



    </script>

获取Date的总毫秒形式(时间戳)

valueOf()
getTime()
＋new Date();
now();

  // 获得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(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());

那时间戳有什么用呢？

在企业项目中我们可以用它实现倒计时效果

比如：

函数的内置对象arguments

只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments

 function fn() {
             console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
             console.log(arguments.length);
             console.log(arguments[2]);
           
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        // 伪数组 并不是真正意义上的数组
        // 1. 具有数组的 length 属性
        // 2. 按照索引的方式进行存储的
        // 3. 它没有真正数组的一些方法 pop()  push() 等等

function fn1() {
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);

            }
        }
        fn1(1, 2, 3);

数组对象的创建

<script>
        // 创建数组的两种方式
    
        // 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);
    </script>

翻转数组

要求:

将数组 [‘red’, ‘green’, ‘blue’, ‘yellow’, ‘purple’] 的内容反过来存放。
输出： [‘purple’, ‘yellow’, ‘blue’, ‘green’, ‘red’]

        var arr = ['red', 'green', 'blue', 'yellow', 'purple'];
		var newArr = [];
		for(var i = arr.length - 1; i >= 0; i--) {
            //可以通过数组的索引来进行扩容
			newArr[newArr.length] = arr[i];
		}
		console.log(newArr);


       //我们可以通过函数封装
      function rev(arr) {
                var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];

                }
                return newArr;
         
        }
        console.log(rev([1, 2, 3]));
        
        //如果我们传数组实参时，漏掉一个 [ ，js没有编译器，很难找出错误在哪   我们可以先对传入的数组进行判断
        console.log(rev(1, 2, 3]));

检测是否为数组

instanceof

isArray()

        // 检测是否为数组
        // (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));





// 翻转数组
function reverse(arr) {
            // if (arr instanceof Array) {
            if (Array.isArray(arr)) {
                var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];

                }
                return newArr;
            } else {
                return 'error 这个参数要求必须是数组格式 [1,2,3]'
            }
        }
        console.log(reverse([1, 2, 3]));
        console.log(reverse(1, 2, 3));

添加删除数组元素的方法

 <script>
        // 添加删除数组元素方法
        // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
        var arr = [1, 2, 3];
        // arr.push(4, '彭老师');
        console.log(arr.push(4, '彭老师'));//返回的是新的长度


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


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

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

       //添加数组元素返回长度，删除数组元素返回删除原素


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


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

数组排序

 <script>
        // 数组排序
     
        // 1. 翻转数组
        var arr = [1, 2, 3];
        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);
    </script>

数组索引方法

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

        console.log(arr.lastIndexOf('blue')); // 4
        console.log(arr.lastIndexOf('pig')); //-1
    </script>

数组转换为字符串

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

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

扩展

基本包装类型string

 <script>
        // 基本包装类型
        //下面代码有问题吗？
        var str = 'andy';
        console.log(str.length);
        // 对象 才有 属性和方法  呀，为什么string也有
    </script>

基本数据类型又叫做简单类型或者值类型

引用类型又叫做复杂类型

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型

通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

JavaScript中没有堆栈的概念，所以我没有讲。

了解即可

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

复杂数据类型存放到堆里面

复杂数据类型才有 属性和方法，为什么简单数据类型string也有

string是基本包装类型

基本包装类型： 就是把简单数据类型 包装成为了 复杂数据类型

所以string有length属性

<script>
		 // 字符串的不可变性    赋一个值会创建一个内存空间来存放值
        var str = 'andy';
        console.log(str);//andy
        str = 'red';
        console.log(str);//red
        
        
        
        // 因为字符串的不可变所以不要大量的拼接字符串
        var str = '';
        for (var i = 1; i <= 1000000000; i++) {
            str += i;
        }
        console.log(str);
		</script>

string

根据字符返回位置

<script>
         // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
		  //索引从0开始
        var str = '待在YMCA多么快乐多么快乐';
        console.log(str.length);//14
        console.log(str.indexOf('Y'));//2
        console.log(str.indexOf('快', 7)); // 从索引号是7的位置    么   开始往后查找         8
        console.log(str.indexOf('快', 12)); //12
        
    </script>

根据位置返回字符

<script>
        // 根据位置返回字符
        // 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
    </script>

字符串操作方法

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

replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符。
其使用格式如下：

replace(被替换的字符串， 要替换为的字符串)；

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

split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
例如下面代码：

var str = ‘a,b,c,d’;
console.log(str.split(’,’)); // 返回的是一个数组 [a, b, c, d]

  // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
         var str = 'a,b,c,d';
         console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]
         var str1 = 'a&b&c&d';
         console.log(str.split('&'));

    </script>

扩展

toUpperCase() //转换大写
toLowerCase() //转换小写

ace(‘被替换的字符’, ‘替换为的字符’)
//它只会替换第一个字符
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);

#### split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
例如下面代码：  

var str = 'a,b,c,d';
console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]



```javascript
  // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
         var str = 'a,b,c,d';
         console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]
         var str1 = 'a&b&c&d';
         console.log(str.split('&'));

    </script>

扩展

toUpperCase() //转换大写
toLowerCase() //转换小写