第一部分: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('第二组信息');
![](https://img-blog.csdn.net/20160921150734733?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
(2)查看对象的信息
var infos = {
name:'andy',
age:20,
sayFun:function(){
console.log(1);
}
}
console.dir(infos);
console.log(infos);
![](https://img-blog.csdn.net/20160921151319176?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
(3)查找某个元素的节点
<div id="infos">
<h2>查看某个元素的节点</h2>
<p>csdn</p>
</div>
var myInfos = document.getElementById('infos');
console.dirxml(myInfos);
console.log(myInfos);
![](https://img-blog.csdn.net/20160921151839471?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
其实,和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();