2022届校招前端面试javascript篇4

1.什么是函数柯里化？

         柯里化是把一个多参函数，变为单参函数的一个方法。

        一个通用实现：

function currying(fn, ...rest1) {
  return function(...rest2) {
    return fn.apply(null, rest1.concat(rest2))
  }
}

         注意这里concat接受非数组元素参数将被当做调用者的一个元素传入

         用它将一个sayHello函数柯里化试试：

function sayHello(name, age, fruit) {
  console.log(console.log(`我叫 ${name},我 ${age} 岁了, 我喜欢吃 ${fruit}`))
}

const curryingShowMsg1 = currying(sayHello, '小明')
curryingShowMsg1(22, '苹果')            // 我叫 小明,我 22 岁了, 我喜欢吃 苹果

const curryingShowMsg2 = currying(sayHello, '小衰', 20)
curryingShowMsg2('西瓜')               // 我叫 小衰,我 20 岁了, 我喜欢吃 西瓜

         Function.prototype.bind 方法也是柯里化应用

                  与 call/apply 方法直接执行不同，bind 方法将第一个参数设置为函数执行的上下文，其他参数依次传递给调用方法（函数的主体本身不执行，可以看成是延迟执行），并动态创建返回一个新的函数， 这符合柯里化特点。

 

 衍生问题1：手写一个bind函数？

Function.prototype._bind = function(scope,...args){
    return (...rest)=>{ 
        this.apply(scope,args.concat(rest))
    }
}

 

2.JS中DOM元素的操作？

     1.document.getElementsByClassName ( “class”)
                 返回集 htmlcollection ,用法和数组一致
                 说明: class为DOM元素上class属性的值
     2.document.getElementById( “id” )
                 功能:返回对拥有指定ID的第一个对象的引用
                 返回值: DOM对象
                 说明: id为DOM元素上id属性的值
     3.document.getElementsByName(" name");
                 返回的是nodelist 类型, 用法和数组一致
                 说明: name为DOM元素上name属性的值
     4.document.getElementsByTagName(“TagName”);
                 返回的是htmlcollection 集合 , 用法和数组一致
     5.document.querySelector(".btnlist");
                 返回的是集合
                 document.querySelectorAll("#btn");
                 获取所有的#btn
     6.document.body
                 可以直接获取body

 

3.给一个ul下面插入100个li应该怎么插入，如何优化dom操作？

          在进行DOM操作中，我们经常使用新建元素然后将其插入到文档中的操作。若是非常小（对页面的改动很小）的插入操作或许在性能上没有什么，但是若需要很多的插入操作和改动，继续使用类似于下面的代码则会很有问题。

var ul = document.getElementById("ul");
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    ul.appendChild(li);
}

        1.将要创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性比较差，很难符合创建各种各样的DOM元素的需求。利用DocumentFragment，可以弥补这两个方法的不足。

        2.DocumentFragment是没有父节点的最小的文档对象，用于存储HTML和XML片段。DocumentFragment对象继承Node，所以它有Node的所有属性方法，完全可以操作Node(NodeList)那样操作DocumentFragment。因为文档片段存在于内存中，并不在DOM中，所以将子元素插入到文档片段中时不会引起页面回流（对元素位置和几何上的计算），因此使用DocumentFragment可以起到性能优化的作用。例如上面的代码就可以改成下面的片段。

var ul = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    fragment.appendChild(li);
}
ul.appendChild(fragment);

由于DocumentFragment的优势，很多javascript库都是用它来创建HTML的，包括jquery。