JavaScript高级-----5.ES5中的新方法(数组)
3. ES5中的新方法
3.1 概述
3.2 数组方法
<script>
//forEach 迭代(遍历)数组
var arr = [1, 2, 3];
arr.forEach(function(value, index, array) {
console.log("每个数组的元素" + value);
console.log("每个数组的索引号" + index);
console.log("数组本身" + array);
})
</script>
打印结果
求和：
<script>
//forEach 迭代(遍历)数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
console.log("每个数组的元素" + value);
console.log("每个数组的索引号" + index);
console.log("数组本身" + array);
sum += value;
})
console.log(sum);//6
</script>
<script>
//filter筛选数组
var arr = [12, 66, 4, 88];
var newArr = arr.filter(function(value, index) {
//返回数组中值大于20的元素
return value >= 20;
});
console.log(newArr); // [66, 88]
</script>
筛选出偶数
<script>
//filter筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
//筛选所有的偶数
return value % 2 === 0
});
console.log(newArr); // [12, 66, 4, 88]
</script>
<script>
//some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value) {
return value >= 20;
});
console.log(flag); //true 数组中有大于20的元素，所以返回true
</script>
检查数组中是否有'pink'元素
<script>
//some 查找数组中是否有满足条件的元素
console.log(flag); //true 数组中有大于20的元素，所以返回true
var arr1 = ['red', 'pink', 'blue'];
var flag1 = arr1.some(function(value) {
return value == 'pink'; //检查数组中是否有'pink'元素
});
console.log(flag1);//true
</script>
- filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
- some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
valeu/index/array用到哪个参数就写哪个参数，用不到就省略不写
案例：查询商品案例
初始结构以及准备好的数据：
<body>
<div class="search">
按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增数组方法操作数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ];
</script>
</body>
初始样式：
(1)把数据渲染到页面中（forEach）
<script>
// 利用新增数组方法操作数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ];
// 1. 获取相应的元素
var tbody = document.querySelector('tbody');
// 2. 把数据渲染到页面中
data.forEach(function(value) { //数组中的每个元素value都是一个对象
var tr = document.createElement('tr'); //先创建行
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; //行里面有3个单元格
tbody.appendChild(tr);
})
</script>
效果如下：
（2）根据价格查询商品（filter）
// 1. 获取相应的元素
var tbody = document.querySelector('tbody');
var search_price = document.querySelector('.search-price');
var start = document.querySelector('.start');
var end = document.querySelector('.end');
// 2. 把数据渲染到页面中
data.forEach(function(value) { //数组中的每个元素value都是一个对象
var tr = document.createElement('tr'); //先创建行
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; //行里面有3个单元格
tbody.appendChild(tr);
})
// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
search_price.addEventListener('click', function() {
var newData = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
})
console.log(newData);
});
在价格输入框输入1和2000之后console.log(newData);的打印结果：
//下面是将打印出来的内容重新渲染到页面中，这时想到将之前写的渲染页面代码封装成一个函数
// 1. 获取相应的元素
var tbody = document.querySelector('tbody');
var search_price = document.querySelector('.search-price');
var start = document.querySelector('.start');
var end = document.querySelector('.end');
// 2. 把数据渲染到页面中
function setData(mydata) {
tbody.innerHTML = ''; //先清空tbody里面的数据
mydata.forEach(function(value) { //数组中的每个元素value都是一个对象
var tr = document.createElement('tr'); //先创建行
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; //行里面有3个单元格
tbody.appendChild(tr);
})
}
setData(data);
// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
search_price.addEventListener('click', function() {
var newData = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
})
setData(newData);
});
（3）根据商品名称查找商品（some）
// 1. 获取相应的元素
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');
// 2. 把数据渲染到页面中
function setData(mydata) {
tbody.innerHTML = ''; //先情况tbody里面的数据
mydata.forEach(function(value) { //数组中的每个元素value都是一个对象
var tr = document.createElement('tr'); //先创建行
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; //行里面有3个单元格
tbody.appendChild(tr);
})
}
setData(data);
// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
search_price.addEventListener('click', function() {
var newData = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
})
setData(newData);
});
// 4. 根据商品名称查找商品
// 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高
var arr = [];
search_pro.addEventListener('click', function() {
data.some(function(value) {
if (value.pname === product.value) {
arr.push(value);
return true; //这个true一定要写 some函数只有察觉到返回的是true,才会停止遍历后面的元素 效率更高
}
});
setData(arr);
});
forEach和some的区别
<script>
var arr = ['red', 'green', 'blue', 'pink'];
//1. forEach
arr.forEach(function(value, index) {
if (value == 'green') {
console.log('找到了该元素');
return true; //在forEach里面return不会终止迭代,仅仅终止了本轮循环
}
console.log(index);
})
</script>
<script>
var arr = ['red', 'green', 'blue', 'pink'];
arr.some(function(value, index) {
if (value == 'green') {
console.log('找到了该元素');
return true; //在some里面return true终止迭代
}
console.log(index);
})
</script>
若在上述some代码中return false；
对于filter
<script>
var arr = ['red', 'green', 'blue', 'pink'];
arr.filter(function(value, index) {
if (value == 'green') {
console.log('找到了该元素');
return true; //在filter里面return true不终止迭代，和forEach一样
}
console.log(index);
})
</script>
