美文网首页
(四)ES6数组

(四)ES6数组

作者: 我拥抱着我的未来 | 来源:发表于2018-06-09 13:12 被阅读0次

    本节主要讲解数组的方法

    • forEach
    • map
    • filter
    • find
    • every
    • some
    • reduce

    先说原始的方法

    var arr = [1,2,3,4,5];
     for(var i=0;i<arr.length;i++)
    {
      console.log(arr[i]);
    }
    

    ES6的方法

    (1)forEach方法

    //第一种写法:
    let arr = [1, 2, 3, 4, 5, 6];
    arr.forEach((item, index) => {
        console.log(item + "||" + index);
    })
    //第二种写法:
    let arr = [1, 2, 3, 4, 5, 6];
    function abc(item, index) {
        console.log(item + "||" + index);
    }
    arr.forEach(abc);
    

    (2)map方法

    • 有map必有return否则和foreach一样,因为map有返回值,要是不写新的数组存的就是undefined
      map 第一种写法
    let arr = [1, 2, 3, 4, 5, 6];
    
    function abc(item, index) {
        return item + 1;
    }
    let arr1 = arr.map(abc);
    console.log(arr1);
    

    map第二种写法

    let arr2 = [3, 4, 5, 6, 7];
    let arr3 = arr2.map((item, index) => {
        return item * 2;
    })
    console.log(arr3);
    

    map第三种写法

    let arr4 = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" },
        { id: 3, age: 15, name: "嘿嘿", sex: "女" },
        { id: 4, age: 11, name: "啪啪", sex: "男" },
    ];
    
    let arr5 = arr4.map((item, index) => {
        return item.name;
    })
    console.log(arr5);
    

    (3)filter过滤器

    • filter必有return
    //场景一
    //假定有一个对象数组(A)获取数组中指令类型的对象放到数组B中
    let arr = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" },
        { id: 3, age: 15, name: "嘿嘿", sex: "女" },
        { id: 4, age: 11, name: "啪啪", sex: "男" },
    ];
    
    let arr2 = arr.filter((content, index) => {
        return content.sex == "男"
    })
    console.log(arr2);
    //场景 二
    //假定有一个数组(A)过滤掉不满足一下条件的。
    //条件:性别男,并且年龄大于20的
    let arr = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" },
        { id: 3, age: 15, name: "嘿嘿", sex: "女" },
        { id: 4, age: 11, name: "啪啪", sex: "男" },
    ];
    let arr3 = arr.filter((item, index) => {
        return item.sex === "男" && item.age > 20
    })
    console.log(arr3);
    
    //场景三
    //假定两个数组(a,b)根据A中id值,过滤掉B数组中不符合的数据
    let arr = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" }
    ];
    let arr2 = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" },
        { id: 3, age: 15, name: "嘿嘿2", sex: "女" },
        { id: 4, age: 11, name: "啪啪2", sex: "男" },
    ];
    
    function filter(arr, arr2) {
        let result = [];
        arr2.filter((content, index) => {
            result.push(arr.filter((item, index2) => {
                return item.age == content.age && item.name == content.name;
            })[0]);
        })
        let result2 = result.filter((item, index) => {
            return item
        })
        return result2;
    }
    console.log(filter(arr, arr2));
    //场景四
    //去掉undefined
    let arr4 = [1, 2, 3, undefined, undefined];
    let arr3 = arr4.filter((content, index) => {
        return content;
    })
    console.log(arr3);
    

    无论是map还是filter他返回的都是一个新的数组

    (4) find 找到符合条件的

    find必有return并且他找到以后就不会往下执行了,也就是说要是有2个符合条件的,他只能找到第一个,返回的不是数组


    /*假定有一个对象数组A找到符合条件的对象*/
    let arr2 = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" },
        { id: 3, age: 15, name: "嘿嘿2", sex: "女" },
        { id: 4, age: 23, name: "啪啪2", sex: "男" },
    ];
    let arr3 = arr2.find((item, index) => {
        return item.age == 23;
    })
    console.log(arr3);  //   { id: 1, age: 23, name: "哈哈", sex: "男" }, 符合的第二个就找不到
    /*场景2有一个对象数组A,根据指定对象的条件找到数组中符合条件的对象*/
    /*假定有一个对象数组A找到符合条件的对象*/
    let arr2 = [
        { id: 1, age: 23, name: "哈哈", sex: "男" },
        { id: 2, age: 20, name: "呵呵", sex: "女" },
        { id: 3, age: 15, name: "嘿嘿2", sex: "女" },
        { id: 4, age: 23, name: "啪啪2", sex: "男" },
    ];
    let arr = { id: 1, title: "Node.js" }
    let arr3 = arr2.find((item, index) => {
        return arr.id == item.id;
    })
    console.log(arr3);
    

    every和some

    • every和some返回就是布尔值
    • every指的是每一项都要求符合条件就是逻辑与&&一假都假
    • some 指的是有一个符合就可以了||一真都真
    let computers = [
        { "name": "APPLE", ram: 16 },
        { "name": "IBM", ram: 4 },
        { "name": "Acer", ram: 32 }
    ];
    let state = true;
    let somestate = false;
    let every = computers.every(function(item, index) {
        return item.ram > 2;
    })
    console.log(every);
    

    (5) reduce 一般求综合的时候使用 2个参数,前面第一个是回调函数,第二个是all的初始值。回调函数的参数也不一样。第一个是合集,第二个是每一个分项。reduce必须有return

    比如:

    /*场景一*/
    /*计算数组中所有值得和*/
    let arr = [1, 2, 3];
    let b = arr.reduce(function(all, item) {
        return all + item;
    }, 0);
    console.log(b);
    //老办法
    let a = 0;
    arr.forEach(function(item, index) {
        a += item;
    })
    console.log(a);
    

    再比如:

    /*场景二*/
    /*假将数组中某个属性抽离到另外的数组中*/
    let a2 = [
        { color: "red", id: 1 },
        { color: "blue", id: 2 },
        { color: "yellow", id: 3 },
        { color: "green", id: 4 }
    ];
    let b3 = a2.reduce(function(all2, item) {
        all2.push(item.color);
        return all2;
    }, []);
    console.log(b3);
    

    相关文章

      网友评论

          本文标题:(四)ES6数组

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