filter some every map forEach的用法及应用

最新推荐文章于 2023-09-25 09:14:17 发布

❀XXH❀

最新推荐文章于 2023-09-25 09:14:17 发布

阅读量136

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/xxhsym/article/details/105981817

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

every
//数组中的元素全部满足指定条件返回true
//运行结果为false
var checknum = [15,3,2,6,7,1,9,10];
var checkresult = checknum.every(function(item,index,array){
return item > 1 ;
});
alert(checkresult);
some
//数组中的元素部分满足指定条件返回true
//运行结果为false
var checknum = [15,3,2,6,7,1,9,10];
var checkresult = checknum.some(function(item,index,array){
return item > 15;
});
alert(checkresult);
filter
//把符合条件的项目组成一个新的数组
var checknum = [15,3,2,6,7,1,9,10];
var checkresult = checknum.filter(function(item,index,array){
return item > 3;
});
checkresult.forEach(function(value, index, array){
console.log(value);
})
map
//对数组元素进行运算并将运算结果
var checknum = [15,3,2,6,7,1,9,10];
var checkresult = checknum.map(function(value, index, array){
return ‘新值：’ + parseInt(value + 1);
});
forEach
checkresult.forEach(function(value, index, array){
console.log(value);
})
以下代码功能为：查询价格跟名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>search goods</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="search">
    Search Buy Price:<input type="text" class="start">-<input type="text" class="end">
<button class="search-price">Search</button>Search By Name:<input type="text" class="product">
    <button class="search-pro">Search</button>
</div>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>Product Name</th>
        <th>Price</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
window.onload=function(){
    var data=[{
    id:1,
    pname:"小米",
    price:3999},
    {
    id:2,
    pname:"OPPO",
    price:2999},
    {
    id:3,
    pname:"华为",
    price:4999},
    {
    id:4,
    pname:"荣耀",
    price:1999}
    ];

    var tbody=document.querySelector('tbody');
    var search_price=document.querySelector('.search-price');
    var start=document.querySelector(".start");
    var end=document.querySelector(".end");
    var product=document.querySelector(".product");
    var search_pro=document.querySelector('.search-pro');
       setDate(data);
    function setDate(myData){
    tbody.innerHTML="";
    myData.forEach(function(value){
    var tr=document.createElement("tr");
    tr.innerHTML='<td>'+value.id+'</td><td>'+value.pname+'</td><td>'+value.price+'</td>';
    tbody.appendChild(tr);
    });
    }
    //当点击按钮，可以根据我们的商品价格去筛选数组里面的对象

    search_price.addEventListener("click",function(){

    var newData=data.filter(function(value){
    return value.price>=start.value&&value.price<=end.value;
    });
    setDate(newData);
    });
    search_pro.addEventListener("click",function(){
    var arr=[];
    data.some(function(value){

    if(value.pname===product.value){
    arr.push(value);
    return true;
    }
    });
    setDate(arr);
    });

    }
</script>
</body>
</html>

*{
magrin:0;
padding:0;
}
input{
height:25px;
width:100px;
}
table{
border-collapse:collapse;/*去掉zd表格的间隙*/
position:absolute;
top:60px;
}
table th,table td{
 border:1px solid black;
 width:150px;
 text-align:center;
 }

图片：
在这里插入图片描述

❀XXH❀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
filter some every map forEach的用法及应用

every//数组中的元素全部满足指定条件返回true//运行结果为falsevar checknum = [15,3,2,6,7,1,9,10];var checkresult = checknum.every(function(item,index,array){return item > 1 ;});alert(checkresult);some//数组中的元素部分满...
复制链接

扫一扫