数组方法
数组实例
- forEach()遍历数组
var arr=[1,2,3]
arr.forEach((value,index,array)=>{
console.log(value, '数组元素')
console.log(index, '索引')
console.log(array, '数组本身')
})
- map()遍历数组
- filter()筛选数组
var arr=[1,2,3,12,66,4,88]
const res=arr.filter((value,index,array)=>{
// 返回到新数组
return value>=20;
})
console.log(res, '')
- some()是否满足条件
var arr=[1,2,3,12,66,4,88]
var fla=arr.some((value,index,array)=>{
// 找到之后停止查找
return value>=20;
})
console.log(fla, '返回bool')
- every()查询是否存在
查询实例
<table class="table">
<thead>
<tr>
<th>id</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var data=[
{
id:1,
name:'小米',
price:1999
},
{
id:2,
name:'小米2',
price:19
},
{
id:3,
name:'小米3',
price:199
},
{
id:4,
name:'小米4',
price:19993
}
]
// 获取相应元素
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')
// 渲染数据
setData(data)
// 封装数据渲染
function setData(mydata) {
tbody.innerHTML=''
mydata.forEach(value=>{
console.log(value);
var tr=document.createElement('tr');
tr.innerHTML=`<td>${value.id}</td><td>${value.name}</td><td>${value.price}</td>`;
tbody.append(tr);
})
}
// 查询价格
search_price.addEventListener('click',()=>{
var newData=data.filter((value)=>{
return value.price>=start.value&&value.price<=end.value
})
console.log(newData, '')
// 渲染
setData(newData)
})
// 按照名称查询
// 效率更高,找到不再执行
search_pro.addEventListener('click',()=>{
var arr=[]
data.some((value)=>{
if(value.name===product.value){
arr.push(value)
return true;
}
})
setData(arr)
})
</script>
forEach()与some()的区别
forEach查找数组内容会遍历完
some找到内容后直接退出循环
字符串方法
- trim()
去除字符串两端空白字符,返回新字符串 - Object.keys()
获取对象自身所有属性,返回一个属性名的数组,可把值用forEach遍历出来 - Object.defineProperty(obj,prop,descriptor)
给对象增加属性或者修改原有属性
descriptor:{
value:***,
writable:true, //是否可以重写
enumerable:true, //是否枚举,是否显示
configurable:false //可否被操作(比如删除
}