文档章节

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

乐派电影
 乐派电影
发布于 2016/03/04 14:55
字数 1425
阅读 246
收藏 9

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();        //函数执行
            }
        });
    }
};


© 著作权归作者所有

共有 人打赏支持
乐派电影

乐派电影

粉丝 135
博文 39
码字总数 18922
作品 1
成都
后端工程师
私信 提问
前端(Not just)工程师终究要掌握的知识

knowledge 前端(Not just)工程师终究要掌握的知识 GitHub地址:github.com/HcySunYang/… Intro 该项目收藏积累了前端(Not just)所应该掌握的知识,包括 JavaScript语言基础、DOM、CSS3、计算...

hcysunyang
2017/05/22
0
0
AngularJS 2 教程--ng-book 2

ng-book 2 是一个 AngularJS 2 学习教程,它能提供给你绝佳的教学指导和具有代表性的实例,让你摆脱那些混乱的指导教材,节省你的时间。如果你想在段时间内夯实基础,掌握整个框架,你应该学...

孔小菜
2015/07/13
21.5K
15
前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方
2017/12/28
0
0
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
【吐血整理】前端求职面试资源分享,值得收藏!

面试不是单纯考察技术,而是综合能力的考查,关于面试,职位JD怎么看,知识点怎么复习,问题如何回答,项目怎么准备,和负责人如何沟通,怎么给HR留下良好印象……别小瞧这些问题,往往就是这...

慕课网官方_运营中心
2018/07/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx反向代理

Nginx反向代理 应用场景 A 机器运行的nginx提供的web服务,只有一个内网地址192.168.254.128(内网) B机器有两块网卡,一个地址是192.168.254.137(内网),另一个是192.168.79.128(外网)...

李超小牛子
今天
2
0
数据库事务隔离级别

当数据库上有多个事务同时执行的时候,可能出现下面问题: 脏读(dirty read):指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个事务也访...

Jacktanger
今天
1
0
4.61 - 第二个JAVA应用 4.62/63 - Tomcat的管理功能

4.61 - 第二个JAVA应用 方法一:配置文件: /usr/local/tomcat/conf/server.xml <Host name="www.aminglinux.cc" appBase="/data/wwwroot/www.aminglinux.cc" unpackWARs="tr......

Champin
今天
0
0
MariaDB密码重置

MariaDB密码重置 如果记得root的密码: mysqladmin -uroot -paminglinux password "aming-linux" //用此方式将原密码aminglinux重置为aming-linux 如果不记得原密码: # vi /etc/my.cnf......

wzb88
昨天
1
0
印度封禁抖音,称导致该国年轻人“文化堕落”!

本文经授权转载自顶级程序员 (ID:TopCoding) 作者 | 江户川雨 责编 | https://weavi.com/13775725 https://weavi.com/13775726 https://weavi.com/13775724 https://weavi.com/13775723 ......

陈刚生
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部