【JS】Chapter13-构造函数数据常用函数

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

(十三)构造函数&数据常用函数

1. 深入对象

1.1 创建对象三种方式

  1. 利用对象字面量创建对象
    const o = {name: '佩奇'
    }
    
  2. 利用 new Object 创建对象
    const o = new Object({ name: '佩奇' })
    console.log(o)  // {name: '佩奇'}
    
  3. 利用构造函数创建对象

1.2 构造函数

  • 构造函数:是一种特殊的函数,主要用来初始化对象
  • 使用场景:常规的 {…} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过构造函数来快速创建多个类似的对象。
  • 例子:
    function Pig(name, age, gender) {this.name = namethis.age = agethis.gener = gender 
    }
    // 创建佩奇对象
    const Peppa = new Pig('佩奇', 6, '女')
    // 创建乔治对象
    const George = new Pig('乔治', 3, '男')
    console.log(Peppa)  // {name: '乔治', age: 6, gener: '女'}
    
  • 构造函数在技术上是常规函数。
  • 不过有两个约定:
    1. 它们的命名以大写字母开头。
    2. 它们只能由 “new” 操作符来执行。
  • 构造函数语法:大写字母开头的函数
  • 说明:
    1. 使用 new 关键字调用函数的行为被称为实例化
    2. 实例化构造函数时没有参数时可以省略 ()
    3. 构造函数内部无需写return,返回值即为新创建的对象
    4. 构造函数内部的 return 返回的值无效,所以不要写return
    5. new Object()、new Date() 也是实例化构造函数
  • 实例化执行过程说明:
    1. 创建新对象
    2. 构造函数this指向新对象
    3. 执行构造函数代码,修改this,添加新的属性
    4. 返回新对象

1.3 实例成员&静态成员

  • 实例成员:通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。
  • 实例成员说明:
    1. 实例对象的属性和方法即为实例成员
    2. 为构造函数传入参数,动态创建结构相同但值不同的对象
    3. 构造函数创建的实例对象彼此独立互不影响。
  • 静态成员:构造函数的属性和方法被称为静态成员
  • 静态成员说明:
    1. 构造函数的属性和方法被称为静态成员
    2. 一般公共特征的属性或方法设置为静态成员
    3. 静态成员方法中的 this 指向构造函数本身

2. 内置构造函数

  • 在 JavaScript 中最主要的数据类型有 6 种:
    • 基本数据类型:字符串、数值、布尔、undefined、null
    • 引用类型: 对象
  • 但是,我们会发现有些特殊情况:
    // 普通字符串
    const str = 'andy'
    console.log(str.length) // 4
    
    • 其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为包装类型。
    • JS中几乎所有的数据都可以基于构成函数创建。
  • 引用类型
    • Object,Array,RegExp,Date 等
  • 包装类型
    • String,Number,Boolean 等

2.1 Object

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

  • 例子:

    // 通过构造函数创建普通对象
    const user = new Object({name: '小明', age: 15})
    
  • 推荐使用字面量方式声明对象,而不是 Object 构造函数

  • 有三个常用静态方法(静态方法就是只有构造函数Object可以调用的):

    // 想要获取对象里面的属性和值的做法:
    const o = { name: '佩奇', age: 6 }// 传统做法:
    for(let k in o) {console.log(k)      // 属性 name ageconsole.log(o[k])   // 值 佩奇 6
    }
    
  1. Object.keys 静态方法获取对象中所有属性(键)

    const o = { name: '佩奇', age: 6 }// 获取对象的所有键,并且返回是一个数组
    const arr = Object.keys(0)
    console.log(arr)    // ['name', 'age']
    
    • 注意:返回的是一个数组
  2. Object.values 静态方法获取对象中所有属性值

    const o = { name: '佩奇', age: 6 }// 获取对象的所有值,并且返回是一个数组
    const arr = Object.values(0)
    console.log(arr)    // ['佩奇', 6]
    
    • 注意:返回的是一个数组
  3. Object. assign 静态方法常用于对象拷贝

    // 拷贝对象,把 o 拷贝给 obj
    const o = { name: '佩奇', age: 6 }
    const obj = {}
    Object.assign(obj, o)
    console.log(obj)    // { name: '佩奇', age: 6 }const o = { name: '佩奇', age: 6 }
    Object.assign(o, { gender: '女' })
    console.log(o)    // { name: '佩奇', age: 6, gender: '女' }
    
    • 经常使用的场景给对象添加属性。

2.2 Array

  • Array 是内置的构造函数,用于创建数组
    const arr = new Array(3. 5)
    console.log(arr)    // [3, 5]
    
  • 创建数组建议使用字面量创建,不用 Array 构造函数创建
