前端三件套系例之JS——JavaScript内置方法

文章目录

• • 1、Number
  • • 1-1 属性
    • 1-2 方法
  • 2、String
  • • 2-1 属性
    • 2-2 方法
    • 2-3 代码
  • 3Array
  • • 3-1 创建数组
    • 3-2 数组特点
    • 3-3 数组的遍历(迭代)
    • 34 数组元素的添加和删除
    • • 添加
      • 删除
    • 3-5 数组对象属性
    • 3-6 数组对象方法
  • 4、Math
  • • 4-1 属性
    • 4-2 方法
  • 5、Date
  • • 5-1 方法
  • 6、RegExp
  • • 6-1 属性
    • 6-2 方法
  • 7、JSON
  • • 7-1 方法
  • 8、Global
  • • 10-1 属性
    • 10-2 方法
  • 9 函数对象
  • • 9-1 自定义对象
    • 9-2 Date对象
    • 9-3 JSON对象
    • 9-4 RegExp对象
    • 9-5 Math对象(了解)

1、Number

1-1 属性

• MAX_VALUE JS可以表示的最大的数字
• MIN_VALUE JS可以表示的最小的数字

1-2 方法

• toFixed(length) 指定保留长度的小数
• toExponential() 用科学计数法表示
• toPrecision(length) 要求数字按照指定长度显示 整数+小数
• toString(number) 把数字转换为字符串 可以按照指定的 进制 返回

2、String

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, …)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列(不支持负数)
.slice(start, end)	切片(直接使用它)
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

2-1 属性

• length 字符串长度

2-2 方法

• charAt(index) 返回指定位置的字符
• concat(string) 连接字符串
• indexOf(str) 返回小字符串在字符串对象中第一次出现位置 -1表示不存在
• lastIndexOf() 返回小字符在字符串中最后一次出现的位置
• substr(start, length) 截取字符串 省略长度截取到结束
• substring(start, end) 截取字符串, 省略结束位置 一直到最后
• slice(start, end) 与substring 一模一样
• split(char) 把字符串分割为数组
• toUpperCase() 把字符串转为大写
• toLowerCase() 把字符串转为小写
• match() 匹配字符串 可用正则
• search() 查找字符串 可用正则
• replace() 替换字符串可用正则
• charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
• String.formCharCode() 从字符编码创建一个字符串。

2-3 代码

var name = 'egondsb'
undefined

name.length
7

var name1 = '  egonDSB  '
undefined
name1
"  egonDSB  "
name1.trim()
"egonDSB"
name1.trimLeft()
"egonDSB  "
name1.trimRight()
"  egonDSB"

var name2 = '$$jason$$'
undefined
name2.trim('$')  # 不能加括号指定去除的内容
"$$jason$$"

name2.charAt(0)
"$"
name2.indexOf('as')
3

name2.substring(0,5)
"$$jas"
name2.slice(0,5)
"$$jas"
name2.substring(0,-1)  # 不识别负数
""
name2.slice(0,-1)  # 后面推荐就使用slice就可以
"$$jason$"

var name3 = 'eGoNDsb123666HahA'
undefined
name3.toLowerCase()
"egondsb123666haha"
name3.toUpperCase()
"EGONDSB123666HAHA"
var name = 'tank|hecha|liaomei|mengsao|...'
undefined

name.split('|')
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.split('|',2)
(2) ["tank", "hecha"]0: "tank"1: "hecha"length: 2__proto__: Array(0)
name.split('|',10)  # 第二个参数不是限制切割字符的个数还是获取切割之后元素的个数
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]

name.concat(name1,name2)
"tank|hecha|liaomei|mengsao|...  egonDSB  $$jason$$"
var p = 1111
undefined
name.concat(p)  # js是弱类型(内部会自动转换成相同的数据类型做操作)
"tank|hecha|liaomei|mengsao|...1111"

3Array

3-1 创建数组

• 使用直接量 []
• 构造函数方式 new Array()

3-2 数组特点

• 索引必须连续
• 如果索引不连续，会产生稀疏数组

3-3 数组的遍历(迭代)

• for 循环遍历
• for…in 循环
• for…of 循环

34 数组元素的添加和删除

添加

• 为新索引赋值
• 利用数组长度,在数组尾部插入新元素
• push()
• unshift()
• splice()

删除

• 改变数组长度
• pop()
• shift()
• splice()
• 运算符 delete

3-5 数组对象属性

• length 数组长度 元素个数

3-6 数组对象方法

• splice()

删除指定位置指定个数的元素替换指定位置指定个数的元素添加指定位置的元素返回 被删除的元素组成的数组

