Go to comments

Lodash Object方法

一、合并对象

1、分配合并

_.assign()

合并对象,与Object.assign()方法一样。

返回:第一个参数(obj对象)

function Foo() {
  this.a = 1;
}

function Bar() {
  this.c = 3;
}

Foo.prototype.b = 2;
Bar.prototype.d = 4;

var obj = { 'a': 0 };

console.log(_.assign(obj, new Foo, new Bar)); // { 'a': 1, 'c': 3 }


In 多了一个In


_.assignIn()

与上面一样,不过它能继承原型身上的属性

function Foo() {
  this.a = 1;
}

function Bar() {
  this.c = 3;
}

Foo.prototype.b = 2;
Bar.prototype.d = 4;

var obj = { 'a': 0 };

console.log(_.assignIn(obj, new Foo, new Bar)); // {a:1, b:2, c:3, d:4}


_.extend() -> assignIn  两个方法一样,一个人的两个名


_.assignInWith()

与上面一样,接收一个比较器做为参数,比较器是一个函数

function customizer(objValue, srcValue) {
  return _.isUndefined(objValue) ? srcValue : objValue;
}
 
var defaults = _.partialRight(_.assignInWith, customizer);

console.log(defaults({ 'a':1 }, { 'b': 2 }, { 'a': 3 })); // { 'a': 1, 'b': 2 }

assignInWith方法经过partialRight处理后,参数类似于bind方法的作用

1). 先传比较器,并返回到defaults上

2). 运行defaults,再传要合并的对象


比较器参数_.isUndefined作用,判断属性值是undefined返回true。如果对象属性是undefine用来源的的对象的属性值覆盖

console.log(defaults({'a':undefined }, { 'b': 2 }, { 'a': 3 })); // { 'a': 3, 'b': 2 }


_.extendWith () -> assignInWith


_.assignWith() 也是接收一个比较器的函数做为参数

2、默认合并

_.defaults()

合并对象与assign()一样,不过assign方法合并时遇到相同的属性,后面的会覆盖前面的。defaults刚好相反,前面的覆盖后面的

var targetObj = { 'a': 1 };

console.log(_.defaults(targetObj, { 'b': 2 }, { 'a': 3 })); // { 'a': 1, 'b': 2 }


defaults方法与assign方法的区别

console.log(
	_.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }),	// {a: 1, b: 2}
	_.assign({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }),	// {a: 3, b: 2}
);


_.defaultsDeep()

defaultsDeep与defaults一致,不过它会深递归

var target = { 'a': { 'b': 2 } };
var sources = { 'a': { 'b': 1, 'c': 3 } };

console.log(_.defaultsDeep(target, sources)); // { 'a': { 'b': 2, 'c': 3 } }

对比defaults方法

var target = { 'a': { 'b': 2 } };
var sources = { 'a': { 'b': 1, 'c': 3 } };

console.log(_.defaults(target, sources)); // { 'a': { 'b': 2 } }

3、融入并入

_.merge()

与assign一样,不过它遇到相同的属性名后并不会覆盖,merge会合并

返回object原对象

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
console.log(_.merge(object, other)); // { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

1). a是一个数组,数组里有两条数据

2). 纵方向上合并,第一列跟第一列一组,第二列跟第二列一组


_mergeWith()

与上面的方法一致,不过多了接收一个比较器的函数做为参数

function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}
 
var object = {'a': [1], 'b': [2]};
var other = {'a': [3], 'b': [4]};

console.log(_.mergeWith(object, other, customizer)); // { 'a': [1, 3], 'b': [2, 4] }

还是纵方向合并


增加数组的位数,纵方向上合并

function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}
 
var object = {'a': [1, 'a1'], 'b': [2]};
var other = {'a': [3, 'a3'], 'b': [4]};

console.log(_.mergeWith(object, other, customizer)); // { 'a': [1, "a1", 3, "a3"], 'b': [2, 4] }

二、创建数组

1、用对象的属性值创建数组

_.at()

根据传入的属性创建一个数组

