Underscore.js基础入门

公司产品集成了对Underscore.js,所以需要对这个库有一定的了解。通过查阅资料,发现这个库主是对Array和JSON的处理支持。通过Underscore.js库,可以方便的对Array和JSON数据进行操作。下面是一些我学习中做测试写的示例,po在这里,供将来复习。

var $ = lib.c.$;
var _ = lib.Underscore.require();

/*
这个函数演示了map的使用方法
map接受JSON和Array
map函数第一个参数是一个Array/JSON(object)类型的数据,第二个参数是一个处理函数
返回值是一个数组
*/
function mapDemo()
{
    var personInfo =
    {
        name:"sheldon",
        age:28,
        gender:"male",
        cellNumber:"15527738495"
    };

    var result = _.map(personInfo,function(value, key)
    {
        return value;
    });

    print(result);
    print(result[2]);

    print("=================");

    var numberArray = [1,3,2,1,2,3];
    result = _.map(numberArray,function(item)
    {
        return item * item;
    });

    print(result);
    print(result[2]);
}

function everyAndSomeDemo()
{
    var numberArray = [1,3,2,1,2,3];
    var result = _.every(numberArray,function(item)
    {
        return item > 2;
    });
    print("所有的元素都大于2: " + result);

    result = _.some(numberArray,function(item)
    {
        return item > 2;
    });
    print("部分元素都大于2: " + result);

    var boxInfo = {height:true,width:false,length:true};
    result = _.every(boxInfo,function(val,key)
    {
        return val == true;
    });

    print("箱子的所有指标(长/宽/高)都正确: " + result);

    result = _.some(boxInfo,function(val,key)
    {
        return val == true;
    });

    print("箱子的部分指标(长/宽/高)正确: " + result);
}

function maxDemo()
{
    var numberArray = [1,3,2,1,2,3];

    var maxNumber = _.max(numberArray);
    print("max number in array:" + maxNumber);

    //NOTE: the key should not be length. otherwise the result is infinity
    var numberObject = {"height":133,"width":146,"length":122};
    maxNumber = _.max(numberObject);
    print("max number in JSON(object):" + maxNumber);

    var numberObject1 = {"height":133,"width":146,"length1":122};
    maxNumber = _.max(numberObject1);
    print("max number in JSON(object):" + maxNumber);
}

function groupByDemo()
{
    var scoresInArray = [20, 81, 75, 40, 91, 59, 77, 66, 72, 88, 99];

    var result = _.groupBy(scoresInArray,function(item)
    {
        if(item < 60 )
            return "不及格";
        else if(item >= 60 && item < 80)
            return "合格";
        else
            return "优秀";
    });

    for(var key in result)
    {
        print(key + ":" + result[key]);
    }

    var scoresInObject =
    {
        "小明":22,
        "小张":67,
        "小红":45,
        "小华":99,
        "小贾":85
    };

    //对object进行分组的时候,只对value进行分组
    result = _.groupBy(scoresInObject,function(value)
    {
        if(value < 60 )
            return "不及格";
        else if(value >= 60 && value < 80)
            return "合格";
        else
            return "优秀";
    });

    for(var key in result)
    {
        print(key + ":" + result[key]);
    }

}

//用洗牌算法随机打乱一个集合:
function shuffleDemo()
{
    // 注意每次结果都不一样:
    var result = _.shuffle([1, 2, 3, 4, 5, 6]); // [3, 5, 4, 6, 2, 1]
    print(result);
}

//随机选择一个或多个元素:
function sampleDemo()
{
    // 注意每次结果都不一样:
    // 随机选1个:
    var result = _.sample([1, 2, 3, 4, 5, 6]); // 2
    print(result);
    // 随机选3个:
    result = _.sample([1, 2, 3, 4, 5, 6], 3); // [6, 1, 4]
    print(result);
} 

//keys()可以非常方便地返回一个object自身所有的key,但不包含从原型链继承下来的:
function keysDemo()
{
    function Student(name,age)
    {
        this.name = name;
        this.age = age;
    }

    var xm = new Student("xiaoming",23);
    var keysXM = _.keys(xm);// [‘name‘, ‘age‘]

    for(var index in keysXM)
    {
        var key = keysXM[index];
        print(key + ":" + xm[key]);
    }
}

//和keys()类似,values()返回object自身但不包含原型链继承的所有值:
function valuesDemo()
{
    function Student(name,age)
    {
        this.name = name;
        this.age = age;
    }

    var xm = new Student("xiaoming",23);
    var valuesXM = _.values(xm);// [‘小明‘, 20]
    for(var index in valuesXM)
    {
        print(valuesXM[index]);
    }
}

//invert()把object的每个key-value来个交换,key变成value,value变成key:
function invertDemo()
{
    function Scores(math,english,computer)
    {
        this.math = math;
        this.english = english;
        this.computer = computer;
    }

    var testResult = new Scores(66,75,94);
    var testResultInverted = _.invert(testResult);
    var keysOfTestResult = _.keys(testResult);
    var keysOfTestResultInverted = _.keys(testResultInverted);

    for(var index in keysOfTestResult)
    {
        var key = keysOfTestResult[index];
        print(key + ":" + testResult[key]);
    }
    print("===============");

    for(var index in keysOfTestResultInverted)
    {
        var key = keysOfTestResultInverted[index];
        print(key + ":" + testResultInverted[key]);
    }
}

