前端面试中容易让你忽略的知识点（一）

前言

最近在看一些网上的面试题的时候，发现有很多零碎的、容易被忽略的知识点，有些是概念性的技术点，有些是不经常用的冷知识，不经常用可能印象不深刻，在这里做一个简单的小总结。

（以下只是我看到的，觉得有必要整理的，后续会更新～）

1. 实现多行文本溢出显示...

单行文本溢出显示省略号这可能比较常用，多行溢出显示还真用的不多。

贴代码：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
复制代码

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。
   为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
复制代码

2. 让图文不可被复制

有时候可能有要维护版权，禁止盗图之类的这种需求。。。

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
复制代码

思路：

1、答案区域监听copy事件，并阻止这个事件的默认行为。

2、获取选中的内容（window.getSelection()）加上版权信息，然后设置到剪切板（clipboarddata.setData()）。

3. 盒子垂直水平居中

面试必问的题目，虽然很简单，也有多种实现方法，在这里列出：

 1、定位 盒子宽高已知
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left:-自身一半宽度;
 margin-top: -自身一半高度;

2、table-cell布局
父级 display: table-cell; vertical-align: middle;
子级 margin: 0 auto;

3、定位 + transform ; 适用于 子盒子 宽高不定时；
    position: relative / absolute;
    /*top和left偏移各为50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
    transform: translate(-50%, -50%);

4、flex 布局
    父级： 
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;

再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);
复制代码

4. 快速的让一个数组乱序排列

    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);
复制代码

结果：

原理：

首先 sort() 的参数是一个比较函数;

如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。

即 a 和 b 是两个将要被比较的元素：

1. 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
2. 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。
3. 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。

所以，比较函数格式如下：

function compare(a, b) {
  if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
复制代码

要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

function compareNumbers(a, b) {
  return a - b;
}
复制代码

一开始这个数组是按照升序排列的，在比较函数里，当Math.random() > 0.5 的时候，当前的这个数和他后边的数不会互换位置，进行下一轮比较，以此类推，直到 Math.random() < 0.5 的时候，当前数和他后边的数互换位置，一共进行9次排列。

进程如下：

5.数组去重

原生方法用indexOf()循环当前数组即可去重，但这不是我说的重点

其实用ES6的方法，一行代码就搞定，谁还会去写那三五行的for循环？

ES6中新增了Set数据结构，类似于数组，但是 它的成员都是唯一的 ，其构造函数可以接受一个数组作为参数。

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
 let set = new Set(array);
 console.log(set);
 // => Set {1, 2, 3, 4, 5}
复制代码

ES6中Array新增了一个静态方法Array.from，可以把类似数组的对象转换为数组。

改进后：

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = Array.from(new Set(array));
console.log(set);
// => Set {1, 2, 3, 4, 5}
复制代码

还是附上ES5的方法吧：

function unique(arr) {
    var newArr = [];
    for(var i=0; i < arr.length; i++) {
        if (newArr.indexOf(arr.[i]) === -1) {
            newArr.push(arr[i])
        }
        return newArr;
    }
}
复制代码

6. javascript的typeof返回哪些数据类型?

   object number function boolean undefined string
复制代码

(面试的时候被问到过，回答的不完整，心痛。。。)

7. javascript的本地对象，内置对象和宿主对象?

1. 本地对象为array obj regexp等可以new实例化，具体有：

Object、Function、Array、String、Boolean、Number、Date、RegExp、
Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
复制代码

2. 内置对象为Global Math 等不可以实例化的 宿主为浏览器自带的document,window 等。

3. 所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。