es5中新增的数组方法

2023-10-10 19:24:52

一、方法

1.foreach(value,index,arr);

遍历数组，第一个值为数组中的每个元素，第二个值为每个元素的索引，第三个值为数组本身。

var arr2 = [1,2,3];
        arr2.forEach(function(value,index,array){
            console.log("每个数组元素"+value);
            console.log("每个数组索引"+index);
            console.log("数组本身"+array);
        })

2.filter(value,index,arr)

查找数组中对应符合要求的项并返回新的数组。

 var arr2 = [1,2,3];
var newarr = arr2.filter(function(value,index,array){
            return value >= 2;
        })
        console.log(newarr);

3.some(value,index,arr)

查找数组中是否存在符合要求的值，返回值为布尔类型。

var arr2 = [1,2,3];
var flag = arr2.some(function(value,index,array){
            return value >= 3;
        })
        console.log(flag);

返回值为true。

二、应用实例———商品查找

要求可以利用价格和名称对商品进行查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品查找页面</title>
    <style>
        *{
            text-align: center;
            padding: 0px;
            box-sizing: border-box;
        }
       
        div{
            width: 1400px;
            text-align: center;
        }
        table,td,th{
            border: 1px solid black;
            margin: 0 auto;
        }

        td{
            width: 150px;
        }
    </style>
</head>
<body>

    <div>
        <span>价格区间</span>

        <input type="number" id="smaller">
        - 
        <input type="number" id="bigger">

        <button onclick="cheekbyprice();">搜索</button>

        <span>商品名称</span>

        <input type="text" id="name">

        <button onclick="cheekbyname();">查询</button>
    </div>
    <br>
    <div>
        <table>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
            <tbody id="table">

            </tbody>
        </table>
    </div>
   
    <script>
        var data = [
            {
                index:1,
                name:"MuseDash",
                price:18,
            },
            {
                index:2,
                name:"Phigros",
                price:0,
            },
            {
                index:3,
                name:"Cytus",
                price:12,
            },
            {
                index:4,
                name:"同步音律",
                price:128,
            },
        ] 

        var table = document.getElementById("table");
        
        var setdata = function(mydata){
            table.innerHTML = "";
            mydata.forEach(function(value){
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>"+value.index+"</td><td>"+value.name+"</td><td>"+value.price+"</td>";
            table.appendChild(tr);
        })}

        setdata(data);
        
        var cheekbyprice = function(){
            var small = document.getElementById("smaller").value;
            var big = document.getElementById("bigger").value;
            var newdata = data.filter(function(value,index,arr){
            return (value.price >=small && value.price <=big);
            })
            setdata(newdata);
        }
        
        var cheekbyname = function(){
            var name = document.getElementById("name").value;
            var newdata = data.filter(function(every){
                return (every.name == name);
            })
            setdata(newdata);
        }
    </script>
</body>
</html>

1.利用数组储存商品信息

2.利用foreach()方法将商品信息渲染到页面上，可以

3.利用filter方法创建新的数组，使用封装好的setdata()方法重新渲染页面

码农公寓

一、方法

二、应用实例———商品查找

相关文章