var object = {
		'a': [{'b':{'c':3},}, 4],
	     };

console.log(_.at(object, ['a[0].b.c', 'a[1]'] )); // [3, 4]

2、遍历对象创建数组

_.toPairs()

把对象里可枚举的属性(不包括继承的)创建成一个数组,与Object.entities()的方法一样

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
console.log(_.toPairs(new Foo)); // [['a', 1], ['b', 2]]


_.entries() /toPairs() 把对象里可枚举的属性(不包括继承的)创建成一个数组,与Object.entities()的方法一样


_.toPairsIn()

与上面的一样,但它包括继承的属性

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
console.log(_.toPairsIn(new Foo)); // [['a', 1], ['b', 2], ["c", 3]]


_.entriesIn()/toPairsIn()与上面的一样,但它包括继承的属性

3、把对象的key放到数组中

_.keys()

作用:把对象的key放到一个数组里,与原生Object.keys()方法一样

返回:数组

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;

console.log(_.keys(new Foo)); // ['a', 'b']


字符串获取的是index索引

console.log(_.keys('hello')); //  ["0", "1", "2", "3", "4"]


_.keysIn()

与keys一样,只不过包含继承到的属性

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
console.log(_.keysIn(new Foo)); // ['a', 'b', 'c']

4、与key对应的把value放到一个数组中

_.values()

作用:把对象的value放到一个数组里,与Object.value()的方法一样

返回:数组

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
console.log(_.values(new Foo)); // [1, 2] (无法保证遍历的顺序)


字符串拆分为数组

console.log(_.values('hello')); // ["h", "e", "l", "l", "o"]


_.valuesIn()

与上面一样,只不过它包含继承到的属性

三、创建对象

1、创建一个对象的原型

_.create()

与Object.create()一样(陈老师)

创建一个原型继承prototype对象(自己看手册的体会)

function Shape() {
  this.x = 0;
  this.y = 0;
}
 
function Circle() {
  Shape.call(this);
}

/**
 * 第一个参数:构造函数Shape的原型prototype
 * 第二个参数:constructor属性的指向构造函数Circle
 * 经过_.create方法处理,成为一个对象的原型
 * 
 * */
Circle.prototype = _.create(Shape.prototype, {'constructor': Circle});

console.log(Circle.prototype); // _.create方法创建的原型
 
var circleBal = new Circle;

console.log(circleBal instanceof Circle); // true
console.log(circleBal instanceof Shape); //  true

2、修改key创建一个新对象

_.mapKeys()


map是遍历的意思,遍历对象的key,但是mapkeys方法能修改key

第一个参数是对象

第二个参数function跟forEach类似


修改对象的key,value不会变

var obj = { 'a': 1, 'b': 2 };

var result = _.mapKeys(obj, function(value, key){
	return key +'Q'+ value;
});

console.log(result); // {aQ1: 1, bQ2: 2}

console.log(obj); // {a: 1, b: 2} (不改变原对象)

4、修改对象values创建一个对象

_.mapValues()

 与上个方法一样,只不过它修改的是value,key不会变

var users = {
  'fred':    { 'user': 'fred',    'age': 40 },
  'pebbles': { 'user': 'pebbles', 'age': 1 }
};

// 两种方式都行
console.log(_.mapValues(users, function(o){ return o.age; })); // {fred: 40, pebbles: 1}

console.log(_.mapValues(users, 'age')); // {fred: 40, pebbles: 1}

四、查找

1、查找符合条件的key

_.findKey()

与前面讲的find方法一样(find是集合里的方法),只不过它返回的是key

返回找到了只返回一条key,找不到返回undefined

var users = {
  'barney':  { 'age': 36, 'active': true },
  'fred':    { 'age': 40, 'active': false },
  'pebbles': { 'age': 1,  'active': true }
};

console.log(_.findKey(users, function(o){ return o.age < 40; })); // 'barney'

console.log(_.findKey(users, { 'age': 1, 'active': true })); //'pebbles'

console.log(_.findKey(users, ['active', false])); // 'fred'

