underscore入门学习示例

目录

• underscore简介
• 工具函数（Utility）
• 对象函数（Object Functions）
• 函数（Functions）
• 数组函数（Array Functions）
• 集合函数（Collections）
• 链式语法(Chaining)
• 参考文档

underscore简介

• 意为下划线
• 它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象
• 它弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分

工具函数（Utility）

• noConflict
• identity
• constant
• noop
• times
• random
• mixin
• iteratee
• uniqueId
• escape
• unescape
• result
• now
• template

//放弃_全局变量，改由 underscore 承担
//注意，生效之后，_ 不能再有效
//var underscore = _.noConflict();

//调用给定的迭代函数n次,传递index参数。生成一个返回值的数组
var times_res = _(4).times(function(index){return index;});

//返回一个min 和 max之间的随机整数
var random_res = _.random(10,100);

//扩展Underscore
_.mixin({
  toUpperCase:function(x){
    return x.toUpperCase();
  }
})

//转义HTML字符串，替换&, <, >, ", ', 和 /字符
var escape_res = _.escape("<div></div>");
var unescape_res = _.unescape("&lt;div&gt;&lt;/div&gt;");

console.log(times_res);
console.log(random_res);
console.log(_("zhangkai").toUpperCase());
console.log(escape_res);
console.log(unescape_res);

对象函数（Object Functions）

• keys
• values
• pairs
• invert
• functions
• extend
• pick
• omit
• defaults
• clone
• tap
• has
• matches
• property
• isEqual
• isEmpty
• isElement
• isArray
• isObject
• isArguments
• isFunction
• isString
• isNumber
• isFinite
• isBoolean
• isDate
• isRegExp
• isNaN
• isNull
• isUndefined

var list = {one: 1, two: 2, three: 3};
var clone_list = {one:1,two:{a:1}};

list.show = function(){
  console.log(this.one);
}

var keys_res = _.keys(list);
var values_res = _.values(list);
var pairs_res = _.pairs(list);
//键（keys）和值（values）对换。
//对于这个操作，必须确保object里所有的值都是唯一的且可以序列号成字符串
var invert_res = _.invert(list);
var functions_res = _.functions(list);//返回一个对象里所有的方法名，别名methods
var extend_res = _.extend({a:1},{b:2});//复制后边对象的属性，到前边的对象中
//keys值过滤
var pick_res = [
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age'),
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
      return _.isNumber(value);
    })
  ]
