前端面试（代码）

一
JS数组去重

Array.prototype.unique1 = function () {

  var n = []; //一个新的临时数组

  for (var i = 0; i < this.length; i++) //遍历当前数组
  {

      //如果当前数组的第i已经保存进了临时数组，那么跳过，

      //否则把当前项push到临时数组里面

     if (n.indexOf(this[i]) == -1) 
       n.push(this[i]);

  }
  return n;
}

Array.prototype.unique2 = function()
{

   var n = {},r=[]; //n为hash表，r为临时数组

   for(var i = 0; i < this.length; i++) //遍历当前数组
    {

        if (!n[this[i]]) //如果hash表中没有当前项
        {

            n[this[i]] = true; //存入hash表

            r.push(this[i]); //把当前数组的当前项push到临时数组里面

        }

    }
    return r;
}

Array.prototype.unique3 = function()
{

    var n = [this[0]]; //结果数组

    for(var i = 1; i < this.length; i++) //从第二项开始遍历
    {

        //如果当前数组的第i项在当前数组中第一次出现的位置不是i，

        //那么表示第i项是重复的，忽略掉。否则存入结果数组

        if (this.indexOf(this[i]) == i) n.push(this[i]);

    }

    return n;

}

arr = [...new Set(arr)]; //ES6新方法

二
js中for循环中的setTimeout()正常工作
我们希望每隔2秒依次输出1,2,3

for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
                console.log(i);
            },2000);
}

实际上却是，在间隔2秒后直接输出3个3。
原因在于计时器是共享一个i，当for循环结束时，i已经变成3，所以这时就会多次弹出3.所以通过定义一个函数来实现中介的作用，从而创建了变量的值的副本。

function doSetTimeout(i) {
  setTimeout(function() { console.log(i); }, 2000);
}

for (var i = 1; i <= 3; ++i)
  doSetTimeout(i);

这时虽然输出1,2,3，但却是间隔2秒后一次性输出，并未达到我们要求的每隔2秒输出一个要求。所以这时我们要调整setTimeout的时间间隔

function doSetTimeout(i) {
  setTimeout(function() { console.log(i); }, 2000*i);
}

for (var i = 1; i <= 3; ++i)
  doSetTimeout(i);

三

<SCRIPT LANGUAGE="JavaScript">
var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);
alert(bb);
</SCRIPT>

结果：依次弹出 2和1
分析：函数体内，bb并没有使用var来定义，按理说这个bb在预处理的时候应该是window的属性。但在这里，函数声明的时候，带了一个参数bb，也就是相当于在函数体内声明了var bb。所以，函数里的bb就是函数活动对象的属性。所以函数执行时会输出2。函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。如果声明函数时，把参数那里的bb去掉，这段代码执行起来，结果就是弹出 2 2

四
有一个长度未知的数组a，如果它的长度为0就把数字1添加到数组里面，否则按照先进先出的队列规则让第一个元素出队。

分析：这道题主要是考核了数组的队列方法和栈方法。

a.length === 0 ? a.push(1) : a.shift();

五

var test = (
   function(a) {
     this.a = a;
     return function(b) {         return this.a + b;     }
   }
   (function(a, b) {
        return a;  }(1, 2)
   )
); 
console.log(test(4)); 

输出5，考查自执行函数和闭包

六
请把<ul><li>第1行</li><li>第2行</li>...</ul>（ul之间有10个li元素）插入body里面，注意：需要考虑到性能问题。
分析：这题主要考察了dom操作。插入节点操作的可以使用insertBefore和appendChild方法，随便用一个都行。但是，题目要求要考虑性能问题，这才是关键，因为，JavaScript操作dom的开销是很大的！提高性能就要减少dom操作。因此，我当时使用了下面的方法，只操作一次dom就够的了：

var lis = ""; 
var ul = document.createElement("ul");   //把li以字符串形式生成
for(var i = 1; i <= 10; i++) {     
   lis += "<li>第" + i + "行</li>"; 
}   // 最后通过innerHTML插入ul里面
ul.innerHTML = lis;   //这里才操作dom，把ul插入到body
document.body.appendChild(ul);

七
不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标。
（1）使用setInterval

var a = [],     i = 0;
var interval = setInterval(function() {
                  i < 100 ? a.push(i++) : clearInterval(interval);
                }, 0);

（2）使用数组

var a = Array(100).join(",").split(",").map(
  function(item, index) {
 　　return index;
  }
);
先是创建一个数组，然后，通过join方法把它转成字符串，然后，再通过split方法把字符串转成数组，这时候，它就拥有100个值为空的元素了，然后，再通过map函数，改变这些元素的值即可。

