宝安网站优化微商软件商城总站

当前位置： 首页 > news >正文

宝安网站优化,微商软件商城总站,广州10大网站开发,网页设计基础教学1. Lodash介绍 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。其对各种方法、函数的封装#xff0c;使得使用更加方便。

1. 为什么选择Lodash Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模…1. Lodash介绍 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。其对各种方法、函数的封装使得使用更加方便。
2. 为什么选择Lodash Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于 遍历 array、object 和 string对值进行操作和检测创建符合功能的函数
3. 安装Lodash 1浏览器环境 script srclodash.js/script 通过npm安装 \( npm i -g npm \) npm i –save lodash Node.js // Load the full build. 加载完整版本 var _  require(lodash); // Load the core build. 加载核心构建。 var _  require(lodash/core); // Load the FP build for immutable auto-curried iteratee-first data-last methods. 为不可变的自动循环iteratee first data last方法加载FP构建。 var fp  require(lodash/fp);   // Load method categories. 加载方法类别。 var array  require(lodash/array); var object  require(lodash/fp/object);   // Cherry-pick methods for smaller browserify/rollup/webpack bundles. 对于较小的browserify/rollup/webpack bundle采用Cherry pick方法。 var at  require(lodash/at); var curryN  require(lodash/fp/curryN);
   Lodash 针对数组、对象、字符串、函数、对象、数字等封装了很多方法下面对于介绍一些常用的方法。
