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

JavaScript023

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]