• reverse() 翻转数组
• sort() 数组排序
• push() 和 pop() 在数组的最后添加或删除元素
• unshift()和shift() 在数组的最前面添加或删除元素
• toString() 和 toLocalString() 把数组转换为字符串
• join() 把数组的元素拼接成字符串
• slice() 截取数组中的一部分,返回新的数组 slice(start, end)
• concat() 合并多个数组
• indexOf() 搜索数组中的元素，并返回它所在的位置。
• lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
• forEach() 遍历 循环
• map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
• filter() 检测数值元素，并返回符合条件所有元素的数组。
• every() 检测数值元素的每个元素是否都符合条件。
• some() 检测数组元素中是否有元素符合指定条件。
• reduce() 将数组元素 索引值从低到高 进行组合reduceRight() 将数组元素 索引值从高到低进行组合

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, …)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

4、Math

4-1 属性

• PI 返回圆周率（约等于3.14159）。

4-2 方法

• abs(x) 返回数的绝对值。
• sqrt(x) 返回数的平方根。
• pow(x,y) 返回 x 的 y 次幂。
• ceil(x) 对数进行上舍入。
• floor(x) 对数进行下舍入。
• round(x) 把数四舍五入为最接近的整数。
• max(x,y) 返回 x 和 y 中的最高值。
• min(x,y) 返回 x 和 y 中的最低值。
• random() 返回 0 ~ 1 之间的随机数。

5、Date

5-1 方法

• getYear() 请使用 getFullYear() 方法代替。
• getFullYear() 从 Date 对象以四位数字返回年份。
• getMonth() 从 Date 对象返回月份 (0 ~ 11)。
• getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
• getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
• getHours() 返回 Date 对象的小时 (0 ~ 23)。
• getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
• getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
• getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
• getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
• getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
• getUTC…. 标准时区
• set…
• setUTC…
• toTimeString() 把 Date 对象的时间部分转换为字符串。
• toDateString() 把 Date 对象的日期部分转换为字符串。
• toUTCString() 根据世界时，把 Date 对象转换为字符串。
• toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
• toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
• toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

6、RegExp

6-1 属性

• global RegExp 对象是否具有标志 g。
• ignoreCase RegExp 对象是否具有标志 i。
• lastIndex 一个整数，标示开始下一次匹配的字符位置。
• multiline RegExp 对象是否具有标志 m。
• source 正则表达式的源文本。

6-2 方法

• exec() 检索字符串中指定的值。返回找到的值，并确定其位置。
• test() 检索字符串中指定的值。返回 true 或 false。

7、JSON

7-1 方法

• JSON.parse() 解析json格式的字符串
• JSON.stringify() 序列化对象 数组 或 原始值

8、Global

10-1 属性

• NaN
• InFinity

10-2 方法

• escape() 对字符串进行Unicode编码。
• unescape() 对由 escape() 编码的字符串进行解码。
• encodeURI() 把字符串编码为 URI。 对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”不进行编码
• decodeURI() 解码某个编码的 URI。
• encodeURIComponent() 把字符串编码为 URI 组件
• decodeURIComponent() 解码一个编码的 URI 组件。
• eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
• isFinite() 检查某个值是否为有穷大的数。
• isNaN() 检查某个值是否是数字。
• parseInt() 解析一个字符串并返回一个整数。
• parseFloat() 解析一个字符串并返回一个浮点数。
• Number() 把对象的值转换为数字。
• String() 把对象的值转换为字符串。
• 所有内置构造函数 都是 全局对象的属性

9 函数对象

9-1 自定义对象

# 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便

# 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d1 = {'name':'jason','age':18}

var d = {'name':'jason','age':18}
typeof d
"object"

d['name']
"jason"
d.name  # 比python从字典获取值更加的方便
"jason"
d.age
18

for(let i in d){
  console.log(i,d[i])
}  # 支持for循环 暴露给外界可以直接获取的也是键

"""第二种创建自定义对象的方式  需要使用关键字 new"""
var d2 = new Object()  # {}

d2.name = 'jason'
{name: "jason"}

d2['age'] = 18
{name: "jason", age: 18}

9-2 Date对象

let d3 = new Date()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)

d3.toLocaleString()
"2020/5/15 下午2:41:06"

# 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"

# 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

9-3 JSON对象

"""
在python中序列化反序列化
	dumps 		序列化
	loads			反序列化

在js中也有序列化反序列化
	JSON.stringify()								dumps
	JSON.parse()										loads
"""
let d7 = {'name':'jason','age':18}
let res666 = JSON.stringify(d7)
"{"name":"jason","age":18}"

JSON.parse(res666)
{name: "jason", age: 18}

9-4 RegExp对象

"""
在python中如果需要使用正则 需要借助于re模块
在js中需要你创建正则对象
"""
# 第一种 有点麻烦
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
# 第二种 个人推荐
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

# 匹配内容
reg1.test('egondsb')
reg2.test('egondsb')

# 题目 获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
sss.match(/s/)  # 拿到一个就停止了
sss.match(/s/g)	# 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g)
(3) ["s", "s", "s"]

# 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')  # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false

reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7

# 吐槽点二
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

"""
总结 你在用js书写正则的时候一定要注意上述问题
一般情况下你后续也不会解除到了
"""

9-5 Math对象(了解)

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。