JavaScript，通过展开语法...args或Array.from()和Array.map()对DOM元素进行操作

进厂打螺丝。

已于 2022-09-20 18:39:21 修改

阅读量367

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-09-20 17:22:15 首次发布

本文链接：https://blog.csdn.net/z123xxxxx/article/details/126956573

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.Array.map()

Array.map() 方法用来返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
语法：array.map(function(currentValue,index,arr), thisValue)
注意：function()里面需要return出处理后的值
arr.map()参数说明

let arr=[1,2,3,4,5]
let newArr=arr.map(function(currentValue,index,arr){
    console.log(currentValue,index,arr);
       return {
         value:++currentValue,
         index:index
       }
})
console.log(newArr);

111

2.展开语法

…args在变量的位置的时候就是聚合数据，在值的位置的时候就是展开数据

<style>
    .hide {
      display: none;
    }
</style>

<body>
  <div>hdcms</div>
  <div>xzzz</div>
  <div>xxxx</div>
</body>

<script>
  let divs = document.querySelectorAll("div");//获取所有的DOM元素
  //通过...divs把divs里面的数据展开，在[...divs]生成一个数组
  console.log(...divs);//<div>hdcms</div>   <div>xzzz</div>  <div>xxxx</div>
  console.log([...divs])//如下图，[...divs]已变成一个数组
  [...divs].map(function(div) {
    div.addEventListener("click", function() {
      this.classList.toggle("hide");
    });
  });
</script>

[…divs]
222

3.Array.from

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。
语法 Array.from(arr, (item)=>{}) ，第一个参数arr为要被转换的类数组对象，第二个参数为一个function函数，其用法和Array.map()的用法类似，也可以返回一个操作后的数组

基本用法：

let arr = [12,12,13,45,97,9797,564,134,45642]
let set = new Set(arr)//set(),用于在数组中去重
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

对DOM结构进行操作的用法:

<body>
    <button message="xxx">button</button>
    <button message="zzz">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    console.log(btns); //包含length属性
   let newArr= Array.from(btns, (item) => {
        item.style.background = 'red';
        return item
    });
    console.log(newArr);
</script>

进厂打螺丝。

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript，通过展开语法...args或Array.from()和Array.map()对DOM元素进行操作

JavaScript，通过展开语法或Array.from()和Array.map()对DOM元素进行操作
复制链接

扫一扫