Skip to content

JavaScript 内置方法按重要性排序

1. Array 方法

1.1 map()

重要性:★★★★★

  • 功能:创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
  • 使用案例
javascript
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(num => num * 2)
// 结果: [2, 4, 6, 8, 10]

1.2 filter()

重要性:★★★★★

  • 功能:创建一个新数组,包含通过所提供函数实现的测试的所有元素。
  • 使用案例
javascript
const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(num => num % 2 === 0)
// 结果: [2, 4]

1.3 reduce()

重要性:★★★★★

  • 功能:对数组中的每个元素执行一个由您提供的reducer函数,将其结果汇总为单个返回值。
  • 使用案例
javascript
const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((acc, curr) => acc + curr, 0)
// 结果: 15

1.4 forEach()

重要性:★★★★☆

  • 功能:对数组的每个元素执行一次提供的函数。
  • 使用案例
javascript
const numbers = [1, 2, 3]
numbers.forEach(num => console.log(num))
// 输出: 1, 2, 3

1.5 push()

重要性:★★★★☆

  • 功能:将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
  • 使用案例
javascript
const fruits = ['apple', 'banana']
fruits.push('orange')
// 结果: ['apple', 'banana', 'orange']

1.6 pop()

重要性:★★★★☆

  • 功能:从数组中删除最后一个元素,并返回该元素的值。
  • 使用案例
javascript
const fruits = ['apple', 'banana', 'orange']
const lastFruit = fruits.pop()
// lastFruit: 'orange', fruits: ['apple', 'banana']

1.7 shift()

重要性:★★★☆☆

  • 功能:从数组中删除第一个元素,并返回该元素的值。
  • 使用案例
javascript
const fruits = ['apple', 'banana', 'orange']
const firstFruit = fruits.shift()
// firstFruit: 'apple', fruits: ['banana', 'orange']

1.8 unshift()

重要性:★★★☆☆

  • 功能:将一个或多个元素添加到数组的开头,并返回该数组的新长度。
  • 使用案例
javascript
const fruits = ['banana', 'orange']
fruits.unshift('apple')
// 结果: ['apple', 'banana', 'orange']

1.9 slice()

重要性:★★★★☆

  • 功能:返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。
  • 使用案例
javascript
const fruits = ['apple', 'banana', 'orange', 'grape']
const citrus = fruits.slice(1, 3)
// 结果: ['banana', 'orange']

1.10 splice()

重要性:★★★★☆

  • 功能:通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
  • 使用案例
javascript
const fruits = ['apple', 'banana', 'orange']
fruits.splice(1, 1, 'grape')
// 结果: ['apple', 'grape', 'orange']

1.11 indexOf()

重要性:★★★★☆

  • 功能:返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
  • 使用案例
javascript
const fruits = ['apple', 'banana', 'orange']
const index = fruits.indexOf('banana')
// 结果: 1

1.12 includes()

重要性:★★★★☆

  • 功能:判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
  • 使用案例
javascript
const fruits = ['apple', 'banana', 'orange']
const hasBanana = fruits.includes('banana')
// 结果: true

1.13 sort()

重要性:★★★★☆

  • 功能:对数组的元素进行排序,并返回排序后的数组。
  • 使用案例
javascript
const numbers = [3, 1, 4, 1, 5, 9]
numbers.sort((a, b) => a - b)
// 结果: [1, 1, 3, 4, 5, 9]

1.14 reverse()

重要性:★★★☆☆

  • 功能:将数组中元素的位置颠倒,并返回该数组。
  • 使用案例
javascript
const numbers = [1, 2, 3]
numbers.reverse()
// 结果: [3, 2, 1]

2. String 方法

2.1 split()

重要性:★★★★★

  • 功能:使用指定的分隔符字符串将一个String对象分割成子字符串数组。
  • 使用案例
javascript
const str = 'Hello World'
const words = str.split(' ')
// 结果: ['Hello', 'World']

2.2 substring()

重要性:★★★★★

  • 功能:返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串的末尾的一个子集。
  • 使用案例
javascript
const str = 'Hello World'
const hello = str.substring(0, 5)
// 结果: 'Hello'

2.3 toLowerCase()

重要性:★★★★★

  • 功能:将字符串转换为小写。
  • 使用案例
javascript
const str = 'HELLO WORLD'
const lower = str.toLowerCase()
// 结果: 'hello world'

2.4 toUpperCase()

重要性:★★★★★

  • 功能:将字符串转换为大写。
  • 使用案例
javascript
const str = 'hello world'
const upper = str.toUpperCase()
// 结果: 'HELLO WORLD'

2.5 trim()

重要性:★★★★☆

  • 功能:从字符串的两端删除空白字符。
  • 使用案例
javascript
const str = '  Hello World  '
const trimmed = str.trim()
// 结果: 'Hello World'

2.6 indexOf()

重要性:★★★★☆

  • 功能:返回字符串中第一次出现的指定值的索引,如果不存在,则返回-1。
  • 使用案例
javascript
const str = 'Hello World'
const index = str.indexOf('World')
// 结果: 6

