当前位置: 首页 > 工具软件 > Underscore.js > 使用案例 >

underscore.js的用法

金昌胤
2023-12-01

      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);//false
var 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]
 类似资料: