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>