菜园前端

Appearance

JavaScript 内置对象 ​

String 字符串对象 ​

字符串转换 toString

javascript
var age = 20

var age2 = age.toString() // "20"
var age = 20

var age2 = age.toString() // "20"

字符串转换 String

javascript
var age = 20

var age2 = String(age) // "20"
var age = 20

var age2 = String(age) // "20"

字符串分割 split

javascript
var str = 'abcdefg'

var str2 = str.split('') // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
var str = 'abcdefg'

var str2 = str.split('') // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

字符串替换 replace

javascript
var str = 'abcdefg'

var str2 = str.replace('abc', 'xxx') // xxxdefg
var str = 'abcdefg'

var str2 = str.replace('abc', 'xxx') // xxxdefg

字符串查找 indexOf

javascript
var str = 'abcdebg'

var str2 = str.indexOf('b') // 1
var str = 'abcdebg'

var str2 = str.indexOf('b') // 1

字符串查找 lastIndexOf

javascript
var str = 'abcdebg'

var str2 = str.lastIndexOf('b') // 5
var str = 'abcdebg'

var str2 = str.lastIndexOf('b') // 5

字符串查找 charAt

javascript
var str = 'abcdebg'

var str2 = str.charAt(1) // b
var str = 'abcdebg'

var str2 = str.charAt(1) // b

字符串查找 match

javascript
var str = 'The rain in SPAIN stays mainly in the plain'

var str2 = str.match(/ain/g) // ['ain', 'ain', 'ain']
var str = 'The rain in SPAIN stays mainly in the plain'

var str2 = str.match(/ain/g) // ['ain', 'ain', 'ain']

字符串拼接 +

javascript
var str = 'my name'
var str2 = ' is a xiaoming'

var str3 = str + str2 // 'my name is a xiaoming'
var str = 'my name'
var str2 = ' is a xiaoming'

var str3 = str + str2 // 'my name is a xiaoming'

字符串拼接 concat

javascript
var str = 'my name'
var str2 = ' is a xiaoming'

var str3 = str.concat(str2) // 'my name is a xiaoming'
var str = 'my name'
var str2 = ' is a xiaoming'

var str3 = str.concat(str2) // 'my name is a xiaoming'

字符串截取 slice

javascript
var str = 'abcedfg'

var str2 = str.slice(0, 2) // 'ab'
var str = 'abcedfg'

var str2 = str.slice(0, 2) // 'ab'

字符串截取 substring

javascript
var str = 'abcedfg'

var str2 = str.substring(1, 2) // 'b'
var str = 'abcedfg'

var str2 = str.substring(1, 2) // 'b'

字符串截取 substr

javascript
var str = 'abcedfg'

var str2 = str.substr(1, 2) // 'bc'
var str = 'abcedfg'

var str2 = str.substr(1, 2) // 'bc'

字符串转小写 toLowerCase

javascript
var str = 'ABCEDFG'

var str2 = str.toLowerCase() // 'abcedfg'
var str = 'ABCEDFG'

var str2 = str.toLowerCase() // 'abcedfg'

字符串转大写 toLocaleUpperCase

javascript
var str = 'abcdefg'

var str2 = str.toLocaleUpperCase() // 'ABCDEFG'
var str = 'abcdefg'

var str2 = str.toLocaleUpperCase() // 'ABCDEFG'

字符串两端去空格 trim

javascript
var str = ' abcd efg '

var str2 = str.trim() // 'abcd efg'
var str = ' abcd efg '

var str2 = str.trim() // 'abcd efg'

Number 数字对象 ​

加减乘除 + - * /

javascript
var a = 1 + 1 // 2

var b = 1 - 1 // 0

var c = 1 * 1 // 1

var d = 1 / 1 // 1
var a = 1 + 1 // 2

var b = 1 - 1 // 0

var c = 1 * 1 // 1

var d = 1 / 1 // 1

数字转换 Number

javascript
var a = '10.01'

var b = Number(a) // 10.01
var a = '10.01'

var b = Number(a) // 10.01

数字转换 parseInt

javascript
var a = '10.01'

var b = Number.parseInt(a) // 10
var a = '10.01'

var b = Number.parseInt(a) // 10

数字转换小数点 parseFloat

javascript
var a = '10.01'

var b = Number.parseFloat(a) // 10.01
var a = '10.01'

var b = Number.parseFloat(a) // 10.01

格式化小数点 toFixed

javascript
var a = 10.06

var b = a.toFixed(1) // '10.1'
var a = 10.06

var b = a.toFixed(1) // '10.1'

判断是否为整数 isInteger

javascript
var a = Number.isInteger(10.06) // false

var b = Number.isInteger(10) // true
var a = Number.isInteger(10.06) // false

var b = Number.isInteger(10) // true

Object 对象 ​

