前端面试题

后面有新的会慢慢添加及更新~~~

1、Array.from() 和 Array.of()的区别

Array.from()：更多的是对参数进行可迭代遍历；
Array.of()：是对整个参数的转换；

// Array.from
Array.from("abcc");  // ['a','b','c','c']
Array.from("1234");  // ['1','2','3','4']

// Array.of();
Array.of("abcc"); // ['abcc']
Array.of("1234"); // ['1234']
Array.of('1','2','3','4'); // ['1', '2', '3', '4']

除此以外，Array.from()还可以接收第二个参数和第三个参数。

// Array.from(iterable,?callbackfn,?thisArg);  thisArg:执行回调函数 callbackfn时 this 对象。
let arr = [1, 2, 3, 4];
Array.from(arr, (i) => i * 2); // [2,4,6,8]
Array.from(arr, function (i) { return i * this.a }, { a: 4 }); // [4,8,12,16]

2、数组怎么去除空值

// 方法一：forEach
let arr = [1, 2, '', 0, 3];
let resArr = [];
arr.forEach(item => {
    if (item) resArr.push(item);
})
console.log(resArr);  // [1,2,3]

// 方法二：for...of
for(let i of arr){
    if(i) resArr.push(i);
}
console.log(resArr);  // [1,2,3]

// 方法三：filter
let arr3 = [1, 2, '', 0, 3];
let resArr3 = arr3.filter(item => {
    if (item) return item
})
console.log(resArr3);  // [1,2,3]

// 方法四：splice
let arr = [1, 2, '', 0, null, 3];
for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 0 || arr[i] === "" || arr[i] === null || typeof (arr[i]) === undefined) {
      arr.splice(i, 1);
      i -= 1;
  };
}
console.log(arr);  // [1,2,3]

3、http1.0 和 http2.0的区别

http1.0的劣势：

• http1.0一次只允许在一个TCP连接上发起一个请求；(TCP：传输层)
• 单项请求，只能在客户端发起；
• 请求报文和响应报文的首部信息沉余量大；
• 数据未压缩，导致数据的传输量大。

http2.0的特性：

• 二进制分帧
• 首部压缩（请求报文和响应报文的首部信息）
• 请求优先级
• 服务器推送
• 多路复用

4、parseFloat()、parseInt()、Number()的区别

parseFloat()、parseInt()遇到非数字字符时，会停止解析，
Number()遇到非数字字符时，会将非数字字符转化为NaN。

5、实现数组随机排序

// （1）使用数组 sort 方法对数组元素随机排序，让 Math.random() 出来的数与 0.5 比较，如果大于就返回 1 交换位置，如果小于就返回 -1，不交换位置。
 
var arr = [2, 3, 4, 7, 1, 5, 6];  // 声明数组

function randomSort(a, b) {
     return Math.random() > 0.5 ? -1 : 1;
}
 
arr.sort((a,b)=>{
   return randomSort(a,b);
});
console.log(arr, 'arr');
 
//  缺点：每个元素被派到新数组的位置不是随机的，原因是 sort() 方法是依次比较的。


// （2）随机从原数组抽取一个元素，加入到新数组
var arr = [2, 3, 4, 7, 1, 5, 6];
var b = '1234';

function fn(value) {
   if (!Array.isArray(value) || value.length <= 1) return;  // 判断是否为数组
   let result = [];  // 声明新的数组
   // 循环数组
   while (value.length > 0) {
   	  let index = Math.floor(Math.random() * value.length);  // 获取随机索引
      result.push(value[index]);
      value.splice(index, 1);
   }
   return result;  // 返回新的数组
}
    
let res = fn(arr);
console.log(res, 'res');

// （3）随机交换数组内的元素（洗牌算法类似）
function randomSort(arr) {
  var index,
    randomIndex,
    temp,
    len = arr.length;
 
  for (index = 0; index < len; index++) {
    randomIndex = Math.floor(Math.random() * (len - index)) + index;
 
    temp = arr[index];
    arr[index] = arr[randomIndex];
    arr[randomIndex] = temp;
  }
 
  return arr;
}
console.log(randomSort(arr),'arr');


// es6 解构赋值
var array = [2, 3, 4, 7, 1, 5, 6]; 
function randomSort(array) {
  let length = array.length;
 
  if (!Array.isArray(array) || length <= 1) return;
 
  for (let index = 0; index < length - 1; index++) {
    let randomIndex = Math.floor(Math.random() * (length - index)) + index;
 
    [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
  }
 
  return array;
}
console.log(randomSort(array),'array');

6、__proto__和prototype

1. __proto__是每个对象都有的一个属性（null 除外），而prototype是函数独有的属性。
2. __proto__是当前对象的原型对象（隐式原型），而prototype是当前构造函数的原型对象（显式原型）。