Javascript知识点汇总-初级篇

JavaScript的数据类型都有什么？

基本数据类型：String,Boolean,Number,Undefined, Null

引用数据类型：Object(Array,Date,RegExp,Function)

那么问题来了，如何判断某变量是否为数组数据类型？

• 方法一.判断其是否具有“数组性质”，如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]"
    }; 
}

JS中Null与Undefined的区别

在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑，在什么时候是Null，什么时候又是Undefined?

Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

var oValue;  
alert(oValue == undefined); //output "true"  

这段代码显示为true,代表oVlaue的值即为undefined，因为我们没有初始化它。

alert(null == document.getElementById('notExistElement'));  

当页面上不存在id为"notExistElement"的DOM节点时，这段代码显示为"true"，因为我们尝试获取一个不存在的对象。

alert(typeof undefined); //output "undefined"  
alert(typeof null); //output "object"  

第一行代码很容易理解，undefined的类型为Undefined；第二行代码却让人疑惑，为什么null的类型又是Object了呢？其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来。在今天我们可以解释为，null即是一个不存在的对象的占位符，但是在实际编码时还是要注意这一特性。

判断数据类型

1. 我们可以使用typeof运算符来判断数据类型

typeof undefined; //"undefined"
typeof null; "object"
typeof true; "boolean"
typeof 0; //"number"
typeof NaN; //"number"
typeof "string"; //"string"
typeof function(){}; //"function"
typeof []; //"object"
typeof new Date(); //"object"

有几个看起来比较蹊跷需要我们注意

1. typeof是运算符，不是方法，也就是说和加减号一样用，不考虑优先级问题，没必要给操作数加括号，当然加了也没事儿，说实话可读性还挺高
2. typeof返回值都是小写字符串
3. null的类型不是null，而是"object"
4. NaN这个不是数字的类型也是"number"
5. function明明也是对象，但是typeof却给了"function"类型
6. 其它对象都返回"object",很没有识别性

具体识别对象类型使用instanceof 操作符，这个记住一点儿就行，对于基本类型，instanceof 永远返回false

instanceof Number; //false
new Number(1) instanceof Number; //true

 2、判断已知对象类型的方法： instanceof

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false

注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。


3、根据对象的constructor判断： constructor

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
注意： constructor 在类继承时会出错
eg：
      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;
而instanceof方法不会出现该问题，对象直接继承和间接继承的都会报true：
      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;
言归正传，解决construtor的问题通常是让对象的constructor手动指向自己：
      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;

 4、通用但很繁琐的方法： prototype

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

大小写不能写错，比较麻烦，但胜在通用。

HTTP 状态消息 200 302 304 403 404 500 分别表示什么？

1. 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
2. 302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。
3. 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
4. 403：服务器已经理解请求，但是拒绝执行它。
5. 404：请求失败，请求所希望得到的资源未被在服务器上发现。
6. 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

例举至少 3 种强制类型转换和 2 种隐式类型转换?

1. 强制类型转换： 明确调用内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有：Boolean、Number、String、parseInt、parseFloat

2. 隐式类型转换： 在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有：+、–、==、!

 

4.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”;
dom.style.color = “#000”;
 

JavaScript 的事件流模型都有什么？

事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的 window 对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数（如果有绑定的话）后，事件又会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）

事件流包含三个阶段：

• 事件捕捉阶段
• 处于目标阶段
• 事件冒泡阶段
1. 事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；
2. 处于目标阶段：处在绑定事件的元素上；
3. 事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

BOM 对象有哪些，列举 window 对象？

建议回复：

1. window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
2. document 对象，文档对象；
3. location 对象，浏览器当前URL信息；
4. navigator 对象，浏览器本身信息；
5. screen 对象，客户端屏幕信息；
6. history 对象，浏览器访问历史信息；

请简述 AJAX 及基本步骤？

• 简述 AJAX：AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX 基本步骤：

1. 初始化ajax对象
2. 连接地址，准备数据
3. 发送请求
4. 接收数据（正在接收，尚未完成）
5. 接收数据完成

7.什么是Ajax和JSON，它们的优缺点。

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

• 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
• 避免用户不断刷新或者跳转页面，提高用户体验

缺点：

• 对搜索引擎不友好（
• 要实现ajax下的前后退功能成本较大
• 可能造成请求数的增加
• 跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

同步和异步的区别?

• 首先同步异步于阻塞非阻塞并没有关系。同步异步主要是事情做完以后，如何进行处理、或者说关注的是一种消息通信机制。
• 同步的情况下，是由处理消息者自己去等待消息是否被触发；
• 而异步的情况下是由触发机制来通知处理消息者；

举例： 比如在上课时，你问老师一个问题，这个问题可能需要花费一点时间去思考，这个时候老师可能：

1. 思考，思考……，好了，有答案了；
2. 这个问题需要一点时间，你先做点别的，等我想好了，去找你。

第一种就是同步，第二种就是异步。所以同步异步可以说是对被请求方来说的，被请求者使用什么方式来告知处理结果。

• 阻塞非阻塞，主要是对于请求者而言的。
• 阻塞：发出请求等待结果返回，然后再处理后续的事情；
• 非阻塞：发出请求不等待结果返回，可以接着做后续的事情；

