JavaScript学习第四天

凌歆

已于 2022-03-02 15:11:30 修改

阅读量72

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

于 2022-02-26 10:48:54 首次发布

本文链接：https://blog.csdn.net/qq_33938234/article/details/123146439

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript学习第四天

在这里插入图片描述

1.JavaScript内置对象

1.1内置对象

JavaScript中对象分为三种：自定义对象、内置对象、浏览器对象
前面两种对象是js基础内容，属于ECMAScript；第三个浏览器对象属于我们js独有的，我们js api讲解
内置对象指js语言自带的一些对象
JavaScript提供了多个内置对象：Math、Date、Array、String等

1.2 MDN文档

网址：<MDN Web Docs (mozilla.org)>

1.3 Math对象

与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。

1.3.1 随机数方法random()

random()方法可以随机返回一个小数，其取值范围是[0,1),左闭右开
得到一个数之间的随机整数，包括两个数在内

// 返回两数之间的整数（包含两数）
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min)+1)+min;
        }

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 圆周率
        console.log(Math.PI);
        // 向下取整
        console.log(Math.floor(1.9));
        // 向上取整
        console.log(Math.ceil(1.1));
        // 四舍五入
        console.log(Math.round(1.5));
        console.log(Math.round(1.4));
        // 特殊情况      -2
        console.log(Math.round(-2.5));
        // 绝对值
        console.log(Math.abs(-1));
        // 隐式转换    -1
        console.log(Math.abs('-1'));
        // NaN
        console.log(Math.abs('pink'));

        // 求最大值
        // 返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字，则会返回 NaN。
        console.log(Math.max(1,2,89,34,22));
        console.log(Math.min(1,2,89,34,22));
        console.log(Math.max(1,2,'green'));
        // 如果没有参数，则结果为 - Infinity。
        console.log(Math.max());

        // 随机数
        // 返回0-1之间的一个浮点数，左闭右开
        console.log(Math.random());
        // 返回两数之间的整数（包含两数）
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min)+1)+min;
        }

        console.log(getRandom(1,3)); 

    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.4 日期对象

获取当前时间必须实例化，日期对象是一个构造函数*
如果Date()里面不写参数，则返回当前时间
如果Date()里面写参数，则返回括号里面输入的时间

1.4.1日期格式化

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

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var date=new Date();
        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]);

        // 时分秒
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();

        console.log(h+':'+m+':'+s);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.4.2 获取日期的总的毫秒数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.实例化对象后调用方法
        var date=new Date();
        console.log(date.valueOf());
        console.log(date.getTime());

        // 2.实例化的时候在前面加上+号

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

        // 3.直接调用h5新增的Date.now()
        console.log(Date.now());
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

倒计时案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function countDown(time){
            var nowtime=+new Date();
            var inputTime=+new Date(time);//返回用户输入时间的总毫秒数
            var restTime=(inputTime-nowtime)/1000;

            var s=parseInt(restTime%60);
            // 前补零
            s=s<10? '0'+s:s;
            var m=parseInt(restTime/60%60);
            m=m<10? '0'+m:m;

            var h=parseInt(restTime/60/60%24);
            h=h<10? '0'+h:h;

            var day=parseInt(restTime/60/60/24);
            day=day<10? '0'+day:day;

            return day+':'+h+':'+m+':'+s;

        }

        console.log(countDown('2022-2-14 12:00:00')); 
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.5 数组对象

1.5.1 数组创建方式

字面量创建
调用内置对象 Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // new 创建数组
        // 空数组
        var arr1=new Array();
        // 长度为2的数组，里面没有值
        var arr2=new Array(2);
        // 创建有元素的数组
        var arr3=new Array(2,4,5,7,8);

        console.log(arr1);
        console.log(arr2);
        console.log(arr3);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.5.2 检测是否为数组

instanseof运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray()是HTML5中提供的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=[];
        var obj={};
        // 1.运算符判断
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);

        // h5新增方法 Array.isArray()

        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

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

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

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=[1,2];
        // 尾部添加数组元素,返回数组长度
        console.log(arr.push(3,'pink'));
        console.log(arr);
        // 头部添加数组元素,返回数组长度
        console.log(arr.unshift('green','nb'));
        console.log(arr);

        // 尾部删除元素,一次一个,返回删除的值
        console.log(arr.pop());
        console.log(arr);
        // 头部删除元素,一次一个,返回删除的值
        console.log(arr.shift());
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.5.4 数组排序

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数组翻转
        var arr=[1,7,6,3,2];
        arr.reverse();
        console.log(arr);
        // 数组排序+比较器
        arr.sort(function(a,b){
            // 升序数组
            // return a-b;
            // 降序数组
            return b-a;
        });

        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.5.5 数组索引方法

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=['pink','green','yellow'];
        // 查找给定元素的索引
        console.log(arr.indexOf('pink'));
        // 不存在返回-1
        console.log(arr.indexOf('blue'));

        // 从后面开始查找
        console.log(arr.lastIndexOf('pink'));
        console.log(arr.lastIndexOf('blue'));
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.5.6 数组去重

