持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

今日题

题目

用原生的JavaScript封装一个工厂模式的用户构造函数(可被 new 的函数)，该函数可被传入一个配置对象，例如：

// 配置对象 具体信息自己决定
{
    name: "张三",
    age: "18",
    sex: "男"
}

在返回的实例上有一个说话的方法say() 该方法可传入一串任意长度的字符串比如: say("法外狂徒")

调用该方法后控制输出 : 张三 (男 - 18岁): 法外狂徒

分析

我们在写代码的时候常常调用内置的构造函数(像Object、Array、Map、Set等) 当这些构造函数不能满足我们的需求的时候，我们就需要创造自己的构造函数

这里给大家做一个示例

function Constructor(str) {
    this.param = str;
}
const example = new Constructor("ok");
console.log(example.param)

该示例中名为Constructor的函数就为一个构造函数，构造函数中不需要return就会自动返回实例后的对象，example的常量就为Constructor实例出来的实例对象

昨日题

题目

手写数组的'forEach'（实现一个简易的forEach即可）。要注意，不是用手写，而是polyfill

答案

无固定答案，下面展示部分留言的代码：

Array.prototype.WangLaoQi = function(callback)  {
    let i = 0;
    let leng = this.length;
    const a = () => {
        callback(this[i], i++, this);
        if(i < leng) a();
    }
    a();
}

Array.prototype.ForEach = function(arr, callback) {
    arrayIterator = arr[Symbol.iterator]()
    let pointer = arrayIterator.next()
    while(!pointer.done){
        callback(pointer.value);
        pointer = arrayIterator.next()
    }
}

Array.prototype.myForEach = function ( callback, self ) {
    const loop = () => {
	const length = this.length;
	for (let index = 0; index < length; index++) {
		const lo = callback.bind(self)
		lo(this[index],index,this)
	}
    }
    loop()
}

解析

这道题可以让大家对数组的结构（索引号对应值）和对js的基础算法(for while 递归等...(没错，这些都可以说是算法))有个更加深刻的理解，数组的forEach方法中的回调函数是有三个参数的，分别为value 值，index 索引号，arr 数组本身，而在forEach中使用return, back...停止不了循环的哟具体内容可参考MDN文档

数组在JS中是一个非常重要的数据结构，大家可以多多了解一下该数据结构的使用方式和其内置的方法(forEach, map, find, findIndex...)，合理的使用数据结构可以让代码运行的更快速和更顺畅还有更加的好懂，我懂你，你也懂我

我们来分析一下第二种写法，我相信很多人看到这种想法后内心可能在想这啥东西啊，跟我有关系吗？？？是的，确实跟你没关系，但是跟我们的主角forEach有关系呀。ForEach存在于Array的原型上，这也就注定了无论是谁来调用它，那么这个函数里的this永远都是调用它的人，也就是当前数组。而我们知道arr身上是有iterator接口的，而iterator接口又会返回一个Generator函数，那Generator函数又有什么特点呢，是不是要通过next方法来调用，且每次调用next方法时都会返回一个对象{value:当前值, done:是否遍历完成}，但是第一次调用next时，返回的值往往不是我们所需要的，因为第一次next只是用来启动Generator函数，如果你想第一次调用next时就要直接拿到有用的值，那你可以把Generator外再包一层函数以达到目的。那么在这个例子中也是先调用了一次next来启动Generator，随后根据done值来进行循环，因为数组未遍历完成时done为false，而循环里面则是不断的去调用callback并将value传递进去，然后在调用next方法得到下一次的value和done

结语

此文章已收录至《JavaScript每日一题》专栏，如果你对本专栏有任何建议，欢迎反馈。如果你对此文章中的题目还有不懂的地方，那么请在评论区留言与大家一起讨论吧。
创作不易，少年，就请留个赞再走吧！

对象不好用，快来尝试重新做一个

目录

今日题

题目

分析

昨日题

题目

答案

解析

结语