js杂乱整理

不断更新 总结一些js的小知识点

jquery attr与prop的区别

attr获取dom中自定义的属性
prop获取dom中固有默认的属性(input中的checked)

js自动监听input值改变的事件

$('#username').bind('input propertychange', function() {  
    $('#result').html($(this).val().length + ' characters');  
}); 

js中的select

 $('#selectn').on('change',function(){
     console.log($(this).val())
     console.log($(this).find('option:checked').text())
 })

call与apply

解决下面几个问题
1.apply和call的区别在哪里

2.什么情况下用apply,什么情况下用call

3.apply的巧妙用法（一般在什么情况下可以使用apply）

apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args–>arguments）

call:和apply的意思一样,只不过是参数列表不一样.

apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表
[1,2,3] → 1，2，3

例子:1 获取一个数组中最大的值
Math.max(a,b) Math.max 方法的参数不能是数组但是支持参数列表
Math.max.apply(this,[1,2,3,4])

例子:2 将一个数组加到另一个数组后面

var a = [1,2,3]
var b = [4,5,6]
a.push.apply(a,b)

Async/Await

例子：

var sleep = function(){
  return new Promise(function(resolve,reject){
    setTimeout(function(){
      resolve()
    },5000)
  })
}

var start = async function(){
    console.log('开始');
    await sleep();
    console.log('结束');
}

start()
var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模拟出错了，返回 ‘error’
            reject('error');
        }, time);
    })
};

控制台先输出‘开始’隔了5s后输出 输出‘结束’

await只能在async函数中运行
例子：

var start = async function () {
    try {
        console.log('start');
        var data =[1,2,3]
for(var v of data) {
    console.log(`当前是第${v}次等待..`);
    await sleep(1000); // 正确, for循环的上下文还在async函数中
}

        // 所以以下代码不会被执行了
        console.log('end');
    } catch (err) {
        console.log(err); // 这里捕捉到错误 `error`
    }
};
start()

每隔5s输出

start
当前是第1次等待..
当前是第2次等待..
当前是第3次等待..
end

reduce reduceRight运用

var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
  return preValue+curValue
})

结果输出10，reduceRight与reduce作用一样 只是从后面累加
map 也是reduce的一种特例

火狐 focus bug

给focus上层加一个setTimeout(fn,0)