核心算法：创建新旧两个数组，旧数组存为修改的原数组，新数组为空，遍历旧数组，在新数组中查找是否存在旧数组，如果存在，不添加到新数组，不存在添加到新数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var oldarr=['a','b','a','e','f','f','e','k','b'];
        var newarr=[];
        for(var i=0;i<oldarr.length;i++){
            if(newarr.indexOf(oldarr[i])==-1){
                newarr.push(oldarr[i]);
            }
        }

        console.log(newarr);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.5.7 数组转换为字符串

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 把数组转换成字符串,toString()
        var arr=[1,2,3];
        console.log(arr.toString());

        // 可以自定义分隔符,join('分隔符')
        console.log(arr.join('-'));
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.6 字符串对象

1.6.1 基本包装类型

把简单数据类型包装成复杂数据类型
代码解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='judy';
        // 等价于
        // 自动装箱
        temp=new String('judy');
        str=temp;
        temp=null;
    </script>
</head>
<body>
    
</body>
</html>

1.6.2 字符串的不可变

指的是里面的值不可变，虽然看上去内容改变了，但其实是地址发生了改变，内存中开辟了新内存空间
不要大量拼接字符串，字符串每拼接一次，开辟一块内存空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='';
        // 每拼接一次,都开辟新空间
        for(var i=0;i<1000;i++){
            str+=i;
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

1.6.3 根据字符返回位置

字符串所有的方法，都不会修改字符串本身（字符串不可变），操作完成会返回一个新的字符串

方法名	说明
indexOf(‘要查找的字符’,开始位置（可选）)	返回指定内容在元字符串中的位置，找不到-1，可以规定起始位置
lastIndexOf()	从后往前找，找第一个匹配的

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

方法名	说明	使用
charAt(index)	返回指定位置的字符（index字符串的索引号）	str.charAt()
charCodeAt(index)	获取指定位置字符的ascll码	str.charCodeAt()
str[index]	获取指定位置字符	HTML5

1.6.5 统计一个字符串中所有字符出现的个数及出现次数最多的字符

核心算法：
1. 利用charAt()遍历字符串
2. 把每个字符赋值给一个对象的属性，属性值为出现的次数
3. 如果该对象不存在该属性，则属性值为1，否则属性值加1
4. 遍历对象的所有属性，求得最大值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='abcoefoxyozzopp';
        // 统计字符个数，并找出最大的
        // 创建空对象
        var obj={};
        for(var i=0;i<str.length;i++){
            var ch=str.charAt(i);
            if(obj[ch]){
                obj[ch]++;
            }else{
                obj[ch]=1;
            }
        }

        console.log(obj);

        // 遍历对象，找到最大的

        var max=-1;
        var maxch='';
        for(k in obj){
            if(obj[k]>max){
                max=obj[k];
                maxch=k;
            }
        }

        console.log(maxch);
        console.log(max);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.6.6 字符串截取

方法名	说明
concat(str1,str2,str3)	concat()用于链接一个或多个字符串。拼接字符串，等价于+
substr(start,length)	从start位置开始（索引号），取length个字符（重点）
slice(start,end)	从start位置开始，截取到end位置，end取不到
substring（start，end）	从start位置开始，截取到end位置，end取不到，基本上与slice一致，不接受负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='judy';
        // 字符串拼接
        console.log(str.concat('red','green'));
        // 字符串截取
        console.log(str.substr(0,2));
        // 字符串截取（取不到尾部）
        console.log(str.slice(0,2));
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.6.7 字符串字符替换

replace()方法用于在字符串中用一些字符替换另一些字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='name';
        // 将字符a替换成字符e

        console.log(str.replace('a','e'));

        var str2='nananana';

        // 由于只能替换第一个字符，所以需要遍历
        // 将所有的a替换成n
        while(str2.indexOf('a')!==-1){
            str2=str2.replace('a','n');
        }
        console.log(str2);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

1.6.8 字符串转换成数组

split方法使用分隔符来转换字符串为数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='red,green,yellow';
        // 通过逗号分隔转换成数组
        var arr=str.split(',');
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

效果图

在这里插入图片描述

2. Javascrip简单类型和复杂类型

2.1 简单类型和复杂类型

简单类型又叫基本数据类型或者值类型，复杂类型又叫做引用类型
值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫值类型：string,number,boolean,undefined,null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用）,因此叫做引用数据类型，通过new关键字创建的对象（系统对象，自定义对象），如Object、Array、Date

2.2 堆和栈

栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值，简单数据类型存放到栈里面
堆(操作系统):存储复杂数据类型，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，复杂数据类型存放在堆里面

2.3 简单类型的内存分配

值类型变量的数据直接存放在变量（栈空间）中

在这里插入图片描述

2.4 复杂类型的内存分配

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

在这里插入图片描述

凌歆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习第四天

js内置对象 1.内置对象 1.查阅MDN文档 2.Math对象 random（）对象 3.Date 日期对象 1.日期格式化 2.获取日期的毫秒数 3.倒计时 4.数组对象 1.数组创建方式 1.字面量 2.使用Array对象 2.检测是否为数组 1.instanseof 运算符可以判断一个对象是否属于某种类型 2.Array.isArray(),h5 3.数组的增删 4.数组排序 5.数组的索引 6.数组去重 7.数组转换成
复制链接

扫一扫