前端开发常见面试题第二篇（JavaScript）

1.数组去重的方法

1.1ES6中的set 推荐

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。创建Set我们需要通过Set构造函数即 new Set()创建

//方案一：利用ES6中的set方法实现
let arr = [1,2,3,4,1,3,5,2];
let data = Array.from(new Set(arr));
console.log(data);// [1,2,3,4,5]

1.2 采用遍历的方法

var arr = [1,2,3,4,1,3,5,2];
function unique(arr) {
  for (var i = 0, len = arr.length; i < len; i++) {
    for (var j = i + 1, len = arr.length; j < len; j++) {
        if (arr[i] === arr[j]) {
            arr.splice(j, 1);
            j--; // 每删除一个数j的值就减1
         }
     }
     return arr;
  }
  console.log(unique(arr)); //[1,2,3,4,5]

1.3遍历+数组的include方法 推荐

const names=['kobe','james','durant','curry','james']
    const newNames = []
    for (const item of names) {
      if(!newNames.includes(item)){
        newNames.push(item)
      }
    }
	console.log(newNames2)  //['kobe', 'james', 'durant', 'curry']

2.遍历多维数组

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回(参数为提取嵌套数组的结构深度)

let arr = [
    [1,2],
    [3,4],
    [
      [6,7],
      [
        [8],
        [9,10]
      ]
    ]
];
console.log(arr.flat(Infinity));//[1,2,3,4,5,6,7,8,9,10]

3.使用箭头函数的优点

• 书写更加简洁
• 不绑定this,它的this指向定义时所在环境的this
• 作用域直观

4.数组splice方法

var arr = [1,2,3,4];
   // splice(start,length,n...)
   // start 修改数组的起始位置
   // length 控制需要删除或者修改的数据个数（长度）
   // n... 添加的数据
   // 添加
   arr.splice(2,0,'a');   //[1,2,'a',3,4]
   // 删除
   arr.splice(2,2);   //[1, 2]
   // 修改
   arr.splice(1,2,'a','b')   //[1,'a','b',4]

5.数组添加元素

var arr = [1,'a',{},function(){ alert('123')}];
        // 向后添加
        var n3 = '123';
        arr.push(n3);
        // 向前添加
        arr.unshift('lili','rose')
        //指定位置添加
        arr.splice(2,0,'a'); //2-起点位置; 0-要删除数据的个数(为0则不删除或修改元素); 'a'-带添加数据元素

6.数据类型

• 原始类型(基础类型,简单类型)：number (NaN也属于number类型，但它不是一个数字)、string、boolean、null、undefined、symbol
• 复合类型(复杂类型)：object （function不是一种数据类型，它也属于复杂类型object）

7.图片或者元素拖拽是如何实现的

8.变量提升

1.概念：js代码自上而下执行之前,浏览器首先会把带有var或者function关键字的进行提前“声明”或“定义“,这种预先处理的机制就是变量提升
2.注意几点：

• 只有声明本身会被提升，而赋值操作不会被提升。
• 变量会提升到其所在函数的最上面，而不是整个程序的最上面。
• 函数声明会被提升，但函数表达式不会被提升。

9.闭包的概念

1.概念：函数套函数 ，子函数调用父函数的局部变量
2.闭包的作用：

• 可以帮助我们存储局部变量值
• 利用闭包 给同事分配作用域 避免命名冲突

// 闭包 
    function fn(){
      var a = 5;
      function fn2(){
        console.log(a);
      }
      fn2();
    }
    fn();
// 闭包的作用 1:可以帮助我们存储局部变量值
var btns = document.querySelectorAll('button');

    for(var i=0;i<3;i++){
      (function tab(index){
        btns[index].onclick = function(){
          console.log(index);//函数套函数 ，子函数调用父函数的局部变量
        }
      })(i)
    }
// 2.利用闭包 给同事分配作用域 避免命名冲突
// 可以看到下面两个自执行函数虽然命名冲突了，但不会影响函数各自的执行
    (function(){
      var box = document.querySelector('.box');
      box.onclick = function(){
        alert(getComputedStyle(box)['width']);
      }
    })();
    (function(){
      var box = document.querySelector('.box2');
      box.onclick = function(){  
        alert(getComputedStyle(box)['backgroundColor']);
      }
    })();

10.promise和async/await区别与联系

。。。未完待续