美文网首页
数组的那些事

数组的那些事

作者: 超开心儿 | 来源:发表于2020-12-30 15:44 被阅读0次

    1、includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

    语法:(有2种)

    (1)arr.includes(searchElement) ;searchElement 是必须的,表需要查找的元素值。

    例子:

           [1, 2, 3].includes(4);              // false
           [1, 2, 3].includes(3, 3);          // false
           [1, 2, 3].includes(2);             / true
           [1, 2, 3].includes(3, -1);         // true
           [1, 2, NaN].includes(NaN);     // true
    

    (2)arr.includes(searchElement, fromIndex) ; 可选,从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。(2种情况)

    fromIndex 大于等于数组长度

    如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索

    实例:

            var arr = ['a', 'b', 'c'];
            arr.includes('c', 3);      //false
            arr.includes('c', 100);     // false
    

    计算出的索引小于 0

    如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。

    实例:

            数组长度是3 ,fromIndex 是 -100,computed index 是 3 + (-100) = -97 
            var arr = ['a', 'b', 'c'];
    
            arr.includes('a', -100);     // true
    
            arr.includes('b', -100);     // true
    
            arr.includes('c', -100);     // true
    

    2、数组函数some、every、find、filter、map、forEach有什么区别?

    1608180489(1).jpg

    some

    • 不创建新数组
    • 不改变原数组
    • 输出的是,判断为true 则马上跳出循环并return成true
    • 回调函数的参数,item(数组元素)、index(序列)、arr(数组本身)
    • 使用return操作输出,会循环数组的每一项,并在回调函数中操作
    // 计算对象数组中每个电脑的操作系统是否可用,大于16位操作系统表示可用,否则不可用
    var computers = [
        { name: "Apple", ram: 8 },
        { name: "IBM", ram: 4 },
        { name: "Acer", ram: 32 },
    ];
    var some = computers.some(function (computer) {
        return computer.ram > 16;
    });
    console.log(some);  //true
    console.log(computers);//[{ name: "Apple", ram: 8 },{ name: "IBM", ram: 4 },{ name: "Acer", ram: 32 }]
    

    every (与some相反)

    • 不创建新数组
    • 不改变原数组
    • 输出的是,判断为false 则马上跳出循环并 return成false
    • 回调函数的参数,item(数组元素)、index(序列)、arr(数组本身)
    • 使用return操作输出,会循环数组的每一项,并在回调函数中操作
    var computers = [
        { name: "Apple", ram: 8 },
        { name: "IBM", ram: 4 },
        { name: "Acer", ram: 32 },
    ];
    var every = computers.every(function (computer) {
        return computer.ram > 16;
    });
    console.log(every);//false
    

    find

    • 不创建新数组
    • 不改变原数组
    • 输出的是一旦判断为true,则跳出循环并输出符合条件的数组元素
    • 回调函数的参数,item(数组元素)、index(序列)、arr(数组本身)
    • 使用return操作输出,会循环数组的每一项,并在回调函数中操作
    //假定有一个对象数组,找到符合条件的对象
    var users = [
        { name: 'Jill' },
        { name: 'Alex', id: 1 },
        { name: 'Bill' },
        { name: 'Alex' },
    ];
    var user = users.find(function (user) {
        return user.name === 'Alex';
    });
    console.log(user);//[{ name: 'Alex', id: 1 }]
    
    //假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
    var posts = [
        { id: 1, title: "Node.js" },
        { id: 2, title: "React.js" },
    ];
    var comment = { postId: 1, content: 'hello' };
    function postForComment(posts, comment) {
        return posts.find(function (post) {
            return post.id === comment.postId
        })
    };
    console.log(postForComment(posts,comment));//{ id: 1, title: "Node.js" }
    

    filter

    • 创建新数组
    • 不改变原数组
    • 输出的是 判断为true的数组元素形成新的数组(会自动创建一个新数组)
    • 回调函数的参数,item(数组元素)、index(序列)、arr(数组本身)
    • 使用return操作输出,会循环数组的每一项,并在回调函数中操作
    //假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中
    var products = [
        { name: "cucumber", type: "vegetable" },
        { name: "banana", type: "fruit" },
        { name: "celery", type: "vegetable" },
        { name: "orange", type: "fruit" },
    ];
    var filtered = products.filter(function (product) {
        return product.type === "vegetable"
    });
    console.log(filtered);//[{ name: "cucumber", type: "vegetable" }, { name: "celery", type: "vegetable" }]
    
    //假定有一个对象数组(A),过滤掉不满足以下条件的对象
    //条件:蔬菜 数量大于0 价格小于10
    var products = [
        { name: "cucumber", type: "vegetable", quantity: 0, price: 1 },
        { name: "banana", type: "fruit", quantity: 10, price: 16 },
        { name: "celery", type: "vegetable", quantity: 30, price: 8 },
        { name: "orange", type: "fruit", quantity: 3, price: 6 },
    ];
    products = products.filter(function (product) {
        return product.type === 'vegetable'
            && product.quantity > 0
            && product.price < 10
    });
    console.log(products);//[{ name: "celery", type: "vegetable", quantity: 30, price: 8 }]
    console.log(products)//[{ name: "cucumber", type: "vegetable" },{ name: "banana", type: "fruit" },{ name: "celery", type: "vegetable" },{ name: "orange", type: "fruit" }]
    

    map

    • 创建新数组
    • 不改变原数组
    • 输出的是 return什么就输出什么新数组
    • 回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
    • 使用return操作输出,会循环数组每一项,并在回调函数中操作
    //假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
    var numbers = [1, 2, 3, 4, 5];
    var doubled = numbers.map(function (number) {
        return number * 2;
    })
    console.log(doubled);//[2,4,6,8,10]
    
    //假定有一个对象数组(A),将A数组中的对象某个属性的值存储到B数组中
    var cars = [
        { model: 'Buick', price: 'cheap' },
        { model: 'BMW', price: 'expensive' },
    ];
    var prices = cars.map(function (car) {
        return car.price;
    });
    console.log(prices)//(2) ["cheap", "expensive"]
    

    reduce

    • 创建新数组
    • 不改变原数组
    • 输出的是 return叠加什么就输出什么 新数组
    • 使用return操作输出,会循环数组每一项,并在回调函数中操作
    • 回调函数参数
      (1)pre(第一次为数组的第一项,之后为上一项的操作)
      (2)next(数组的下一项)
      (3)index(next项的序列)
      (4)arr(数组本身)
      (5)回调函数后的改变第一项参数(不影响原数组)
    //计算数组中所有值的总共
    var numbers = [10, 20, 30];
    var sum = 0;
    //reduce第二个参数是sum的值,与上面的sum无关
    var sumValue = numbers.reduce(function (sum, number) {
        return sum += number;
    }, 0);
    console.log(sumValue);//60
    
    //使用reduce能同时实现map和filter,reduce能遍历数组两遍
    const numberss=[10,20,30,40];
    const doubleedOver50=numberss.reduce((finalList,num)=>{
        num=num*2;
        if(num>50){
            finalList.push(num);
        }
        return finalList;
    },[]);
    console.log(doubleedOver50);//[60,80]
    
    //将数组中对象的某个属性抽离到另外一个数组中
    var primaryColors = [
        { color: 'red' },
        { color: 'yellow' },
        { color: 'blue' },
    ];
    var color = primaryColors.reduce(function (previous, primaryColor) {
        previous.push(primaryColor.color);
        return previous;
    }, []);
    console.log(color);//["red", "yellow", "blue"]
    
    // 判断字符串括号是否对称,遇到(时加1,遇到)时减1
    function balancedParens(string) {
        return !string.split("").reduce(function (previous, char) {
            if (previous < 0) { return previous };//若")"比"("先出现
            if (char == "(") { return ++previous };
            if (char == ")") { return --previous };
            return previous;
        }, 0);
    };
    console.log(balancedParens(")((()))"));//false
    

    forEach

    遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组 .length次数,且无法break中途跳出循环
    不支持return操作输出,return只用于控制循环是否跳出当前循环。因此,难操作成新数组、新值

    var colors = ['red', 'blue', 'green']
    colors.forEach(function (color) {
        console.log(color);//red blue green
    })
    

    注释:本文部分内容摘抄于csdn中大佬文章中,评论区欢迎各位大佬的批评与指正。

    相关文章

      网友评论

          本文标题:数组的那些事

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