4. 数组 4.1 _.chunk(array, [size1]) 将数组array拆分成多个 size 长度的区块并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块那么最后剩余的元素将组成一个区块。 参数 1array (Array): 需要处理的数组 2size1] (number): 每个数组区块的长度 返回 (Array): 返回一个包含拆分区块的新数组注相当于一个二维数组。 实例 _.chunk([a, b, c, d], 2); //  [[a, b], [c, d]]   _.chunk([a, b, c, d], 3); //  [[a, b, c], [d]]
   4.2 _.compact(array) 创建一个新数组包含原数组中所有的非假值元素。例如false, null,0, , undefined, 和 NaN 都是被认为是“假值”。 参数 1array (Array): 需要处理的数组 返回值 (Array): 返回过滤掉假值的新数组。 实例 _.compact([0, 1, false, 2, , 3]); //  [1, 2, 3]
   4.3 .concat(array, [values]) 创建一个新数组将array与任何数组 或 值连接在一起。 参数 1array (Array): 被连接的数组。 2values: 连接的值。 返回值 (Array): 返回连接后的新数组。 实例 var array  [1]; var other  .concat(array, 2, [3], [[4]]); console.log(other); //  [1, 2, 3, [4]] console.log(array); //  [1]
   4.4 .difference(array, [values]) 创建一个具有唯一array值的数组每个值不包含在其他给定的数组中。注即创建一个新数组这个数组中的值为第一个数字array 参数排除了给定数组中的值。该方法使用SameValueZero做相等比较。结果值的顺序是由第一个数组中的顺序确定。 注意: 不像.pullAll这个方法会返回一个新数组。 参数 array (Array): 要检查的数组。values: 排除的值。 返回值 (Array): 返回一个过滤值后的新数组。 实例 _.difference([3, 2, 1], [4, 2]); //  [3, 1]
   4.5 .differenceBy(array, [values], [iteratee.identity]) 这个方法类似.difference 除了它接受一个 iteratee 注迭代器 调用array 和 values 中的每个元素以产生比较的标准。 结果值是从第一数组中选择。iteratee 会调用一个参数(value)。注首先使用迭代器分别迭代array 和 values中的每个元素返回的值作为比较值。 Note: 不像.pullAllBy这个方法会返回一个新数组。 参数 array (Array): 要检查的数组。values: 排除的值。iteratee_.identity: iteratee 调用每个元素。 返回值 (Array): 返回一个过滤值后的新数组。 例子 _.difference([3, 2, 1], [4, 2]); //  [3, 1] .differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor); //  [3.1, 1.3]   // The .property iteratee shorthand. _.differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], x); //  [{ x: 2 }]
   4.6 .differenceWith(array, [values], [comparator]) 这个方法类似.difference 除了它接受一个 comparator 注比较器它调用比较arrayvalues中的元素。 结果值是从第一数组中选择。comparator 调用参数有两个(arrVal, othVal)。 Note: 不像.pullAllWith, 这个方法会返回一个新数组。 参数 array (Array): 要检查的数组。values: 排除的值。comparator: comparator 调用每个元素。 返回值 (Array): 返回一个过滤值后的新数组。 例子 var objects  [{ x: 1, y: 2 }, { x: 2, y: 1 }];  .differenceWith(objects, [{ x: 1, y: 2 }], _.isEqual); //  [{ x: 2, y: 1 }] 4.7 _.drop(array, [n1]) 创建一个切片数组去除array前面的n个元素。n默认值为1。 参数 array (Array): 要查询的数组。n1: 要去除的元素个数。 返回值 (Array): 返回array剩余切片。 例子 _.drop([1, 2, 3]); //  [2, 3]   _.drop([1, 2, 3], 2); //  [3]   _.drop([1, 2, 3], 5); //  []   _.drop([1, 2, 3], 0); //  [1, 2, 3]
   4.8 _.dropRight(array, [n1]) 创建一个切片数组去除array尾部的n个元素。n默认值为1。 参数 array (Array): 要查询的数组。n1: 要去除的元素个数。 返回值 (Array): 返回array剩余切片。 例子 .dropRight([1, 2, 3]); //  [1, 2]  .dropRight([1, 2, 3], 2); //  [1]  .dropRight([1, 2, 3], 5); //  []  .dropRight([1, 2, 3], 0); //  [1, 2, 3]
   4.9 .dropRightWhile(array, [predicate.identity]) 创建一个切片数组去除array中从 predicate 返回假值开始到尾部的部分。predicate 会传入3个参数 (value, index, array)。 参数 array (Array): 要查询的数组。predicate_.identity: 这个函数会在每一次迭代调用。 返回值 (Array): 返回array剩余切片。 例子 var users  [   { user: barney,  active: true },   { user: fred,    active: false },   { user: pebbles, active: false } ];  .dropRightWhile(users, function(o) { return !o.active; }); //  objects for [barney]  // The .matches iteratee shorthand. .dropRightWhile(users, { user: pebbles, active: false }); //  objects for [barney, fred]  // The .matchesProperty iteratee shorthand. .dropRightWhile(users, [active, false]); //  objects for [barney]  // The .property iteratee shorthand. _.dropRightWhile(users, active); //  objects for [barney, fred, pebbles]
   4.10 .dropWhile(array, [predicate.identity]) 创建一个切片数组去除array中从起点开始到 predicate 返回假值结束部分。predicate 会传入3个参数 (value, index, array)。 参数 array (Array): 要查询的数组。predicate_.identity: 这个函数会在每一次迭代调用。 返回值 (Array): 返回array剩余切片。 例子 var users  [   { user: barney,  active: false },   { user: fred,    active: false },   { user: pebbles, active: true } ];   .dropWhile(users, function(o) { return !o.active; }); //  objects for [pebbles]   // The .matches iteratee shorthand. .dropWhile(users, { user: barney, active: false }); //  objects for [fred, pebbles]   // The .matchesProperty iteratee shorthand. .dropWhile(users, [active, false]); //  objects for [pebbles]   // The .property iteratee shorthand. _.dropWhile(users, active); //  objects for [barney, fred, pebbles] _.fill .findIndex.findLastIndex.first - head.flatten.flattenDeep.flattenDepth.fromPairs.head.indexOf.initial.intersection.intersectionBy_.intersectionWith .join.last.lastIndexOf.nth.pull.pullAll.pullAllBy.pullAllWith.pullAt.remove .reverse.slice.sortedIndex.sortedIndexBy.sortedIndexOf.sortedLastIndex.sortedLastIndexBy.sortedLastIndexOf.sortedUniq.sortedUniqBy.tail.take_.takeRight .takeRightWhile.takeWhile.union.unionBy.unionWith.uniq.uniqBy.uniqWith .unzip.unzipWith.without.xor.xorBy.xorWith.zip.zipObject_.zipObjectDeep _.zipWith   以上封装的数组不在详细介绍大家可以参考网站 lodash.fill | Lodash 中文文档 | Lodash 中文网
