JavaScript学习第四天

JavaScript学习第四天

在这里插入图片描述

1.JavaScript内置对象

1.1内置对象

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

1.2 MDN文档

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 堆和栈

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

2.3 简单类型的内存分配

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

在这里插入图片描述

2.4 复杂类型的内存分配

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

在这里插入图片描述

posted @   凌歆  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript学习第三天
· JavaScript学习第一天
· JavaScript基础第06天笔记
· JavaScript基础第06天笔记
· JavaScript 内置对象
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示