「 JavaScript 篇」

一、JavaScript 里有哪些数据类型，解释清楚 null 和 undefined，解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1)的区别
js中有5种数据类型：Undefined、Null、Boolean、Number和String。
还有一种复杂的数据类型Object，Object本质是一组无序的名值对组成的。Object、Array和Function则属于引用类型

Undefined
Undefined类型只有一个值，即特殊的undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。不过，一般建议尽量给变量初始化，但是在早期的js版本中是没有规定undefined这个值的，所以在有些框架中为了兼容旧版浏览器，会给window对象添加undefined值。
Null
Null类型是第二个只有一个值的数据类型，这个特殊的值是null。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回object的原因。
可以看到null和undefined分属不同的类型，未初始化定义的值用typeof检测出来是"undefined"(字符串)，而null值用typeof检测出来是"object"（字符串）。
任何时候都不建议显式的设置一个变量为undefined，但是如果保存对象的变量还没有真正保存对象，应该设置成null。
实际上，undefined值是派生自null值的，ECMAScript标准规定对二者进行相等性测试要返回true，即：
alert(null==undefined); // true；
JS基本数据类型的变量存放的是基本类型数据的实际值；而引用数据类型的变量保存对它的引用，即指针。
1 是常量；
Number(1)是调用Number(1)的返回值。
【补充：】数字、字符串、布尔三者，在JS中称为原始的(primitives)资料类型，再加上null与undefined也是。除了这些类型外，其他的都是对象。(注: ES6的Symbol是新加的原始资料类型)

包装对象
对象中有一类是Number, String, Boolean这三个对象，分别对应数字、字符串、布尔类型，我们称它们为包装对象或包装类型(Wrappers)，很少会直接使用到它们，在很多情况下也尽量避免使用它们。

包装类型与原始资料类型之间的正确转换方式如下:

原始->包装: new Number(123)
包装->原始: (new Number(123)).valueOf()
包装对象是个对象，所以它与原始资料类型并不相同，用typeof与instanceof都可以检测出来:

typeof 123 // "number"
typeof new Number(123) // "object"
123 instanceof Number // false
(new Number(123)) instanceof Number // true
123 === new Number(123) // false

作为对象来进行比较，因为对象是参照的，不同的对象不可能相等:

var a = new Number(123);
var b = new Number(123);
a === b; // false
a == b; // false
var a = 123;
var b = 123;
a === b; // true
a == b; // true

二、将一下 prototype 是什么东西，原型链的理解，什么时候用 prototype
在JavaScript中，prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。
要弄清楚原型链就要先弄清楚 function 类型，在JavaScript中没有类的概念，都是函数，所以它是一门函数式的编程语言。类有一个很重要的特性，就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中，函数就有2个功能
第一、作为一般函数调用
第二、作为它原型对象的构造函数也就new（）
凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象
JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。
1.原型和原型链是JS实现继承的一种模型。
2.原型链的形成是真正是靠__proto__ 而非prototype
将方法定义到构造方法的prototype上，这样的好处是，通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引，这样可以节省内存。

三、函数里的this什么含义，什么情况下，怎么用。
this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象
情况一：纯粹的函数调用
这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

　　function test(){
　　　　this.x = 1;
　　　　alert(this.x);
　　}
　　test(); // 1

为了证明this就是全局对象，我对代码做一些改变：
　

　var x = 1;
　　function test(){
　　　　alert(this.x);
　　}
　　test(); // 1

运行结果还是1。再变一下：
　

　var x = 1;
　　function test(){
　　　　this.x = 0;
　　}
　　test();
　　alert(x); //0

情况二：作为对象方法的调用
函数还可以作为某个对象的方法调用，这时this就指这个上级对象。
　　

function test(){
　　　　alert(this.x);
　　}
　　var o = {};
　　o.x = 1;
　　o.m = test;
　　o.m(); // 1

情况三：作为构造函数调用
所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。
　

　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象，对代码做一些改变：
　

　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2

运行结果为2，表明全局变量x的值没变。

情况四： apply调用
apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。
　

　var x = 0;
　　function test(){
　　　　alert(this.x);
　　}
　　var o={};
　　o.x = 1;
　　o.m = test;
　　o.m.apply(); //0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。
如果把最后一行代码修改为
　　o.m.apply(o); //1
运行结果就变成了1，证明了这时this代表的是对象o。
四、apply和 call 什么含义，什么区别？什么时候用
call和apply都用于函数调用，和使用函数名直接调用不同，call和apply可以指定一个额外的参数作为函数体内的this对象。
call采用不定长的参数列表，而apply使用一个参数数组。
由于call和apply可以改变函数体内的this指向，因此通常被用来将一个对象原型上的方法应用到另一个对象上。一个常见的应用是处理函数的arguments，将其转换为Array类型：
五、数组和对象有哪些原生方法，列举一下，分别是什么含义，比如连接两个数组用哪个方法，删除数组的指定项和重新组装数组
length
设置或返回数组中元素的数目。
注意：设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。所以length不一定代表数组的元素个数。

var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"

