最近遇到的前端面试题

最近在找工作，记录一下最近遇到的面试题，整理一下加深记忆再接再厉！！！

1.数组去重方法

方法一：Set方法

var items=new Set([1,2,3,4,3]);

var arry=Arry.from(items); 

知识点：

（1）Arry.from将类数组对象或可迭代对象转化为数组。

（2）Set对象允许你存储任何类型的唯一值，不管是原始值还是对象引用

方法二：filter+indexOf

var items=[1,2,2,4,3];

let newArr=arr.filter((items,index)=>{

知识点：

（1）filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

（2）indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。没有指定字符为-1

方法三： includes

var items=[];

知识点：

（1）includes:方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

2.实现数组合并

方法一：concat

var params = ['hello', true, 3];

var other = [1, 2].concat(params);

方法二：扩展运算符

var params = ['hello', true, 3];

var other = [1, 2, ...params];

3.快速扰乱数组排序

 var arr = [1,2,4,3,5,10,7,8,9,6];

     arr.sort(function(){ 

     return Math.random() - 0.5;

 })

知识点：

（1）sort() 方法用于对数组的元素进行排序。参数必须是数组

4.数组扁平化

var arr = [1, [2, [3, 4]]];

function flatten(arr) {

    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }

    return arr;
}

console.log(flatten(arr))

知识点：some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
5、为什么存在深拷贝和浅拷贝，两者的区别，以及简单的实现

     因为js存在基本类型和引用类型

     浅拷贝：会将对象的属性值一一复制，当某属性值是引用类型时，复制的是它的引用，如果引用指针                      指向的对象被改变时，拷贝下来的值也会跟着改变

     深拷贝：拷贝则会递归到该属性值为基本类型再复制，拷贝前后的两者互不影响

      实现浅拷贝：Object.assign()；Array.prototype.slice()；扩展运算符 ...

      实现深拷贝：JSON.parse(JSON.stringify())

5、函数防抖和函数节流的区别，应用场景

      （1）防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

                         b.搜索联想词功能

const debounce = (fn, delay) => {        console.log(this)        let timer = null;        return (...args) => {            clearTimeout(timer);            timer = setTimeout(() => {                fn.apply(this, args);            }, delay);        };    };    // 处理函数    function handle() {        console.log(Math.random());    }    $("#myBtn").click(debounce(handle, 1000))

（2）节流函数原理：规定在一个单位时间内，只触发一次函数，如果这个单位时间内触发多次，只有一次生效

  应用场景：a.拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动

                   b.缩放场景：监控浏览器resize

   const throttle = (fn, delay) => {        let flag = true;        return (...arg) => {            if (!flag) return;             flag = false;              setTimeout(() => {                fn.apply(this, arg);                flag = true            }, delay);        }    }    function mythro(){        console.log(Math.random())    }    $("#myBtnThr").click(throttle(mythro,1500))

6、css选择器以及优先级

• ！important 
• 内联样式 （1000）
• ID选择器（100）
• 类选择器/属性选择器/伪类选择器（10）
• 元素选择器/伪元素（1）