即时反映的input和propertychange方法、for of与for in的区别

即时反映的input和propertychange方法

在web开发中，有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时

会发现一些复制粘贴等操作作用不了。同时，在处理组合快捷键的时候也很麻烦，这时，我们需要更专业的解决方案：HTML
标准事件：oninput、onchange和IE专属的事件properchange。
1. oninput$onchange:
oninput 和onchange都是事件对象，当输入框的值发生改变时触发该事件，不同的是，oninput是在值改变时立即触发，
而onchange是在改变后失去焦点菜触发，并且可以用在非输入框中，如select等
2. propertychange:
功能与oninput相同，用以代替oninput在IE9以下的不兼容性
propertychange和input事件：
1）propertychange只要当前对象的属性发生改变就会触发该事件
2）input是标准的浏览器事件，一般应用于input元素，当input的value发生改变就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
3. output：
output是一个HTML5标签，IE系列浏览不兼容，主要用于计算输出，如：
$(function){
$('#username').bind('input propertychange',function(){
$('#result').html($(this).val().length + 'characters');
});
})

这里bind同时绑定了input和propertychange两个方法。

for of与for in的区别 

遍历数组通常使用for循环，ES5的话也可以使用forEach，ES5遍历数组功能的函数还有map、filter、some、every、reduce、reduceRight等，只不过它们的返回结果不一样。但是使用forEach遍历数组的话，使用break不能中断循环使用return也不能返回外层函数。

Array.prototype.method = function(){
    console.log(this.length);
};
var myArray = [1,2,3,4,5,6,7];
myArray.name = "数组";
for(var index in myArray){
    console.log(myArray[index]);
}

使用for in也可以遍历数组，但是会存在以下问题：

1.index索引为字符串数字，不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上例的原型方法method和name属性

所以for in更适合遍历对象，不要使用for in遍历数组

那么除了使用for循环，更简单的正确的遍历数组方法（不遍历method和name），ES6中的for of就出来啦

Array.prototype.method = function(){
    console.log(this.length);
};
var myArray = [1,2,3,4,5,6,7];
myArray.name = "数组";
for(var value of myArray){
    console.log(value);
}

记住：for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

遍历对象 for in的代码实例：

Object.prototype.method = function(){
    console.log(this);
};
var myObject = {
    a: 1,
    b: 2,
    c: 3,
} ;
for(var key in myObject){
    console.log(key);
}

for in可以遍历到myObject的原型方法method，如果不便利原型方法和属性的话，可以在循环内部判断一下，hasOwnPeopery方法可以判断某属性是否是该对象的实例属性

for(var key in myObject){
    if(myObject.hasOwnProperty(key)){
        console.log(key);
    }
}

同样可以通过ES5中的Object.keys(MyObject)获取对象的实例属性组成的数组，不包括原型方法和属性

Object.prototype.method = function(){
    console.log(this);
};
var myObject = {
    a : 1,
    b : 2,
    c : 3
};
Object.keys(myObject).forEach(function(key,index){
     console.log(key,myObject[key]);
});

控制台运行结果均为：