console.log(arr); //["John", "Andy", "Wendy"]
console.log(arr.length); //3

arr.length = 2;

console.log(arr); //["John", "Andy"]
console.log(arr.length); //2

arr.length = 5;

console.log(arr); //["John", "Andy", undefined, undefined, undefined]
console.log(arr.length); //5

concat()
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
arrayObject.concat(arrayX, arrayX, …… arrayX)
注意：参数是必需的。可以是具体的值，也可以是数组对象，可以是任意多个。返回一个新的数组（该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的，如果arrayX是元素，则添加arrayX，如果arrayX是数组，则添加arrayX中的元素）。

var a = [1,2,3];
var b = a.concat(4,5);
var c = a.concat(4,5,[6,7],8,"123");

console.log(a); //[1, 2, 3]
console.log(b); //[1, 2, 3, 4, 5]
console.log(c); //[1, 2, 3, 4, 5, 6, 7, 8, "123"]

join()
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join(separator)
参数代表分隔符，是可选的，默认为半角逗号。注意返回值是字符串，不是数组。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr); //["George", "John", "Thomas"]
console.log(arr.join()); //"George,John,Thomas"
console.log(arr.join(" & ")); //"George & John & Thomas"

**现在的新主流浏览器，都对 + 运算符做了很好的优化，所以建议使用 + 运算符代替join()方法，参考 array join vs string connect

pop()
pop() 方法用于删除并返回数组的最后一个元素。
pop() 方法将改变数组（删除数组的最后一个元素，把数组长度减 1），并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr); //["George", "John", "Thomas"]
console.log(arr.pop()); //"Thomas"
console.log(arr); //["George", "John"]
console.log(arr.pop()); //"John"
console.log(arr); //["George"]
console.log(arr.pop()); //"George"
console.log(arr); //[]
console.log(arr.pop()); //undefined
console.log(arr); //[]

push()
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度，也就是添加元素后的数组长度。
arrayObject.push(newelement1, newelement2, …., newelementX)
push()方法最少要有一个参数。push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
注意：push()方法中的参数不管是什么类型（数组、对象等），一个参数将会被作为一个整体元素插入 arrayObject 的尾部，不做拆分，详见示例。

var a = ["a","b"];

var b = {
name: "Tom"
};

var c = [1,2,3];

console.log(a);
console.log(a.push(b));
console.log(a);
console.log(a.push(c));
console.log(a);

/********* Output *********/

["a", "b"]
3
["a", "b", [object Object] {
name: "Tom"
}]
4
["a", "b", [object Object] {
name: "Tom"
}, [1, 2, 3]]

reverse()
reverse() 方法用于颠倒数组中元素的顺序。
注意：该方法会改变原来的数组，而不会创建新的数组。

reverse()是sort()的逆序版，reverse()的详细排序行为请参见下文 sort() 方法的解释。

reverse()并非效率最高的数组倒序排列方法，如果你对效率要求更高，可以参考 JS: Array.reverse() vs. for and while loops

var a = ["a","b","c"];
var b = ["你","我","他"];
var c = [1,2,3];
var d = ["a","b","c",1,2,3,"你","我","他"];

console.log(a.reverse()); //["c", "b", "a"]
console.log(b.reverse()); //["他", "我", "你"]
console.log(c.reverse()); //[3, 2, 1]
console.log(d.reverse()); //["他", "我", "你", 3, 2, 1, "c", "b", "a"]

shift()
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的数组。

shift() 方法通常比 pop() 方法要慢很多。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr); //["George", "John", "Thomas"]
console.log(arr.shift()); //"George"
console.log(arr); //["John", "Thomas"]
console.log(arr.shift()); //"John"
console.log(arr); //["Thomas"]
console.log(arr.shift()); //"Thomas"
console.log(arr); //[]
console.log(arr.shift()); //undefined

slice()
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start, end)
参数start是必需的，规定从何处开始选取，如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

参数end是可选的，规定从何处结束选取，该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
注意，该方法并不会修改数组，方法会返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
请注意slice()和splice()的区别：slice意思是切片，即把数组切出来一段；splice意思是绞接，就像我们平时接两根绳子一样，需要把原来的绳子切下来一段，然后再和新绳子接在一起。如果想删除数组中的一段元素，并向数组添加新元素，应该使用方法 Array.splice()。
在使用slice()时，如果参数start超过了数组的起点，则会从数组头部开始；如果参数end超过了数组的结尾，则会从数组的尾部结束；如果start和end中的范围不在数组中，或者end小于start，则会返回空数组；如果start和end不为数字，则会进行转换，转换失败的话，start默认为0，end默认为0。详见示例：

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr); //["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.slice(2,4)); //["Thomas", "James"]
console.log(arr.slice(-3,4)); //["James"]
console.log(arr.slice(-10,4)); //["George", "John", "Thomas", "James"]
console.log(arr.slice(-10,-4)); //["George", "John"]
console.log(arr.slice(4,3)); //[]
console.log(arr.slice(-20,-10)); //[]
console.log(arr.slice("2","4")); //["Thomas", "James"]
console.log(arr.slice("a","4")); //["George", "John", "Thomas", "James"]
console.log(arr.slice("a","b")); //[]
console.log(arr.slice("2a","4a"));//[]
console.log(arr.slice("","")); //[]

