前端JS总结（中）

目录

前言

正文

对象：

分类：

自定义对象：

内置对象：

重点：

常用内置对象：

字符串对象：String

获取字符串长度：

大小写转换：

获取某个字符：

截取字符串：

替换字符串：

例子：

检索字符串的位置：

数组对象：Array

前提：

重要：

补充：

创建：

获取某一项值：

赋值：

数组长度：

截取数组某一部分：

添加元素：

数组头添加：

数组尾添加：

删除元素：

数组头删除：

数组尾删除：

总结：

数组排序：

up：

down:

数组反向：

日期对象：Date

获取：

两大类方法：

get方法：

set方法：

总结：

Math对象：Math

引入：

使用：

属性：

总结：

方法：

最值：

正余弦：

取整：

随机数：

写在最后：

---

前言

上篇看这里：前端JS总结（上）

上期从语法去学习了JS，这期讲点硬核的，关于JS中的内置对象。

因为篇幅过长，其他内容则放到下篇，我是没想到的，一个内置对象能整这么久。

精读一本书，胜过看N个视频。

这次看的书是：

吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》

17年出版的。

不出意外的话，这估计就是压轴文章了~respect！

那么，咱们开始吧！

正文

对象：

分类：

自定义对象、内置对象

自定义对象：

自己定义的对象，比如说，对象、数组等

内置对象：

不需要自己定义的对象，可以直接使用的对象，跟内置函数是一致的。

重点：

属性和方法的区别：方法是有返回值的，但是属性是没有的。

常用内置对象：

字符串对象：String

数组对象：Array

日期对象：Date

数学对象：Math

为了行文流畅，下面一个一个说。

字符串对象：String

获取字符串长度：

方法：使用length属性

使用：str.length

注意：空格本身也是一个字符

例子：获取一串数字的长度

实现：数字＋空字符即可转化为字符串，再使用length属性即可返回长度值

以下都是方法，注意返回值。

大小写转换：

方法：toUpperCase()、toLowerCase()方法，记得这个方法是符合驼峰命名的

注意：属性和方法是不一样的，方法有返回值，属性没有；属性调用不需要带括号，但是方法是函数，需要带括号；这两个方法都是直接把全部英文字符转换为对应格式的。

返回值：处理完之后的字符串

获取某个字符：

方法：charAt(index)

解析：index是整数，是下标，下标从0开始，str.length = index + 1

注意：空格也是字符；字符之间的比较是比较ASCII值的大小

返回值：返回第index个字符

截取字符串：

方法：subString(start, end)

解析：start是开始的下标，end是结束下标

截取范围：[start, end)，也就是不包括end

注意：下标从0开始

返回值：截取下来的字符串/字符

替换字符串：

方法：replace(原字符串, 替换字符串) / replace(正则表达式, 替换字符串)

注意：不管是哪种方式，第二个参数都是替换字符串；可以进行部分/整体替换，一般都是替换一个；正则表达式不是字符串，所以不需要带双引号，正则表达式中的/g表示全局替换的意思，也就是全局替换全部的原字符串

返回值：替换完成后的新字符串

例子：

let str = "这是一个字符串，但是这不是一个对象"
;et str_1 = str.replace("一个", "") // 只替换第一个
let str_2 = str.replace(/一个/g, "") // 全局替换
console.log(str_1, str_2) // 控制台输出

分割字符串：

方法：split('分隔符')

注意：分隔符可以是个字符、多个字符、正则表达式；空格也是一个字符，也可以被分割保留下来

返回值：一个数组，数组里面就是分割完之后的字符串碎片

重要：str.split("")和str.split(" ")的区别：前者没有空格，直接按字符分割；后者有空格，以空格为分割线，分割成一个一个块。

类似：数组对象中的join()，两者经常配合一起使用

检索字符串的位置：

方法：indexOf(str)，驼峰命名法

解析：str是需要检索的字符串/字符

注意：如果没有找到，返回-1；下标从0开始；str是字符串，需要双引号

对应方法：lastIndexOf(str)，指定字符串最后出现的下标位置

返回值：下标/-1

数组对象：Array

前提：

一个变量只能存储一个值

那么我们怎么一个变量存储一类值呢？

即答：数组

重要：

数组是一个引用数据类型——对象的一种，不是基本数据类型

数组的下标从0开始，这是今晚打字最多的一句话了。

补充：

如果arr[index]不存在，返回的是undefined

创建：

let arr = new Array(元素1, 元素2, 元素3, ....) // 完整形式

let arr = [元素1, 元素2, 元素3, ...] // 简写形式，语法糖

获取某一项值：

arr.[index]即可，index从0开始算起

赋值：

含义：给某一项元素赋新值，或者多增加一项元素

方法：arr[index] = new value

数组长度：

length属性即可获取数组的长度

arr.length

截取数组某一部分：

