前端面试题总结3-JS篇

1. typescript和js的区别是什么
   区别：
   1、JavaScript是轻量级的解释性脚本语言，TypeScript是面向对象的编程语言。
   2、TypeScript中的数据要求带有明确的类型，JavaScript不要求。
   3、TypeScript引入了JS中没有的“类”概念。
   TypeScript 的优势：
   静态输入
   大型的开发项目
   更强的生产力
   JavaScript 的优势：
   人气
   学习曲线
   本地浏览器支持（TypeScript 代码需要被编译（输出 JavaScript 代码），这是 TypeScript 代码执行时的一个额外的步骤。）
   不需要注释
   灵活性

2. 宏任务和微任务,并了解执行顺序
   　[宏任务：macro task]
   - 定时器
   - 事件绑定
   - ajax
   - 回调函数
   - Node中fs可以进行异步的I/O操作
   　[微任务：micro task]
   - Promise(async/await) => Promise并不是完全的同步，当在Excutor中执行resolve或者reject的时候，此时是异步操作，会先执行then/catch等，当主栈完成后，才会再去调用resolve/reject把存放的方法执行
   - process.nextTick （node中实现的api，把当前任务放到主栈最后执行，当主栈执行完，先执行nextTick，再到等待队列中找）
   　　 - MutationObserver （创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。）
   　　
   执行顺序优先级：SYNC => MICRO => MACRO

3. 简述一下原型链的原理
   每个函数对象都有一个prototype属性，这个属性的指向被称为该函数对象的原型对象，简称原型。

4. 递归函数及优化方法
   自己调用自己，称为递归调用
   递归公式：F(n)=F(n-1)+F(n-2)

递归计算阶乘的例子
function f(num){ 
	if(num<1){ 
    	return 1; 
    }else{ 
		return f(num-1)*num; 
    } 
} 
console.log("10!的结果为："+f(10)); 

//斐波拉契题(兔子生兔子题目)--从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子对数为多少
// 产量分析：1， 1， 2， 3， 5， 8， 13， 21 。。。
// 第n个月的兔子总数  =  第n-1个月的兔子总数 + 第n-2个月的兔子总数
// 问题： 求任意月兔子的总数
 
function func( n )
{
    if (n == 0 || n == 1)
    {
        return 1;
    }
    return func(n-1) + func(n-2);
}
 
var a = func(22);
console.log(a);

4. 说一下平时用过的lodash方法
   _.chunk(array, [size=1])：
   将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
   _.concat(array, [values])：concat()
   创建一个新数组，将array与任何数组 或 值连接在一起
   _.drop(array, [n=1])：
   创建一个切片数组，去除array前面的n个元素。（n默认值为1。）
   _.dropRight(array, [n=1])：
   创建一个切片数组，去除array尾部的n个元素。（n默认值为1。）
   .fill(array, value, [start=0], [end=array.length])：fill()
   使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。
   .findIndex(array, [predicate=.identity], [fromIndex=0])：
   该方法类似.find，区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身。
   find()、findIndex()

5. findIndex() 方法用法
   findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
   findIndex() 方法为数组中的每个元素都调用一次函数执行：
   当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
   如果没有符合条件的元素返回 -1
   注意: findIndex() 对于空数组，函数是不会执行的。
   注意: findIndex() 并没有改变数组的原始值。

6. 介绍map和forEach的使用区别，及特点，forEach在使用过程中的坑
   forEach 会改变原数组，map不会
   forEach没有返回值，map 会返回一个新的数组
   forEach在使用过程中的坑：
   1.forEach不支持break
   那forEach能不能跳出循环呢？可以，不过不是使用break，而是结合try catch操作
   2.forEach中使用return无效
   3.forEach删除自身元素index不会被重置

7. 说一下reduce和map的区别
   reduce为累计器，reduce虽然可以用来处理数据结构并进行数据结构的重组，但是规范来讲，一般不采取这样的做法，通常只是用reduce进行累计计算，返回一个对象或数值型的累积结果

map为迭代器，通常用于处理数据结构的所有数据，并进行数据结构的重构
reduce()：累加器和数组中的每个元素（从左到右）应用一个函数

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
// total is 6

8. 多维数组变一位数组的思路，并手写

9. let = [1,[2,3],[4,5,[6,7]]];
   方法一：　　
   　　let result_str = arr.join(‘,’).split(‘,’);
   　　console.log(result_str) // [1,2,3,4,5,6,7]

10. 如何用es5实现一个手动继承的类。
    ES5/ES6中JS实现继承的几种方式

11. 简述一下es6中 Map 和 Set 类的用法和区别

Map

Map是一组键值对的结构，具有极快的查找速度。初始化Map需要一个二维数组，或者直接初始化一个空Map。
Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value，所以多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set

Set也是一组key的集合，与Map类似。但是区别是Set不存储value，并且它的key不能重复。
创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素会在Set中自动被过滤（注：数字3和字符串’3’是不同的元素）：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

Set具有以下方法：

//通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

//通过delete(key)方法可以删除元素
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}


add(value)：添加某个值，返回Set结构本身。 
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 
has(value)：返回一个布尔值，表示该值是否为Set的成员。 
clear()：清除所有成员，没有返回值。

总结

1、Map 对象是键值对集合，和 JSON 对象类似，但是 key 不仅可以是字符串还可以是其他各种类型的值包括对象都可以成为Map的键

var map = new Map();
var obj = { name: '小缘', age: 14 };
map.set(obj, '小缘喵');
map.get(obj); // 小缘喵
map.has(obj); // true
map.delete(obj) ;// true
map.has(obj); // false

2、Set 对象类似于数组，且成员的值都是唯一的

11. 简述一下javaScript 的map和reduce简单理解

    map方法

    Map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新的数组。

var valu = ['a','b','c'];

valu = valu.map(function(item){
	return item + '1'
})

console.log(valu);

输出结果如下：

["a1", "b1", "c1"]

reduce 方法

reduce 方法是让数组的前项和后项做计算，并累计最终的值。

var valu = [1,2,3];

valu = valu.reduce(function(prev,next){

console.log("prev = " + prev);

console.log("next = " + next);

return prev + next;

});
输出结果如图所示：
prev = 1
next = 2
prev = 3
next = 3
6

从输出的结果可以看出 prev 是计算的和，而next是下一元素的值。reduce函数还有第二个参数，第二个参数是设置prev的初始值，当有值的时候，prev的初始值就是第二个参数的值，当没有的时候是数组元素的第一个元素的值。