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

2023-11-21 00:36
文章标签 数据 函数 js 常用 构造函数 chapter13

本文主要是介绍【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

这篇关于【JS】Chapter13-构造函数数据常用函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/398571。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
关于数据埋点，你需要了解这些基本知识

关于数据埋点，你需要了解这些基本知识

产品汪每天都在和数据打交道，你知道数据来自哪里吗？ 移动app端内的用户行为数据大多来自埋点，了解一些埋点知识，能和数据分析师、技术侃大山，参与到前期的数据采集，更重要是让最终的埋点数据能为我所用，否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式，可以区分为： 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理：自动程度高的，能解决通用统计，便于统一化管理，但个性化定
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
异构存储（冷热数据分离）

异构存储（冷热数据分离）

异构存储主要解决不同的数据，存储在不同类型的硬盘中，达到最佳性能的问题。 异构存储Shell操作 （1）查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies （2）为指定路径（数据存储目录）设置指定的存储策略 hdfs storagepolicies -setStoragePo
阅读更多...
Hadoop集群数据均衡之磁盘间数据均衡

Hadoop集群数据均衡之磁盘间数据均衡

生产环境，由于硬盘空间不足，往往需要增加一块硬盘。刚加载的硬盘没有数据时，可以执行磁盘数据均衡命令。（Hadoop3.x新特性） plan后面带的节点的名字必须是已经存在的，并且是需要均衡的节点。 如果节点不存在，会报如下错误： 如果节点只有一个硬盘的话，不会创建均衡计划： （1）生成均衡计划 hdfs diskbalancer -plan hadoop102 （2）执行均衡计划 hd
阅读更多...
hdu1171（母函数或多重背包）

hdu1171（母函数或多重背包）

题意：把物品分成两份，使得价值最接近 可以用背包，或者是母函数来解，母函数（1 + x^v+x^2v+.....+x^num*v）（1 + x^v+x^2v+.....+x^num*v）（1 + x^v+x^2v+.....+x^num*v） 其中指数为价值，每一项的数目为（该物品数+1）个 代码如下： #include<iostream>#include<algorithm>
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2