欢迎光临
我的个人博客网站

第三章 数组


HTML部分

<ul id="app">     <li ></li>     <li></li>     <li></li>     <li></li>     <li></li>     <li></li>     <li></li> </ul> 

不改变原数组,返回boolean值(every / some)

    let arr = [2, 5, 6, 4, 7, 8, 21, 3, 4, 5, 6, 21, 45];      //every 会执行到5,条件为false,结束迭代     let everyArr = arr.every(x => x % 2 === 0);     console.log('every: ', arr, everyArr)          //some 会执行三次 到5的时候,条件为true,结束迭代     let someArr = arr.some(x => x % 2 === 1)     console.log('some: ', arr, someArr) 

不改变原数组,但是返回一个新的数组(map / filter )

    /*不改变原数组,但是返回一个新的数组*/     //map 迭代执行数据,并返回一个新的对象     let mapArr = arr.map(x => x % 2)     console.log('map: ', arr, mapArr)      //filter 迭代执行数据,返回满足条件的"原数组中"的数据     let filterArr = arr.filter(x => x % 2)     console.log('filter: ', arr, filterArr)  

不改变原数组,但是会返回一个累加后的数(reduce)

    //reduce 迭代执行数据,返回累加后的值     /**      * @param previousValue    必需:累加值,也是返回值      * @param currentValue     必需:迭代的当前数据      * @param currentIndex     迭代的当前下标      * @param array            当前元素所属的数组对象      * @type {number}      */     let reduceArr = arr.reduce((previousValue, currentValue, currentIndex, array) => {         console.log("reduce: ", previousValue, currentIndex, array)         return currentValue + previousValue     })     console.log("reduceArr: ", reduceArr)  

创建数组 — 拷贝数组 伪数组转真数组(of / from)

    //of 创建数组 [1, 2, 3, 4]     let ofArr = Array.of(1,2,3,4);     //拷贝一个数组  但是为浅拷贝     let currentArr = [{a: 1, b: 1, c: 1, d: 1},{e: 1, f: 1, g: 1, h: 1}]     let copyArr = Array.of(...currentArr);     copyArr[0].a = 55;     console.log(copyArr, currentArr)      //from 创建一个新数组  但是也为浅拷贝     //这里获取的为伪数组,然后新的querySelectorAll获取到的就是一个真数组     let lis = document.getElementsByTagName("li");     // 伪数组支持...的展开运算符     console.log(...lis)     //但是少了真数组中的一些方法     try{         lis.forEach(item => {             console.log(item)         })     }catch (e) {         console.error(e)     }     //使用of转化     let ofNewLis = Array.of(...lis);     //使用from转化     let fromNewLis = Array.from(lis);     console.log(lis,ofNewLis,fromNewLis) 

数组填充(fill / from)

    /**/     // fill     //创建一个长度为6并默认值为0的数组     let newArr = Array(6).fill(0)     console.log(newArr)     arr.fill(0,12,13);     /*   0(参数一):填充元素      *  12(参数二):起始填充位置(不包含)      *  13(参数三):结束填充位置(包含)      *  2,3参数可不填写,则是填充所有      */     console.log(arr)  

数组元素复制(copyWithin)

    let copyWithinArr = [1,2,3,4,5,6]     /**      * 0(第一个参数): 复制数据填充的开始位置      * 3(第二个参数): 复制的数据起始位置 (包含)      * (第三个参数): 复制的数据结束位置  (不包含)      */     // copyWithinArr.copyWithin(0,3);     // console.log(copyWithinArr);      copyWithinArr.copyWithin(0, 1 ,5);     console.log(copyWithinArr);     //过程     // 1 2 3 4 5 6     // 参数二 到 参数三  取出 2 3 4 5     // 从0号位开始放     // 2 3 4 5 5 6      //起始 1 2 3 4 5 6     //取出 2 3 4 5     //结果 2 3 4 5 5 6  /*数组元素复制*/     let copyWithinArr = [1,2,3,4,5,6]     /**      * 0(第一个参数): 复制数据填充的开始位置      * 3(第二个参数): 复制的数据起始位置 (包含)      * (第三个参数): 复制的数据结束位置  (不包含)      */     // copyWithinArr.copyWithin(0,3);     // console.log(copyWithinArr);      copyWithinArr.copyWithin(0, 1 ,5);     console.log(copyWithinArr);     //过程     // 1 2 3 4 5 6     // 参数二 到 参数三  取出 2 3 4 5     // 从0号位开始放     // 2 3 4 5 5 6      //起始 1 2 3 4 5 6     //取出 2 3 4 5     //结果 2 3 4 5 5 6  

搜索数据(indexOf / lastIndexOf / find / findIndex)

    let findIndex = [1,2,3,4,5,6,7,4,9];     // indexOf:返回找到元素的索引     let indexOfIndex = findIndex.indexOf(4);     console.log("indexOf:" + indexOfIndex)     // lastIndexOf:从后面开始寻找元素的第一个,并返回索引     let lastOfIndex = findIndex.lastIndexOf(4);     console.log("lastIndexOf:" + lastOfIndex)     // includes: 存在该元素返回true,否则返回false     let includeBol = findIndex.includes(4);     console.log("includes:" + includeBol)     // find: 查找满足回调条件的第一个元素,返回查找到的数据,没有返回undefined     let findItem = findIndex.find(item => {         return item === 4;     });     console.log("find:" + findItem)     // findIndex: 查找满足回调条件的第一个数据,返回对应的下标,没有返回-1     let findItemIndex = findIndex.findIndex(item => {         return item === 4;     });     console.log("findIndex:" + findItemIndex) 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 第三章 数组
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