函数return以及lodash中的extend,each,map方法

Posted innerpeace-hecdi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数return以及lodash中的extend,each,map方法相关的知识,希望对你有一定的参考价值。

2018-07-23

1.关于函数中return与否的问题

    if (custom == undefined) {
        let content = content1;
        return content;
    } else {
        let content = custom.call(null, flight);
        return content;
    }
<span className={rowClassName}>{content}</span>

为什么页面上直接返回了content值而没有在 span中显示?
而且,如果写做

    if (custom == undefined) {
        let content = content1;
        
    } else {
        let content = custom.call(null, flight);
    }
<span className={rowClassName}>{content}</span>

会提示说: content undefined?
为什么return之后没有这个提示,不return 的话会报错?

采用三目运算就没有问题
let content = custom == undefined ? (content = content1) : (content = custom.call(null, flight));
{content}

会正确在页面上显示content,这是为什么?

2.lodash中each与map分别遍历后的返回值:
使用each遍历
返回

let newColumns = new Array();
            each(Columns, (c) => {
                let key = get(c, ‘key‘);
                let def = get(ColumnsDefine, key);
                let aa = extend({}, c, def);
                newColumns.push(aa);
            });

使用map遍历:

let newColumns = map(Columns, (c) => {
                let key = get(c, ‘key‘);
                let def = get(ColumnsDefine, key);
                return extend({}, c, def);
                // newColumns.push(aa);
            });

目的是合并worker端传来的Columns和ColumnsDefined里的定义的Columns,最后使其
返回为一个新的值newColumns.
但是最开始使用each并没有成功返回我想要的合并后的值:
```javascript
let newColumns = each(Columns,(c) => {
let key = get(c, ‘key‘);
let def = get(ColumnsDefine, key);
return extend({},c,def);
})

为什么?

先看一下lodash中的几个方法: extend,each,map

extend 就是 assignIn的别名。

function Foo() {
  this.a = 1;
}
 
function Bar() {
  this.c = 3;
}
 
Foo.prototype.b = 2;
Bar.prototype.d = 4;
 
_.assignIn({ ‘a‘: 0 }, new Foo, new Bar);
// => { ‘a‘: 1, ‘b‘: 2, ‘c‘: 3, ‘d‘: 4 }

each就是forEach的别名。

_.forEach([1, 2], function(value) {
  console.log(value);
});
// => Logs `1` then `2`.
 
_.forEach({ ‘a‘: 1, ‘b‘: 2 }, function(value, key) {
  console.log(key);
});
// => Logs ‘a‘ then ‘b‘ (iteration order is not guaranteed).

map方法:


function square(n) {
  return n * n;
}
 
_.map([4, 8], square);
// => [16, 64]
 
_.map({ ‘a‘: 4, ‘b‘: 8 }, square);
// => [16, 64] (iteration order is not guaranteed)
 
var users = [
  { ‘user‘: ‘barney‘ },
  { ‘user‘: ‘fred‘ }
];
 
// The `_.property` iteratee shorthand.
_.map(users, ‘user‘);
// => [‘barney‘, ‘fred‘]














以上是关于函数return以及lodash中的extend,each,map方法的主要内容,如果未能解决你的问题,请参考以下文章

Lodash - .extend() / .assign() 和 .merge() 之间的区别

慎用lodash的cloneDeep函数

数组原生api以及es6+函数式编程(curry)实现lodash函数

Lodash 源码分析Array

react 中使用 lodash 中的 _.throttle

npm lodash