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

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

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

本章目标

  • 能说出 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'}

相关推荐

DNF无色流派还在继续，重力之泉龙战八荒测评

作者：礁石22222前言本篇为115级套装天天鉴栏目，来帮助各位读者对于新版本的装备有一个更清晰的认知。115级套装分为了稀有到太初5个品级，所有套装的稀有品级属性是一致的，从神器开始出现分歧。通过积...

《暗黑破坏神2重制版》常用符文之语P3

大家好我是游戏小白，继续补充一下《暗黑破坏神2重制版》常用的符文之语，主要给大家总结一下前期过渡常用符文之语。没看过之前关于符文之语总结的小伙伴可以翻翻前面的文章。1、钢铁符文之语钢铁造价极低但性价比...

魔兽怀旧服:P1一款法系BIS披风，获取方式隐蔽，需完成875个任务

在魔兽怀旧服WLK版本，依旧存在许多实用的制造业装备，特别是在P1阶段，制造业装备的耐用性和性价比是最高的，不仅可以帮助玩家快速过渡到团本，甚至还有个别制造业装备超越了团本掉落的强度，除了玩家近期讨论...

分手类型——过渡阶段

过度阶段一.内涵：类似于反复期，在这个阶段儿可能会出现两种可能性。1.感性想分手，但理性上舍不得。感性上我完全不想跟他相处，但理性上我又觉得他身上有很多对我有利的，对我未来有机会有利的东西。二.理性...

《最后的信仰》新手开局保姆级指南职业选择、属性加点与开荒策略

《最后的信仰》作为类魂动作游戏，开局选择直接影响开荒体验。本文针对新手玩家，从职业特性、属性分配到武器过渡，提炼高效开荒公式，助你避开陷阱，快速掌握战斗节奏。一、职业选择：斗士/盗贼优先，法系/...

DNF回血秘方揭示，夏日前买必看篇

作者：辽宁吴彦祖前言（省流速览）夏日礼包购买理由：夏日礼包是DNF四大礼包之一（新春&耕耘&夏日&金秋），错过销售日期后续想获得部分道具难度极大。主打暖暖时装、特色补齐、海量打...

DNF手游:55级粉装有大作用!强化继承大法，可节省大量幸运符

55级粉装的自身属性，实际上比较一般，但它可以用来作为“过渡胚子”，能够帮大家节省很多幸运符和宇宙精华！1、强化继承大法因为不断有玩家翻出了55级团本武器，这把武器肯定是当前版本毋庸置疑的版本答案，但...

魔兽世界50级职业任务装备如何选择，手把手教学

魔兽世界50级职业任务，我们装备应该如何选择，今天分身一个文章告诉你，我们知道BWL开放，也会开放50级的职业任务，那么50级的职业任务，对某些职业来说还是非常重要的，因为给的装备。有的甚至可以用到7...

暗牧的T5与散件如何取舍?认准自己的团队地位才最重要

牧师作为《魔兽世界》中的老牌职业历经许久已经收获了不少的信仰者，而在笔者看来牧师的最大特色便是风格完全不同的三系专精，在TBC时期，Raid本中的牧师大多为神牧，而戒律牧基本只活跃在竞技场和战场上，而...

DNF:魂异界传说宝珠曝光!属性设计一般般，男枪第五转职专属

魂异界地下城“炒冷饭”，定位新春活动副本，奖励道具覆盖面广，涉及白金徽章、转职书、矛盾材料等等。解锁魂异界次元等级，还能兑换传说宝珠，属性也逐渐浮出水面，却比较鸡肋，“抠门”发挥的淋漓尽致！太“抠门”...

SwiftUI入门五:让视图和过渡动起来

在使用SwiftUI的时候，无论效果在哪里，我们都可以单独的让视图的变化动起来，或者让视图的状态的变化动态化。SwiftUI会为我们处理那些组合的、层叠的以及可中断的动画的复杂性。在这个教程中，我们会...

DNF:又是变强的一年?2024耕耘礼包提升率揭晓

作者：assddde前言国服耕耘礼包的内容已经爆料了。对去年拉满耕耘的奶系职业的而言，今年的提升点为纹章加入了1%的增益量增幅。对C而言，今年换装称号中还加入了buff换装词条。而对于错过了新春套的C...

魔兽世界:TBC第一阶段还有必要刷T4套吗，D3套能否过渡到T5套?

T4套真的不如D3套？TBC怀旧服P1阶段目前已经走过大半，作为这个阶段装备等级最高的套装T4套装，游戏中有很大争议。比如猎人玩家会选择D3套，直接跳过T4到T5阶段，而法师甚至会选择继续使用T3套装...

《异世界勇者》390版本开荒&毕业攻略——狂暴战

虽然说这个版本是防战的本命版本，但是从大家催更的频率来看，狂暴战依旧是碾压的优势，今天给大家分享一下390版本狂暴战的毕业游玩思路，希望对你有帮助。今天给大家带来的是手动速刷版的攻略，想要挂机过本需要...

飞飞重逢:装备属性卡全攻略,五色神卡助你战力飙升快速获取

在游戏中，装备属性卡是提升战斗力的关键道具，它能赋予装备特殊的元素属性，不仅大幅提升攻击力，还能针对不同怪物打出克制伤害。属性卡分为火、水、风、土、电五种元素，每种都能为装备附加独特的攻击特效。那么如...

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