你未曾了解过的javascript?!!

第一部分:js基础


// 类数组转换为数组
function my(a,b,c,d){
    var arr = arguments;
    console.log(arr instanceof Array);
    var newArray=Array.prototype.slice.call(arr);
    var newArray1 = Array.prototype.splice.call(arr,0);
    console.log(newArray instanceof Array,newArray);
    console.log(newArray1 instanceof Array,newArray1);
}
my(1,2,3,4)
console.log(my.length);

//  for循环 高逼格
console.log('demo2')
var myArray = [4, 'Hello world!', 1];
for(var i= 0,val;val=myArray[i++];){
    console.log(i,val);
}

for(var i= 0,len=myArray.length;i<len;i++){
    console.log(i,myArray [i]);
}

第二部分:参数argumrents的应用;

看过一篇博客,说的就是面试前端的:让候选人定义一个log,然后可以代理console.log的方法。其实就是让候选人直接用apply;
但是一般的面试者会这样写:
function log(msg){
        console.log(msg);
}
log('hello world')

但是,如果要改变我调用的log的方式,传入多个参数呢,也就是参数不定的情况下,如log('hello','world');那么可以用apply了:
    function log(){
        console.log.apply(this,arguments);
    }

    log('hello','world');

ok!我们继续,如果接下来让候选人给每一个log消息添加一个“(andy)”的前缀,如:‘(andy) hello world’,这个时候无非
就是让arguments转化成标准数组。通常使用的方法就是上面我们将到的Array.prototype.slice,如下:
    function log(){
        var args = Array.prototype.slice.call(arguments);
        args.unshift('(andy)');
        console.log.apply(this,args);
    }
    log('hello','world')

第三部分:上下文(this)

其实,让好多前端比较迷惑多this是其中一个,注意下面多一个例子:
    var User = {
        count :1,
        getCount:function(){
            return this.count;
        }
    }

    console.log(User.getCount()); // 1
    var func = User.getCount;
    console.log(func());  // undefined


原因即使,func是在window的上下文中被执行的,所以会访问不到count属性,但是,我们如何能保证User总是能访问到func的上下文
呢,即返回正确的值:1
这个时候,我们要使用Function.prototype.bind()
    var User = {
        count :1,
        getCount:function(){
            return this.count;
        }
    }

    console.log(User.getCount());
    var func = User.getCount.bind(User);
    console.log(func());  // 1

但是bing函数是es5里的东西,对于ie9_的浏览器是不支持的,接下来我们就来解决这个问题:
知识点:apply
    Function.prototype.bind = Function.prototype.bind || function(context){
        var self = this;
        return function(){
            return self.apply(context,arguments);
        }
    }


第四部分:console命令--你不了解的东西

(1)信息分组

 
    console.group('第一组信息');
        console.log('第一组信息第一条');
        console.log('第一组信息第二条');
    console.groupEnd();
    console.group('第二组信息');
        console.log('第二组信息第一条');
        console.log('第二组信息第二条');
    console.groupEnd('第二组信息');

(2)查看对象的信息

 
    var infos = {
        name:'andy',
        age:20,
        sayFun:function(){
            console.log(1);
        }
    }
    console.dir(infos);
    console.log(infos);


(3)查找某个元素的节点

 
    <div id="infos">
        <h2>查看某个元素的节点</h2>
        <p>csdn</p>
    </div>

    var myInfos = document.getElementById('infos');
    console.dirxml(myInfos);
    console.log(myInfos);

其实,和console.log差不多;
 

(4)性能分析

    console.profile('性能分析');
    for(var i =0;i<1000;i++){
        console.log(i);
    }
    console.profileEnd();

(5)时间分析

    console.time('时间分析');
    for(var i =0;i<1000;i++){
        console.log(i);
    }
    console.timeEnd();



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值