对比：截取字符串对象中的某部分——subString()，返回的是截取的部分

方法：slice(start, end)，slice中文——切片

截取范围：[start, end)，也就是说，不包括end部分，注意这个，下面会继续提到

返回值：截取的数组

添加元素：

分为在数组头添加，在数组尾添加

数组头添加：

方法：unshift(新元素1, 新元素2, ...)

注意：这个方法会改变原数组，返回的是新数组

返回值：新数组

数组尾添加：

方法：push(新元素1, 新元素2, ...)、

注意：这个方法会改变原数组，返回的是新数组

返回值：新数组

删除元素：

这个跟添加元素是一样的，都是分为从数组头删除，从数组尾删除

数组头删除：

方法：shift()

注意：这个方法会改变原数组，返回的是新数组，但是只会删除一个

返回值：新数组

数组尾删除：

方法：pop()

注意：这个方法会改变原数组，返回的是新数组，但是只会删除一个

返回值：新数组

总结：

unshift()、push()、shift()、pop()都会改变原数组

数组排序：

方法：sort(函数名/空)

注意：函数名：定义顺序/逆序排布的函数名；函数名为空的时候只会比较数字中第一个数字，而不是整体大小

例子：升序——arr.sort(up)，arr.sort(down)

返回值：新数组 - 覆盖原数组

up：

function up(a, b) {return a - b
}

down:

function down(a, b) {return b - a
}

数组反向：

方法：reverse()

作用：将数组反向

返回值：新数组 - 覆盖原数组

数组元素连接成字符串：

方法：join('连接符')

注意：连接符 - 可选参数；如果不写，默认是英文逗号

区别：join("")和join(" ")的区别：跟字符串对象的split()方法差不多

返回值：字符串

日期对象：Date

获取：

let date = new Date()

两大类方法：

get和set方法

get方法：

getFullYear()：获取年份，返回四个整数

getMonth()：获取月份，返回的是0-11的整数，所以月份需要+1显示

getDate()：获取日数，返回的是1-31的整数

下面都是带s的：

getHours()：获取小时数，取值为0-23的整数

getMinutes()：获取分钟数，取值为0-59的整数

getSeconds()：获取秒钟数，取值为0-59的整数

set方法：

setFullYear()：设置年月日

setMonth()：设置月日

setDate()：设置日

下面都是带s的：

setHours()：设置时分秒毫秒

setMinutes()：设置分秒毫秒

setSeconds()：设置秒毫秒

总结：

月份从0开始，所以正常的月份应该+1

get方法只能获取到对应的内容

set方法不能能设置对应的内容，还可以设置比其小的内容；但是对应的内容是必选，其他内容是可选，一般来说，我们都默认是不可选的

getDay()：获取星期，0表示星期天，其他则正常；返回值是0-6的数字；如果要转化为成周几，需要自己手动去创建一个数组，根据返回值来取对应值

Math对象：Math

这是最后一个对象，写完这里，下期说说DOM操作了。

引入：

设计、动画开发、高级编程、算法研究等，跟数学有很大的关系

使用：

不需要new来创建一个Math对象，直接使用Math.属性/方法即可

Math.属性 / Math.方法

属性：

PI：圆周率；角度：Math.PI / 180 * 角度值

总结：

Math属性都是常量，所以都是大写

只需要掌握Math.PI即可，别的我都没写

角度值非常重要，canvas需要使用

上面这些就是属性了，下面介绍方法

方法：

最值：

最大值：Math.max(一堆数字)，返回最值

最小值：Math.min(一堆数字)，返回最值

注意：如果想要获取数组的最值，我们需要使用语法糖...arr——展开运算符的方式进行

正余弦：

sin(x)、cos(x)、atan2(x)

总结：常用于做动画，不说

取整：

floor(x)：向下取整，往小了去取值

ceil(x)：向上取整，往大了去取值

总结：不会四舍五入，都是往最值去取值

随机数：

random(x)：生成0-1之间的随机数，范围[0, 1)，不包含1

常用：

Math.random()*m：表示生成[0, m)之间的随机数

Math.random()*m+n：表示生成[n, m + n)之间的随机数

Math.random()*m-n：表示生成[-n, m - n)之间的随机数

Math.random()*m-m：表示生成[-m, 0)之间的随机数

注意：

这里生成的都是范围内的随机数，可以是整数，也可以是小数

如果要整数，需要使用Math.floor() / Math.ceil()方法，但是一般都是采用floor，而不是ceil

其他方法：

返回值：abs(x)：返回绝对值，正数是本身，负数是绝对值

平方根：sqrt(x)：返回X的平方根

写在最后：

这次只说了内置对象，本来还想写一下DOM操作的，但是发现篇幅太长了。

不过，刚好这个内置对象就是一个重点中的重点，独立出来成为一篇，其实也是不错的。

那么，就这样吧。

下期DOM操作再见！