9.23阿里前端电话面

中午接到电话约下午3点电话面，真的没抱有希望，果然20min面完一看流程，投的三个志愿就都全结束了。。。

1、es6里面filter是做什么的，reduce是做什么的，reduce的参数有哪些，reduce能实现filter的功能吗？？

filter方法接受两个参数：1、一个回调函数，不可省略，用于设置条件来过滤数组元素，并返回数组中满足条件的元素，语法“function(当前值,当前索引,数组对象){...}”；2、一个可选参数，可在回调函数中为其用this关键字的对象。

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

简单来讲： filter() 方法可以返回数组中满足指定条件的元素

Array.filter(callbackfn,thisArg);

callback:

function(currentValue,index,arr)

callbackfn的三个参数，currentValue，必须当前元素的值，index可选，当前元素的索引值，arr可选，当前元素属于的数组；对于数组中的元素，filter方法都会调用callbackfn函数一次。

thisArg可选，可选参数，可在 callbackfn 函数中为其用 this 关键字的对象。如果省略 thisArg，则 undefined 将用作 this 值。

返回值是一个包含回调函数为其返回 true 的所有值得新数组。如果回调函数为 array 的所有元素返回 false，则新数组的长度为 0。

对于数组中的每个元素，filter 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。不为数组中缺少的元素调用该回调函数。回调函数的用法与 map 相同。

除了数组对象之外，filter 方法可由具有 length 属性，且具有已按数字编制索引的属性名的任何对象使用

arr.reduce(callback,[initialValue])
//reduce 为数组中的每一个元素依次执行回调函数，

reduce对数组中每个元素执行一个自定义的累加器，将其结果汇总为单个返回值

形式：array.reduce((t,v,i,a) => {},initValue);

参数，：callback回调函数（必选）、initValue初始值（可选）；

callback回调函数的参数：

total（t):累计器完成计算的返回值（必选）:

value(v): 当前元素(必选)

index(i):当前元素的索引（可选）

array(a):可选

过程(重点看)

以t 作为累计结果的初始值，不设置t则以数组第一个元素为初始值
开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t
进入下一次循环，重复上述操作，直至数组最后一个元素
结束遍历，返回最终的t

var total = [0,1,2,3].reduce((acc,cur) => {
    return acc + cur
},0);
console.log(total);

//二维数组转一维度
var array = [[1,2],[3,4],[5,6]].reduce((acc,cur) => {
    return acc.concat(cur);
},[]);

//计算数组中每个元素出现的次数
let names = ['tom','jim','jack','tom','jack'];

const countNames = names.reduce((allNames,name) => {
    if(name in allNames){
        allNames[name]++;
    }else{
        allNames[name] = 1;
    }
    return allNames;
},{});

console.log(countNames);

const arraySum = (arr,val) => arr.reduce((acc,cur) => {
    return cur == val ? acc + 1 : acc + 0;
},0)

//数组去重
let arr = [1,2,2,2,3,4,4,8,5,6];
let result = arr.sort().reduce((init,current) => {
    if(init.length == 0 || init[init.length - 1] !== current){
        init.push(current);
    }
    return init;
},[]);

//利用reduce实现数组扁平化
const myFlat = (arr) => {
    return arr.reduce((pre,cur) => {
        return pre.concat(Array.isArray(cur) ? myFlat(cur):cur);
    },[])
}

reduce实现filter功能

//使用reduce取代map和filter
const numbers = [10,20,30,40];
const doubledOver50 = numbers.reduce((finalList,num) => {
    num = num * 2;
    if(num > 50){
        finalList.push(num);
    }
    return finalList;
},[]);

2、vue里面this.a的值改变，是如何更新的，数据与页面的更新，底层如何实现这个响应式的呢？

Object.defineProperty 监听修改读取数据

Object.defineProperty(obj, prop, descriptor) 可传入三个值，其作用是该方***直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
第一个值传入要修改的对象
第二个值传入该对象中要修改的key
第三个值是一个对象，里面有set 和get两种方法 set为值发生修改是所做的操作 get为读取改值时的操作

Object.defineProperty(obj,key,{
    set(newValue){
        value = newValue;
        console.log(key,value);
    },
    get(){
        console.log('获取key值的变化',key);
        return value;
    }
})

3、单页面式应用里面，点击链接进入详情页，这个url是如何改变的？

location.hash = '#me'

vue-router 默认hash模式，使用url的hash来模拟一个完整的url，于是url改变时，页面不会重新加载。push、pop

前端路由修改url，直接修改调用replaceState和pushState,还要维护状态对象，在对象中存储一个历史记录条目的信息，

这个讲的详细，https://www.modb.pro/db/422895

前端路由(指 vue-router), 它们修改 URL 并不是说修改了就算了, 直接修改调用 replaceState 和 pushState 就行了, vue-router 在修改路由的同时, 用来大量的精力去维护状态对象, 状态对象中存储了一个历史记录条目的信息(小细节, 这个状态对象序列化后的大小不能超过 640kb), 这个状态对象是前端路由传递信息, 维护状态, 正确导航的核心。

//其他不记得了，反正都好像没说到点子上