lodash 学习笔记 (4)

assignIn - 包含原型链属性

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

注:x、xIn 这两种模式在别的很多方法中也有体现。如 functions / functionsIn 。

注:defaults 没有 defaultsIn ,assign 没有 assignDeep。

merge - 类似 assign,不同的是如果碰到相同的属性且属性值为对象,则会递归合并。

_.assign({ a: { "1": 1 } }, { b: { "2": 2 } }, { a: { "3": 3 } }); // { a: { '3': 3 }, b: { '2': 2 } } _.merge({ a: { "1": 1 } }, { b: { "2": 2 } }, { a: { "3": 3 } }); // { a: { '1': 1, '3': 3 }, b: { '2': 2 } } (2)判断

conformsTo - 根据对象的 属性-值 判断

在 loadash 文档里,把 conformsTo 并没有归到 Object 目录下,而是放在 Lang。

var object = { 'a': 1, 'b': 2 }; _.conformsTo(object, { 'b': function(n) { return n > 1; } }); // => true _.conformsTo(object, { 'b': function(n) { return n > 2; } }); // => false (3)遍历

forIn/forInRight - 遍历自身可枚举属性(包含原型链)

forOwn/forOwnRight - 遍历自身的可枚举属性

注意:上述都无法保证遍历的顺序

原生方法:

遍历自身可枚举属性(包含原型链):for (let key in obj)

遍历自身的可枚举属性:Object.keys(obj) 或 for (let key of Object.keys(obj))

(4)遍历输出

之前在 Collection 分类里提到过 map,但在 Object 分类里,另有两个专属的 类map 方法:

mapKeys /mapValues

_.mapKeys({ a: 1, b: 2 }, function(value, key) { return key + value; }); // => { a1: 1, b2: 2 } _.mapValues({ a: 1, b: 2 }, function(value, key) { return key + value; }); // => { a: 'a1', b: 'b2' } (5)path 路径

has/hasIn - 判断 ( hasIn 包含原型链)

get/result/invoke - 获取(值)/调用(函数)【值本身就是函数】/调用(函数)【值不是函数,需自己提供函数+传参】

set / update / unset - 创建/更新/删除 (set = create or update)

原生方法:

has = object.hasOwnProperty(key)

hasIn = "key" in object

var object = { 'a': [{ 'b': { 'c': 3 } }] }; _.get(object, 'a[0].b.c'); // => 3 _.get(object, ['a', '0', 'b', 'c']); // => 3 _.get(object, 'a.b.c', 'default'); // => 'default' var object = { 'a': [{ 'b': { 'c1': 3, 'c2': _.constant(4) } }] }; re1 = _.result(object, 'a[0].b.c1'); // 3 var object = { 'a': [{ 'b': { 'c': [1, 2, 3, 4] } }] }; re2 = _.invoke(object, 'a[0].b.c.slice', 1, 3); // [ 2, 3 ] (6)取对象子集

pick - 正

omit - 反

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

注意:如果对象有很多属性,pick/omit 会比较耗性能(因为属性会全部遍历),建议原生直接获取。

或者用 ES6 新特性 - 对象的解构赋值:

const { a, c } = { a: 1, b: 2, c: 3 }; return { a, c }; 9、String (1)case styles

camelCase - 转为驼峰写法

kebabCase - 转为 kebab case 写法

扩展:几种 case styles

1、Camel case(驼峰)

upper camel case CamelCase - TheQuickBrownFoxJumpsOverTheLazyDog (首字母大写)

lower camel case camelCase - theQuickBrownFoxJumpsOverTheLazyDog(首字母小写)

2、Snake case (下划线)

the_quick_brown_fox_jumps_over_the_lazy_dog (小写)

UPPER_CASE_EMBEDDED_UNDERSCORE (大写)【常用做常量】

3、Kebab case (连字符)

the-quick-brown-fox-jumps-over-the-lazy-dog(小写)

TRAIN-CASE(大写)

4、Start case

Foo Bar

5、Studly caps (大小写随机)

tHeqUicKBrOWnFoXJUmpsoVeRThElAzydOG

(2)适合打 log 的方法

pad / padEnd / padStart - 左右加符号

_.pad('abc', 8); // => ' abc ' _.pad('abc', 8, '_-'); // => '_-abc_-_' _.pad('abc', 3); // => 'abc'

repeat - 重复加符号

_.repeat('*', 3); // => '***' _.repeat('abc', 2); // => 'abcabc' _.repeat('abc', 0); // => '' (3)截断显示

truncate - 截断 string 字符串,如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替,omission 默认是 "..."。

(4)转义

escape / unescape - 转义 string 中的 "&", "<", ">", '"', "'", 和 "`" 字符为 HTML实体字符

(5)模板

template提供了三种渲染模板:

interpolate - <%= … %> 插入变量

escape - 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygjgp.html