2.2.1 数组常见实例方法-核心方法
方法作用说明
forEach遍历数组不返回,用于不改变值,经常用于查找打印输出值
filter过滤数组筛选数组元素,并生成新数组
map迭代数组返回新数组,新数组里面的元素是处理之后的值,经常用于处理数据
reduce累计器返回函数累计处理的结果,经常用于求和等
  1. reduce 返回函数累计处理的结果,经常用于求和等
  • 基本语法:
    arr.reduce(function(){}, 起始值)
    
  • 参数:起始值可以省略,如果写就作为第一次累计的起始值
  • 语法:
    arr.reduce(function(累计值, 当前元素 [,索引号][,源数组]){}, 起始值)
    
  • 累计值参数:
    1. 如果有起始值,则以起始值为准开始累计, 累计值 = 起始值
    2. 如果没有起始值, 则累计值以数组的第一个数组元素作为起始值开始累计
    3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 (类似求和里面的 sum )
  • 使用场景:求和运算:
    const arr = [1, 5, 9]
    const count = arr.reduce((prev, item) => prev + item)
    console.log(count)
    
2.2.2 数组常见方法-其他方法
  • 实例方法 join 数组元素拼接为字符串,返回字符串(重点)
  • 实例方法 find 查找元素,返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点)
  • 实例方法 every 检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回 true,否则返回 false(重点)
  • 实例方法 some 检测数组中的元素是否满足指定条件,如果数组中有元素满足条件返回 true,否则返回 false
  • 实例方法 concat 合并两个数组,返回生成新数组
  • 实例方法 sort 对原数组单元值排序
  • 实例方法 splice 删除或替换原数组单元
  • 实例方法 reverse 反转数组
  • 实例方法 findIndex 查找元素的索引值
2.2.3 数组常见方法-伪数组转换为真数组
  • 静态方法 Array.from()

2.3 String

  • 在 JavaScript 中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法
  • 例子:
    // 字符串类型
    const str = 'hello world!'
    // 统计字符的长度(字符数量)
    console.log(str.length)// 数值类型
    const price = 12.345
    // 保留两位小数
    price.toFixed(2) // 12.34
    
  • 之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型。
2.3.1 常见实例方法
  1. 实例属性 length 用来获取字符串的长度(重点)
  2. 实例方法 split('分隔符') 用来将字符串拆分成数组(重点)
  3. 实例方法 substring(需要截取的第一个字符的索引[,结束的索引号]) 用于字符串截取(重点)
  4. 实例方法 startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)
  5. 实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false(重点)
  6. 实例方法 toUpperCase 用于将字母转换成大写
  7. 实例方法 toLowerCase 用于将字母转换成小写
  8. 实例方法 indexOf 检测是否包含某字符
  9. 实例方法 endsWith 检测是否以某字符结尾
  10. 实例方法 replace 用于替换字符串,支持正则匹配
  11. 实例方法 match 用于查找字符串,支持正则匹配

2.4 Number

  • Number 是内置的构造函数,用于创建数值
  • 常用方法:
    • toFixed() 设置保留小数位的长度
  • 例子:
    // 数值类型
    const price = 12.345
    // 保留两位小数,四舍五入
    console.log(price.toFixed(2)) // 12.34
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/151494.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android跨进程通信,IPC,RPC,Binder系统,C语言应用层调用

文章目录 Android跨进程通信,IPC,RPC,Binder系统,C语言应用层调用()1.概念2.流程3.bctest.c3.1 注册服务,打开binder驱动3.2 获取服务 4.binder_call Android跨进程通信,IPC&#xf…

Linux 下集成开发环境 – PyCharm介绍

介绍 在这篇指南中,我将向你介绍一个集成开发环境 - PyCharm, 你可以在它上面使用 Python 编程语言开发专业应用。 Python 是一门优秀的编程语言,因为它真正实现了跨平台,用它开发的应用程序在 Windows、Linux 以及 Mac 系统上均…

Redis-核心数据结构

五种数据结构 String结构 String结构应用场景 Hash结构 Hash结构应用场景 List结构 List结构应用场景 Set结构 Set结构应用场景 ZSet有序结构 ZSet有序结构应用场景

智能井盖传感器功能有哪些?

智能井盖传感器是一种集成了多种先进技术的传感器设备,旨在强化城市的公共安全,确保城市基础设施的稳定运作。这种传感器具有多种功能,例如实时监测井盖状态、监测井下气体等是否超出阈值。借助智能井盖传感器,政府和城市管理部门…

sapjco3.dll has version “721.619“, but required is at least version “721.913“