2.7 includes()

重要性:★★★★☆

  • 功能:判断一个字符串是否包含在另一个字符串中,根据情况返回true或false。
  • 使用案例
javascript
const str = 'Hello World'
const hasWorld = str.includes('World')
// 结果: true

2.8 replace()

重要性:★★★★☆

  • 功能:返回一个由替换值替换一些或所有匹配的模式后的新字符串。
  • 使用案例
javascript
const str = 'Hello World'
const newStr = str.replace('World', 'JavaScript')
// 结果: 'Hello JavaScript'

2.9 charAt()

重要性:★★★☆☆

  • 功能:返回字符串中指定位置的字符。
  • 使用案例
javascript
const str = 'Hello'
const char = str.charAt(0)
// 结果: 'H'

2.10 concat()

重要性:★★★☆☆

  • 功能:将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。
  • 使用案例
javascript
const str1 = 'Hello'
const str2 = 'World'
const combined = str1.concat(' ', str2)
// 结果: 'Hello World'

3. Object 方法

3.1 Object.keys()

重要性:★★★★★

  • 功能:返回一个由一个给定对象的自身可枚举属性组成的数组。
  • 使用案例
javascript
const obj = { name: 'John', age: 30 }
const keys = Object.keys(obj)
// 结果: ['name', 'age']

3.2 Object.values()

重要性:★★★★★

  • 功能:返回一个给定对象自身的所有可枚举属性值的数组。
  • 使用案例
javascript
const obj = { name: 'John', age: 30 }
const values = Object.values(obj)
// 结果: ['John', 30]

3.3 Object.entries()

重要性:★★★★★

  • 功能:返回一个给定对象自身可枚举属性的键值对数组。
  • 使用案例
javascript
const obj = { name: 'John', age: 30 }
const entries = Object.entries(obj)
// 结果: [['name', 'John'], ['age', 30]]

3.4 Object.assign()

重要性:★★★★☆

  • 功能:用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
  • 使用案例
javascript
const target = { a: 1 }
const source = { b: 2, c: 3 }
Object.assign(target, source)
// 结果: { a: 1, b: 2, c: 3 }

3.5 Object.freeze()

重要性:★★★☆☆

  • 功能:冻结一个对象,防止添加新属性,防止删除现有属性,防止修改现有属性的可枚举性、可配置性、可写性。
  • 使用案例
javascript
const obj = { name: 'John' }
Object.freeze(obj)
obj.name = 'Jane' // 不会生效
// 结果: { name: 'John' }

4. Number 方法

4.1 toFixed()

重要性:★★★★★

  • 功能:使用定点表示法来格式化一个数值。
  • 使用案例
javascript
const num = 123.456
const fixed = num.toFixed(2)
// 结果: '123.46'

4.2 parseInt()

重要性:★★★★★

  • 功能:解析一个字符串参数,并返回一个指定基数的整数。
  • 使用案例
javascript
const str = '123'
const num = parseInt(str)
// 结果: 123

4.3 parseFloat()

重要性:★★★★★

  • 功能:解析一个字符串参数,并返回一个浮点数。
  • 使用案例
javascript
const str = '123.45'
const num = parseFloat(str)
// 结果: 123.45

4.4 isNaN()

重要性:★★★★☆

  • 功能:判断一个值是否是NaN。
  • 使用案例
javascript
const result = isNaN('abc')
// 结果: true

4.5 isFinite()

重要性:★★★☆☆

  • 功能:判断一个值是否是有限的数字。
  • 使用案例
javascript
const result = isFinite(123)
// 结果: true

5. Math 对象方法

5.1 Math.abs()

重要性:★★★★★

  • 功能:返回一个数的绝对值。
  • 使用案例
javascript
const num = -123
const abs = Math.abs(num)
// 结果: 123

5.2 Math.round()

重要性:★★★★★

  • 功能:返回一个数字四舍五入后最接近的整数。
  • 使用案例
javascript
const num = 123.45
const rounded = Math.round(num)
// 结果: 123

5.3 Math.floor()

重要性:★★★★☆

  • 功能:返回小于或等于一个给定数字的最大整数。
  • 使用案例
javascript
const num = 123.99
const floored = Math.floor(num)
// 结果: 123

5.4 Math.ceil()

重要性:★★★★☆

  • 功能:返回大于或等于一个给定数字的最小整数。
  • 使用案例
javascript
const num = 123.01
const ceiled = Math.ceil(num)
// 结果: 124

5.5 Math.random()

重要性:★★★★☆

  • 功能:返回一个0到1之间的随机数。
  • 使用案例
javascript
const random = Math.random()
// 结果: 0.123456789...

5.6 Math.max()

重要性:★★★★☆

  • 功能:返回一组数中的最大值。
  • 使用案例
javascript
const max = Math.max(1, 2, 3, 4, 5)
// 结果: 5

5.7 Math.min()

重要性:★★★★☆

  • 功能:返回一组数中的最小值。
  • 使用案例
javascript
const min = Math.min(1, 2, 3, 4, 5)
// 结果: 1