sort()
sort() 方法用于对数组的元素进行排序（从小到大）。
arrayObject.sort(sortby)
请注意，数组在原数组上进行排序，不生成副本。参数sortby是可选的，是自定义的函数，规定排序方法。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";

function sortNumber(a,b)
{
return a - b;
}

console.log(arr); //["10", "5", "40", "25", "1000", "1"]
console.log(arr.sort()); //["1", "10", "1000", "25", "40", "5"]
console.log(arr.sort(sortNumber)); //["1", "5", "10", "25", "40", "1000"]

splice()
splice() 方法用于插入、删除或替换数组的元素。
arrayObject.splice(index, howmany, element1, ….., elementX)
参数index是必需的。规定从何处添加/删除元素，该参数是开始（包含）插入和（或）删除的数组元素的下标，必须是数字。

参数howmany是必需的。规定应该删除多少元素。必须是数字，但可以是 “0″。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

参数element1…elementX是可选的。规定要添加到数组的新元素，从 index 所指的下标处开始插入。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。splice()会直接对原数组进行修改。

注意如果参数index不为数字，则会自动转换，详见示例：

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr); //["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.splice(2,1)); //["Thomas"]
console.log(arr); //["George", "John", "James", "Adrew", "Martin"]
console.log(arr.splice(2,2,"William")); //["James", "Adrew"]
console.log(arr); //["George", "John", "William", "Martin"]
console.log(arr.splice(2,1,"Tom","Jerry")); //["William"]
console.log(arr); //["George", "John", "Tom", "Jerry", "Martin"]
console.log(arr.splice(2)); //["Tom", "Jerry", "Martin"]
console.log(arr); //["George", "John"]
console.log(arr.splice("2")); //[]
console.log(arr); //["George", "John"]
console.log(arr.splice("a")); //["George", "John"]
console.log(arr); //[]

注意如果index为负数，则会从数组尾部算起；howmany为负数，则不删除。详见示例：

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr); //["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.splice(-2,1)); //["Adrew"]
console.log(arr); //["George", "John", "Thomas", "James", "Martin"]
console.log(arr.splice(-2,-1)); //[]
console.log(arr); //["George", "John", "Thomas", "James", "Martin"]

对于大型数组，splice()的效率会比较低，参考 Splicing a single value

toString()
toString() 方法可把数组转换为字符串，并返回结果。

Array.toString() 相当于 Array.join() ，返回值与没有参数的 join() 方法返回的字符串相同。

unshift()
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

arrayObject.unshift(newelement1, newelement2, …., newelementX)
参数newelement1……X至少要有一个。unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

注意，unshift() 方法不创建新的数组，而是直接修改原有的数组。在IE6与IE7中，unshift()会返回 underfined！

var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

console.log(arr); //["George", "John", "Thomas"]
console.log(arr.unshift("William")); //4
console.log(arr.unshift("Tom","Jerry")); //6
console.log(arr); //["Tom", "Jerry", "William", "George", "John", "Thomas"]

改变原数组的方法：pop()、push()、reverse()、shift()、sort()、splice()、unshift()

不改变原数组的方法：concat()、join()、slice()、toString()

注意：JavaScript里面，没有好的机制来区别Array和Object，一般可以通过下面的方法来识别数组：

var isArray = function(value){
return Object.prototype.toString.apply(value) === '[object Array]';
}

Object.prototype.toString对任何变量会永远返回这样一个字符串“[object, class]”，而这个class就是JavaScript内嵌对象的构造函数的名字。至于用户自定义的变量，则class等于object。因此通过Object.prototype.toString.apply(obj)可以准确的获取变量数据类型。通过Object.prototype.toString可以获得的数据类型包括：Date,Object,String,Number,Boolean,Regexp,Function,undefined,null,Math等。

六、怎样添加、移除、移动、复制、创建和查找节点？
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement_x_x() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
1.创建元素节点
document.createElement_x_x() 方法用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点
1 var div = document.createElement_x_x("div"); //创建一个div元素
2 div.id = "myDiv"; //设置div的id
3 div.className = "box"; //设置div的class
创建元素后还要把元素添加到文档树中
2.添加元素节点
appendChild() 方法用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML = "项目四"; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾

appendChild() 方法还可以添加已经存在的元素，会将元素从原来的位置移到新的位置
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

insertBefore() 方法，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]); 　　　　//把li添加到ul中的第二个li节点前
添加后:
3.移除元素节点
removeChild() 方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
3 ul.removeChild(lis[0]); 　　　　　　//移除第一个li，与上面不同，要考虑浏览器之间的差异
4.替换元素节点
replaceChild() 方法，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul;
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5.复制节点
cloneNode() 方法，用于复制节点，接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制

posted @ 2016-12-21 22:24 xin9984 阅读(552) 评论(0) 编辑收藏举报

刷新页面返回顶部

xin9984

「 JavaScript 篇 」

公告

「 JavaScript 篇」