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 相关文章推荐
JavaScript中window、doucment、body的解释
Aug 14 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
javascript如何创建对象
Aug 29 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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折半(二分)查找算法实例分析
2018/05/12 PHP
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
软件配置管理有什么好处
2015/04/15 面试题
数控专业个人求职信范文
2014/02/05 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
大学生交通专业求职信
2014/09/01 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
护士实习自荐信
2015/03/06 职场文书
歼十出击观后感
2015/06/11 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
靠谱的活动总结
2019/04/16 职场文书
Django migrate报错的解决方案
2021/05/20 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers