百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

JavaScript 基础之内置对象（javascript内置对象有哪些）

zhezhongyun 2025-02-03 16:03 17 浏览

本章目标

  • 能说出 Math 对象的3个方法和方法的作用
  • 能说出 Array 对象的3个方法和方法的作用
  • 能说出 Date 对象的3个方法和方法的作用
  • 能说出 String 对象的3个方法和方法的作用
  • 理解简单类型和复杂类型的区别

本章任务

  • 能够实现一个随机生成n-m之间数字的函数
  • 能够实现一个格式化日期的函数
  • 能够实现一个求两个日期差的函数
  • 能够使用数组方法完成相应任务
  • 能够使用字符串方法完成相应任务

内置对象


所谓内置对象，就是 JavaScript 语言本身自带的一些功能对象，里面提供了很多常用、实用的属性和方法，我们需要做的就是学习这些属性和方法怎么使用，在需要用的时候直接用就行。未来我们还将要学习浏览器给我们提供的对象以及自定义对象。


我们已经用过两个内置对象：Math、Date，Object 也是一个内置对象。接下来我们会分别学习以下几个内置对象：

  • Math
  • Date
  • Array
  • String
  • Number
  • Boolean


学习方法

查询文档


内置对象的成员有很多，现在我们只需要掌握内置对象提供的常用的方法，使用的时候需要查询文档。


常用的文档：

  • MDN 推荐
    • Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
  • 菜鸟教程
  • W3School


使用 MDN 查询 Math 对象的 random 方法的使用


如何学习一个方法


  1. 查询你要学习的方法的功能
  2. 了解方法的参数的含义和类型
  1. 了解方法的返回值的含义和类型
  2. 编写 demo 进行测试


Math


Math 是一个内置对，Math 对象不是构造函数，它拥有一些数学常用属性和数学函数方法。


Math 中常用成员


  • Math.PI
    • 属性，返回圆周率
  • Math.random()
    • 方法，生成 0~1 (不包含1)之间的随机数
  • Math.floor()/Math.ceil()
    • 向下取整：舍去小数位数
    • 向上取整：只要有小数部分就向上进一
  • Math.round()
    • 四舍五入取整
  • Math.abs()
    • 取绝对值
  • Math.max()/Math.min()
    • 求任意个参数的最大值/最小值
  • Math.power()/Math.sqrt()
    • 求指数次幂/求平方根
  • Math.sin()/Math.cos()
    • 正弦/余弦


案例


  • 实现一个函数返回 10~30 (30可以取到)之间的随机数
  • 实现一个函数返回 n~m (m可以取到)之间的随机数
  • 随机生成颜色的 RGB 值
    • RGB值：0~255 之间的数字
    • 要求函数返回 rgb(随机 r 的值, 随机 g 的值, 随机 b 的值)
  • 自己实现一个方法，模拟实现 Math.max() 的效果

Date


创建 Date 对象用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。


创建日期对象


Date 是一个构造函数，需要通过 new 来调用，返回一个日期对象。

获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
let now = new Date();

// Thu Oct 28 2021 12:37:52 GMT+0800 (中国标准时间)
console.log(now);

在打印日期对象的时候，先通过 now.toString() 方法把日期对象转换成字符串再打印字符串内容


在打印对象的时候，经常会隐士调用对象的 toString() 方法然后再输出转换后的字符串，通过 console.dir() 可以打印对象的原始形式


console.dir(now);


打印的结果：


Date 构造函数的参数


通过 new Date() 创建的是当前时间的日期对象，可以给 Date() 函数传入不同类型的参数，获取指定时间的日期对象。


  • 传入数值，日期的毫秒数
    • 例如：1635395872862
  • 传入字符串(日期格式的字符串)。
    • '1989-06-04'
  • 传入年、月、日、时、分、秒的数值
    • 1991，1，1
let day1 = new Date(1635395872862);
let day2 = new Date('1989-06-04');
let day3 = new Date(1991, 1, 1);


获取日期的指定部分


date.getTime()  	  // 返回毫秒数和valueOf()结果一样
date.getMilliseconds() 
date.getSeconds()  // 返回0-59
date.getMinutes()  // 返回0-59
date.getHours()    // 返回0-23
date.getDay()      // 返回星期几 0周日   6周6
date.getDate()     // 返回当前月的第几天
date.getMonth()    // 返回月份，***从0开始***
date.getFullYear() //返回4位的年份  如 2016


  • 返回当前时间的毫秒值，还可以用以下两种方式


// HTML5中提供的方法，有兼容性问题
var now = Date.now();	

// 不支持HTML5的浏览器，可以用下面这种方式
var now = +new Date();

案例


  • 写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
  • 计算时间差，返回相差的天/时/分/秒

Array


创建数组对象


创建数组对象跟创建对象，一样有两种方式：


  • 数组字面量
  • new Array()


// 1 使用构造函数创建数组对象
let arr1 = new Array();

// 2 使用数组字面量
let arr2 = [];


数组的常用方法


  • push()/pop() 栈操作，先进后出
    • push()
      • 把一个或多个元素追加到数组最后，并修改length属性
    • pop()
      • 取出数组中最后一个元素，并修改length属性
  • shift()/unshift() 队列操作，先进先出
    • shift()
      • 取出数组中的第一个元素，并修改length 属性
    • unshift()
      • 在数组最前面插入项，返回数组的长度，并修改length 属性
  • join()
    • 把数组中的多个元素使用指定的分隔符(默认是英文状态的逗号)拼接成字符串返回
  • reverse()
    • 翻转数组中的元素，返回一个新数组
  • indexOf()/lastIndexOf()
    • indexOf(item)
      • 从前往后找数组中的第一个匹配元素，并返回匹配元素的索引，找不到返回-1
    • lastIndexOf()
      • 从后往后找数组中的第一个匹配元素，并返回匹配元素的索引，找不到返回-1
  • concat()
    • 把参数拼接到当前数组的末尾
  • splice()
    • 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
  • sort()
    • 对数组进行排序，默认是从小到大的顺序

清空数组


let arr = [1, 2, 3];
// 方式1
arr = []
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

  • 将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”
  • 将一个字符串数组的元素的顺序进行反转。['a', 'b', 'c', 'd'] -> [ 'd', 'c', 'b', 'a']。
  • 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除
  • ['c', 'a', 'z', 'a', 'x', 'a']找到数组中每一个a出现的位置
  • 去掉一个数组的重复元素，['c', 'a', 'z', 'a', 'x', 'a']
  • 对数组元素进行排序


基本类型包装对象


除了 null 和 undefined之外，所有基本类型都有其对应的包装对象，这里我们要来学习以下三种：


  • String
  • Number
  • Boolean


上面三种类型都可以作为构造函数进行调用。当作为构造函数被调用时会创建对应的对象。我们拿 String 来举例，例如：


let s = new String('I Love YOU');
// 打印的是 object
// 所有复杂类型都来源于 Object
console.log(typeof s);


这里的 s 是字符串对象，注意这里的字符串对象和字符串值是不一样的。

我们知道对象是由属性和方法组成，也就是现在的 s 对象是拥有属性和方法的，我们可以直接调用。而字符串值，例如： 'I Love YOU' 这是基本类型的字符串值，是没有属性和方法的。这是字符串对象和字符串值之间的区别。


下面我们快速演示通过字符串对象，获取字符串的长度，以及对字符串进行截取。

let s = new String('I Love YOU');

// 打印字符串长度 10
console.log(s.length);

// 截取字符串中的 YOU
let y = s.substr(7);
console.log(y)


接下来我们再来验证下字符串值，是否能访问 length 和 substr()。


let s = 'I Love YOU';

// 打印字符串长度 10
console.log(s.length);

// 截取字符串中的 YOU
console.log(s.substr(7));


神器的事情发生了，字符串值也可以使用属性和方法。这和刚刚说的明显有冲突，字符串对象有属性和方法，字符串值没有属性和方法。


这究竟是为什么呢？下面我们来解释。


当调用字符串值的属性和方法时经历了以下几个步骤：


  1. 首先把字符串值包装成字符串对象
  2. 调用字符串对象的属性和方法
  1. 销毁临时创建的字符串对象(设置为 null)


代码示意：


let s1 = 'I Love YOU';
let s2 = s1.substr(7);

// 执行过程如下：
let s1 = 'I Love YOU';
let tmp = new String(s1);
let s2 = tmp.substr(7);
tmp = null;


Number 和 Boolean 这两个基本类型包装对象基本不会使用，使用的话可能会引起歧义。


// 创建基本包装类型的对象
let num = 18;  				//数值，基本类型
let num = Number('18'); 	//类型转换
let num = new Number(18); 	//基本包装类型，对象
// Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如：
let b1 = new Boolean(false);
let b2 = b1 && true;		// 结果是什么


String 对象


在学习 String 对象之前，我们首先来了解下字符串的不可变性，这本身跟字符串对象没有关系，只是放到这里来讲


