1.Array.map()
Array.map() 方法用来返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
语法:array.map(function(currentValue,index,arr), thisValue)
注意:function()里面需要return出处理后的值
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);
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]
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>