• underscorejs-find学习


    2.5 find

    2.5.1 语法:

    _.find(list, predicate, [context])

    2.5.2 说明:

    对list集合的每个成员依次进行匹配(根据predicate迭代函数检测),匹配成功则立即返回当前成员

    • list可以为数组,对象,字符串和arguments
    • predicate会传第三个参数value, key, list(参数名可自定义)
    • predicate函数需要返回值
    • context可以改变predicate函数内部的this

    2.5.3 代码示例:

    示例一:find对数组,对象,字符串,arguments进行操作并返回匹配成功的数据

    var result;
    
    // 操作数组
    result = _.find([1, 2, 3], function (value) {
        return value === 2;
    });
    console.log(result) //=> 2
            
    // 操作对象
    result = _.find({ one: '一', two: '二', three: '三' }, function (value) {
        return value === '二';
    });
    console.log(result) //=> "二"
    
    // 操作复杂的对象
    var obj = {
        levelA: {
            level0: 'level0',
            level1: 'level1'
        },
        levelB: '一',
        levelC: 1
    }
    result = _.find(obj, function (value) {
        return value.level0 === 'level0';
    });
    console.log(result) //=> Object {level0: "level0", level1: "level1"}
    
    // 操作字符串(此处将字符拆分为数组)
    result = _.find('123', function (value) {
        return value === '2';
    });
    console.log(result) //=> "2"
    
    //操作arguments
    function abc() {
        result = _.find(arguments, function (value) {
            return value === 2;
        });
        console.log(result); //=> 2
    }
    abc(1, 2, 3);
    

    示例二:predicate函数传递的参数(函数内部需要return返回值,否则返回undefined)

    var result;
    
    //数组的情况
    result = _.find([1, 2, 3], function (value, key, list) {
        console.log(value, key, list);
        //=> 1 0 [1, 2, 3]
        //=> 2 1 [1, 2, 3]
        //=> 3 2 [1, 2, 3]
        return true; // true为真值则直接返回第一个成员
    });
    
    //对象的情况
    result = _.find({one: '一', two: '二', three: '三'}, function(value, key, list){
        console.log(value, key, list);
        //=> 一 one Object {one: "一", two: "二", three: "三"}
        //=> 二 two Object {one: "一", two: "二", three: "三"}
        //=> 三 three Object {one: "一", two: "二", three: "三"}
        return true; // true为真值则直接返回第一个成员
    });
    

    示例三:context可以改变predicate内部的this

    var result;
    
    // 数组的情况
    result = _.find([1, 2, 3], function (value, key, list) {
        console.log(this); //=> [1, 2, 3] this是数组
    }, [1, 2, 3]);
    
    // 对象的情况
    result = _.find([1, 2, 3], function (value, key, list) {
        console.log(this); //=> Object {no: 10} this是对象
    }, { "no": 10 });
    
    // 字符串的情况
    result = _.find([1, 2, 3], function (value, key, list) {
        console.log(this); //=> String {0: "1", 1: "2", 2: "3", length: 3, [[PrimitiveValue]]: "123"} this是将字符串拆分后的对象
    }, "123");
    

    2.5.4 _.detect的功能和_.find是一样的

    var result = _.detect([1, 2, 3], function (value, key, list) {
        return value === 2;
    });
    console.log(result) //=> 2
    

    2.5.5 特殊情况

    示例一:list的特殊情况

    //例如:null,undefined,0,true,this等;
    var result = _.find(null, function (value, key, list) {
        return true;
    });
    console.log(result) //=> "undefined"
    

    示例二:predicate函数的this为window全局对象的情况

    // 例如:null,undefined,window,this等
    var result = _.find([1, 2, 3], function (value, key, list) {
        console.log(this); //=> this是window全局对象
    }, null);
    

    2.5.6 list参数可为真假值?

    var  result = _.find([false, 1, true, '1', 0, undefined, null]);
    console.log(result) //=> [1]
    

    2.5.7 predicate还有其他写法?

    示例一:predicate参数为空的时候

    var  result = _.find({x: 1, y: 2});
    console.log(result) //=> [1]
    

    示例二:predicate参数为一个字符的时候

    var  result = _.find([{x: 1}, {y: 2}], 'x');
    console.log(result) //=> [{x: 1}]
    

    示例三:predicate参数为对象的时候

    var obj = [
        {x: 1, y: 2},
        {x: 1},
        {y: 2, z: 3}
    ]
    var  result = _.find(obj, {x: 1});
    console.log(result) //=> [{x: 1, y: 2}]
    

    gitbook地址:https://www.gitbook.com/book/niec-fe/underscorejs/details

  • 相关阅读:
    五分钟搞懂Vuex
    vue 背景图片 backgroundImage background-image vue的style方式绑定行内样式-background-image的方式等~
    VUE2.0 vue-cli构建项目中使用Less
    ES6如何引入图片
    Vue+Gojs实现流程图demo
    vue自定义指令要点
    vue cli中token验证
    linux服务器上配置多个svn仓库
    vue-cli(vue脚手架)超详细教程
    node学习第一天:nvm使用
  • 原文地址:https://www.cnblogs.com/kyo4311/p/5159661.html
Copyright © 2020-2023  润新知