迭代(遍历)方法: forEach()、map()、 filter()、 some()、 every() ;
map()和forEach()相似，some()和every()相似
1.数组方法forEach遍历数组
array. forEach ( function (currentValue, index, arr) )
-
currentValue :数组当前项的值
-
index :数组当前项的索引
-
arr: 数组对象本身
//相当于数组遍历的 for循环 没有返回值
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);
结果为：
2.数组方法filter过滤数组
array.filter (function (currentvalue, index, arr))
-
filter() 方法创建一个新的数组 ,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
-
注意它直接返回一个新数组
-
currentValue: 数组当前项的值
-
index :数组当前项的索引
-
arr: 数组对象本身
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value >= 20;
// 返回数组里面的偶数给新数组
//return value % 2 === 0;// 返回原数组里面的偶数给新数组
});
console.log(newArr);//[66,88] //返回值是一个新数组
3.数组方法some
array. some (function (currentvalue, index, arr))
-
some() 方法用于检测数组中的元素是否满足指定条件.通俗点查找数组中是否有满足条件的元素
-
注意它返回值是布尔值如果查找到这个元素,就返回true,如果查找不到就返回false.
-
如果找到第一个满足条件的元素，则终止循环不在继续查找.
-
currentValue: 数组当前项的值
-
index :数组当前项的索引
-
arr :数组对象本身
some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value,index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value < 3;
});
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
-
filter是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来
-
some也是查找满足条件的元素是否存在，返回的是 一个布尔值，如果查找到第一个 满足条件的元 素就终止循环
4.筛选商品案例
-
把数据渲染到页面中（forEach）
-
根据价格显示数据(filter)
-
根据商品名称显示数据
-
定义数组对象数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ]; -
使用forEach遍历数据并渲染到页面中
data.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);
}); -
根据价格筛选数据
-
将渲染数据的逻辑封装到一个函数中
function setDate(mydata) {
// 先清空原来tbody 里面的数据
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 newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
});
console.log(newDate);
// 把筛选完之后的对象渲染到页面中
setDate(newDate);
});
4.根据商品名称筛选
-
获取用户输入的商品名称
-
为查询按钮绑定点击事件,将输入的商品名称与这个数据进行筛选
// 如果查询数组中唯一的元素，用some方法更合适,因为它找到这个元素,就不在进行循环，效率更高
search_pro.addEventListener('click', function() {
var arr = [];
data.some(function(value) {
if (value.pname === product.value) {
// console.log(value);
arr.push(value); //为数组添加元素
return true; // return 后面必须写true
}
});
// 把拿到的数据渲染到页面中
setDate(arr);
})
-
5.some和forEach区别
-
如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高
-
在forEach 里面 return 不会终止迭代
-
filter里面遇到return也不会终止迭代
6.trim方法去除字符串两端的空格
var str = ' hello '
console.log(str.trim()） //hello 去除两端空格
var str1 = ' he l l o '
console.log(str.trim()） //he l l o 去除两端空格，不影响中间
运用案例：
<script>
// trim方法去除字符串两侧空格
var input = document.querySelector("input");
var btn = document.querySelector("button");
var div = document.querySelector("div");
btn.addEventListener('click', function () {
var str = input.value.trim();
if (str === '') {
alert('请输入内容');
} else {
console.log(str);
console.log(str.length);
div.innerHTML = str;
}
input.value = '';
})
</script>
7.对象方法
7.1获取对象的属性名
Object.keys() 用于获取对象自身所有的属性
Object . keys (obj)
-
效果类似for...in
-
返回一个由属性名组成的数组
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]
arr.forEach(function (value) {
console.log(value);
})
7.2Object.defineProperty
object . defineProperty(obj, prop, descriptor)
-
obj: 必需。目标对象
-
prop :必需。需定义或修改的属性的名字
-
descriptor :必需。目标属性所拥有的特性
Object.defineProperty() 第三个参数descriptor说明: 以对象形式{}书写
-
value: 设置属性的值,默认为undefined
-
writable: 值是否可以重写。true| false 默认为false
-
enumerable: 目标属性是否可以被枚举。true | false默认为false
-
configurable: 目标属性是否可以被删除或是否可以再次修改特性true | false默认为false
Object.defineProperty(对象，'修改或新增的属性名'，{
value:修改或新增的属性的值,
writable:true/false,//如果值为false 不允许修改这个属性值
enumerable: false,//enumerable 如果值为false 则不允许遍历
configurable: false //configurable 如果为false 则不允许删除这个属性以及不允许再次修改第三个参数里面的特性
})