console.log(_.findKey(users, 'active')); // 'barney'


_.findLastKey() 与上面一样,只不过它从反方向开始遍历

2、删除一些属性,返回剩余属性

_.omit()

删除对象里的一些属性,剩下的部分返回一个新对象

var object = { 'a': 1, 'b': '2', 'c': 3 };

console.log(
	_.omit(object, ['a', 'c']), // {b: "2"}
	object // {a: 1, b: "2", c: 3} 不改变原对象
);

omit是忽略的意思

1). ['a', 'b'] 意思删除属性a、属性c

2). 返回一个新对象,包含剩下的属性b


_.mitBy()

与上面一样,不过是可接收一个迭代器的函数做为参数。迭代器的作用把数字类型都忽略掉

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
console.log(_.omitBy(object, _.isNumber)); // {b: "2"}

3、筛选

_.pick()

筛选对象里的属性。与omit是相反的,返回一个新对象

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
console.log(_.pick(object, ['a', 'c'])); // { 'a': 1, 'c': 3 }


_.pickBy()

与上面一样,不过是可接收一个迭代器的函数做为参数

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
console.log(_.pickBy(object, _.isNumber)); // { 'a': 1, 'c': 3 }

五、遍历

_.forIn()

与原生的for...in循环一样,只不过它是一个函数,语法与forEach一样。它遍历的是自己的属性与继承的属性

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;

_.forIn(new Foo, function(value, key) {
  console.log(key, value);
});

// a 1
// b 2
// c 3


_.forInRight()   与forIn一样,只不过是反方向遍历

_.forOwn()   与forIn()一样,只不过forOwn只能遍历到自己的属性

_.forOwnRight()  与forOwn一样,只不过是反方向遍历

六、获取/设置

1、get

_.get()

获取属性的值,与Object.defineProperty()属性描述对象上的get方法一致

01/

字符串描述属性路径

var object = { 'a': [{ 'b': { 'c': 3 } }] };

console.log(_.get(object, 'a[0].b.c')); // 3

01/

数组描述属性路径

var object = { 'a': [{ 'b': { 'c': 3 } }] };

console.log(_.get(object, ['a', '0', 'b', 'c'])); // 3


如果路径解析错误值是undefined ,返回第三个参数

var object = { 'a': [{ 'b': { 'c': 3 } }] };

console.log( _.get(object, 'a.b.c', '路径错误') ); // '路径错误'

2、set

_.set()

设置属性的值,与Object.defineProperty()属性描述对象上的set方法一致

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4); // 第一个参数:属性路径。第二个参数:属性值


console.log(object); // { 'a': [{ 'b': { 'c': 3 } }] };
console.log(object.a[0].b.c); // 4


数组描述路径,改变了对象结构

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, ['x', '0', 'y', 'z'], 5);

console.log(object);
/*
{
	a{
		[{b:{c:3}}]
	},
	x{
		[{y:{z:5}}]
	}
}

*/

console.log(object.x[0].y.z); // 5


_.setWith()

与set的一样,只不过可以给一个参数决定返回的是对象还是数组

var object = {};

console.log( _.setWith(object, '[0][1]', 'a', Object)); // { '0': { '1': 'a' } }

// console.log(_.setWith(object, '[0][1]', 'a', Array)); // 返回个寂寞

参数:

1). '[0][1]'  是key,字符串形式的数组,对象是两层嵌套

2). 'a'         是值

3). Object  表示返回的是对象

3、result

_.result()

获取对象属性

与get一样都是取对象属性的,只不过它遇到函数的属性时,会调用函数,并且把this指向对象本身

var obj = {
	a: 12,
	b: function () {
		console.log(this.a);
	}
};

console.log(_.result(obj, 'a')); // 12

console.log(_.result(obj, 'b')); // result是函数的运行 12

console.log(_.get(obj, 'b')); // get返回的是函数体

七、has

_.has()

检查属性是否为对象的直接属性,与Object.hasOwnProperty()方法返回true一样

var object = { 'a': { 'b': 2 } };

