前端基础题

1. 什么是闭包？它有什么用途？举例说明。

2. 什么是this？它的指向如何确定？

3. 如何从一个已排序的数组中找到一个特定的元素？

4. 请举例说明 get 和 post 方式的区别。

5. 以下代码的输出是什么？

   console.log(1);
   setTimeout(() => {
     console.log(2);
   }, 0);
   Promise.resolve().then(() => {
     console.log(3)
   });
   console.log(4)
   

6. 如何在多个异步请求完成后执行回调？

7. 什么是跨域？为什么浏览器会限制 Ajax 跨域请求？

8. 请阐述事件委托的原理和优劣。

9. 请说明 null 和 undefined 之间的区别。

10. 如何使用 CSS 实现响应式布局？

答案：

1. 闭包是指函数可以访问其外部作用域的变量，即使函数在外部作用域之外被调用。它的主要作用是实现数据隐藏和封装，以及延长变量的生命周期。例如：

   function outer() {
     var counter = 0;
     function inner() {
       counter++;
       console.log(counter);
     }
     return inner;
   }
   var counter1 = outer(); // counter1 是一个函数，可以访问 outer 函数中的 counter 变量
   counter1(); // 输出 1
   counter1(); // 输出 2
   

2. this 是指在函数执行时当前对象的引用。它的指向可以通过函数的调用方式来确定，包括函数调用、方法调用、构造函数调用和 apply/call 调用。例如：

   var obj = {
     name: 'Tom',
     sayName: function() {
       console.log(this.name);
     }
   };
   obj.sayName(); // 输出 'Tom'
   

3. 可以使用二分查找算法，在每次迭代中将数组分成两个部分来进行搜索，直到找到目标元素或数组为空。例如：

   function binarySearch(arr, target) {
     var left = 0;
     var right = arr.length - 1;
     while (left <= right) {
       var mid = Math.floor((left + right) / 2);
       if (arr[mid] === target) {
         return mid;
       } else if (arr[mid] < target) {
         left = mid + 1;
       } else {
         right = mid - 1;
       }
     }
     return -1;
   }
   var arr = [1, 2, 3, 4, 5];
   console.log(binarySearch(arr, 3)); // 输出 2
   

4. get 和 post 是 HTTP 请求中的两种方法，主要区别在于传递数据的方式和安全性。get 方法通过 URL 向服务器传递数据，可以被缓存，但传输的数据量有限制并且不够安全；post 方法通过请求体向服务器传递数据，无数据量限制并且更安全，但无法被缓存。例如：

   // 使用 get 方法传递数据
   fetch('/api/data?id=123')
     .then(response => response.json())
     .then(data => console.log(data));
   // 使用 post 方法传递数据
   fetch('/api/data', {
     method: 'POST',
     body: JSON.stringify({ id: 123 }),
     headers: { 'Content-Type': 'application/json' }
   })
     .then(response => response.json())
     .then(data => console.log(data));
   

5. 输出顺序为 1、4、3、2。因为 setTimeout 和 Promise.resolve.then 都是异步操作，需要等到主线程执行完毕后才能执行，且 Promise.resolve.then 的优先级高于 setTimeout。

6. 可以借助 Promise.all 方法或 async/await 语法。例如：

   // 使用 Promise.all
   Promise.all([
     fetch('/api/data1').then(response => response.json()),
     fetch('/api/data2').then(response => response.json())
   ]).then(data => console.log(data));
   // 使用 async/await
   async function fetchData() {
     var data1 = await fetch('/api/data1').then(response => response.json());
     var data2 = await fetch('/api/data2').then(response => response.json());
     console.log([data1, data2]);
   }
   fetchData();
   

7. 跨域是指浏览器要求在进行 Ajax 请求时，不能访问不同域的资源，主要出于安全和用户隐私保护的考虑。这种限制是由浏览器实现的。如果要进行跨域请求，需要在后端进行相应的 CORS 配置，或者使用 JSONP 和代理等手段解决。

8. 事件委托是指将事件绑定在父元素上，通过冒泡机制来优化事件处理程序的绑定和移除操作，从而提高性能和代码复用性。它的优点包括：

   • 减少了事件处理程序的数量和内存占用；
   • 新添加的子元素自动继承了事件处理程序；
   • 代码更简洁，易于维护和扩展。

9. null 和 undefined 都表示无值，但含义略有不同。null 是一个表示空对象指针的特殊值，通常用于清空对象引用；undefined 表示变量或属性未定义或没有被赋值。例如：

   var obj = null; // obj 是一个空对象
   var str; // str 是一个未定义的变量
   console.log(obj === null); // 输出 true
   console.log(str === undefined); // 输出 true
   

10. 可以使用响应式的 CSS 技术，包括使用相对宽度和媒体查询等来适应不同的屏幕大小和设备类型。例如：

/* 使用相对宽度 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.item {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
/* 使用媒体查询 */
@media screen and (min-width: 768px) {
  .container {
    width: 80%;
  }
  .item {
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    width: 70%;
  }
  .item {
    width: 33.33%;
  }
}