第七天 JS 内置对象

内置对象，查文档，Math对象， 日期对象， 数组对象， 字符串对象

 

一, 内置对象

1. JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
2. 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解
3. 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
4. 内置对象最大的优点就是帮助我们快速开发
5. JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

 

二, 查文档

2.1 MDN

1. MDN/W3C
2. Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
3. MDN: https://developer.mozilla.org/zh-CN/

2.2 如何学习对象中的方法

• 查阅该方法的功能
• 查看里面参数的意义和类型
• 查看返回值的意义和类型
• 通过 demo测试

 

三， Math对象

3.1 Math 对象

不是构造函数，不需要new来调用，直接使用就好。

它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值 等）可以使用 Math 中的成员。 注意：下面的方法必须带括号

Math.PI // 圆周率

Math.floor() // 向下取整

Math.ceil() // 向上取整

Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3

Math.abs() // 绝对值

Math.max()/Math.min() // 求最大和最小值 如果里边有非数字的，就会返回NaN, 如果没有参数，返回-infinite

 

3.2 随机数方法 random()

random() 方法可以随机返回一个随机的小数，浮点数，其取值范围是 [0，1)，左闭右开 0 <= x < 1, 得到一个两数之间的随机整数，包括两个数在内

• 干什么的？Math 对象随机数方法，random()返回一个随机的小数 【0，1)
• 有没有参数？这方法里边灭有参数
• 返回啥？返回一个随机小数
• 代码验证 console.log(Math.random())

function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 会写这个函数？返回随机的整数 并且包含这两个数 随机点名：

程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字， Math.random()

1. 如果大于该数字，就提示，数字大了，继续猜；

2. 如果小于该数字，就提示数字小了，继续猜；

3. 如果等于该数字，就提示猜对了， 结束程序。

【分析】：① 随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。 ② 需要一直猜到正确为止，所以一直循环。 ③ 用while 循环合适更简单，有判断条件，一直循环。 ④ 核心算法：使用 if else if 多分支语句来判断大于、小于、等于。

 

四, 日期对象

4.1 Date 概述

1. Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用要new
2. Date 实例用来处理日期和时间

4.2 Date()方法的使用

1. 获取当前时间必须实例化

var now = new Date(); console.log(now); // 返回当前时间，没有参数的话

2. Date() 构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')

1. 如果Date()不写参数，就返回当前时间
2. 如果Date()里面写参数，就返回括号里面输入的时间

4.3 日期格式化

我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？ 需要获取日期指定的部分，所以我们要手动的得到这种格式

4.4 获取日期的总的毫秒形式

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数

https://www.zhihu.com/question/27005396/answer/34868386

我们经常利用总的毫秒数来计算时间，因为它更精确

 

【分析】

① 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒 相减，比如 05 分减去25分，结果会是负数的。

② 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时 间的毫秒数。

③ 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）

转换公式如下：

 

五, 数组对象

5.1 数组对象的创建

1. 字面量方式
2. new Array()

5.2 检测是否为数组

1. instanceof 运算符，可以判断一个对象是否属于某种类型
2. Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法（优先IE9以上才支持 ）

5.3 添加删除数组元素的方法

 

 

5.4 数组排序

 

但是sort，有bug（return b-a; 降序）

 

5.5 数组索引的方法

【核心原理】面试会问！！！！

旧数组：遍历，去新数组查，没有 存进去，有就跳过

新数组：

5.6 数组转化为字符串

 

六，字符串对象

6.1 基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean

// 下面代码有什么问题？ var str = 'andy';  console.log(str.length); // 4

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。按道理基本数据类型是没有属性和方法的，而（复杂数据类型）对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把 基本数据类型包装为复杂数据类型，其执行过程如下 ：

// 1. 生成临时变量，把简单类型包装为复杂数据类型 var temp = new String('andy');

// 2. 赋值给我们声明的字符变量 str = temp;

// 3. 销毁临时变量 temp = null;

 

6.2 字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc'; str = 'hello'; // 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中 // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变 // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题 var str = ''; for (var i = 0; i < 100000; i++) { str += i; } console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

6.3 根据字符返回位置

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

面试题！！！！！

案例：思路 ① 核心算法：先查找第一个o出现的位置 ② 然后 只要indexOf 返回的结果不是 -1 就继续往后查找 ③ 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

 

6.4 根据位置返回字符（重点）

6.4 根据位置返回字符（重点）ASII

判断用户按了那个键？

'abcoefoxyozzopp'

案例：核心算法 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。

• 核心算法：利用 charAt(） 遍历这个字符串，取出来所有字符
• 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
• 遍历对象，得到最大值和该字符
• 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。 对象 o { }

          

6.5 字符串操作方法（重点）

6.6 replace()方法

1. replace() 方法用于在字符串中用一些字符替换另一些字符。
2. 其使用格式如下： replace(被替换的字符串， 要替换为的字符串)；

6.7 split()方法

1. split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
2. var str = 'a,b,c,d'; console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

6.8 查阅

1. toUpperCase() //转换大写
2. toLowerCase() //转换小写

 

 

七，JavaScript 简单类型与复杂类型

u 简单类型与复杂类型 u 堆和栈 u 简单类型的内存分配 u 复杂类型的内存分配 u 简单类型传参 u 复杂类型传参

1. 简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

1. 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null （返回空的对象）
2. 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2. 堆和栈

堆栈空间分配区别：

1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
2. 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 复杂数据类型存放到堆里面
3. 注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。

3. 简单类型的内存分配

1. 值类型（简单数据类型）： string ，number，boolean，undefined，null
2. 值类型变量的数据直接存放在变量（栈空间）中

4. 复杂类型的内存分配

1. 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
2. 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

5. 简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈 空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

 

6. 复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地 址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。