”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 中的对象和数组

JavaScript 中的对象和数组

发布于2024-11-02
浏览:534

Objects & Arrays in Javascript

数组和对象是复杂的数据类型,与原始数据类型不同,它们能够同时保存多个值。

您可能会问自己为什么需要两种复杂的数据类型来完成这项任务,并质疑为什么只有一种数据类型不足以完成这项工作。根据您的条件和目标,您可能最好选择使用“对象”来保存“数组”上的多个值,其背后的原因归结为一个原因:可读性。在某些情况下,您最好选择对象而不是数组,反之亦然。

对象更适合,你猜对了,对象!它们能够为其众多值提供名称,并且通常用于描述单个项目附带的属性。数组更适合列表,它们描述其值的能力受到限制,尽管数组在技术上是对象,但由于它们的语法和多个值的方式的独特性,它们赢得了数组的独特名称被存储或访问。您很快就会像我一样理解这些复杂的数据类型,其中对象可以被视为 3 维,数组可以被视为 2 维。

-3D 对象和 2D 数组


//AN OBJECT
let person = {
voice: "soft",
age: "32"
};

//AN ARRAY
let groceryList = ['bananas', 'coconuts', 'grapes']


  -Above we have an example of an object doing what it does best, describing a 3 dimensional object in reality. Here we have the initialization of the variable 'animal' using the 'let' keyword to point to an object; which contains it's information within curly braces '{}'. Within the object are 'key: value' pairs. Keys are to the left of ':', and their values are to the right, with each pair separated by ','. As you can see with an object, we can give each value it holds a unique name to help describe and identify the value it points to. The age of the person is 32, and their voice is soft. You may notice that this format is easily readable and comes natural to understand, even someone who has no clue what coding is will likely be able to glance at those lines of code, and get a general understanding of what is going on. 

在此之下,我们有一系列美丽的购物清单中最典型的物品,并且可以找到相同的自然可读性。请注意,该数组由括号“[]”表示。

对象和数组访问:


