学习Lodash（Day：13）

学习Lodash

什么是Lodash？

官方回答：Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 Lodash 遵循 MIT 开源协议发布，并且支持最新的运行环境。查看各个构件版本的区别并选择一个适合你的版本。

如何安装？

$ npm i -g npm
$ npm i --save lodash

如果安装失败的话，可以使用管理员权限。前面加sudo

今日学习内容：

我的操作和记录都写在代码当中的，记录如下：

import logo from './logo.svg';
import './App.css';
import _ from 'lodash';
function App() {
  //1、将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。
  // 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
  const A = _.chunk(['a','b','c','d','e','f'],4);
  console.log(A);
  //2、创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, ""
  //undefined, 和 NaN 都是被认为是“假值”。
  const B = _.compact([0,1,false,2,''])
  console.log(B);
  //3、创建一个新数组，将array与任何数组 或 值连接在一起。
  const C = [1];
  const D = _.concat(C,2,[3],[[4]]);
  console.log(D);
  console.log(C);
  //4、_.difference(array, [values]) 
  //创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。
  //（注：即创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。）
  //该方法使用SameValueZero做相等比较。结果值的顺序是由第一个数组中的顺序确定。
  //简单说就是两个数组比较，第二个数字里面要是有第一个数组里的内容，就删掉同样的，然后输出只要第一个数组剩下的
  const E = _.difference([3,4,5,6,],[1,2,4])
  console.log(E);
  //5、_.differenceBy(array, [values], [iteratee=_.identity])
  //用法和上面差不多，只是后面加了一个比较标准，按照比较标准在第一个数组中选择结果
  const F = _.differenceBy([3.1,2.2,1.3],[4.4,2.5],Math.floor)
  console.log(F);
  //6、_.differenceWith(array, [values], [comparator])
  //这是一个比较器，具体用法可以看例子
  var objects = [{'x':1,'y':2,},{'x':2,'y':1}]
  var G = _.differenceWith(objects,[{'x':1,'y':2}],_.isEqual);
  console.log(G);
  //7、_.drop(array, [n=1])
  //创建一个切片数组，去除array前面的n个元素。（n默认值为1。）
  const H = _.drop([1,2,3,4,5,67,8888],5)
  console.log(H);
  //8、_.dropRight(array, [n=1])
  //这个和上面一样，不过这个是切数组右边的内容
  //下面这个例子比较特殊，直接切完了
  const I = _.dropRight([1, 2, 3], 5);
  console.log(I);
  //9、_.dropRightWhile(array, [predicate=_.identity])
  //作用：创建一个数组，如何看后面的条件是否满足，满足的话就删掉，从数组末尾删除
  // const users = [
  //   { 'user': 'barney', 'active': true },
  //   { 'user': 'fred', 'active': false },
  //   { 'user': 'pebbles', 'active': false }
  // ];
  // const J = _.dropRightWhile(users, function (o) { return !o.active; });
  // console.log(J)

  //10、_.dropWhile(array, [predicate=_.identity])
  //和上面类似，不过是从前往后删

  //11、_.fill(array, value, [start = 0], [end = array.length])
  //作用:因为这个数组是填充，中间为给定值，后面是修改的初始值和结束值（结束值不包括）
  const array = [1,2,3];
  const K = _.fill(array,'a');
  const L = _.fill(Array(3),2);
  console.log(K);
  console.log(L);

  const M = _.fill([4,6,,8,10],'*',1,3);
  console.log(M);

  //12、_.findIndex(array, [predicate=_.identity], [fromIndex=0])
  //作用：该方法类似_.find，区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身。
  //注意，这里是返回出索引值
  var users = [
    { 'user': 'barney', 'active': false },
    { 'user': 'fred', 'active': false },
    { 'user': 'pebbles', 'active': true }
  ];

  const N = _.findIndex(users, function (o) { return o.user == 'barney'; });
  console.log(N);
  //13、_.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length-1])
  //作用：从右往前，其他和上面一样

  //14、_.flatten(array)
  //作用：减少一级array嵌套深度。
  const O = _.flatten([1, [2, [3, [4]], 5]]);
  console.log(O);
  // => [1, 2, [3, [4]], 5]

  //15、_.flattenDepth(array, [depth=1])
  //控制层级的减少

  //16、_.fromPairs(pairs)
  //与_.toPairs正好相反；这个方法返回一个由键值对pairs构成的对象。
  const P = _.fromPairs([['fred',30],['barney',40]])
  console.log(P)

  //17、_.head(array)
  //这个很简单，获得数组头元素

  //18、_.indexOf(array, value, [fromIndex=0])
  //作用：使用SameValueZero 等值比较，返回首次 value 在数组array中被找到的 索引值， 如果 fromIndex 为负值，将从数组array尾端索引进行匹配。

  //19、_.initial(array)
  //作用：获取数组array中除了最后一个元素之外的所有元素（注：去除数组array中的最后一个元素）

  //20、_.intersection([arrays])
  //作用：简单说，就是取共同值

  //21、_.intersectionBy([arrays], [iteratee=_.identity])
  //这个是和上面的_.differenceWith(array, [values], [comparator])类似
  //不过是相反，_.differenceWith(array, [values], [comparator])是取不同，这里是取相同
  const Q = _.intersectionBy([2.1,2.2],[4.3,2.4],Math.floor)
  console.log(Q)

  //22、_.intersectionWith([arrays], [comparator])
  //这个方法类似_.intersection，区别是它接受一个 comparator 调用比较arrays中的元素。结果值是从第一数组中选择。comparator 会传入两个参数：(arrVal, othVal)。

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

      </header>
    </div>
  );
}

export default App;

今天第一次看这个，进度比较慢，数组部分都还没有看完明天需要加快进度

XJQ124 / Some-notes

学习Lodash（Day：13） #17

学习Lodash

什么是Lodash？

如何安装？

今日学习内容：