美文网首页ES6入门摘入
ES6 — 数组方法

ES6 — 数组方法

作者: name_howe | 来源:发表于2019-10-28 10:55 被阅读0次

    一、forEach 循环

    var colors = ['red','blue','green']
    
    // es5
    for(var i = 0; i < colors.length; i++){
        console.log(colors[i]);
    }
    // es6
    colors.forEach(function(color){
        console.log(color);
    });
    

    二、map 需要返回值,如果不给return,默认返回undefined map返回的是一个新的数组

    1、场景一 假定有一个数组A,将A数组中的值以双倍形式放到B数组

    var numbers = [1,2,3]
    
    // es5
    var doubeldNumbers = [];
    for(var i = 0; i < numbers.length; i++){
        doubeldNumbers.push(numbers[i] * 2);
    }
    console.log(doubeldNumbers);
    // es6
    var doubeld = numbers.map(function(number){
        return number * 2;
    });
    console.log(doubeld);
    

    2、场景二 假定有一个数组对象a,将a数组中对象某个属性的值储存到b数组中

    // es6
    var cars = [
        {
            model:'buick',
            price:'cheap'
        },
        {
            model:'bmw',
            price:'expensive'
        }
    ];
    var prices = cars.map(function(car){
        return car.peice;
    });
    

    三、filter 过滤 查找符合条件的所有值

    1、场景一 假设有一个对象数组a 获取数组中指定类型的对象放到b数组中

    var products = [
        {
            name:'a',
            type:'1'
        },
        {
            name:'b',
            type:'2'
        },
        {
            name:'c',
            type:'1'
        },
        {
            name:'d',
            type:'2'
        }
    ]
    // es5
    var es5 = [];
    for(var i = 0; i < products.length; i++){
        if(products[i].type === '2'){
            es5.push(products[i]);
        }
    }
    // es6
    var es6 = products.filter(function(e){
        return e.type === '2';
    });
    console.log(es6);
    

    2、场景二 假设有一个对象数组a 过滤掉不满足以下条件的对象:蔬菜 数量大于0 价格小于10

    var products2 = [
        {
            num:0,
            price:15
        },
        {
            num:5,
            price:8
        },
        {
            num:2,
            price:12
        },
        {
            num:7,
            price:2
        }
    ]
    var es6_t = products2.filter(function(e){
        return e.num > 0 && e.price < 10;
    });
    console.log(es6_t);
    

    3、场景三 假设有两个数组a,b 根据a中的id值 过滤掉b数组不符合的数据

    var products3 = {
        id:2
    }
    var es6_s = [
        {
            postId:0,
            content:'one'
        },
        {
            postId:1,
            content:'two'
        },{
            postId:2,
            content:'three'
        },
        {
            postId:3,
            content:'four'
        }
    ]
    function comments(a,b){
        return b.filter(function(e){
            return e.postId === a.id;
        });
    }
    console.log(comments(products3,es6_s));
    

    四、find 当查找到符合条件的第一个值后 会返回 不会再继续执行下去

    1、场景一 假设有一个对象数组a 找到符合条件的对象

    var users = [
        {
            name:'a'
        },
        {
            name:'b'
        },
        {
            name:'c'
        }
    ]
    var user = users.find(function(e){
        return e.name === 'b';
    })
    

    2、场景二 假设有一个对象数组a 根据指定对象的条件找到数组中符合条件的对象

    var posts = [
        {
            id:0,
            title:'cont1'
        },
        {
            id:1,
            title:'cont2'
        }
    ]
    var posts_t = {
        postId:0,
        content:'hellow world!'
    }
    function arr(a,b){
        return a.find(function(e){
            return e.id === b.postId;
        });
    }
    console.log(arr(posts,posts_t));
    

    五、every && some

    1、场景一 计算对象数组中每个电脑的操作系统是否可用 大于16位操作系统表示可用 否则不可用

    var computers = [
        {
            name:'IBM',
            ram:4
        },
        {
            name:'Apple',
            ram:16
        },
        {
            name:'Acer',
            ram:32
        }
    ];
    var every_o = true;
    var some_o = false;
    
    // es5
    for(var i = 0; i < comments.length; i++){
        var computer = computers[i];
        if(computer.ram < 16){
            every_o = false;  //一假即假
        }else{
            some_o = true; //一真即真
        }
    }
    // es6
    var every_t = computers.every(function(e){
        return e.ram > 16; //所有为真 才为真
    });
    console.log(every_t);
    var some_t = computers.some(function(e){
        return e.ram > 16; //如果有一个是真的 则返回为真
    });
    console.log(every_t);
    

    2、场景二 假设有一个注册页面 判断所有input内容的长度是否大于0

    function Field(value){
        this.value = value
    }
    Field.prototype.validate = function(){
        return this.value.length > 0
    }
    var username = new Field("zhangh");
    var telephone = new Field("15451321321");
    var password = new Field("my_password");
    var fields = [username,telephone,password]
    var form = fields.every(function(e){
        return e.validate()
    })
    console.log(form)
    

    六、reduce

    1、场景一 计算数组中所有值的总和

    var numbers = [10,20,30];
    var sum = 0;
    
    // es5
    for(var i = 0; i < numbers.length; i++){
        sum += numbers[i];
    }
    // es6
    var sums = numbers.reduce(function(a,b){
        console.log(a);
        return a + b;
    },0);// 0定义了a的起始值 (初始化a),可以定义不同类型值
    

    2、场景二 将数组中对象的某个属性抽离到另一个数组中

    var primaryColor = [
        {
            color:'red'
        },
        {
            color:'green'
        },
        {
            color:'blue'
        }
    ]
    var colors = primaryColor.reduce(function(a,b){
        a.push(b.color);
        return a;
    },[]);
    console.log(colors);
    

    3、场景三 判断字符串中括号是否对称

    function kuoh(string){
        return !string.split("").reduce(function(a,b){
            if(a<0){
                return a
            }
            if(b == "("){
                return ++a
            }
            if(b == ")"){
                return --a
            }
            return a;
        },0);
    }
    console.log(kuoh("()()())("))
    

    相关文章

      网友评论

        本文标题:ES6 — 数组方法

        本文链接:https://www.haomeiwen.com/subject/temvvctx.html