前端基础知识,你还记得那些(持续更新)

1:javascript 中 null和undefined的区别

总所周知:null == undefined  ,但是:null !== undefined
那么这两者到底有啥区别呢?

~null
这是一个对象,但是为空。因为是对象,所以 typeof null 返回 'object' 。
null 是 JavaScript 保留关键字。
null 参与数值运算时其值会自动转换为 0 ,因此,下列表达式计算后会得到正确的数值:
表达式:123 + null    结果值:123
表达式:123 * null    结果值:0
~undefined
undefined是全局对象(window)的一个特殊属性,其值是未定义的。但 typeof undefined 返回 'undefined' 。
虽然undefined是有特殊含义的,但它确实是一个属性,而且是全局对象(window)的属性。请看下面的代码:

alert('undefined' in window);//输出:true 
var obj= {}; 
alert('undefined' in obj); //输出:false


从中可以看出,undefined是window对象的一个属性,但却不是obj对象的一个属性。
注意:尽管undefined是有特殊含义的属性,但却不是JavaScript的保留关键字。
undefined参与任何数值计算时,其结果一定是NaN。
随便说一下,NaN是全局对象(window)的另一个特殊属性,Infinity也是。这些特殊属性都不是JavaScript的保留关键字!

null == 0; // false 
undefined == ""; // false 
null == false; // false 
undefined == false; // false 
null == undefined; // true


2:函数的声明和变量的声明的思考

观察下面代码想想结果会是什么样的:

var a = 0; function a(){}; console.log(a);// 0 
function a(){};var a = 0; console.log(a); // 0
function a(){};var a; console.log(a); //function a() {};
var a; function a(){} console.log(a); //function a() {};

说明函数声明后才声明变量,然后再赋值变量值;同时在不赋值的情况下函数的声明优先级高于变量;

PS:这里我可能理解有问题,请知道的,提醒下!


3:javascript 中的数据类型

js中一共有5中基础数据类型:Null、Undefined、String、Number、Boolean 还有一种复杂数据类型:Object 。


4:typeof 操作符

typeof 会返回这些值: undefined 、string、number、boolean、object (null 是一个空的对象)


5:instanceof 检测引用型数据类型

Array、Object、类型检测

==============2016-03-07更新===========

6:检测是否是数组的方法

  • 方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效

  • 方法二.obj instanceof Array 在某些IE版本中不正确

  • 方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下

if(typeof Array.isArray==="undefined"){
  Array.isArray = function(arg){
       return Object.prototype.toString.call(arg)==="[object Array]"
  };  
}


7:将伪数组转化为数组

function a(){
    console.log(Array.prototype.slice.call(arguments))
};
a(1,2,3);// [1,2,3]


伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 arguments 参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array 对象;


8:定义一个log方法,让它可以代理console.log的方法

方法一:

function log(msg) {
    console.log(msg);
}
 
log("hello world!") // hello world!

方法二:

function log(){
    console.log.apply(console, arguments);
};

补充:call和apply方法的不同

对于apply和call两者在作用上是相同的,即是调用一个对象的一个方法,以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入, 而call则作为call的参数传入(从第二个参数开始)。 如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1, [var1,var2,var3]) 。


9:原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?如何用原生JS实现Jq的ready方法?

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

/* 方法一
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用
 */
var whenReady = (function() {               //这个函数返回whenReady()函数
    var funcs = [];             //当获得事件时,要运行的函数
    var ready = false;          //当触发事件处理程序时,切换为true
 
    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if(ready) return;       //确保事件处理程序只完整运行一次
 
        //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好
        if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
 
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for(var i=0; i<funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件处理函数完整执行,切换ready状态, 并移除所有函数
        ready = true;
        funcs = null;
    }
    //为接收到的任何事件注册处理程序
    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false);            //IE9+
        window.addEventListener('load', handler, false);
    }else if(document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    //返回whenReady()函数
    return function whenReady(fn) {
        if(ready) { fn.call(document); }
        else { funcs.push(fn); }
    }
})();

//方法二

function ready(fn){
    if(document.addEventListener) {        //标准浏览器
        document.addEventListener('DOMContentLoaded', function() {
            //注销事件, 避免反复触发
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();            //执行函数
        }, false);
    }else if(document.attachEvent) {        //IE
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();        //函数执行
            }
        });
    }
};


你可能感兴趣的:(前端,基础知识)