//keys值过滤，获取不符合条件的项
var omit_res = [
    _.omit({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age'),
    _.omit({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
      return _.isNumber(value);
    })
  ]

//默认值填充，值非 undefined 则不可填充
var defaults_res = _.defaults({a:1,b:2,d:undefined},{a:111,c:3,d:4});

//浅复制，复制后，修改原对象中【引用类型值】，新对象也相应改变
//因为基本数据类型分配的是栈内存，引用类型分配的是堆内存
var clone_res = _.clone(clone_list);
clone_list.two.a = 11111;

//tap方法的主要意图是作为函数链式调用 的一环, 为了对此对象执行操作并返回对象本身
var tap_res = _.chain([1,2,3,200])
  .filter(function(num) { return num % 2 == 0; })
  .tap(console.log)
  .map(function(num) { return num * num })
  .value();
  
var has_res = _.has(list,"two");

var property_res = _.property("three")(list);

//var matchs_res = _.filter(list,_.matches({one: 1, two: 2}));

//执行两个对象之间的优化深度比较
var isEqual_res = _.isEqual({},{});

//判断数组或对象为空
var isEmpty_res = [
    _.isEmpty([]),
    _.isEmpty({})
  ]

//如果object是一个DOM元素，返回true
var isElement_res = _.isElement(document.getElementsByTagName("body")[0]);

console.log(keys_res);
console.log(values_res);
console.log(pairs_res);
console.log(invert_res);
console.log(functions_res);
console.log(extend_res);
console.log(pick_res);
console.log(omit_res);
console.log(defaults_res);
console.log(clone_res);
console.log(has_res);
console.log(property_res);
// console.log(matchs_res);
console.log(isEqual_res);
console.log(isEmpty_res);
console.log(isElement_res);

函数（Functions）

• bind
• bindAll
• partial
• memoize
• delay
• defer
• throttle
• debounce
• once
• after
• before
• wrap
• negate
• compose

//bind环境，函数参数
var _bind = function(x){return x + " " + this.name};//如果不bind，此处【this指向当时的环境】
var bind_fun = _.bind(_bind,{name:"zhangkai"},"hello");
console.log(bind_fun());

//bindAll
var buttonView = {
  label  : 'underscore',
  onClick: function(){ alert('clicked: ' + this.label); },
  onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');

//once，令函数只能执行一次
//作为初始化函数使用时非常有用, 不用再设一个boolean值来检查是否已经初始化完成
var _once = function(){console.log(111);};
var __once = _.once(_once);
__once();

//compose，组合函数，函数返回值作为参数传给下一个函数。可以放多个函数
var _fun1 = function(x){return x + 100};
var _fun2 = function(x){return x * 5};
var _fun3 = _.compose(_fun1,_fun2);//注意，执行顺序是先计算最右侧的函数
console.log(_fun3(100));

数组函数（Array Functions）

• first
• initial
• last
• rest
• compact
• flatten
• without
• union
• intersection
• difference
• uniq
• zip
• object
• indexOf
• lastIndexOf
• sortedIndex
• range

var arr = [1,2,3,4,5,6,7,8,9];

function unique(x){
  return x.age;
}

var first_res = _.first(arr,4);//从前往后，获取从n开始的项，返回一个数组

var initial_res = _.initial(arr,2);//从后往前，获取从n开始的项，返回一个数组

var last_res = _.last(arr,2);//从后往前，获取后n项，返回一个数组

var rest_res = _.rest(arr,2);//从前往后，获取后n项，返回一个数组

//返回一个除去所有false值的 array副本。
//在javascript中, false, null, 0, "", undefined 和 NaN 都是false值
var compact_res = _.compact(["",null,NaN,undefined,12,"sting"],2);

var flatten_res = _.flatten([1,2,[3,[4]]]);//展开一个嵌套数组为一个一唯数组

var without_res = _.without(arr,1,2,3,9);

var union_res = _.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);//合并数组并去重

var difference_res = _.difference([1, 2, 3,99], [101, 2, 1, 10]);//多个数组取差集(对第一个)

var intersection_res = _.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);//多个数组取交集

//去重，可是数组，也可是对象。如果操作已排序数组，第二个参数设置为 true，可提升速度
var unique_res = _.unique([{name:"zk",age:18},{name:"gs",age:22},{name:"zq",age:18}],false,unique);

//合并成类似表格数据
var zip_res = _.zip(
  ['moe', 'larry', 'curly'], [30, 40, 50], [true, false, false]
  );

//数组转对象
var object_res = [
    _.object(['moe', 'larry', 'curly'], [30, 40, 50]),
    _.object([['moe', 30], ['larry', 40], ['curly', 50]])
  ];

//使用二分查找确定value在list中的位置序号
var sortedIndex_res = [
    _.sortedIndex([10, 20, 30, 40, 50], 35),
    _.sortedIndex(
      [
        {name: 'moe', age: 40}, 
        {name: 'curly', age: 60}
      ], 
        {name: 'larry', age: 50}, 
      'age')
  ];

//一个用来创建整数灵活编号的列表的函数，便于each 和 map循环
var range_res = [
    _.range(10),
    _.range(1,11),
    _.range(0,100,20)
  ]

console.log(first_res);
console.log(initial_res);
console.log(last_res);
console.log(rest_res);
console.log(compact_res);
console.log(flatten_res);
console.log(without_res);
console.log(union_res);
console.log(difference_res);
console.log(intersection_res);
console.log(unique_res);
console.log(zip_res);
console.log(object_res);
console.log(sortedIndex_res);
console.log(range_res);

集合函数（Collections）

• each
• map
• reduce
• reduceRight
• find
• filter
• where
• findWhere
• reject
• every
• some
• contains
• invoke
• pluck
• max
• min
• sortBy
• groupBy
• indexBy
• countBy
• shuffle
• sample
• toArray
• size
• partition

var arr = [1,2,3,4,2];
var list = [
  {a:1,b:2},
  {c:3},
  {a:1,b:2,c:2},
  {a:1,b:2,d:4},
  {d:4},
  {d:100},
  {a:1,d:200},
];

function each(x){
  console.log(x);
}
function map(x){
  return x*x;
}
function reduce(x,y){
  return x + y;
}
function find(x){
  return x%2===0;
}
function filter(x){
  return x%2===0;
}
function reject(x){
  return x%2===0;
}
function every(x){
  return x===4;
}
function some(x){
  return x===4;
}
function max(x){
  return x.d
}
function sortBy(x){
  return Math.abs(x);
}
function groupBy(x){
  return x>10;
}
function countBy(x){
  return x>10?"moreThanTen":"lessThanTen";
}
function partition(x){
  return x%3===0;
}

_.each(arr,each);//没有返回值

var map_res = _.map(arr,map);

var reduce_res = _.reduce(arr,reduce);//同reduceRight

//返回第一个通过检测的真值
//如果找到匹配的元素，函数将立即返回，不会遍历
var find_res = _.find(arr,find);

var filter_res = _.filter(arr,filter);

//遍历list返回数组，包含包含所列属性的所有的键 - 值对
var where_res = _.where(list,{a:1,b:2});
//遍历list返回匹配属性的所有的键 - 值对的第一个值
var findWhere_res = _.findWhere(list,{a:1,b:2});

var reject_res = _.reject(arr,reject);//取反，与filter相反

var every_res = _.every(arr,every);

var some_res = _.some(arr,some);

var contains_res = _.contains({a:444},444);//如包含指定值，则返回true。数组也可以

var invoke_res = _.invoke([[4,3,8,2],[6,5,5,2]],"reverse");//在list的每个元素上执行某方法

var pluck_res = _.pluck(list,"a");//获取对象数组中某属性值，返回一个数组。

var max_res = _.max(list,max);//返回list按规则最大的那一项，可以是对象

var min_res = _.min([1,2,3,4,5]);//返回list按规则最小的那一项，可以是数组

var sortBy_res = _.sortBy([-900,-400,600,100,200,-100,-500],sortBy);//第二个参数为排序函数

var groupBy_res = _.groupBy([11,12,2,3,4,7,23],groupBy);//第二个参数为排序函数

var indexBy_res = _.indexBy(
  [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}]
  ,"age");//第二个参数为排序函数，用于对象数组，返回排序后的数组
  