5. 对象 5.1_.assign(object, [sources]) 分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右随后的下一个对象的属性会覆盖上一个对象的属性。 注意: 这方法会改变 object参考自Object.assign. 参数 object (Object): 目标对象。
6. sources: 来源对象。 返回 (Object): 返回 object. 例子 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 }
   5.2 .assignIn(object, [sources]) 这个方法类似.assign 除了它会遍历并继承来源对象的属性。 Note: 这方法会改变 object。 参数 object (Object): 目标对象。sources: 来源对象。 返回 (Object): 返回 object。 例子 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 }
   5.3 .assignInWith(object, sources, [customizer]) 这个方法类似.assignIn 除了它接受一个 customizer 被调用以产生所分配的值。 如果 customizer 返回 undefined 将会由分配处理方法代替。 customizer 会传入5个参数 (objValue, srcValue, key, object, source)。 Note: 这方法会改变 object。 参数 1object (Object): 目标对象。 2sources (…Object): 来源对象。 3customizer: 这个函数用来自定义分配的值。 返回值 (Object): 返回 object。 例子 function customizer(objValue, srcValue) {   return .isUndefined(objValue) ? srcValue : objValue; }   var defaults  .partialRight(_.assignInWith, customizer);   defaults({ a: 1 }, { b: 2 }, { a: 3 }); //  { a: 1, b: 2 }
   5.4 .create(prototype, [properties]) 创建一个继承 prototype 的对象。 如果提供了 prototype它的可枚举属性会被分配到创建的对象上。 参数 1prototype (Object): 要继承的对象。 2properties: 待分配的属性。 返回 (Object): 返回新对象。 实例 function Shape() {   this.x  0;   this.y  0; }   function Circle() {   Shape.call(this); }   Circle.prototype  .create(Shape.prototype, {   constructor: Circle });   var circle  new Circle; circle instanceof Circle; //  true   circle instanceof Shape; //  true
   其他方法不在详细介绍请参考官网https://www.lodashjs.com/docs/lodash.create
7. 语言 6.1 .clone(value) 创建一个 value 的浅拷贝。 注意: 这个方法参考自structured clone algorithm 以及支持 arrays、array buffers、 booleans、 date objects、maps、 numbers Object 对象, regexes, sets, strings, symbols, 以及 typed arrays。 arguments对象的可枚举属性会拷贝为普通对象。 一些不可拷贝的对象例如error objects、functions, DOM nodes, 以及 WeakMaps 会返回空对象。 参数 value (): 要拷贝的值 返回 (): 返回拷贝后的值。 例子 var objects  [{ a: 1 }, { b: 2 }];   var shallow  .clone(objects); console.log(shallow[0]  objects[0]); //  true
   6.2 .cloneDeep(value) 这个方法类似.clone除了它会递归拷贝 value。注也叫深拷贝。 参数 value (): 要深拷贝的值。 返回 (): 返回拷贝后的值。 例子 var objects  [{ a: 1 }, { b: 2 }];   var deep  _.cloneDeep(objects); console.log(deep[0]  objects[0]); //  false
   其他方法不在详细介绍请参考官网https://www.lodashjs.com/docs/lodash.cloneDeep