ES6之数组常用方法

Wesley13
• 阅读 628

数组是js中常用的一个数据结构,熟练掌握和使用数组的方法更有利于快速开发,有些方法可以实现相同的功能,但是语义不一定适合。

数组新增元素

push

尾部加入,返回修改后的数组长度。非常常见的数组追加方法。

[1,2,3].push(5) // 尾部插入5[1,2,3,5]
// reutrn 4

unshift

首部插入,同上也是返回修改后数组长度。一般用于置顶信息的推入。

[1,2,3].unshift(5) //头部插入5 [5,1,2,3,4]
// return 4

数组删除

pop

pop() 方法用于删除并返回数组的最后一个元素。木有入参

[1,2,3].pop()
//return 3

shift

移除数组的首位元素,并且返回被移除的元素值

[1,2,3].shift()
// return 1

数组填充

fill

fill(value,start,end) 在start到end全填充为value,返回修改后的数组

[1,2,3,4,5].fill('a',1,3) // 下标1到3都填充为字符串 'a'
// return [1, "a", "a", 4, 5]

数组判断

some

元素中有一个值满足条件则返回true。数组快速判断是否有满足条件的元素。

[1,2,3].some(i=>i==2)
// return true

every

数组中每个元素都满足条件

[1,2,3].every(i=>i<4)
// return true

includes

判断数组中是否包含,可以替代indexOf(val)>1等判断,并且有其他语言中的contains效果

[1,2,3].includes(2)
// return true

数组中符合条件的第一个元素

find

找到满足条件的第一个元素并返回。

[1,2,3].find(i=>i>1)
// return 2

findIndex

返回满足条件的第一个元素下标

[1,2,3].findIndex(i=>i>1)
// return 1

数组遍历处理

filter

返回满足条件的数组,方法如其名,过滤不需要的数据。

[1,2,3].filter(i=>i>2)
//return [3]

map

遍历数组进行操作,返回修改后的数组,不改变本身

[1,2,3].map(i=>i+1) // 给每个元素+1
// return [2,3,4]

forEach

遍历,无返回值,如果只是对数组进行遍历后的查询判断,就用forEach,如果要操作里面的数据则用map更符合语义

[1,2,3].forEach((o,i)=>{console.log(o,i)}) //打印值和下标
//return undefined

reduce

合并计算,先看一个小demo,完成数组里所有项的累加

[1,2,3].reduce((total,item)=>total+item)
// return 6

reduce的入参是一个函数,该函数有四个入参function(total,currentValue, index,arr)。其中total和currentValue是必须输入的值。

  • total为初始值或必须合并计算后的值,比如在上面的代码中total会为1,3,6三个数字
  • currentValue 则为当前值。
  • index 当前元素的索引
  • arr 当前元素所属的数组对象

可适用于Promise链式调用,数组拆解合并。

Array from

和map很像,都是操作一波数组,返回操作后的数组

Array.from([1, 2, 3], x => x * 10);
// return [10,20,30]

Object keys

Object的方法,Object.keys(可迭代的数组或对象),返回数组的下标会对象的属性名。一般可以和map进行连用

Object.keys([1,2,3])
// return ["0", "1", "2"]
Object.keys({name:'小陈',age:1})
// return ["name", "age"]
Object.keys(obj).map(key=>console.log(obj[key])

Object values

Object 方法,和keys相反,返回可迭代对象的值

Object.values([1,2,3])
// return  [1, 2, 3]
Object.values({name:'小陈',age:1})
// return ["小陈", 1]

Object.entries()

可以将对象或数组结构成包含key和value的二元数组

Object.entries({name:'小明',age:10})
// return [["name", "小明"],["age", 10]]

两种遍历方式

  1. 数组遍历

    Object.entries({name:'小明',age:10}).forEach(item=>{ console.log('key:',item[0],',value:',item[1]); } ) // print // key: name ,value: 小明 // key: age ,value: 10

  2. 解构对应数组项为属性进行遍历

    for(const [key,value] of Object.entries({name:'小明',age:10})) { console.log('key:',key,',value:',value) } // print 打印相同的 // key: name ,value: 小明 // key: age ,value: 10

这里就又用了一个es6的解构特性,事先知道数组的对应下标的数据,则可以直接赋值,如 const [a,b,c] = arr

数组的一层浅克隆

 let target = [...source]

扁平化

flat

将多维数组平铺成一维数组,可选入参为数组深度

[[12,3,5],[6,7,8]].flat(2) // 扁平化,提取要嵌套的数组层次为2,。

ES6之数组常用方法

flatMap

flapMap传入一个回调函数,现将数组内的每个元素都执行了回调函数,最后再用flat拆解成一维数组。

总结

  • 不需要返回值的遍历使用forEach
  • 对数组本身进行操作并且返回的用map
  • 过滤数据用filter
  • 判断数组元素是否满足某些条件用some或every
  • 查找单个元素用find
  • 是否存在某元素用includes
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
Java开发者容易犯的十个错误
!(https://oscimg.oschina.net/oscnet/c9f00cc918684fbe8a865119d104090b.gif)Top1.数组转换为数组列表将数组转换为数组列表,开发者经常会这样做:\java\List<StringlistArrays.asList(arr);Arr
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
3A网络 3A网络
2年前
重写数组的方法(改变原数组)
重写数组的方法(改变原数组)下图是我自我学习模拟数组时总结的一些重新数组的方法:本文我们暂不讨论不改变原数组的方法,只谈改变原数组用到的6种方法。改变原数组的方法push()按参数顺序向数组尾部添加元素,返回新数组的长度javascriptvarcolorreverse()将数组倒叙,改变原数组javascriptArray.prototype.
达里尔 达里尔
11个月前
给数组添加新数据,判断数据是否重复
多选要进行数组拼接,希望判断往原数组里添的新数据是否重复,封装个简易方法languageconstdataArrayname:'aaa',id:1,name:'bbb',id:2;constnewDataname:'ccc',id:2;//要添加的新数