- A+
所属分类：Web前端
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) 
