underscore.js的用法

来源:互联网 发布:大数据产品经理招聘 编辑:程序博客网 时间:2024/05/06 10:40

      Array有map()和filter()方法,可是Object没有这些方法。此外,低版本的浏览器例如IE6~8也没有这些方法,解决问题的方式就是使用第三方库underscore.js。
      underscore.js的百度cdn地址就是:http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js
      underscore提供了一套完善的函数式编程的接口,让我们更方便地在JavaScript中实现函数式编程。

map方法

//javascript方式var array = [1,2,3];array.map((item,index) => {    console.log(item);});//underscore的方式var obj = {    name:'mapbar_front',    age:26};_.map(obj,(value,key)=>{    console.log(value);    console.log(key);});var arr = [1,3];_.map(arr,(value,key)=>{    console.log(key);    console.log(value);})

filter方法

//javascript方式var array = [1,2,3];array = array.filter((item,index)=>{    return item > 2;});console.log(array);//underscore的方式var obj = {    name:'mapbar_front',    age:26};obj = _.filter(obj,(value,key)=>{    return value == 'mapbar_front'});console.log(obj);var arr = [1,3];arr = _.filter(arr,(value,key)=>{    return value != 2;});console.log(arr);

every方法

//javascript方式var array = [1,2,3];array = array.every((item,index)=>{    return item > 2;});console.log(array);//false//underscore的方式var obj = {    name:'mapbar_front',    age:26};obj = _.every(obj,(value,key)=>{    return value == 'mapbar_front'});console.log(obj);//falsevar arr = [1,3];arr = _.every(arr,(value,key)=>{    return value != 2;});console.log(arr);//true

some方法

//javascript方式var array = [1,2,3];array = array.some((item,index)=>{    return item > 2;});console.log(array);//true//underscore的方式var obj = {    name:'mapbar_front',    age:26};obj = _.some(obj,(value,key)=>{     return value == 'mapbar_front' }); console.log(obj);//true var arr = [1,3]; arr = _.some(arr,(value,key)=>{     return value != 2; }); console.log(arr);//true

max求数组最大值

//javascript方式var array = [1,2,3];var max = Math.max(...array);console.log(max);//3//underscore的方式var arr = [1,3,5];var maxes = _.max(arr);console.log(maxes);//5

min方法求最小值

//javascript方式var array = [1,2,3];var max = Math.min(...array);console.log(max);//1//underscore的方式var arr = [1,3,5];var maxes = _.min(arr);console.log(maxes);//1

groupBy

javascript没有类似功能的方法。
underscore :

var array = [1,2,3,4,5,6,7];var groups = _.groupBy(array,(every)=>{    if(every > 4){        return "A";    }else{        return "B";    }});console.log(groups);

shuffle()用洗牌算法随机打乱一个集合:

var arr = [1,2,3,4,5,6];arr = _.shuffle(arr);console.log(arr); //随机数组

sample()则是随机选择一个或多个元素:

// 随机选1个:_.sample([1, 2, 3, 4, 5, 6]); // 2// 随机选3个:_.sample([1, 2, 3, 4, 5, 6], 3); // [6, 1, 4]

range

//underscore数组操作console.log(_.range(10));//生成一个数组序列0-9[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]console.log(_.range(1,6,2));//生成一个从1到6的步数为2的数组[1,3,5]

first

_.first([2,2,356,6]);//2

last

_.last([2,2,356,6]);//6

object函数把数组整合成对象

let names = ['liwudi','jgkjg','sssss'];let ages = [23,24,32];let obj = _.object(names,ages);console.log(obj);//{'liwudi':23,'jgkjg':24,'sssss':32}

zip函数,实现数组的另类整合。

let names = ['liwudi','jgkjg','sssss'];let ages = [23,24,32];let arr = _.zip(names,ages);console.log(arr);

bind函数

var s = ' hello  ';var fn = s.trim;fn = _.bind(fn,s);console.log(fn());//'hello'

partial偏函数的使用

function add(x,y){ return x+y;}var fn = _.partial(add,2);let num = fn(3);console.log(num);

memoize函数对运行结果缓存

var factorial = _.memoize(function (n) {    alert(n);    if(n < 2){        return 1    }    return n * factorial(n-1);});console.log(factorial(10));console.log(factorial(8));

once保证一个函数结果进行缓存,仅执行一次

var fn = _.once(function(x,y){    return x+y;});

chain函数,underscore把对象包装成能链式调用的方法。

let arr = _.chain([1,2,3,4,6]).map(item => {    return item * 2}).filter(item => {    return item > 6}).value();

isEqual()对两个object进行深度比较,如果内容完全相同,则返回true

var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};o1 === o2; // false_.isEqual(o1, o2); // true

clone方法

let _obj = {    'name': 'liwudi',    'age': 25};let obj = _.clone(_obj);console.log(obj);obj.name = 'li';console.log(obj,_obj);

invert()把object的每个key-value来个交换

var obj = {    Adam: 90,    Lisa: 85,    Bart: 59};_.invert(obj); // { '59': 'Bart', '85': 'Lisa', '90': 'Adam' }

mapObject()就是针对object的map版本

var obj = { a: 1, b: 2, c: 3 };// 注意传入的函数签名,value在前,key在后:_.mapObject(obj, (v, k) => 100 + v); // { a: 101, b: 102, c: 103 }

keys()可以非常方便地返回一个object自身所有的key,但不包含从原型链继承下来的

function Student(name, age) {    this.name = name;    this.age = age;}var xiaoming = new Student('小明', 20);_.keys(xiaoming); // ['name', 'age']

allKeys()除了object自身的key,还包含从原型链继承下来的

function Student(name, age) {    this.name = name;    this.age = age;}Student.prototype.school = 'No.1 Middle School';var xiaoming = new Student('小明', 20);_.allKeys(xiaoming); // ['name', 'age', 'school']

values()返回object自身但不包含原型链继承的所有值

var obj = {    name: '小明',    age: 20};_.values(obj); // ['小明', 20]