context with path [] threw exception [org.glassfish.jersey.server.ContainerException: java.lang.ExceptionInInitializerError: Native library sapjco3 is too old. Found library C:\Windows\System32\sapjco3.dll has version “721.619”, but required is at least …

ThinkPHP 系列漏洞

目录 2、thinkphp5 sql注入2 3、thinkphp5 sql注入3 4、 thinkphp5 SQL注入4 5、 thinkphp5 sql注入5 6、 thinkphp5 sql注入6 7、thinkphp5 文件包含漏洞 8、ThinkPHP5 RCE 1 9、ThinkPHP5 RCE 2 10、ThinkPHP5 rce3 11、ThinkPHP 5.0.X 反序列化漏洞 12、ThinkPHP…

Python---函数的嵌套(一个函数里面又调用了另外一个函数)

函数嵌套调用------就是一个函数里面又调用了另外一个函数。 基本语法: # 定义 函数B def funcB():print(这是funcB函数的函数体部分...)# 定义 函数A def funcA():print(- * 80) # 这一行为了更好区分print(这是funcA函数的函数体部分...)# 假设我们在调用funcA…

论文速览 Arxiv 2023 | DMV3D: 单阶段3D生成方法

注1:本文系“最新论文速览”系列之一,致力于简洁清晰地介绍、解读最新的顶会/顶刊论文 论文速览 Arxiv 2023 | DMV3D: DENOISING MULTI-VIEW DIFFUSION USING 3D LARGE RECONSTRUCTION MODEL 使用3D大重建模型来去噪多视图扩散 论文原文:https://arxiv.org/pdf/2311.09217.pdf…

一文了解ChatGPT Plus如何完成论文写作和AI绘图

2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车,就有可能被淘汰在这个数字化时代,如何能高效地处理文本、文献查阅、PPT…

AIGC ChatGPT 4 将数据接口文件使用Python进行入库Mysql

数据分析,数据处理的过程,往往将采集到的数据,或者从生产库过来的接口文件,我们都需要进行入库操作。 如下图数据: 将这样的数据接口文件,进行入库,插入到Mysql数据库中。 用Python代码来完成。 ChatGPT4来完成代码输入。 ChatGPT4完整内容如下: 这个任务可以使用`…

Motion Plan之搜素算法笔记

背景: 16-18年做过一阵子无人驾驶,那时候痴迷于移动规划;然而当时可学习的资料非常少,网上的论文也不算太多。基本就是Darpa的几十篇无人越野几次比赛的文章,基本没有成系统的文章和代码讲解实现。所以对移动规划的认…

聊一聊小程序单聊页面构思

主题界面构建 主题界面构建可以有很多种做法,一种为左右平分式UI设计,简单来说就是对方和我方聊天DOM各占屏幕的一半,完全可以使用flex的布局以及vw构建,一种吧聊天内容作为整体聊天界面的子节点,聊天container内容的高…

逻辑漏洞(越权)

逻辑漏洞(越权) 0x01 何为逻辑漏洞 逻辑漏洞是指,在编写程序的时,一个流程处理处理逻辑,不够谨慎或逻辑不完整,从而造成验证失效、敏感信息暴露等问题,这类问题很难利用工具去发现&#xff0c…

多态语法详解

多态语法详解 一:概念1:多态实现条件 二:重写:三:向上转型和向下转型1:向上转型:1:直接赋值:2:方法传参3:返回值 2:向下转型 一:概念 1:同一个引…

Linux从 全栈开发 centOS 7 到 运维

Linux从 全栈开发centOS 7 到 运维 一 Linux 入门概述1.1 操作系统1.2 Linux 简介1.3 Linux 系统组成1.4 Linux 发行版1.4 Linux 应用领域1.5 Linux vs Windows 二 环境搭建【狂神说Java】服务器购买及宝塔部署环境说明为什么程序员都需要一个自己的服务器服务器如何购买买完服…

高防CDN有什么作用?

分布式拒绝服务攻击(DDoS攻击)是一种针对目标系统的恶意网络攻击行为,DDoS攻击经常会导致被攻击者的业务无法正常访问,也就是所谓的拒绝服务。 常见的DDoS攻击包括以下几类: 网络层攻击:比较典型的攻击类…

快速入门:构建您的第一个 .NET Aspire 应用程序

##前言 云原生应用程序通常需要连接到各种服务,例如数据库、存储和缓存解决方案、消息传递提供商或其他 Web 服务。.NET Aspire 旨在简化这些类型服务之间的连接和配置。在本快速入门中,您将了解如何创建 .NET Aspire Starter 应用程序模板解决方案。 …

JavaEE初阶 01 计算机是如何工作的

前言 今天开始进行对JavaEE的一些基本总结,希望大家能在阅读中有所收获,如有错误还望多多指正. 1.冯诺依曼体系结构 这个体系结构相信学计算机的同学都不陌生,但是你真的知道这个体系结构说的是什么嘛?请听我娓娓道来.首先我先给出一张冯诺依曼体系结构的简图 你可以理解为当前…

杭电oj 2034 人见人爱A-B C语言

此处的c和a指向同一块内存空间&#xff0c;改变c就是改变a&#xff0c;反之亦然&#xff0c;此处是为了方便看这么写的&#xff0c;如果不想c和a指向同一空间请分别开辟空间&#xff08;即不如此写camalloc&#xff09; #include<stdio.h> #include<stdlib.h>int …