ES5新增方法（Array-String）

最新推荐文章于 2023-03-22 11:56:41 发布

原创最新推荐文章于 2023-03-22 11:56:41 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #array

javascript 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了JavaScript中数组的forEach、map、filter、some和every等方法的使用，以及在实际场景中的应用，如数据筛选和表格渲染。同时讲解了字符串的trim方法和Object.keys。还探讨了这些方法在遍历和查找操作中的区别和效率。

数组方法

数组实例

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 //可否被操作（比如删除
}