0
点赞
收藏
分享

微信扫一扫

JS基础:内置对象及案例

戴老师成长记录仪 2022-05-06 阅读 74

目录

1. 内置对象

2. 查阅文档

2.1 MDN

3. Math 对象

3.1 案例:封装自己的数学对象

 3.2 随机数方法 random()

3.2.1 两个数之间的随机整数,并且包含2个整数

3.2.3 猜数字游戏

3.2.4 猜数字游戏(限制次数)

3.2.5 随机点名

4. 日期对象

4.1 日期对象的使用

4.1.1 获取当前时间

4.1.2 Date ()构造函数的参数

4.2 日期格式化

4.2.1 格式化年月日日期

4.2.2 格式化日期时分秒

 4.2.3 Date 总的毫秒数(时间戳)

4.2.4 倒计时案例(重难点)

5. 数组对象

5.1 创建数组的两种方式

5.1.1 用字面量创建

5.1.2 用new array () 创建

​5.2 判断是否是数组

5.2.1 instanceof 运算符 检测

5.2.2 Array.isArray()

5.3 添加删除数组元素方法 

5.4 筛选数组

5.5 数组排序

5.5.1 翻转数组

5.5.2 冒泡排序 

5.6 数组索引号的获取

5.7 案例 数组去重(重点)

5.8 数组转换字符串

5.8.1 toString( )

5.8.2 join(分隔符)

5.9 其他方法

6. 字符串对象

6.1 基本包装类型

6.2 字符串的不可变

6.3 根据字符返回值

 6.3.1 案例 返回字符位置及次数

6.4 根据位置返回字符串(重点)

6.4.1 案例 判断字符串中出现最多的字符,并统计次数(重难点)

6.5 字符串操作方法(重点)

6.6 替换字符串 replace

6.7 字符串转数组 split(‘分隔符’)

 6.8 toUpperCase()和 toLowerCase()


1. 内置对象

  • JavaScript中对象分为:自定义对象、内置对象、浏览器对象
  • 前两个对象是JS基础内容,属于 ECMAScript;第三个是属于JS独有的,到 JS API讲解
  • 内置对象:JS语言自带的一些对象,提供来一些常用的最基本而必要的功能(属性和方法)
  • 最大优点就是帮助我们快速开发
  • JavaScript的内置对象:Math、Date、Array、String 等 

2. 查阅文档

2.1 MDN

  • 学习对象可以通过MDN、W3C来查阅学习
  • MDN提供了开放的网络技术的信息,包括(HTML\CSS\HTML5应用的API)
  • 网址:MDN Web Docs (mozilla.org)
  1. 查阅方法的功能
  2. 查看参数的意义和类型
  3. 查看返回值的意义和类型
  4. 通过demo进行测试

3. Math 对象

Math 不是一个构造函数,不需要new来调用,直接使用里面的属性和方法即可

如 Math.max()可以求最大值

函数说明
Math.PI圆周率
Math.floor()向下取整
Math.ceil()向上取整
Math.round()四舍五入(注意-3.5结果是-3)往大的取
Math.abs()绝对值
Math.max()/Math.min最大值和最小值

3.1 案例:封装自己的数学对象

用对象封装自己的数学对象,里面有pi,最大值,最小值

 3.2 随机数方法 random()

  • random ()返回一个随机的小数 0<=x<1  [0,1)
  • 这个方法不跟参数

3.2.1 两个数之间的随机整数,并且包含2个整数

3.2.3 猜数字游戏

3.2.4 猜数字游戏(限制次数)

3.2.5 随机点名

4. 日期对象

4.1 日期对象的使用

Date 是一个日期对象,是一个构造函数,必须用new来调用创建我们的日期对象

4.1.1 获取当前时间

 返回结果:Wed May 04 2022 10:16:17 GMT+0800 (中国标准时间)

4.1.2 Date ()构造函数的参数

如果不带参数,返回系统的当前时间 

参数写法:数字型 2019,10,01 或者是字符串型 ‘2019-10-01 08:00:00’(常用)

4.2 日期格式化

获取2022-10-22 08:00:00 格式的日期需要手动获取

方法名说明
getFullYear( )获取当年
getMonth( )获取当月(0-11)
getDate( )

获取当前日期(日)

getDay( )获取星期(周日0-周六6)
getHours( )获取当前小时
getMinutes( )获取当前分钟
getSeconds( )获取当前秒钟

 注意:getMonth( )返回的月份是小一个月的,需要在后面加一显示返回月份

周一到周六返回1-6,但是周日返回0

4.2.1 格式化年月日日期

打印出格式:2022年5月5日 星期四