举例，还是上一个例子：

1. 老师在使用同步思考的时候，你可以静静的等待老师给出答案，也可以边做自己的事情边等待老师的回答，当然这时候你需要时刻去关注老师是否已经想好了，在程序中需要进行轮询了。乀(ˉεˉ乀)
2. 老师使用异步的方式，这个时候老师告诉你可以先去做别的，好了就通知你，那么你可以去做点别的，然后监听事件就行，当然你也可以很轴，我就不做别的！我要一直等着老师“想好了”的事件发生。
3. 所以同步可以是阻塞的也可以是非阻塞的，异步也是如此。

GET和POST的区别，何时使用POST？

GET和POST的区别：

GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。

POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

在以下情况中，请使用 POST 请求：

1. 以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
2. 发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；
3. 向服务器发送大量数据（数据大小限制区别）；
4. 上传文件图片时（数据类型区别）；

十一、new 操作符具体干了什么呢?

当使用 new 操作符调用构造函数，函数实际会经历如下步骤：

1. 创建一个新对象；
2. 把函数中上下文（作用域）对象this指向该对象；
3. 执行代码，通过this给新对象添加属性或方法；
4. 返回对象；

十二、null 和 undefined 的区别？

• null： null表示空值，转为数值时为0；

• undefined：undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

1. 变量被声明了，但没有赋值时，就等于undefined。
2. 对象没有赋值的属性，该属性的值为undefined。
3. 函数没有返回值时，默认返回undefined。

十三、JavaScript 原型，原型链 ? 有什么特点？

JavaScript 原型： 每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候，那么这些实例都会共享原型上的属性和方法。

原型链： 在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

不同进制的转换

Number可以使用四种数字进制：十进制，二进制，八进制和十六进制。非十进制只使用与整数。

• 二进制表示法：以零为开头，后面接一个小写或大写的拉丁文字母B(0b或者是0B)
• 八进制表示法：以0为开头的。假如0后面的数字不在0到7的范围内，该数字将会被转换成十进制数字。
• 在ECMAScript 5 严格模式下禁止使用八进制语法，会被视为十进制
• 在ECMAScript 6中使用八进制数字是需要给一个数字添加前缀"0o"
• 十六进制表示法：以零为开头，后面接一个小写或大写的拉丁文字母X(0x或者是0X)

// 十进制
12345678
42
0777 // 在非严格格式下会被当做八进制处理 (用十进制表示就是511)

// 二进制
var a = 0b100000; // 32
var b = 0b0111111; // 63
var c = 0B0000111; // 7

// 八进制
var n = 0755; // 493
var m = 0644; // 420
var a = 0o10; // ES6 :八进制

// 十六进制
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
0x123456789ABCDEF   // 81985529216486900
0XA                 // 10

进制的转换主要用到Number的toString()方法或parseInt()方法：

• toString() 方法接受一个值为 2~36 之间的整数参数指定进制，默认为十进制，将Number转为String
• parseInt() 第二个参数接受一个值为 2~36 之间的整数参数指定进制，默认为十进制，将String转为Number

// toString转换，输入为Number，返回为String
var n = 120;
n.toString(); // "120"
n.toString(2); // "1111000"
n.toString(8); // "170"
n.toString(16); // "78"
n.toString(20); // "60"

0x11.toString(); // "17"
0b111.toString(); // "7"
0x11.toString(12);// "15"

// parseInt转换，输入为String，返回为Number
parseInt('110'); // 110
parseInt('110', 2);  // 6
parseInt('110', 8);  // 72
parseInt('110', 16); // 272
parseInt('110', 26); // 702

// toString和parseInt结合使用可以在两两进制之间转换
// 将 a 从36进制转为12进制
var a = 'ra';  // 36进制表示的数
parseInt(a, 36).toString(12); // "960"

21.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

1）创建新节点

• createDocumentFragment() //创建一个DOM片段
• createElement() //创建一个具体的元素
• createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

• appendChild() //添加
• removeChild() //移除
• replaceChild() //替换
• insertBefore() //插入

3）查找

• getElementsByTagName() //通过标签名称
• getElementsByName() //通过元素的Name属性的值
• getElementById() //通过元素Id，唯一性

Javascript中callee和caller的作用？

答案：

caller是返回一个对函数的引用，该函数调用了当前函数；

caller是函数对象的一个属性，该属性保存着调用当前函数的函数的引用（指向当前函数的直接父函数）
先来个例子吧

function a(){
b();
};
function b(){
alert(b.caller);
};
a(); //结果就是弹出函数a和内容

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

可以看出来callee是arguments对象的一个属性，指向arguments对象的函数，这个函数就是chen（chen=arguments.callee）,这样解释应该可以理解了吧。

那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）

var result=[];
function fn(n){  //典型的斐波那契数列
   if(n==1){
        return 1;
   }else if(n==2){
           return 1;
   }else{
        if(result[n]){
                return result[n];
        }else{
                //argument.callee()表示fn()
                result[n]=arguments.callee(n-1)+arguments.callee(n-2);
                return result[n];
        }
   }
}

JavaScript继承有哪两种形式形式（擦，这么大一个问题）

声明：整理了一下网上关于javascript的初始面试题，非原创。