前端面试笔试题回顾

一、数组去重

   对数组的操作总结如下：

   对数组无非就是要对数组进行元素的遍历、增加、删除、修改、插入、排序、查找（通过下标获取指定元素），对数组进行拼接、截取。  

         遍历： 直接采用for循环遍历;

         添加元素： push(value，value...)（在数组末尾添加）、unshift(value，value...)(在数组前面添加)

                       （这两个方法都返回新数组）;

         删除元素： pop()(删除数组最后一个元素)、shift(删除数组第一个元素)，

                        splice（index,count）（从指定位置的数组元素开始删除，删除count个元素）

                       （这三个方法都返回的都是删除的元素）；             

        修改数组中某个元素的值并在该元素位置插入值： splice（index，1，value，value...）

                                                                       （如果第二个参数为0，则直接插入值不删除指定位置的元素）；

        排序： reverse()（数组逆序排序，调用方法数组即改变），sort([function])(可以定义一个比较规则的function作为参数);

        查找： indexOf（value，[index]）（找指定元素的下标,第二个参数代表查找起点位置的索引），lastIndexOf()和indexOf()的

                  区别是lastIndexOf是从最后一个元素往前找；

        拼接： join([value]) (value为拼接的规则，例如join(" , "), 调用方法数组立即改变）,

                 concat（value，value...）(value可以是字符串也可以是数组，原数组不会变，返回的值才是新数组)；

        截取： slice（index1，index2）。

 

       对字符串的操作总结如下：

       对字符串进行拼接、裁剪、替换（同时可用于删除元素），获取指定字符串中元素的下标，获取字符串中某个位置的元素，

       大小写转换，去除字符串中的首尾空格(trim())。

       拼接： cancat（value，value...）,返回的是一个副本，和数组中的cancat用法类似。

       裁剪： slice（index1，[index2]）, substring（index1，[index2]）, substr（index1，[index2]）。

       替换： replace（value1,value2），value1可以是要匹配的值，可以是字符串也可以是正则，value2是要替换的新元素。

       获取指定元素下标： indexOf(value，[下标])从前往后搜索/lastIndexOf(value，[下标])从后往前搜索，和数组中的方法类似；

       获取指定下标的元素： charAt(index),chatCodeAt(index)（获取的字符编码）。

       大小写转换方法： toLocaleUpperCase()/toUpperCase()   toLocalLowerCase()/toLowerCase();

       注：字符串和数组中都有cancat、slice、indexOf/lastIndexOf。

 

   去重的方法有很多种，indexOf()方法存在浏览器兼容的问题，所以下面的去重并不是万能的方法。以下两种只针对数组中元素为数值的情况

/*
 * 对数组去重
 */
Array.prototype.uniquel1 = function () {
	var i = this.length;
	var arr = [];
	
	while(i--) {
		if(arr.indexOf(this[i]) === -1) {
			arr.push(this[i]);
		}
	}
	return arr.sort();
}
var arr2 = [1,2,3,2,4,7,9,4];
console.log(arr2.uniquel1());

 这里列举第二种写法：

Array.prototype.uniquel2 = function () {
	var n = {},
	    r = [];
	    
	for(var i = 0, len = this.length; i < len; i++) {
		if(!n[this[i]]) {
			n[this[i]] = true;
			r.push(this[i]);
		}
	}
	return r;
};

 补充：

  对象通过点属性名的方式访问对象中的属性值，属性名不能为数字，数字是不合法的，只能通过[]来访问。

  var obj = {"1":"a","2":"b"};
  console.log(obj[1]+" "+obj["1"]);// a a

  javascript中[]中的数字会被javascript引擎调用toString()方法转化成一个String类型的变量。

 

二、关于闭包

 JavaScript中的闭包：http://www.cnblogs.com/yy95/diary/2016/08/28/5811375.html

 学了的知识需要融会贯通，举一反三。

 总结： 当函数第一次被调用时，会创建一个执行环境（全局环境和局部环境）及相应的作用域链，并把作用域链赋值给一个内部属性[scope]（其实就是一个指针

          指向的是一个作用域列表），当函数中创建了一个闭包，这个闭包的执行环境包括：匿名函数中包含的局部变量对象、全局变量对象，父环境中的变量对象。

          对于存在闭包的函数，当函数被返回之后，其执行环境的作用域链会立即被销毁，但是活动对象不会立即被销毁，因为匿名函数的执行环境的作用域链是不会

          在函数被返回之后立即被销毁的，所以匿名函数的作用域链会一直引用着外部函数的活动对象，直到我们手动解除对匿名函数的引用（将匿名函数的引用设置

          为null）。

         下面的函数，f1、f2分别引用着匿名函数，当第一次调用f1的时候i打印为0，此时f1中已经包含了外部函数中的变量对象i，因为没有手动对解除f1对匿名函数的引用，

         所以f1中一直包含着变量i，第二次调用f1时便在原有i的基础上加1.

    

function bibao() {
	
  var i = 0;
  return function () {
  	 console.log(i++);
  }
}

var f1 = bibao();
var f2 = bibao();
f1();
f1();
f2();
//结果为0 1 0

 

 三、文档流

    窗体自上而下被分成一行行，并在每行中至上而下，从左到右排放元素，即文档流。

 

四、给行级元素设置宽高的问题

   为何img、input等内联元素可以设置宽、高：http://blog.csdn.net/jlds123/article/details/8647448

   元素可分为替换元素和不可替换元素，或块级元素和行内元素（也叫内联元素）。

   块级元素例如： <div>、<p>、<li> 、<h1>到<h6>等

   行级元素例如： <img>、<input>、<textarea>、<a>、<span>、<strong>等

   块级元素都是不可替换元素，可以设置元素高、宽。

   行内元素包含不可替换元素和可替换元素，只有行内可替换元素才可以设置高、宽（替换元素有一个内在的尺寸），例如：<img>、<input>、<textarea>,

   <a>等不可替换元素不可以设置宽、高。

   对于让一个不可设置宽高的行内元素能够设置宽高，可以将其display属性设置成：block、inline-block、list-item等值，让元素成为一个块级元素。

   补充：

      按照w3c标准，行内元素中是不能嵌套块级元素的。