（3）es6方法

var arrNew = Array.from({length: 100},(v,k)=>k);
console.log(arrNew );

var arr = new Array(100).keys();
console.log(Array.from(arr));

错误方法：

var a = new Array(100);
a = a.map(function(item, index) {     return index; });

因为JavaScript数组是稀疏数组，比如，通过new Array(100)创建一个新的数组的，虽然他的长度是100，但是实际上他是一个空数组，也就是说没有真实存在的元素。所以使用map方法，根本不会去遍历这个数组100次的。

八
实现数组乱序

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],     sign = 1;  a.sort(function(a, b) {
     //因为Math.random产生的数在0-1之间
    //所以0.5两边的概率是相等的
    //大于0.5时为升序，小于0.5时为降序
    sign = (Math.random() > 0.5) ? 1 : -1;
    return (a - b) * sign;   });

九
有一个长度为100的数组，请以优雅的方式求出该数组的前10个元素之和
分析：其实，对于数组求和有很多种方法，也很简单。但是，这题有两个限制条件：优雅的方式、前10个元素。对于“前10个元素”这个限制条件可以使用Array.prototype.slice()方法来截取，对于”优雅的方式”，我的理解是应该尽可能使用数组自带的方法，最好可以使用高阶函数！所以我觉得应该是Array.prototype.reduce()方法。

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], sum = 0;
sum = a.slice(0, 10).reduce(function(pre, current)  {
                                　return pre + current; });   console.log(sum); //55

注意， Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算

十

var User = {     count: 1,
                 getCount: function() {     return this.count;   }
            }; 
console.log(User.getCount());  //输出1
var func = User.getCount;   
console.log(func());   //输出Undefined

这里func的上下文是window，因此已经失去了count属性。改进如下，使用Function.prototype.bind

var func = User.getCount.bind(User);
console.log(func());   

十一
解析URL地址
这里的方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性