创建对象 {}

javascript
var obj = {}
var obj = {}

创建对象 new Object

javascript
var obj = new Object()
var obj = new Object()

创建对象 Object.create

javascript
var obj = Object.create(null, {})
var obj = Object.create(null, {})

访问对象属性 obj[key]

javascript
var obj = {
    name: 'xiaoming',
    age: 20
}

var name = obj['name'] // 'xiaoming'
var obj = {
    name: 'xiaoming',
    age: 20
}

var name = obj['name'] // 'xiaoming'

访问对象属性 obj.key

javascript
var obj = {
    name: 'xiaoming',
    age: 20
}

var name = obj.name // 'xiaoming'
var obj = {
    name: 'xiaoming',
    age: 20
}

var name = obj.name // 'xiaoming'

删除对象属性 delete obj.key

javascript
var obj = {
    name: 'xiaoming',
    age: 20
}

delete obj.name

console.log(obj.name) // undefined
var obj = {
    name: 'xiaoming',
    age: 20
}

delete obj.name

console.log(obj.name) // undefined

Array 数组对象 ​

创建数组 []

javascript
var arr = ['a', 'b', 'c', 'd']
var arr = ['a', 'b', 'c', 'd']

创建数组 Array.from

javascript
var arr = Array.from('abcd') //  ['a', 'b', 'c', 'd']
var arr = Array.from('abcd') //  ['a', 'b', 'c', 'd']

数组合并 concat

javascript
var arr = ['a', 'b', 'c']

var arr2 = ['d', 'e', 'f']

var arr3 = arr.concat(arr2) // ['a', 'b', 'c', 'd', 'e', 'f']
var arr = ['a', 'b', 'c']

var arr2 = ['d', 'e', 'f']

var arr3 = arr.concat(arr2) // ['a', 'b', 'c', 'd', 'e', 'f']

尾部添加元素 push

javascript
var arr = ['a', 'b', 'c', 'd']

arr.push('e')

console.log(arr) // ['a', 'b', 'c', 'd', 'e']
var arr = ['a', 'b', 'c', 'd']

arr.push('e')

console.log(arr) // ['a', 'b', 'c', 'd', 'e']

头部添加元素 unshift

javascript
var arr = ['a', 'b', 'c', 'd']

arr.unshift('e')

console.log(arr) // ['e', 'a', 'b', 'c', 'd']
var arr = ['a', 'b', 'c', 'd']

arr.unshift('e')

console.log(arr) // ['e', 'a', 'b', 'c', 'd']

尾部删除元素 pop

javascript
var arr = ['a', 'b', 'c', 'd']

arr.pop()

console.log(arr) // ['a', 'b', 'c']
var arr = ['a', 'b', 'c', 'd']

arr.pop()

console.log(arr) // ['a', 'b', 'c']

头部删除元素 shift

javascript
var arr = ['a', 'b', 'c', 'd']

arr.shift('e')

console.log(arr) // ['b', 'c', 'd']
var arr = ['a', 'b', 'c', 'd']

arr.shift('e')

console.log(arr) // ['b', 'c', 'd']

指定位置删除元素 splice

javascript
var arr = ['a', 'b', 'c', 'd']

arr.splice(0, 2)

console.log(arr) // ['c', 'd']
var arr = ['a', 'b', 'c', 'd']

arr.splice(0, 2)

console.log(arr) // ['c', 'd']

清空数组 length

javascript
var arr = ['a', 'b', 'c', 'd']

arr.length = 0

console.log(arr) // []
var arr = ['a', 'b', 'c', 'd']

arr.length = 0

console.log(arr) // []

序列化字符串 toString

javascript
var arr = ['a', 'b', 'c', 'd']

var str = arr.toString() // 'a,b,c,d'
var arr = ['a', 'b', 'c', 'd']

var str = arr.toString() // 'a,b,c,d'

序列化字符串 join

javascript
var arr = ['a', 'b', 'c', 'd']

var str = arr.join() // 'a,b,c,d'
var arr = ['a', 'b', 'c', 'd']

var str = arr.join() // 'a,b,c,d'

截取元素 slice

javascript
var arr = ['a', 'b', 'c', 'd']

var arr2 = arr.slice(0, 2)

console.log(arr2) // ['a', 'b']
var arr = ['a', 'b', 'c', 'd']

var arr2 = arr.slice(0, 2)

console.log(arr2) // ['a', 'b']

查找指定元素 indexOf

javascript
var arr = ['a', 'b', 'c', 'd']

var index = arr.indexOf('b') // 1
var arr = ['a', 'b', 'c', 'd']

var index = arr.indexOf('b') // 1

访问数组元素 array[index]

javascript
var arr = ['a', 'b', 'c', 'd']

var str = arr[1] // b
var arr = ['a', 'b', 'c', 'd']