6. Date 方法

6.1 new Date()

重要性:★★★★★

  • 功能:创建一个新的Date对象。
  • 使用案例
javascript
const now = new Date()
// 结果: 当前日期和时间

6.2 getDate()

重要性:★★★★☆

  • 功能:返回一个月中的某一天。
  • 使用案例
javascript
const date = new Date()
const day = date.getDate()
// 结果: 当前日期

6.3 getMonth()

重要性:★★★★☆

  • 功能:返回月份(0-11)。
  • 使用案例
javascript
const date = new Date()
const month = date.getMonth()
// 结果: 当前月份(0-11)

6.4 getFullYear()

重要性:★★★★☆

  • 功能:返回年份。
  • 使用案例
javascript
const date = new Date()
const year = date.getFullYear()
// 结果: 当前年份

6.5 getTime()

重要性:★★★★☆

  • 功能:返回自1970年1月1日00:00:00 UTC以来的毫秒数。
  • 使用案例
javascript
const date = new Date()
const timestamp = date.getTime()
// 结果: 时间戳

7. Function 方法

7.1 apply()

重要性:★★★★☆

  • 功能:调用一个具有给定this值的函数,以及作为一个数组(或类数组对象)提供的参数。
  • 使用案例
javascript
function greet(name) {
  return `Hello, ${name}!`
}
const result = greet.apply(null, ['John'])
// 结果: 'Hello, John!'

7.2 call()

重要性:★★★★☆

  • 功能:调用一个具有给定this值的函数,以及作为单独的参数提供的参数。
  • 使用案例
javascript
function greet(name) {
  return `Hello, ${name}!`
}
const result = greet.call(null, 'John')
// 结果: 'Hello, John!'

7.3 bind()

重要性:★★★★☆

  • 功能:创建一个新的函数,在调用时设置this关键字为提供的值。
  • 使用案例
javascript
function greet() {
  return `Hello, ${this.name}!`
}
const person = { name: 'John' }
const boundGreet = greet.bind(person)
const result = boundGreet()
// 结果: 'Hello, John!'

8. 全局方法

8.1 console.log()

重要性:★★★★★

  • 功能:在控制台输出信息。
  • 使用案例
javascript
console.log('Hello World')
// 输出: Hello World

8.2 setTimeout()

重要性:★★★★★

  • 功能:在指定的毫秒数后执行一个函数。
  • 使用案例
javascript
setTimeout(() => {
  console.log('Hello after 1 second')
}, 1000)

8.3 setInterval()

重要性:★★★★☆

  • 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式。
  • 使用案例
javascript
let count = 0
const interval = setInterval(() => {
  console.log(count)
  count++
  if (count > 5) clearInterval(interval)
}, 1000)

8.4 clearTimeout()

重要性:★★★☆☆

  • 功能:取消由setTimeout()设置的定时器。
  • 使用案例
javascript
const timeoutId = setTimeout(() => {
  console.log('This will not run')
}, 1000)
clearTimeout(timeoutId)

8.5 clearInterval()

重要性:★★★☆☆

  • 功能:取消由setInterval()设置的定时器。
  • 使用案例
javascript
const intervalId = setInterval(() => {
  console.log('This will stop after 5 seconds')
}, 1000)
setTimeout(() => {
  clearInterval(intervalId)
}, 5000)

8.6 JSON.parse()

重要性:★★★★★

  • 功能:解析JSON字符串,构造由字符串描述的JavaScript值或对象。
  • 使用案例
javascript
const jsonStr = '{"name": "John", "age": 30}'
const obj = JSON.parse(jsonStr)
// 结果: { name: 'John', age: 30 }

8.7 JSON.stringify()

重要性:★★★★★

  • 功能:将JavaScript对象或值转换为JSON字符串。
  • 使用案例
javascript
const obj = { name: 'John', age: 30 }
const jsonStr = JSON.stringify(obj)
// 结果: '{"name":"John","age":30}'

9. 其他常用方法

9.1 Array.isArray()

重要性:★★★★☆

  • 功能:判断一个值是否是数组。
  • 使用案例
javascript
const arr = [1, 2, 3]
const isArray = Array.isArray(arr)
// 结果: true

9.2 typeof

重要性:★★★★★

  • 功能:返回一个字符串,表示未经计算的操作数的类型。
  • 使用案例
javascript
const type = typeof 'Hello'
// 结果: 'string'

9.3 instanceof

重要性:★★★★☆

  • 功能:测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
  • 使用案例
javascript
const arr = [1, 2, 3]
const isArray = arr instanceof Array
// 结果: true

9.4 in

重要性:★★★☆☆

  • 功能:检查对象是否包含某个属性。
  • 使用案例
javascript
const obj = { name: 'John' }
const hasName = 'name' in obj
// 结果: true

9.5 delete

重要性:★★★☆☆

  • 功能:删除对象的属性。
  • 使用案例
javascript
const obj = { name: 'John', age: 30 }
delete obj.age
// 结果: { name: 'John' }

基于 VitePress 的本地知识库