function parseURL(url) {
   var a =  document.createElement('a');
   a.href = url;
   return {
       source: url,
       protocol: a.protocol.replace(':',''),
       host: a.hostname,
       port: a.port,
       query: a.search,
       params: (function(){
           var ret = {},
               seg = a.search.replace(/^\?/,'').split('&'),
               len = seg.length, i = 0, s;
           for (;i<len;i++) {
               if (!seg[i])
                { continue; }
               s = seg[i].split('=');
               ret[s[0]] = s[1];
           }
           return ret;
       })(),
       file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
       hash: a.hash.replace('#',''),
       path: a.pathname.replace(/^([^\/])/,'/$1'),
       relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
       segments: a.pathname.replace(/^\//,'').split('/')
   };
}

用法

var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

十二
重构如下两栏布局

<div class="content"><div class="aside"></div><div class="main"></div></div>

/*Qzone版*/
.aside{float:left;width:170px;}
.main{float:left;width:790px;}
/*朋友网版*/
.aside{float:left;width:170px;}
.main{overflow:hidden;#zoom:1;}
/*Facebook版*/
.aside{float:left;width:170px;}
.main{margin-left:170px;zoom:1;}
/*Yahoo版*/
.content{position:relative;zoom:1;}
.aside{position:absolute;left:0;top:0;width:170px;}
.main{margin-left:170px;zoom:1;}
/*Google版*/
.aside{display:inline-block;width:170px;}
.main{display:inline-block;width:790px;}

Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。
Yahoo和Google两栏都未用浮动，唯一不同的是Yahoo用了绝对定位的方法，而谷歌用了inline-block，Google已经宣布旗下一些产品放弃对IE8 的支持，所以Google可以大胆的使用inline-block去实现布局，不用去为其他低版本浏览器写一大堆的hack。

十三
常见邮箱验证
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

？？？？？？？？？讲一下css的动画（我不太了解， 就直说不太了解，然后她让我试着写了下，就写了些印象里的，她说差不多）
猜一下，如果要绑定动画的话，在哪里绑定？怎么绑定？
如果是行内元素呢？如果字体font-size是10px，行高line-height是2px，显示多高？（依然不知道，猜测是2px，剩余的部分会被隐藏掉）。刚才试了下，发现打错了:

十四
找出整型数组中乘积最大的三个数

var unsorted_array = [-10, 7, 29, 30, 5, -10, -70];

computeProduct(unsorted_array); // 21000

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

// greatest product is either (min1 * min2 * max1 || max1 * max2 * max3)
function computeProduct(unsorted) {
  var sorted_array = unsorted.sort(sortIntegers),
    product1 = 1,
    product2 = 1,
    array_n_element = sorted_array.length - 1;

  // Get the product of three largest integers in sorted array
  for (var x = array_n_element; x > array_n_element - 3; x--) {
      product1 = product1 * sorted_array[x];
  }
  product2 = sorted_array[0] * sorted_array[1] * sorted_array[array_n_element];

  if (product1 > product2) return product1;

  return product2
};

十五
给定两个数组，要求求出两个数组的交集，注意，交集中的元素应该是唯一的。

var firstArray = [2, 2, 4, 1];
var secondArray = [1, 2, 0, 2];

intersection(firstArray, secondArray); // [2, 1]

function intersection(firstArray, secondArray) {
  var hashmap = {};
  var intersectionArray = [];

  firstArray.forEach(function(element) {
    hashmap[element] = 1;
  });

  secondArray.forEach(function(element) {
    if (hashmap[element] === 1) {
      intersectionArray.push(element);
      hashmap[element]++;
    }
  });

  return intersectionArray;
}

十六
给定两个字符串，判断是否颠倒字母而成的字符串，譬如Mary与Army就是同字母而顺序颠倒：

var firstWord = "Mary";
var secondWord = "Army";

isAnagram(firstWord, secondWord); // true

function isAnagram(first, second) {
  // For case insensitivity, change both words to lowercase.
  var a = first.toLowerCase();
  var b = second.toLowerCase();

  // Sort the strings, and join the resulting array to a string. Compare the results
  a = a.split("").sort().join("");
  b = b.split("").sort().join("");

  return a === b;
}

十七
判断某个字符串是否为回文字符串，譬如racecar与race car都是回文字符串：

function isPalindrome(word) {
  // Replace all non-letter chars with "" and change to lowercase
  var lettersOnly = word.toLowerCase().replace(/\s/g, "");

  // Compare the string with the reversed version of the string
  return lettersOnly === lettersOnly.split("").reverse().join("");
}

十八
判断是否为 2 的指数值

// For the non-zero case:
function isPowerOfTwo(number) {
  return number & (number - 1) === 0;
}

// For zero-case:
function isPowerOfTwoZeroCase(number) {
  return (number !== 0) && ((number & (number - 1)) === 0);
}

十九
二进制转换

function decimalToBinary(digit) {
  if(digit >= 1) {
    if (digit % 2) {
      return decimalToBinary((digit - 1) / 2) + 1;
    } else {
      // Recursively return proceeding binary digits
      return decimalToBinary(digit / 2) + 0;
    }
  } else {
    // Exit condition
    return '';
  }
}

二十
创建一个函数来判断给定的表达式中的大括号是否闭合：

var expression = "{{}}{}{}"
var expressionFalse = "{}{{}";

isBalanced(expression); // true
isBalanced(expressionFalse); // false
isBalanced(""); // true

function isBalanced(expression) {
  var checkString = expression;
  var stack = [];

  // If empty, parentheses are technically balanced
  if (checkString.length <= 0) return true;

  for (var i = 0; i < checkString.length; i++) {
    if(checkString[i] === '{') {
      stack.push(checkString[i]);
    } else if (checkString[i] === '}') {
      // Pop on an empty array is undefined
      if (stack.length > 0) {
        stack.pop();
      } else {
        return false;
      }
    }
  }

  // If the array is not empty, it is not balanced
  if (stack.pop()) return false;
  return true;
}

二十一
二分搜索
（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。
（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。
（3）如果某一步数组为空，则表示找不到目标元素。

     // 非递归算法
        function binary_search(arr, key) {
            var low = 0,
                high = arr.length - 1;
            while(low <= high){
                var mid = parseInt((high + low) / 2);
                if(key == arr[mid]){
                    return  mid;
                }else if(key > arr[mid]){
                    low = mid + 1;
                }else{
                    high = mid -1;
                }
            }
            return -1;
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr,10);
        alert(result); // 9 返回目标元素的索引值       

    // 递归算法
        function binary_search(arr,low, high, key) {
            if (low > high){
                return -1;
            }
            var mid = parseInt((high + low) / 2);
            if(arr[mid] == key){
                return mid;
            }else if (arr[mid] > key){
                high = mid - 1;
                return binary_search(arr, low, high, key);
            }else if (arr[mid] < key){
                low = mid + 1;
                return binary_search(arr, low, high, key);
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr, 0, 13, 10);
        alert(result); // 9 返回目标元素的索引值  

二十二
手写数组快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为”基准”（pivot）。
（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

 var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　//这里注意splice返回，是一个包含被删除项目的新数组，所以执行后arr已经删除元素，而【0】则代表被删除的pivot
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));
};