var str = arr[1] // b

访问数组长度 length

javascript
var arr = ['a', 'b', 'c', 'd']

var length = arr.length // 4
var arr = ['a', 'b', 'c', 'd']

var length = arr.length // 4

Function 函数对象 ​

定义函数 function

javascript
function eat() {}
function eat() {}

定义函数参数（形参）arguments

javascript
function eat(name) {}
function eat(name) {}

调用函数 fn()

javascript
eat()
eat()

调用函数传入参数（实参） fn(arguments)

javascript
eat('xiaoming')
eat('xiaoming')

函数返回值 return

javascript
function eat(name) {
    return 'my name is ' + name
}

var person = eat('xiaoming') // 'my name is xiaoming'
function eat(name) {
    return 'my name is ' + name
}

var person = eat('xiaoming') // 'my name is xiaoming'

函数多参数 arguments,arguments

javascript
function eat(name, age) {
    return 'my name is ' + name + '. age is ' + age
}

var person = eat('xiaoming', 20) // 'my name is xiaoming. age is 20'
function eat(name, age) {
    return 'my name is ' + name + '. age is ' + age
}

var person = eat('xiaoming', 20) // 'my name is xiaoming. age is 20'

Date 日期对象 ​

获取当前时间戳 Date.now()

javascript
var date = Date.now() // 1641973293429
var date = Date.now() // 1641973293429

获取当前中国标准时间 Date()

javascript
var date = Date() // 'Wed Jan 12 2022 15:42:21 GMT+0800 (中国标准时间)'
var date = Date() // 'Wed Jan 12 2022 15:42:21 GMT+0800 (中国标准时间)'

获取当前年份 getFullYear()

javascript
var date = new Date().getFullYear() // 2022
var date = new Date().getFullYear() // 2022

获取当前月份 getMonth()

javascript
var date = new Date().getMonth() // 0
var date = new Date().getMonth() // 0

获取当前日期 getDate()

javascript
var date = new Date().getDate() // 12
var date = new Date().getDate() // 12

获取当前小时 getHours()

javascript
var date = new Date().getHours() // 15
var date = new Date().getHours() // 15

获取当前分钟 getMinutes()

javascript
var date = new Date().getMinutes() // 51
var date = new Date().getMinutes() // 51

获取当前秒 getSeconds()

javascript
var date = new Date().getSeconds() // 41
var date = new Date().getSeconds() // 41

获取当前星期几 getDay()

javascript
var date = new Date().getDay() // 3
var date = new Date().getDay() // 3

Math 数学对象 ​

绝对值 abs

javascript
var number = Math.abs(-5) // 5
var number = Math.abs(-5) // 5

向上取整 ceil

javascript
var number = Math.ceil(10.06) // 11
var number = Math.ceil(10.06) // 11

向下取整 floor

javascript
var number = Math.floor(10.06) // 10
var number = Math.floor(10.06) // 10

四舍五入 round

javascript
var number = Math.round(10.6) // 11
var number = Math.round(10.6) // 11

最小值 min

javascript
var number = Math.min(20, 30, 5, 10, 50) // 5
var number = Math.min(20, 30, 5, 10, 50) // 5

最大值 max

javascript
var number = Math.max(20, 30, 5, 10, 50) // 50
var number = Math.max(20, 30, 5, 10, 50) // 50

平方根 sqrt

javascript
var number = Math.sqrt(4) // 2
var number = Math.sqrt(4) // 2

次幂 pow

javascript
var number = Math.pow(2, 3) // 8
var number = Math.pow(2, 3) // 8

随机数 random

javascript
var number = Math.random() // 0.08225691909776356
var number = Math.random() // 0.08225691909776356

RegExp 正则对象 ​

创建正则对象 new RegExp

javascript
var reg = new RegExp('d{2}', 'g')
var reg = new RegExp('d{2}', 'g')

创建正则对象 //g

javascript
var reg = /d{2}/g
var reg = /d{2}/g

使用正则替换字符串

javascript
var str = 'abcddefgdd'

var reg = new RegExp('d{2}', 'g')

var str2 = str.replace(reg, 'xx') // 'abcxxefg'
var str = 'abcddefgdd'

var reg = new RegExp('d{2}', 'g')

var str2 = str.replace(reg, 'xx') // 'abcxxefg'

正则表达式修饰符

修饰符可以在全局搜索中不区分大小写。

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符。

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
(red|blue|green)查找任何指定的选项。

元字符是拥有特殊含义的字符。

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找数字、字母及下划线。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。 例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*匹配任何包含零个或多个 n 的字符串。 例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n?配任何包含零个或一个 n 的字符串。 例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X}匹配包含 X 个 n 的序列的字符串。 例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。 例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。 例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$匹配任何结尾为 n 的字符串。
^n^n 匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。