JavaScript常用的内置构造函数

文章目录


内置构造函数

JavaScript底层会把简单数据类型包装为引用数据类型,所以简单数据类型也可以使用属性和方法方法。

js 复制代码
const str = 'lily' // 相当于const str = new String('lily')
console.log(str.length) // 4 
  • 引用类型:Object,Array,RegExp,Date等
  • 包装类型:String,Number,Boolean等

Object

Object是内置的构造函数,用于创建普通对象。

js 复制代码
const user = new Object({name: 'lily', age: 18})

推荐使用字面量方式声明对象,而不是Object构造函数。

常用静态方法------Object.keys

作用:Object.keys静态方法获取对象中所有属性名

语法:

js 复制代码
const obj = {name: 'lily', age: 19}
console.log(Object.keys(obj)) // ['name', 'age']

注意:返回的是一个数组。

常用静态方法------Object.values

作用:Object.values静态方法获取对象中所有属性值

语法:

js 复制代码
const obj = {name: 'lily', age: 19}
console.log(Object.keys(obj)) // ['lily', '19']

注意:返回的是一个数组。

常用静态方法------Object.assign

作用:Object.assign静态方法常用于对象拷贝

使用:经常使用的场景给对象添加属性

js 复制代码
const obj = {name: 'lily', age: 19}
Object.assign(obj, {gender: '女'})
console.log(o) // {name: 'lily', age: 19, gender: '女'}

Array

Array是内置的构造函数,用于创建数组。

js 复制代码
const arr = new Array(3, 5)
console.log(arr) // [3, 5]

创建数组建议使用字面量创建。

数组常见示例方法------核心方法

方法 作用 说明
forEach 遍历数组 不返回数组,经常用于查找遍历数组元素
filter 过滤数组 返回新数组,返回的是筛选满足条件的数组元素
map 迭代数组 返回新数组,返回的是处理之后的数组元素,想要使用返回的新数组
reduce 累计器 返回累计处理的结果,经常用于求和等
reduce方法

基本语法:

js 复制代码
arr.reduce(function(上一次值, 当前值){}, 初始值)
  • 参数:如果有起始值,则把初始值累加到里面

    js 复制代码
    // 没有初始值
    const arr = [1, 5, 8]
    const total1 = arr.reduce(function(p, q) {
        return p + q
    })
    console.log(total1) // 14
    // 有初始值
    const total2 = arr.reduce(function(p, q) {
        return p + q
    }, 10)
    console.log(total2) // 24

reduce执行过程:

  1. 如果没有起始值,则上一次值以数组的第一个数组元素的值
  2. 每一次循环,把返回值给作为下一次循环的上一次值
  3. 如果有起始值,则起始值作为上一次值
案例------计算薪资
js 复制代码
	const obj = [
      {
        name: 'lily',
        salary: 1000
      },
      {
        name: 'Tom',
        salary: 1200
      },
      {
        name: 'Jack',
        salary: 1300
      },
      {
        name: 'Amy',
        salary: 1060
      },
      {
        name: 'Lisa',
        salary: 1500
      }
    ]
    const total = obj.reduce((p, q) => p + q.salary, 0)
    console.log(total)

数组常见示例方法------其他方法

方法 说明
join 将数组元素拼接为字符串,返回字符串
find 查找元素,返回符合测试条件的第一个数组元素值,如果没有符合条件的返回undefined
every 检测数组所有元素都是否符合指定条件,如果所有元素都通过检测返回true,否则返回false
some 检测数组中是否有元素满足指定条件,有则返回true,否则返回false
concat 合并两个数组,返回生成新的数组
sort 对原数组单元值排序
splice 删除或替换原数组单元
reverse 反转数组
findIndex 查找元素的索引值
find方法
js 复制代码
    const obj = [
      {
        name: 'lily',
        salary: 1000
      },
      {
        name: 'Tom',
        salary: 1200
      },
      {
        name: 'Jack',
        salary: 1300
      },
      {
        name: 'Amy',
        salary: 1060
      },
      {
        name: 'Lisa',
        salary: 1500
      }
    ]
    console.log(obj.find((item) => item.name === 'Lisa')) // 用来查找对象
every方法
js 复制代码
const arr1 = [10, 20, 30]
console.log(arr1.every((item) => item >= 10)) // true
console.log(arr1.every((item) => item > 10)) // false
静态方法------Array.from()

作用:将伪数组转化为真数组

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <script>
    const li = document.querySelectorAll('li') // 获得一个伪数组
    const list = Array.from(li)
    list.pop() // 伪数组没有这个方法
    console.log(list)
  </script>
</body>

</html>

String

在JavaScript中的字符串、数字、布尔具有对象的使用特征,如具有属性和方法。

之所以具有对象特征的原因是字符串、数字、布尔类型数据是JavaScript底层使用Object构造函数"包装"来的,被称为包装类型。

常见实例方法

方法 作用
实例方法toUpperCase() 用于将字母转换成大写
实例方法toLowerCase() 用于将字母转换成小写
实例方法indexOf() 检测是否包含某字符
实例方法endsWith() 检测是否以某字符结尾
实例方法replace() 用于替换字符串,支持正则匹配
实例方法match() 用于查找字符串,支持正则匹配
split()方法

作用:用来将字符串拆分成数组。

语法:split('分隔符')

js 复制代码
const str = 'red,blue'
const arr = str.split(',')
console.log(arr) // ['red', 'blue']
const str1 = '2024-6-7'
const arr1 = str1.split('-')
console.log(arr1) // ['2024', '6', '7']
substring()方法

作用:用于字符串截取。

语法:substring(需要截取的第一个字符的索引, 结束的索引),如果省略结束的索引,默认取到最后,截取的索引号不包含想要截取的部分。

startsWith()方法

作用:判断是不是以某个字符开头。

js 复制代码
const str = 'let go'
console.log(str.startsWith('let')) // true
includes()方法

作用:判断一个字符串是否包含在另一个字符串当中。

js 复制代码
const str = 'To be, or not to be, that is the question.'
console.log(str.includes('To be')) // true
console.log(str.includes('To bE')) // false 严格区分大小写
console.log(str.includes('To be', 1)) // false 从第二个字符起开始寻找,不存在该字符串

Number

Number是内置的构造函数,用于创建数值。

常用方法------toFixed()

作用:设置保留小数位的长度。

js 复制代码
const num = 10.825
console.log(num.toFixed(2)) // 10.83 四舍五入
console.log(num.toFixed(4)) // 10.8250 补零
相关推荐
JUNAI_Strive_ving11 分钟前
番茄小说逆向爬取
javascript·python
落落落sss15 分钟前
MybatisPlus
android·java·开发语言·spring·tomcat·rabbitmq·mybatis
看到请催我学习20 分钟前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
简单.is.good33 分钟前
【测试】接口测试与接口自动化
开发语言·python
twins352040 分钟前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
Yvemil71 小时前
MQ 架构设计原理与消息中间件详解(二)
开发语言·后端·ruby
程序员是干活的1 小时前
私家车开车回家过节会发生什么事情
java·开发语言·软件构建·1024程序员节
qiyi.sky1 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~1 小时前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒1 小时前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od