es5中新增的数组方法

2022-02-05 11:02:41 阅读：190 来源： 互联网

标签：function index es5 price 新增 value 数组 var

一、方法

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()方法重新渲染页面

标签：function,index,es5,price,新增,value,数组,var
来源： https://blog.csdn.net/m0_66711291/article/details/122788606

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es5中新增的数组方法

一、方法

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