当前位置: 首页 > Web前端 > HTML

js中Array方法归类解析

时间:2023-04-02 21:07:29 HTML

为什么要对Array方法进行归类解析因为它常用,而且面试必问改变原数组的方法pop 删除并返回数组最后一个元素push 从末尾给数组添加元素,返回新数组length值reverse 颠倒数组元素,返回颠倒后的数组shift 删除并返回第一个元素值sort 数组排序splice 删除指定位置开始指定长度的元素,返回被删除的项目。unshift 向数组开头添加多个元素,返回新数组长度不改变原数组concat 返回合并后数组的副本join 返回一个通过连接符连接数组元素的字符串slice 返回选中元素的新数组toString 返回字符串等同于join()如何循环一次删除多个元素并改变数组长度for (var i = arr.length - 1; i >= 0; i--){ if(arr[i] === 1){ arr.splice(i,1) }}操作Array元素的callback的方法集合forEach、map、filter、every、some、reduce、reduceRightforEach对元素上执行callback的操作var a = ['1', 20, 30];a.forEach((item, index, a)=>{ ++item}) // 不会改变a值a.forEach((item, index)=>{ a[index] = ++item}) // 改变a值map对元素callback并返回一个由callback返回值组成的新数组var a = ['1', 20, 30];var b = a.map((item, index, a)=>{ return ++item // 如果没有return会输出undefined}) // [2,22,32]filter返回元素callback返回值为true的元素组成的新数组var a = ['1', 20, 30];console.log(a.filter((item)=>{ return typeof item === 'string'})) //['1']every当所有元素的callback都返回true时,值为true。用于判断所有元素是否符合某一条件var a = ['1', 20, 30];console.log(a.every((item)=>{ return typeof item === 'string'})) // falsesome只要其中一个元素callback返回true,值为true。用于判断某一个元素符合单一条件的情况var a = ['1', 20, 30];console.log(a.some((item)=>{ return typeof item === 'string'})) // truereduce和reduceRight是数组元素两两按照callback的逻辑进行递归处理。返回处理完以后的结果。var a = ['1', 20, 30];var total = a.reduce(function(first, second) { return first + second; }, 2);console.log(total) // 212030(((第二个参数2+'1')+20)+30)var total = a.reduceRight(function(first, second) { return first + second; }, 2);console.log(total) // 521(((第二个参数2+30)+20)+'1')如何循环删除多个元素,数组长度不变for (let i = 0; i < arr.length; i++){ if(arr[i] === 1){ delete arr[i] }}// 删除对应元素后,对应元素被置换为undefined,但是对应的i值(i in arr为false),直接复制arr[i]=undefined时i in arr 为 trueES6 数组去重let arr = [1,2,3,1,2,3,4]let set = new Set(arr)arr = [...set]数组的一些扩展方法Array.from(),Array.of(),Array.prototype.copyWithin(),includes()参考文献Array的扩展方法