笔记

1.用reduce实现map

Array.prototype.myMap = function(fn, thisArg){
    var res = [];
    thisArg = thisArg || [];
    this.reduce(function(pre, cur, index, arr){
      res.push(fn.call(thisArg, cur, index, arr));
  }, []);
  return res;
}
var arr = [2,3,1,5];
arr.myMap(function(item,index,arr){
    console.log(item,index,arr);
})
let res = arr.myMap(v => v * 2);
console.log(res); // [4,6,2,10]

2.字符串处理

const user = { };
set(user, "name", "张三");
set(user, "image.url.host", "xxxx");
set(user, "image.width", 300);
调用后user的内容为
{
   image: {url: { host: "xxxx"}, width: 300},
   name: "张三"
}

function set(obj, namePath, value) {

}

function set(obj, namePath, value) {
  var keyPath = namePath.split('.');
  if (keyPath.length > 1) {
    const key = keyPath.shift()
    obj[key] = Object.assign({}, obj[key] || {});
    set(obj[key], keyPath.join('.'), value)
  } else {
    obj[namePath] = value
  }
}

3.js中for of能否遍历对象

for of能遍历的有set,map,array,string 因为这些类型有迭代器对象,但是object没有迭代器对象,所以无法遍历象但是可以用for in来遍历

4.slot插槽与slot作用域插槽的区别

**普通插槽**在父组件初始化期间会编译成文本子节点存起来，在子组件渲染的时候直接将插槽替换成父组件里渲染的节点。
**作用域插槽**在父组件初始化期间会编译成一个函数，在子组件初始化的时候执行这个函数生成vnode再进行渲染

4.防抖函数实现

  let handle = function(val){
  /*逻辑体*/
  console.log(val);
  }

function delayPrint(delay, callback){
        let timer = null;
 
        return function(value){/*注意点一：在返回该函数时无法确定的参数都要在这里接收而不是在父级形参中接收。例如在本例中，返回该函数时无法确定keyup的值，所以在这里要接收。*/
            if(timer){
                clearInterval(timer);
            }
 
            timer = setTimeout(function(){
                callback(value) /*注意点二：这里是function(){callback(val)}，而不是直接放callback(val)，直接放callback(val)是函数调用。*/
            },delay);
        }
 
    }
let func = delayPrint(1000, handle);
document.getElementById('input').addEventListener('keyup',function(e){
        //console.log(e.target.value);
        let val = e.target.value;
        func(val)
    })

5.JavaScript-call函数的简单实现

Function.prototype.myCall = function (thisArg,...args) {
    //第一步，对thisArg处理，以防传进来的不是对象,基本类型的数据会转为包装对象，null和undefined会指向window
    thisArg = thisArg ? Object(thisArg) : window
    //第二步，调用绑定的函数，这里的this就是这个函数
    thisArg.fn = this
    //第三步，将调用函数的结果返回出去
    let result = thisArg.fn(...args)
    delete thisArg.fn
    return result
}
//测试案例1
function foo() {
    console.log('foo函数被调用', this); //foo函数被调用 Window
}
foo.myCall(undefined)
//测试案例2
function sum(num1, num2) {
    console.log("sum函数被调用", this, num1, num2); //sum函数被调用 String {'abc', fn: ƒ} 20 30
    return num1 + num2
}
let res = sum.myCall('abc', 20, 30)
console.log(res);//50