为什么要对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、reduceRight

  • forEach对元素上执行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'
})) // false
  • some只要其中一个元素callback返回true,值为true。用于判断某一个元素符合单一条件的情况
var a = ['1', 20, 30];
console.log(a.some((item)=>{
return typeof item === 'string'
})) // true
  • reduce和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 为 true

ES6 数组去重

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的扩展方法

js中Array方法归类解析的更多相关文章

  1. String方法,js中Array方法,ES5新增Array方法,以及jQuery中Array方法

    相关阅读:https://blog.csdn.net/u013185654/article/details/78498393 相关阅读:https://www.cnblogs.com/huangyin ...

  2. js中Array方法重写(二):myForEach;myEvery;mySome;myFilter;myReduce

    一.myForEach //myForeach 数组每个元素都执行一次回调函数 Array.prototype.myForEach = function(callback){ for(var i = ...

  3. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  4. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

  5. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  6. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  7. paip.编程语言方法重载实现的原理及python,php,js中实现方法重载

    paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...

  8. [JavaScript] JS中对Base64的解析

    JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...

  9. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

随机推荐

  1. transition 带的参数什么意思

    过渡transition:属性名  过渡效果时间 时间速度曲线  开始时间        默认值:    all              0                            e ...

  2. HDU-3714 Error Curves(凸函数求极值)

    Error Curves Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  3. poj 1543 Perfect Cubes (暴搜)

    Perfect Cubes Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15302   Accepted: 7936 De ...

  4. linux如何配置使用sendEmail发送邮件

    sendEmail是一个轻量级.命令行的SMTP邮件客户端.如果你需要使用命令行发送邮件,那么sendEmail是非常完美的选择.使用简单并且功能强大.这个被设计用在php.bash.perl和web ...

  5. 第五小节之JAVA IO流

    文件:文本文件是一种计算机文件,它是一种典型的顺序文件,其文件的逻辑结构又属于流式文件,特别的是指以ASCLL码方式(也称为文本方式)存储的文件,而更确切地说,英文.数字等字符存储的是ASCLL码,而 ...

  6. 2.SpringBoot整合Mybatis(一对一)

    前言: 上一篇整合springboot和mybatis的项目的建立,以及单表的简单的增删改查.这里是上一篇blog的地址:https://www.cnblogs.com/wx60079/p/11461 ...

  7. 裸机开发体验之led快速体验

    [root@promote led]# arm-linux-gcc -g -c led.S[root@promote led]# lsled.lds led.o led.S Makefile[root ...

  8. 重置Brocade光纤交换机的管理IP地址

     1.使用串口登录光纤交换机 使用RS/232 (9针)串口连接线将笔记本连至交换机的串口. 输入以下参数: Bits per second (每秒位数): 9600 Data Bits (数据位): ...

  9. linux上开启和分析mysql慢查询日志

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  10. 炸弹:线段树优化建边+tarjan缩点+建反边+跑拓扑

    这道题我做了有半个月了...终于A了... 有图为证 一句话题解:二分LR线段树优化建边+tarjan缩点+建反边+跑拓扑统计答案 首先我们根据题意,判断出来要炸弹可以连着炸,就是这个炸弹能炸到的可以 ...