当前位置：首页 > 技术分析 > 正文内容

JavaScript 基础之内置对象（js内置对象是哪17个）

ruisui883个月前 (02-03)技术分析13

本章目标

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

扫描二维码推送至手机访问。

版权声明：本文由ruisui88发布，如需转载请注明出处。

本文链接：http://www.ruisui88.com/post/1250.html

标签: sort mdn
分享给朋友：
返回列表

上一篇：前端进阶:几个非常有意思的javascript知识点总结

下一篇：前端实战:从零到一实现H5拼图小游戏(附源码)

“JavaScript 基础之内置对象（js内置对象是哪17个）” 的相关文章

Linux 最主要的发行分支

Linux 有数百个发行分支。主要的有以下四个。slackwareSlackware 是由 Patrick Volkerding 在 1992 年推出的，它是全球现存最古老的 Linux 发行版。Slackware 被设计为高度可定制和强大的，并且要求用户了解 每个元素，它的包系统是不支持依赖的。...

Vue3，父组件子组件传值，provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时，通常使用的是props和emit，父向子传递使用props，子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title","isShow"], // 2、接收的同时对数据类型进行限制 props:{...

祸害阿里云宕机3小时的IO HANG究竟是什么?

本文来自微信公号“CSDN”（ID：CSDNnews），作者 | 王知无， 责编| 郭 芮。2019年3月3日凌晨，微博炸锅，有网友反映说阿里云疑似出现宕机，华北很多互联网公司受到暴击伤害，APP、网站全部瘫痪，我自己的朋友圈和微信群里也有好友反馈，刚刚从被窝被叫起来去修Bug，结果发现服务器登不上...

jvm疯狂吃内存，到底是谁的锅?

jvm应该是每一个java程序员都需要掌握的内容，但是在没有遇到问题之前，很多都是基于理论的，唯有实战才能增加个人的知识储备。本文是从一个角度来分析是谁在狂吃内存，希望对你有所帮助。本文是易观技术人员注意到一台开发机上各个微服务进程占用内存很高，随即便展开了调查......ps：本文来源于：http...

HTML5+眼球追踪?黑科技颠覆传统手机体验

今天，iH5工具推出一个新的神秘功能——眼动追踪，可以通过摄像头捕捉观众眼球活动！为了给大家具体演示该功能的使用，我做了一个案例，供大家参考。实际效果如下：案例比较简单，就是通过眼动功能获取视觉焦点位置，剔除用户看中的牌。现在，舞台的属性中多了一个“启用眼动”的选项，另外，还多了一个“启用摄像头”的...

Vue实战篇|使用路由管理用户权限(动态路由)

权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。跟着我一起来学vue实战篇路由管理权限吧!权限校验函数getCurrentAuthority()函数用于获取当前用户权限，一...

蜀ICP备2024111239号-14