字符串不可变


JavaScript 字符串是不可更改的。这意味着字符串一旦被创建，就不能被修改。


let str = 'abc';
str = 'hello';

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


虽然字符串不可变，但是可以基于对原始字符串的操作来创建一个新的字符串，例如：


let s1 = 'I Love YOU';
// substr() 方法无法修改s1的值，而是创建了一个新的字符串返回
let s2 = s1.substr(7);

了解了字符串的不可变性，我们就知道接下来要学习的所有字符串方法，都不会修改源字符串，如果需要会生成一个新的字符串。


字符串常用方法


通过查询文档掌握常用方法：concat()、substr()、indexOf()、trim()、toUpperCase()/toLowerCase()


// 1 字符方法
charAt()    	// 获取指定位置处字符
charCodeAt()  	// 获取指定位置处字符的ASCII码
str[0]   		// HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()   		// 拼接字符串，等效于+，+更常用
slice()    		// 从start位置开始，截取到end位置，end取不到
substring() 	// 从start位置开始，截取到end位置，  end取不到
substr()   		// 从start位置开始，截取length个字符
// 3 位置方法
indexOf()   	// 返回指定内容在元字符串中的位置
lastIndexOf() 	// 从后往前找，只找第一个匹配的
// 4 去除空白   
trim()  		// 只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase() 	//转换大写
to(Locale)LowerCase() 	//转换小写
// 6 其它
search() 
replace()
split()

案例

  • 截取字符串'我爱中华人民共和国'，中的'中华'（substr）
  • 'abcoefoxyozzopp' 查找字符串中所有o出现的位置（indexOf）
  • 把字符串中所有的o替换成!，'abcoefoxyozzopp' （replace）
  • 手机通讯录导出的格式一般为 csv，通过英文逗号来区分每一项，例如：张三,18910440604,1989-06-04,goddlts，请你从这段字符串中获取到手机号码。(split)
  • 把字符串中的所有空白去掉 ' abc xyz a 123 '（split和join）

作业


  • 实现一个函数返回 n~m (m取不到)之间的随机数
  • 自己实现一个方法，模拟实现 Math.min() 的效果
  • 将一个字符串数组输出为|分割的形式，比如：'刘备|张飞|关羽'
  • 将一个字符串数组的元素的顺序进行反转。['a', 'b', 'c', 'd'] -> ['d', 'c', 'b', 'a']

补充作业


  • 自己实现一个函数，实现如下功能：将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”
  • 自己实现一个函数，实现如下功能：将一个字符串数组的元素的顺序进行反转。['a', 'b', 'c', 'd'] -> [ 'd', 'c', 'b', 'a']。
  • 自己实现一个函数：对数组元素进行排序
  • 统计一个字符串中每个字符出现的次数，并求出现次数最多的字符串，abcoefoxyozzopp
  • 获取url中?后面的内容，并转化成对象的形式。例如：http://www.nllcoder.com/login?name=zs&age=18&a=1&b=2
    • 期望得到的结果：{name: 'zs', age: '18', a: '1', b: '2'}

相关推荐

JPA实体类注解，看这篇就全会了

基本注解@Entity标注于实体类声明语句之前，指出该Java类为实体类，将映射到指定的数据库表。name(可选)：实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用

开始今天的教程之前，先解决昨天遇到的一个问题，docker安装Dify的时候有个报错，进入Dify面板的时候会出现“InternalServerError”的提示，log日志报错：S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域，传统方法通常将关键点作为基本处理单元，这些关键点在人体骨架结构上代表关节位置（如肘部、膝盖和头部）的空间坐标。现有模型对这些关键点的预测主要采用两种范式：直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器，同样使用提供的流。一旦客户端写完消息，它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中，客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置，为了满足友友们的好奇心，这里我们不要内存，不要gpu，用最简单的方式，让大家感受一下什么是模型训练。基于你的硬件配置，我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目，MessageNest-可以打造个性化消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。定制你的消息，让通知方式更灵活多样。开源地址：https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航，从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口（SpeculationRulesAPI）的出现改变了网络应用程序接口（WebAPI）领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试，交了2000RMB，官方居然没有给线下教材资料，直接给的是在线教材，教材是PDF的但是是内嵌在网页内，可惜却没有给具体的PDF地址，无法下载，看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰，父亲上门警告，反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”，喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人，应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是，下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机（安卓，iPhone）同步日历功能的朋友请点击此链接，数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中，我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程，从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...

一周热门
最近发表
标签列表