Javascript中的模式设计和映射功能。什么剂量不起作用？

Question

第一个代码和第二个代码之间有什么区别？第一个有效，但第二个不起作用，这返回一个数字为4的数组，而不是一个角为4的阵列对象。问题出在map函数中。

第一个代码

const Strategy = {
map : function(array){
const newArray = array.map((e) => { e.setCorners(4);  return e });
return newArray
},
}

const objectCorners = function(corners){

_corners = corners



return ({
corners : _corners
getCorners : (() => { return corners}),
setCorners : ((corners) => {_corners = corners}),
})
}
const array = [new objectCorners(3),new objectCorners(6),new objectCorners(7)]
const result = Strategy["map"](array)
console.log(result) // [{corners : 4},{corners : 4},{corners : 4}]

第二代码

const Strategy = {
map : function(array){
const newArray = array.map((e) => {return e.setCorners(4); });
return newArray
},
}

const objectCorners = function(corners){

_corners = corners



return ({
corners : _corners
getCorners : (() => { return corners}),
setCorners : ((corners) => {_corners = corners}),
})
}
const array = [new objectCorners(3),new objectCorners(6),new objectCorners(7)]
const result = Strategy["map"](array)
console.log(result) // [4,4,4]

Answer 1

第一个代码和第二个代码之间的区别是什么。。。问题出在map函数中。

好吧，区别在于映射函数；-(

特别是返回值。

在(e) => { e.setCorners(4); return e }的情况下，e显式返回

然而，在(e) => {return e.setCorners(4); }的情况下，返回e.setCorners(4)的返回值。根据的定义

setCorners : ((corners) => {_corners = corners})

它相当于

setCorners: function(corners) {
_corners = corner
// no return value, i.e. this function returns undefined
}

所以undefined返回

OP注意事项：

• 请在之前尝试您的代码，因为它有语法错误
• 请输入实际输出。
  • 在第一个代码中，objectCorner的值为3,6,7，但注释中的值为4
  • 在第二段代码中，注释的输出是[4,4,4]，而实际上是[undefined,undefined,undefined]

Answer 2

构建模块是一种流行的函数式编程技术。我们没有使用getter和setter来改变状态，而是简单地构建了一个新的对象——

// Shape.js
const empty =
{ corners: 0 }
const create = (corners = 0) =>
({ corners })
const setCorners = (t = empty, corners = 0) =>
({ ...t, corners })
export { empty, create, setCorners }

让我们在一个示例程序中使用我们的Shape模块

// Main.js
import { create, setCorners } from './Shape'
const Strategy =
{ map: shapes => shapes.map(s => setCorners(s, 4))
}
const arr =
[ create(3), create(6), create(7) ]
const result =
Strategy.map(arr)

console.log(result, arr)
// [ { corners: 4 }, { corners: 4 }, { corners: 4 } ]
// [ { corners: 3 }, { corners: 6 }, { corners: 7 } ]

NB，不修改输入阵列arr来构造result。展开下面的代码段，在您自己的浏览器中验证结果

// Shape.js
const empty =
{ corners: 0 }
const create =
(corners = 0) =>
({ corners })
const setCorners =
(t = empty, corners = 0) =>
({ ...t, corners })

// ---
// Main.js
const Strategy =
{ map: arr => arr.map(v => setCorners(v, 4))
}
const arr =
[ create(3), create(6), create(7) ]
const result =
Strategy.map(arr)

console.log(result, arr)
// [ { corners: 4 }, { corners: 4 }, { corners: 4 } ]
// [ { corners: 3 }, { corners: 6 }, { corners: 7 } ]