var countBy_res = _.countBy([1,2,3,4,5,11,22,33,44],countBy);//按规则统计数量

var shuffle_res = _.shuffle([1, 2, 3, 4, 5, 6]);//返回一个随机乱序的 list 副本

var sample_res = _.sample([1, 2, 3, 4, 5, 6],3);//从list中产生一个指定数量的随机样本

//_.toArray(list)，把list(任何可以迭代的对象)转换成一个数组，在转换 arguments 对象时非常有用。

var size_res = _.size(list);//计算数组或对象的长度

var partition_res = _.partition([3,4,2,3,9,8,9,1,2,6],partition);//按规则将一个数组拆分为两个

console.log(map_res);
console.log(reduce_res);
console.log(find_res);
console.log(filter_res);
console.log(where_res);
console.log(findWhere_res);
console.log(reject_res);
console.log(every_res);
console.log(some_res);
console.log(contains_res);
console.log(pluck_res);
console.log(max_res);
console.log(min_res);
console.log(sortBy_res);
console.log(groupBy_res);
console.log(indexBy_res);
console.log(countBy_res);
console.log(shuffle_res);
console.log(sample_res);
console.log(size_res);
console.log(partition_res);

链式语法(Chaining)

var arr = [1,2,3,4]
function double(x){
  return x*x;
}
var res = _.chain(arr).reverse().push(0).map(double)
console.log(res);

参考文档

underscore中文文档