console.log(dog.name) //returns "Fifo"
console.log(groceryList[0] //returns bananas


Objects & Arrays in Javascript

As mentioned earlier, objects are 3-dimensional, and arrays are 2-dimensional. The first way this becomes noticeable is when you try to access the values of an array or object. In a 2-dimensional plane, the surroundings are described with coordinates; a series of numbers that equate to the description of a particular location. This is how arrays behave, their coordinates are called indexes, and their particular location is a value. Like coordinates, indexes will always be numbers, and arrays cannot access their values in any other way unless you pass in a number next to it surrounded by brackets '[#]'. Even the brackets themselves move like a 2 dimensional object; up, down, left, right, there are no curves to help one describe the complexities of a 3-dimensional plane, then comes Objects. Objects access their values with their 'key'. Earlier, the "key: value" pair was '"voice: "soft"', thus we can reference the dogs name by typing "person.voice". Just like 3-dimensional objects in  our non-virtual reality, the properties of these objects are described with words, given names so-to-speak. The phenomenological conclusion we draw for what these properties are in relation to the object we experience, equates to the value we give to that word. 

哲学和理解对象:我们可以将质地描述为柔软,将气味描述为难闻,将情感描述为痛苦,但所有概念最终都依赖于两个词来描述。当描述现实中的物体时,仅“软”这个词可能会被误解并且难以理解。如果只是说“‘人’就是‘软’”,每个人的观念可能会得出不同的结论;一个人可能认为你说“软人”是善良和有爱心的,另一个人可能会说“软人”是软弱和软弱的。然而,如果我们说“一个‘人’有一个‘软’的‘质地’”,或者“一个‘人’有一个‘软’的‘声音’,那么我们最终会得出一个不太分歧的结论:这就是为什么“一个‘对象’有一个‘键’,它是一个‘值’”可以理解为 3 维的。

Objects & Arrays in Javascript
对象和数组操作

对象和数组可以通过不同的方式进行操作。数组是通过索引号访问的,而对于对象,它们的值是使用称为“键”的东西来访问的。由于每个键都有命名,因此在对象中导航比在数组中导航更困难。这就是为什么数组更适合编号列表,而对象更适合描述单个项目的属性。
您可以使用对象的键来访问对象中的内容,而数组必须使用其索引。我们使用括号和点表示法向对象添加内容,对于数组,我们可以使用括号表示法以及所谓的“方法”。
用于删除和添加到数组的方法有 .pop()、.push()、.shift()、.unshift()、.splice() 等。具体选择哪种方法要根据具体情况而定。


//adding / removing values to arrays and objects

person.name = "Sam"; //adds key 'name' to person with value of "sam"
person["sign"] = "pisces" //adds key iykyk to a
array.push(tomato) //adds tomato to the end of array
array.unshift(cherries) //adds -1 to beginning
array.splice(1, 2, 'hello world') //starts at index 1, removes 2 indexes and inserts hello world at index 1.

// 5

array.pop() //removes last index
array.shift() //removes first index in array
delete animal.sign //removes key sign from animal
array.slice(1) //removes first element from a COPY of the array


版本声明 本文转载于:https://dev.to/bkhebert/objects-arrays-in-javascript-920?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    在 PHP 中组合关联数组在 PHP 中,将两个关联数组组合成一个数组是一项常见任务。考虑以下请求:问题描述:提供的代码定义了两个关联数组,$array1和$array2。目标是创建一个新数组 $array3,它合并两个数组中的所有键值对。 此外,提供的数组具有唯一的 ID,而名称可能重合。要求是构...
    编程 发布于2024-11-14
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-14
  • Java 字符串虽然是对象,但如何用双引号初始化?
    Java 字符串虽然是对象,但如何用双引号初始化?
    Java中用“ ”初始化String:一种特殊情况Java的String类,尽管是面向对象的实体,但可以被初始化使用双引号。这种特性引发了一个问题:在面向对象编程的范围内,这怎么可能?Java 的独特方法与 Java 中的一切都必须的概念相反作为一个对象,出于性能原因,该语言的设计者选择保留原始数据...
    编程 发布于2024-11-14
  • 为什么我的“不在”检查元组在 Python 中不起作用?
    为什么我的“不在”检查元组在 Python 中不起作用?
    验证 Python 列表中元素的存在在 Python 中使用列表时,通常需要检查特定元素是否存在。对于依赖于列表中不存在元素的条件分支,通常使用以下语法:if element not in list: # Code to execute if element is not in the li...
    编程 发布于2024-11-14
  • AtomicInteger 如何提高多线程环境中的并发性?
    AtomicInteger 如何提高多线程环境中的并发性?
    并发编程中的 AtomicIntegerAtomicInteger 是一个 Java 类,支持并发访问底层整数值。了解 AtomicInteger 的实际应用对于优化多线程环境中的并发性至关重要。典型用例AtomicInteger 有两个主要用途: 原子计数器:它可以用作共享计数器,可以递增或由多个...
    编程 发布于2024-11-14
  • 如何跟踪 Java 的 For-Each 循环中的迭代计数?
    如何跟踪 Java 的 For-Each 循环中的迭代计数?
    在 Java 的 For-Each 循环中访问迭代索引在 Java 的 for-each 循环中,访问当前迭代计数可以证明是有点挑战性。与传统的 for 循环(例如 for (int i = 0; i < array.length; i ))不同,for-each 循环(例如 for (String...
    编程 发布于2024-11-14
  • 如何在 Golang Web 服务器中流式传输 MP4 视频?
    如何在 Golang Web 服务器中流式传输 MP4 视频?
    GoLang Web 服务器流视频问:Golang Web 服务器配置为服务 HTML、CSS、JavaScript 和图像失败尝试流式传输 MP4 视频。该问题是由于处理大型视频文件而引起的。 Chrome 要求服务器支持超过一定大小的视频的 Range 请求,但提供的代码没有解决这个问题。通过实...
    编程 发布于2024-11-14
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-11-14
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-11-14
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-11-14
  • CSS 中的“display: table-column”实际上做了什么?
    CSS 中的“display: table-column”实际上做了什么?
    CSS“display: table-column”应该如何工作?在 HTML 中,表格由行组成,每行含有细胞。 CSS 扩展了这个概念,允许设计者定义特定的行和列布局。虽然“display: table-row”和“display: table-cell”很简单,但“display: table-...
    编程 发布于2024-11-14
  • Babel 6 如何以不同的方式处理默认导出?
    Babel 6 如何以不同的方式处理默认导出?
    重大变更:Babel 6 导出默认行为随着 Babel 6 的发布,默认导出的处理方式发生了重大变化。虽然 Babel 之前添加了 module.exports = Exports["default"] 行,但此功能已被删除。此修改需要更改模块导入语法。以前,使用旧语法的代码:v...
    编程 发布于2024-11-14
  • 掌握 Next.js 中的 SSR:如何提升 SEO 和用户体验
    掌握 Next.js 中的 SSR:如何提升 SEO 和用户体验
    SSR(服务器端渲染)是 Next.js 中生成页面的另一种方法。在本文中,我想解释什么是 SSR、它是如何工作的,以及如何在 Next.js 项目的 Page Router 和 App Router 中实现它。 什么是SSR? SSR是一种在用户发出请求后生成静态页面(或预渲染页面...
    编程 发布于2024-11-14
  • 为什么 PHP 5.2 不允许抽象静态类方法?
    为什么 PHP 5.2 不允许抽象静态类方法?
    PHP 5.2 严格模式:为什么不允许抽象静态类方法?在 PHP 5.2 中,启用严格警告可能会触发熟悉的警告:“静态函数不应该是抽象的”。此警告源于 PHP 5.2 中引入的一项更改,该更改不允许抽象静态类方法。原因:历史监督PHP 5.2 最初缺乏后期静态绑定,使抽象静态函数变得无用。由于抽象静...
    编程 发布于2024-11-14
  • 如何为 10 个连续点的每段绘制不同颜色的线?
    如何为 10 个连续点的每段绘制不同颜色的线?
    用不同的颜色绘制一条线问题陈述给定两个列表,latt和lont,目标是绘制一条线,其中每个列表10 个连续点的线段以不同的方式表示color.解决方案线段数量有限如果线段数量较少,例如10个或更少,一个简单的方法就是使用循环以唯一的颜色绘制每个段。import numpy as np import ...
    编程 发布于2024-11-14

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3