console.log(
    _.has(object, 'a'), // true
    _.has(object, 'a.b'), // true
    _.has(object, ['a', 'b']), // true
    _.has(object, 'c') // false
);

检测对象有没有这个属性,有返回true否则反回false


.hasIn()

检查属性是对象的直接属性还是继承属性,也与Object.hasOwnProperty()一样,true表示直接属性,false表示继承属性

var object = _.create({ 'a': _.create({ 'b': 2 }) });

console.log(object.__proto__); // {a: {…}}
console.log(object.__proto__.a.__proto__); // {b: 2}

console.log(
    _.hasIn(object, 'a'), // true
    _.hasIn(object, 'a.b'), // true
    _.hasIn(object, ['a', 'b']), // true
	_.hasIn(object, 'b') // 原型上继承的属性返回 false
);


// 对比has方法没有自己的属性全部返回false
console.log(
    _.has(object, 'a'), // false
    _.has(object, 'a.b'), // false
    _.has(object, ['a', 'b']), // false
);

八、颠倒

_.invert()

把对象的key和value颠倒,颠倒后如果有重复的,后面的属性会覆盖前面的属性

var object = { a: 1, b: 2, c: 1 };

console.log(_.invert(object)); // {1:'c', 2:'b'}


_.invertBy()

与上面一样,它遇到相同的值后不会覆盖,而是会把所有放在一个数组里。另外它多了一个遍历器方法

var object = { 'a': 1, 'b': 2, 'c': 1 };


console.log(_.invert(object)); // {1: "c", 2: "b"}


console.log(_.invertBy(object)); // {'1': ['a', 'c'], '2': ['b']}


var result = _.invertBy(object, function(value) {
  return 'group' + value;
});

console.log(result); // {'group1': ['a', 'c'], 'group2': ['b']}

九、处理属性值

_.invoke()

调用方法去处理取到的属性值

var object = { 'a': [{ 'b': { 'c': [1, 2, 3, 4] } }] };
 
console.log(_.invoke(object, 'a[0].b.c.slice', 1, 3)); // [2, 3]

用slice方法去截取a[0].b.c的1-3位

1). 获取的属性c是数组

2). 调用原生的slice方法截取数组,后面跟着传(1, 3)第1位到第3位前面(不包含第3位)

2). 返回处理的结果(截取的部分)

十、删除属性

_.unset()

删除属性的

返回布尔值


路径是字符串形式

var object = {
	'a':[ {'b':{'c':7}} ]
}

_.unset(object, 'a[0].b.c'), console.log(object); // { 'a':[ {'b':{  }} ] }

属性c干掉了,b是一个空对象了{}


路径是数组的形式

var object = { 'a': [{ 'b': { 'c': 7 } }] };
 
console.log(_.unset(object, ['a', '0', 'b', 'c'])); // true
 
console.log(object); // { 'a': [{ 'b': {} }] };

十一、修改

_.update()

这个与set一样,不过它可以接收一个函数的参数

var object = { 'a':10 }

_.update(object, 'a', function(n){
	return n * n;
});

console.log(object); // { 'a':100 }

把属性a的值放到形参n,进行一个逻辑处理,然后更新对象a属性


手册上的例子

var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.update(object, 'a[0].b.c', function(n) { return n * n; });
console.log(object.a[0].b.c);
// => 9
 
_.update(object, 'x[0].y.z', function(n) { return n ? n + 1 : 0; });
console.log(object.x[0].y.z);
// => 0


_.updateWith()

与上面的一样,不过可以接收一个路径的参数,决定生成的属性放在哪里

var object = {};

_.updateWith(object, '[a][b]', function () {
	return 12;
}, Object); // 第三个参数可以是Array

console.log(object); // {a:{b:12}}


手册上的例子

var object = {};
 
_.updateWith(object, '[0][1]', _.constant('a'), Object);

console.log(object); // { '0': { '1': 'a' } }

没什么用

functions()/functionsIn()这两个没有说??????

tranform 没什么用



Leave a comment 0 Comments.

Leave a Reply

换一张