笔记：js对象遍历

不知名网友发布于2019-08-21 12:35 / 375人阅读

摘要：中的对象概念非常不同，要把它当作其它语言的关联数组如或者如来理解的话，还是有很大的不一样由于原型链和属性描述符主要是的存在。一个对象字面量有作为原型，它有继承自原型链的不可枚举的方法。下面将以对象字面量为例。

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) + "$"];
       })
     });
   };

 })();

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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