筆記：js對象遍歷

不知名網友發布于2019-08-21 12:35 / 417人閱讀

摘要：中的對象概念非常不同，要把它當作其它語言的關聯數組如或者如來理解的話，還是有很大的不一樣由于原型鏈和屬性描述符主要是的存在。一個對象字面量有作為原型，它有繼承自原型鏈的不可枚舉的方法。下面將以對象字面量為例。

JavaScript中的對象概念非常不同，要把它當作其它語言的關聯數組（如PHP）或者Map（如Java）來理解的話，還是有很大的不一樣——由于原型鏈和屬性描述符（主要是[[Enumerable]]）的存在。

一個對象字面量{}有Object作為原型，它有繼承自原型鏈的不可枚舉的toString方法。下面將以對象字面量為例。

下標操作符、點操作符可以訪問到自身屬性或繼承自原型鏈的任何屬性，除非出現了屬性覆蓋
var a ={}; a.toString返回toString方法
var a ={toString:"a"}; a.toString返回字符串"a"

for in循環將枚舉的自身屬性和繼承自原型鏈的所有[[Enumerable]]的屬性

"key" in obj的判斷中，判斷自身屬性或繼承自原型鏈的屬性的存在性
"toString" in {}返回true

obj.hasOwnProperty()的判斷中，只判斷自身屬性的存在性
({}).hasOwnProperty("toString")返回false
({toString:"a"}).hasOwnProperty("toString")返回true

Object.keys()可返回自身[[Enumerable]]的屬性組成的數組，不包括原型鏈上繼承的屬性
Object.keys({a:1})返回["a"]，不包含原型鏈上的toString等內容

Object.getOwnPropertyNames()可以返回自身任何屬性組成的數組，不包括原型鏈上繼承的屬性

類目	語句	自身屬性		原型鏈上繼承的屬性
類目	語句	可枚舉屬性	不可枚舉屬性	可枚舉屬性	不可枚舉屬性
訪問	obj.prop	√	√	√	√
訪問	obj["prop"]	√	√	√	√
循環	for key in obj	√		√
判斷	key in obj	TRUE	TRUE	TRUE	TRUE
判斷	obj.hasOwnProperty(key)	TRUE	TRUE	FALSE	FALSE
列舉	Object.keys(obj)	√
列舉	Object.getOwnPropertyNames(obj)	√	√

可以通過以下方式避免遍歷過程中的原型鏈干擾：

在get/set方法中為每一個鍵加上前綴

Object.create(null)來創建一個沒有原型的對象

這些都可以在StringMap的解決方案里找到：
(雖然很不喜歡粘代碼，但是google code都快關了)

// Copyright (C) 2011 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Implements StringMap - a map api for strings.
 *
 * @author Mark S. Miller
 * @author Jasvir Nagra
 * @requires ses
 * @overrides StringMap
 */

var StringMap;

(function() {
   "use strict";

   var create = Object.create;
   var freeze = Object.freeze;
   function constFunc(func) {
     func.prototype = null;
     return freeze(func);
   }

   function assertString(x) {
     if ("string" !== typeof(x)) {
       throw new TypeError("Not a string: " + x);
     }
     return x;
   }

   var createNull;

   if (typeof ses === "undefined" ||
       !ses.ok() ||
       ses.es5ProblemReports.FREEZING_BREAKS_PROTOTYPES.beforeFailure) {

     // Object.create(null) may be broken; fall back to ES3-style implementation
     // (safe because we suffix keys anyway).
     createNull = function() { return {}; };
   } else {
     createNull = function() { return Object.create(null); };
   }

   StringMap = function StringMap() {

     var objAsMap = createNull();

     return freeze({
       get: constFunc(function(key) {
         return objAsMap[assertString(key) + "$"];
       }),
       set: constFunc(function(key, value) {
         objAsMap[assertString(key) + "$"] = value;
       }),
       has: constFunc(function(key) {
         return (assertString(key) + "$") in objAsMap;
       }),
       "delete": constFunc(function(key) {
         return delete objAsMap[assertString(key) + "$"];
       })
     });
   };

 })();

GPU云服務器云服務器 js遍歷對象內容 js遍歷對象的數據 js遍歷對象條數據遍歷java對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87666.html

JS筆記二：JS歷史、數據類型、for in遍歷對象、typeof的BUG

摘要：學習筆記二個人學習筆記參考阮一峰的教學學習筆記二是對學習筆記一的補充歷史是標準新增特性匯總方應航知乎專欄個小變化新增特性匯總方應航知乎專欄以后一年一次只增加了兩個特性只增加了個特性功能最多數據類型補充字符串多行字符串新特性多行字符串 JavaScript學習筆記二個人學習筆記參考阮一峰的JavaScript教學學習筆記二是對學習筆記一的補充 JavaScript歷史 sho...

mrcode 2019-08-26 11:51 評論0 收藏0
筆記-你不知道的JS-對象

摘要：內置對象，在中，它們實際上只是一些內置函數。這些內置函數可以當作構造函數，使用調用，產生新對象。在必要時語言會自動把字符串字面量轉換成一個對象，也就是說你并不需要顯式創建一個對象。屬性操作符要求屬性名滿足標識符的命名規范。 1 如何定義 // 聲明形式，大部分情況下使用聲明形式 let obj ={ a:2, b:3 }; // 構造形式 let obj= = new Obje...

senntyou 2019-08-23 17:56 評論0 收藏0
JavaScript 語言核心筆記（持續更新）

摘要：在同一個塊內，不允許用重復聲明變量。中為新增了塊級作用域。自帶遍歷器的對象有數組字符串類數組對象對象的對象等和結構對象。返回一個遍歷器，使遍歷數組的鍵值對鍵名鍵值。目錄 1.語法 2.類型、值和變量 3.表達式和運算符 4.語句 5.數組 6.對象 7.函數 8.全局屬性和方法 9.詞法作用域、作用域鏈、閉包 10.原型鏈、繼承機制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 評論0 收藏0
JS中ArrayAPI學習筆記

摘要：如果該函數的返回值大于，表示第一個成員排在第二個成員后面其他情況下，都是第一個元素排在第二個元素前面。第三次執行，為上一輪的返回值，為第四個成員。第四次執行，為上一輪返回值，為第五個成員。 JS中ArrayAPI學習筆記記博客,時?；仡?尤其是面試之先回顧阮一峰標準庫Array對象 1 一些標準庫回顧 showImg(https://segmentfault.com/img/remo...

tolerious 2019-08-22 17:32 評論0 收藏0
學習Virtual Dom筆記

摘要：通過深度優先遍歷兩棵樹，每層節點進行對比，記錄下每個節點的差異。所以可以對那棵樹也進行深度優先遍歷，遍歷的時候從步驟二生成的對象中找出當前遍歷的節點差異，然后進行操作。實現虛擬(Virtual) Dom 把一個div元素的屬性打印出來，如下： showImg(https://segmentfault.com/img/bVbnPe1?w=1239&h=336); 可以看到僅僅是第一層，...

DobbyKim 2019-08-26 13:28 評論0 收藏0