」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 中的物件和數組

JavaScript 中的物件和數組

發佈於2024-11-02
瀏覽:655

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() 等。具體選擇哪種方法要根據具體情況而定。

//向數組和物件新增/刪除值 person.name = "山姆"; //將鍵「name」加到值為「sam」的person person["sign"] = "pisces" //將 iykyk 金鑰加入 a array.push(tomato) //將tomato加到陣列末尾 array.unshift(cherries) //在開頭加上-1 array.splice(1, 2, 'hello world') //從索引 1 開始,刪除 2 個索引並在索引 1 處插入 hello world。 // 5 array.pop() //刪除最後一個索引 array.shift() //刪除陣列中的第一個索引 刪除animal.sign //刪除動物的關鍵標誌 array.slice(1) //從陣列的副本中刪除第一個元素


//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]刪除
最新教學 更多>
  • 為什麼PYTZ最初顯示出意外的時區偏移?
    為什麼PYTZ最初顯示出意外的時區偏移?
    與pytz 最初從pytz獲得特定的偏移。例如,亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移: 差異源利用本地化將時區分配給日期,使用了適當的時區名稱和偏移量。但是,直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone(&#...
    程式設計 發佈於2025-06-10
  • 如何使用Regex在PHP中有效地提取括號內的文本
    如何使用Regex在PHP中有效地提取括號內的文本
    php:在括號內提取文本在處理括號內的文本時,找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數,如下所示: 作為替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式來搜索特...
    程式設計 發佈於2025-06-10
  • `console.log`顯示修改後對象值異常的原因
    `console.log`顯示修改後對象值異常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    程式設計 發佈於2025-06-10
  • 如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...
    程式設計 發佈於2025-06-10
  • 在GO中構造SQL查詢時,如何安全地加入文本和值?
    在GO中構造SQL查詢時,如何安全地加入文本和值?
    在go中構造文本sql查詢時,在go sql queries 中,在使用conting and contement和contement consem per時,尤其是在使用integer per當per當per時,per per per當per. [&​​​​&&&&&&&&&&&&&&&默元組方...
    程式設計 發佈於2025-06-10
  • 同實例無需轉儲複製MySQL數據庫方法
    同實例無需轉儲複製MySQL數據庫方法
    在同一實例上複製一個MySQL數據庫而無需轉儲在同一mySQL實例上複製數據庫,而無需創建InterMediate sqql script。以下方法為傳統的轉儲和IMPORT過程提供了更簡單的替代方法。 直接管道數據 MySQL手動概述了一種允許將mysqldump直接輸出到MySQL cli...
    程式設計 發佈於2025-06-10
  • JavaScript計算兩個日期之間天數的方法
    JavaScript計算兩個日期之間天數的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    程式設計 發佈於2025-06-10
  • 如何將PANDAS DataFrame列轉換為DateTime格式並按日期過濾?
    如何將PANDAS DataFrame列轉換為DateTime格式並按日期過濾?
    Transform Pandas DataFrame Column to DateTime FormatScenario:Data within a Pandas DataFrame often exists in various formats, including strings.使用時間數據時...
    程式設計 發佈於2025-06-10
  • Java為何無法創建泛型數組?
    Java為何無法創建泛型數組?
    通用陣列創建錯誤 arrayList [2]; JAVA報告了“通用數組創建”錯誤。為什麼不允許這樣做? 答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<my...
    程式設計 發佈於2025-06-10
  • 如何使用PHP從XML文件中有效地檢索屬性值?
    如何使用PHP從XML文件中有效地檢索屬性值?
    從php PHP陷入困境。 使用simplexmlelement :: attributes()函數提供了簡單的解決方案。此函數可訪問對XML元素作為關聯數組的屬性: - > attributes()為$ attributeName => $ attributeValue){ echo...
    程式設計 發佈於2025-06-10
  • 解決MySQL插入Emoji時出現的\\"字符串值錯誤\\"異常
    解決MySQL插入Emoji時出現的\\"字符串值錯誤\\"異常
    Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...
    程式設計 發佈於2025-06-10
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-06-10
  • 查找當前執行JavaScript的腳本元素方法
    查找當前執行JavaScript的腳本元素方法
    如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中,開發人員可能需要將其他腳本動態加載其他腳本。但是,如果Head Element尚未完全渲染,則使用document.getElementsbytagname('head')[0] .appendChild(v)的常規方...
    程式設計 發佈於2025-06-10
  • Java中如何使用觀察者模式實現自定義事件?
    Java中如何使用觀察者模式實現自定義事件?
    在Java 中創建自定義事件的自定義事件在許多編程場景中都是無關緊要的,使組件能夠基於特定的觸發器相互通信。本文旨在解決以下內容:問題語句我們如何在Java中實現自定義事件以促進基於特定事件的對象之間的交互,定義了管理訂閱者的類界面。 以下代碼片段演示瞭如何使用觀察者模式創建自定義事件: args...
    程式設計 發佈於2025-06-10
  • 在PHP中如何高效檢測空數組?
    在PHP中如何高效檢測空數組?
    在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在,則PHP的鬆散鍵入允許對數組本身進行直接評估:一種更嚴格的方法涉及使用count()函數: if(count(count($ playerList)=== 0){ //列表為空。 } 對...
    程式設計 發佈於2025-06-10

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3