//如果我们要复制一个object对象,就可以用clone()方法,它会把原有对象的所有属性都复制到新的对象中:
function cloneDemo()
{
    var source =
    {
        name: ‘小明‘,
        age: 20,
        skills: [‘JavaScript‘, ‘CSS‘, ‘HTML‘]
    };

    var copied = _.clone(source);
    print(copied == source);
    print(copied.name == source.name);
    print(copied.age == source.age);
    //注意,clone()是“浅复制”。所谓“浅复制”就是说,两个对象相同的key所引用的value其实是同一对象:
    print(copied.skills == source.skills);
}

//isEqual()对两个object进行深度比较,如果内容完全相同,则返回true
//isEqual()对两个object进行深度比较,如果内容完全相同,则返回true
function isEqualDemo()
{
    var o1 = { name: ‘Bob‘, skills: { Java: 90, JavaScript: 99 }};
    var o2 = { name: ‘Bob‘, skills: { JavaScript: 99, Java: 90 }};

    print(o1 === o2); // false
    print(_.isEqual(o1, o2)); // true

    //isEqual()其实对Array也可以比较
    o1 = [‘Bob‘, { skills: [‘Java‘, ‘JavaScript‘] }];
    o2 = [‘Bob‘, { skills: [‘Java‘, ‘JavaScript‘] }];

    print(o1 === o2); // false
    print(_.isEqual(o1, o2)); // true
}

function chainDemo()
{
    var numberArray = [1,3,2,1,2,3,2,7,7,8,2];
    var result = _.chain(numberArray).filter(function(item)
    {
        return item%2 == 0;
    }).map(function (item)
    {
        return item*2;
    }).value();

    print(result);
}
时间: 2024-12-19 00:07:31

Underscore.js基础入门的相关文章

React.js 基础入门四--要点总结

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰. 1. HTML 标签 和 React 组件 在JS中写HTML标签,也许小伙伴们都惊呆了,那么React又是怎么区分HTML标签,React组件标签? HTML标签: var myDivEle

js基础入门

基础篇: 个人觉得js应该是作为程序员的第一门语言,因为你经常上网什么的,按个F12就可以审查元素了,下面介绍下js中的一些好玩东西和知识点,基础知识请前往W3chool补充,本人不做介绍 1.window.open 网上有人整了个游戏,利用window.open函数,大胆敢去冒险的请用手机前往http://omegasystem.sinaapp.com/hongbao.html,后果本人不负责哈,且该网站与本人无关 2.HTML DOM 允许 JavaScript 改变 HTML 元素的样式.

React.js 基础入门三 ---组件状态state

React 组件实例在渲染的时候创建.这些实例在接下来的渲染中被重复使用,可以在组件方法中通过 this 访问.唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render 的返回值.在其它组件内,可以使用 refs 得到相同的结果(后面会简单解释refs). 从上几章的学习,我们可以这么理解组件,学过php的Yii框架的都知道widget组件,react.js定义一个组件,通过在组件中定义各种'方法','属性'最后通过render来渲染这个组件. 其中<组建

JS基础——入门必备

·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 Ajax网络请求 ·那么怎么在网页中使用它呢? 可以有三种方式: 1.Html中内嵌 <button onclick="javascript:alert('young man..骗你的')">屠龙宝刀点击就送!</button> 2.在Html页面中直接使用JS &l

React.js 基础入门二--组件嵌套

组件:在设计接口的时候,将常用元素(按钮,表单字段,布局组件等)分解成定义好接口的可重用组件.这样下次你在创建同样界面就可以少写很多代码,这意味着更快的开发时间,更少的bug,和更少的内容下载. 将上章节Index.html中Js部分修改为: <script type="text/jsx">   // 注意此处                 // 定义web组件 (<font color="#ff0000">MessageBox 错误组件嵌

JS 基础 入门

JS做弹窗效果 //单行注释/*多行注释*/// 网页 标签语言    js语言是脚本语言/* 数据类型: 容器 1.整型  (int)  2.小数类型: float: 单精度的小数: double:双精度的小数: decimal:小数非常长://             3.字符类型char:   字符串类型(string)   4.日期时间datetime   5.布尔型数据(真假)         6.对象类型(object)  7.二进制类型binary       除了字符串和对象以外

JS基础入门篇(三十六)—面向对象( 三 )

1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义在类中的方法不可枚举 6.Object.keys() 和 Object.values() 下面是详细解释 1.只能通过new调用 <script> //--------------- class ------------------ class Fn{} //Fn(); //直接调用会报错 var

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

Web3D编程入门总结——WebGL与Three.js基础介绍

1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ 2 /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ 3 //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 4 //简单例程: 5 //根据To