4.2.2 格式化日期时分秒

 4.2.3 Date 总的毫秒数(时间戳)

Date 对象是基于1970年1月1日(世界标准世界)起的毫秒数

我们一般用总的毫秒数来计算时间,更加精准

距离1970年1月1日过了多少毫秒

1. 通过 valueOf()getTime()

2. 简单写法 + new Date()(最常用)

3. H5 新增的获得总的毫秒数

注意:兼顾不了低版本的浏览器

4.2.4 倒计时案例(重难点)

        function countDown(time) {
            var nowTime = +new Date(); //当前时间的毫秒数
            var inputTime = + new Date(time); //输入时间毫秒数
            var lastTime = (inputTime - nowTime) / 1000; //剩余时间毫秒数转为了秒数
            var d = parseInt(lastTime / 60 / 60 / 24); //天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(lastTime / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(lastTime / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(lastTime % 60); //秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        var time = prompt('请输入截止时间:');
        console.log(countDown(time));

5. 数组对象

5.1 创建数组的两种方式

5.1.1 用字面量创建

5.1.2 用new array () 创建

5.2 判断是否是数组

5.2.1 instanceof 运算符 检测

 返回结果为 true 和 false ,一般和 if()语句结合使用

5.2.2 Array.isArray()

返回结果为 true 和 false ,一般和 if()语句结合使用

H5新增的方法,ie9以上浏览器才支持

在检测array实例时,Array.isArray()优于 instanceof 

5.3 添加删除数组元素方法 

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

5.4 筛选数组

5.5 数组排序

方法名说明是否修改原数组
reverse()颠倒顺序,无参改变原数组,返回新数组
sort()对数组进行排序改变原数组,返回新数组

5.5.1 翻转数组

5.5.2 冒泡排序 

5.6 数组索引号的获取

方法名说明返回值
indexOf()第一个索引(从前找)存在返回索引号,不存在返回-1
lastIndexOf()最后一个索引(从后找)存在返回索引号,不存在返回-1
  •  只返回第一个满足条件的索引号

5.7 案例 数组去重(重点)

  • 面试常问

目标:把旧数组不重复的数组选出来放入新数组,重复元素只保留一个

核心原理:遍历旧数组,拿着旧数组查询新数组,如果有就不存,没有就存

可以用新数组.indexof()返回-1时说明数组没有改元素

5.8 数组转换字符串

5.8.1 toString( )

5.8.2 join(分隔符)

5.9 其他方法

方法名说明返回值
concat()连接多个数组,不影响原数组返回一个新的值
slice()数组截取slice(begin,end)返回被截取的值
splice()删除splice(第几开始,数量)返回新数组,会影响原数组

6. 字符串对象

6.1 基本包装类型

基本包装类型:简单数据类型包装成复杂数据类型,这样基本数据类型就有属性和方法了

对象才有属性和方法,复杂数据类型才有属性和方法

把简单的数据类型包装复杂数据类型

6.2 字符串的不可变

指的是里面的值不可变,看上去改变内容,其实是地址变了,在内存中开辟了一个内存空间

所以不要大量的拼接字符串,会有效率问题

6.3 根据字符返回值

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个值

 

 6.3.1 案例 返回字符位置及次数

思路:查找第一个的位置

只要 indexof 不等于 -1,就继续查找

indexof只能查找第一个,利用第二参数,索引号加一,可以继续查找

6.4 根据位置返回字符串(重点)

方法名说明使用
charAt( index)返回指定位置的字符(索引号)

str.charAt(0)

charCodeAt(index)获取指定位置处字符的ASCII码str.charCodeAt(0)
str[index](第一个同)获取指定位置的字符html5,ie+支持

charCodeAt() 返回对应ASCII的值,目的:判断按下哪个键

6.4.1 案例 判断字符串中出现最多的字符,并统计次数(重难点)

核心算法:利用charAt()遍历字符串

把每个字符串都存储给对象,如果对象没有这个属性就为1,有就+1

遍历对象,得到最大值和字符

6.5 字符串操作方法(重点)

方法名说明
concat(str n...)连接拼接多个字符,等效于+,+更常用
substr(start,length)(开始位置索引号,个数)
slice(start,end)(开始索引号,结束索引号),end取不到
substring(start,end)同上,但是取不到负值

6.6 替换字符串 replace

  •  只替换第一个字符
  • 如要替换多个字符,用以下写法:

6.7 字符串转数组 split(‘分隔符’)

 6.8 toUpperCase()和 toLowerCase()

toUpperCase()转换为大写字母 

toLowerCase()转换为小写字母

举报

相关推荐

0 条评论