js中如何动态向枚举中添加元素

JavaScript017

js中如何动态向枚举中添加元素,第1张

1、动态创建元素时，将事件触发方式加入到元素创建中

例如：

document.getElementById('id').innerHTML='<input type="button" onclick="btnClick()" value="aaa"/>'

function btnClick(){

alert('事件触发')

}

2、动态创建元素完成后，重新获取该元素绑定事件

例如：

document.getElementById('id').innerHTML='<input type="button" id="btn" />'

document.getElementById('btn').onclick=function(){

alert('事件触发')

}

js中每个对象的属性都有一个属性enumerable，这个属性true/false决定了这个属性是否可枚举

1、基本数据类型自带的原型属性不可枚举

2、通过Object.defineProperty()方法指定的enumerable为false的属性不可枚举

Object.keys()返回属性key，但不包括不可枚举的属性

Reflect.ownKeys()返回所有属性key

他们两个都不能遍历原型上的属性

for in

for in一般用于遍历对象的属性；

作用于数组的for in除了会遍历数组元素外，还会遍历自定义可枚举的属性，以及原型链上可枚举的属性；

作用于数组的for in的遍历结果是数组的索引，且都为字符串型，不能用于运算；

某些情况下，可能按照随机顺序遍历数组元素；

for of

ES6中添加的循环语法；

for of支持遍历数组、类对象（例如DOM NodeList对象）、字符串、Map对象、Set对象；

for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历；

for of遍历后的输出结果为数组元素的值；

Object.entries(obj)

将一个可枚举对象按照键值对展开为数组

Object.assign(target, source)

将一个或多个可枚举对象的可枚举属性复制到 target 对象，返回 target 对象。第一级属性深拷贝，以后级别属性浅拷贝

Object.freeze(obj)

相应的也有判断是否冻结的方法----Object.isFrozen()

冻结一个对象。一个被冻结的对象再也不能被修改，包括所有的属性，甚至包括他的原型。返回与原对象相同参数的对象

Object.create(obj)

创建一个新对象，将现有的对象创建为新对象的 proto 。返回一个新对象

Object.keys(obj)

遍历一个对象，将 key 返回为数组

Object.defineProperty(obj, prop, descriptor)

参数：

obj：被操作对象

prop：修改或要定义的属性名

descriptor：修改或要定义的属性的属性描述，即prop的描述

新增或修改一个对象的属性，并返回该对象

扩展：在vue中通过递归调用此方法，为对象的每一个属性绑定get()、set()方法，实现对象的数据监听

Object.getPrototypeOf(obj)

返回目标对象的 prototype 的值。

给定对象的原型。如果没有继承属性，则返回 [null]