遍历数组以及过滤数组

最新推荐文章于 2023-06-26 14:02:42 发布

yuanxiaoh

最新推荐文章于 2023-06-26 14:02:42 发布

阅读量238

点赞数

文章标签： javascript 前端学习开发语言

本文链接：https://blog.csdn.net/yuanxiaoh/article/details/131281947

版权

forEach filter

1.forEach

foEach遍历数组，array代表需要遍历的数组 item：数组中的元素 index：数组元素的索引

语法： array.forEach(function(item,index){})

2.渲染页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>

    </ul>
    <script>
        var arr = [
            { introduce: 'hhh', price: '$555' },
            { introduce: 'bbb', price: '$555' },
            { introduce: 'hnnnhh', price: '$555' },
            { introduce: 'huuuhh', price: '$555' }
        ]
        var ul = document.querySelector('ul')
        arr.forEach(function (item) {
            var li = document.createElement('li')
//动态创建li
            ul.appendChild(li)
            li.innerHTML = '<p>' + item.introduce + '</p>' + '<p>' + item.price + '</p>'
        })
    </script>
</body>

</html>

3.filter过滤器

filter 过滤器返回符合条件的数据组成一个新数组(返回一个新数组)

item 代表数组的元素，index代表数组的索引

Array.filter(function(item,index){})

<script>

var arr = [44, 858, 41, 33, 45]

// filter 过滤器返回符合条件的数据组成一个新数组(返回一个新数组)

/*

item 代表数组的元素，index代表数组的索引

Array.filter(function(item,index){})

*/

var arr1 = arr.filter(function (item, index) {

return item > 50

})

console.log(arr1)

</script>

4.filter实例应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        var arr = [
            {
                id: 1,
                name: '张三',
                age: 20
            },
            {
                id: 2,
                name: '李四',
                age: 22
            },
            {
                id: 3,
                name: '王五',
                age: 18
            },
            {
                id: 4,
                name: '赵云',
                age: 25
            }
        ]

        // var arr1 = arr.filter(function (item) {
        //     return item.age > 19
        // })
        // console.log(arr1)
        var arr1 = arr.filter(function (item) {
            return item.name == '张三' || item.name == '王五'
        })
        console.log(arr1)
        var arr2 = []
        arr2.forEach(function (item) {
          return  arr1.push(item.id)
        })
        console.log(arr2, join(','))
    </script>
</body>

</html>

与input框结合使用

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box {

width: 500px;

height: 500px;

margin: 0 auto;

/* background-color: aqua; */

}

</style>

</head>

<body>

请输入手机价格（输入能接受的最高价格）： <input type="text">

<button>提交</button>

<div class="box"></div>

<script>

var arr = [

{

name: '小米',

price: 2999,

},

{

name: '红米',

price: 2000,

},

{

name: '魅族',

price: 2599,

},

{

name: '华为',

price: 7999,

},

{

name: '荣耀',

price: 2899,

},

{

name: '联想',

price: 999,

},

{

name: '三星',

price: 9999,

},

{

name: '苹果',

price: 7999,

},

{

name: '诺基亚',

price: 299,

},

{

name: 'vivo',

price: 2399,

},

{

name: 'oppo',

price: 2499,

}

]

var btn = document.querySelector('button')

var inp = document.querySelector('input')

var box = document.querySelector('.box')

// btn.onclick = function () {

/* btn.addEventListener('click', function () {

var arr1 = []

var arr1 = arr.filter(function (item) {

return item.price < inp.value

})

if (arr1.length < 1) return alert('没有符合的商品')

box.innerHTML = ''

arr1.forEach(function (item) {

var div = document.createElement('div')

box.appendChild(div)

div.innerHTML = '<p>' + item.name + '</p>' + '<p>' + item.price + '</p>'

})

}) */

// }

btn.οnclick=function(){

}

</script>

</body>

</html>

yuanxiaoh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
遍历数组以及过滤数组

if (arr1.length < 1) return alert('没有符合的商品')foEach遍历数组，array代表需要遍历的数组 item：数组中的元素 index：数组元素的索引。// filter 过滤器返回符合条件的数据组成一个新数组(返回一个新数组)name: '诺基亚',name: '小米',name: '红米',name: '魅族',name: '华为',name: '荣耀',name: '联想',name: '三星',name: '苹果',与input框结合使用。
复制链接

扫一扫