JS（箭头）工厂函数答案

【问题标题】：JS (arrow) factory functionsJS（箭头）工厂函数
【发布时间】：2020-09-01 15:17:03
【问题描述】：

对于一个家庭作业问题，我需要编写一个名为addSquareMethod 的函数。下面是教科书的解决方案：

 const addSquareMethod = (arr) => {
     return arr.map(val => {
       val.square = function () {
         return this.total * this.total;
       };
       return val;
     });
   };

当我在 Google Chrome 开发工具中运行它时，它会产生以下内容，

addSquareMethod([1,2,3]);
>>>
[1, 2, 3]
0: 1
1: 2
2: 3
length: 3__proto__: Array(0)

但是，当我自己定义一个看起来更直观的函数时，我得到了不同的结果：

function addSquareMethod(arr){
        for (let j=0;j<arr.length;j++){
            arr[j] = arr[j]**2;
        }
        return arr;
    };

addSquareMethod([1,2,3]);
>>>
[1, 4, 9]
0: 1
1: 4
2: 9
length: 3
__proto__: Array(0)

谁能解释教科书的解决方案在做什么？

编辑：感谢撰写本文时的 cmets 和答案。我现在明白教科书定义的函数是在寻找对象数组，而不是原语。 [{total:1},{total:2},{total:3}]。

我已经相应地改变了架构，它似乎正在工作！

function addSquareMethod(arr){
        for (let j=0;j<arr.length;j++){
            arr[j].square = arr[j].total**2;
        }
        return arr;
    };

【问题讨论】：

因为原来的方法是将元素映射到新的值，不会改变原来的。 arr[j] = arr[j]**2; 正在将结果分配回原来的
只是为了记录，教科书的解决方案很差。我建议找另一本教科书。绝对没有理由在那里使用map，这样做会产生误导。
@Taplar，哦，我明白了。出于好奇，当我执行addSquareMethod([1,2,3])[0].square 时，我得到了未定义。教科书的代码不应该是创建一个可以访问的square属性吗？
看起来您的两个代码块也不相同，并且您错误地调用了第一个。第一个 sn-p 中的 return this.total * this.total; 建议您不是给它一个原始数字数组，而是一个对象数组，其中包含一个键为 total 的对象

标签： javascript methods properties

【解决方案1】：

教科书的解决方案似乎很糟糕，因为它没有解释如何使用它。

教科书的解决方案使用map为每个元素（带有数字属性'total'的对象）添加一个'square'方法/函数，包含元素'total'属性的平方值。

您的解决方案将原始数组值（数字）更改为其平方。

使用教科书的解决方案你可以做到：

let arr = [{total:1},{total:2},{total:3}]
arr = addSquareMethod(arr)

console.log(arr[1].total) //2
console.log(arr[1].square()) //4
console.log(arr[1].total) //2 , doesnt change original value

如果你想修改你的例子来像教科书一样使用地图，你可以这样做：

const addSquareMethod = (arr) => {
     return arr.map(val => {
       return val*val;
     });
   };

let arr = [1,2,3]
console.log(arr[1]) //2
arr = addSquareMethod(arr)
console.log(arr[1]) //4

【讨论】：