ES6中数组array新增方法实例总结


Posted in Javascript onNovember 07, 2017

本文实例讲述了ES6中数组array新增方法。分享给大家供大家参考,具体如下:

●find :

let arr=[1,2,234,'sdf',-2];
arr.find(function(x){
  return x<=2;
})//结果:1,返回第一个符合条件的x值
arr.find(function(x,i,arr){
  if(x<2){console.log(x,i,arr)}
})//结果:1 0 [1, 2, 234, "sdf", -2],-2 4 [1, 2, 234, "sdf", -2]

find的参数为回调函数,回调函数可以接收3个参数,值x、所以i、数组arr,回调函数默认返回值x。

●findIndex :

let arr=[1,2,234,'sdf',-2];
arr.findIndex(function(x){
  return x<=2;
})//结果:0,返回第一个符合条件的x值的索引
arr.findIndex(function(x,i,arr){
  if(x<2){console.log(x,i,arr)}
})//结果:1 0 [1, 2, 234, "sdf", -2],-2 4 [1, 2, 234, "sdf", -2]

findIndex和find差不多,不过默认返回的是索引。

●includes:

let arr=[1,2,234,'sdf',-2];
arr.includes(2);// 结果true,返回布尔值
arr.includes(20);// 结果:false,返回布尔值
arr.includes(2,3)//结果:false,返回布尔值

includes函数与string的includes一样,接收2参数,查询的项以及查询起始位置。

●keys:

let arr=[1,2,234,'sdf',-2];
for(let a of arr.keys()){
  console.log(a)
}//结果:0,1,2,3,4 遍历了数组arr的索引

keys,对数组索引的遍历

●values:

let arr=[1,2,234,'sdf',-2];
for(let a of arr.values()){
  console.log(a)
}//结果:1,2,234,sdf,-2 遍历了数组arr的值

keys,对数组项的遍历

●entries:

let arr=['w','b'];
for(let a of arr.entries()){
  console.log(a)
}//结果:[0,w],[1,b]
for(let [i,v] of arr.entries()){
  console.log(i,v)
}//结果:0 w,1 b

entries,对数组键值对的遍历。

●fill:

let arr=['w','b'];
arr.fill('i')//结果:['i','i'],改变原数组
arr.fill('o',1)//结果:['i','o']改变原数组,第二个参数表示填充起始位置
new Array(3).fill('k').fill('r',1,2)//结果:['k','r','k'],第三个数组表示填充的结束位置

fill方法改变原数组,当第三个参数大于数组长度时候,以最后一位为结束位置。

●Array.of():

Array.of('w','i','r')//["w", "i", "r"]返回数组
Array.of(['w','o'])//[['w','o']]返回嵌套数组
Array.of(undefined)//[undefined]依然返回数组
Array.of()//[]返回一个空数组

Array.of()方法永远返回一个数组,参数不分类型,只分数量,数量为0返回空数组。

●copyWithin:

["w", "i", "r"].copyWithin(0)//此时数组不变
["w", "i", "r"].copyWithin(1)//["w", "w", "i"],数组从位置1开始被原数组覆盖,只有1之前的项0保持不变
["w", "i", "r","b"].copyWithin(1,2)//["w", "r", "b", "b"],索引2到最后的r,b两项分别替换到原数组1开始的各项,当数量不够,变终止
["w", "i", "r",'b'].copyWithin(1,2,3)//["w", "r", "r", "b"],强第1项的i替换为第2项的r

copyWithin方法接收三个参数,被替换数据的开始处、替换块的开始处、替换块的结束处(不包括);copyWithin(s,m,n).

●Array.from():

Array.from({'0':'w','1':'b',length:2})//["w", "b"],返回数组的长度取决于对象中的length,故此项必须有!
Array.from({'0':'w','1':'b',length:4})//["w", "b", undefined, undefined],数组后2项没有属性去赋值,故undefined
Array.from({'0':'w','1':'b',length:1})//["w"],length小于key的数目,按序添加数组
let divs=document.getElementsByTagName('div');
Array.from(divs)//返回div元素数组
Array.from('wbiokr')//["w", "b", "i", "o", "k", "r"]
Array.from([1,2,3],function(x){
    return x+1})//[2, 3, 4],第二个参数为回调函数

Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
js中settimeout方法加参数
Feb 28 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
对比分析json及XML
Nov 28 Javascript
JavaScript严格模式详解
Nov 18 Javascript
js实现简单的验证码
Dec 25 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
jQuery使用方法
Feb 04 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
You might like
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python调用百度API实现人脸识别
2020/11/17 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
返乡农民工证明
2015/06/24 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Python使用openpyxl批量处理数据
2021/06/23 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA