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, 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), 这个状态对象是前端路由传递信息, 维护状态, 正确导航的核心。
//其他不记得了，反正都好像没说到点子上
类似资料：