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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
js移动端图片压缩上传功能
Aug 18 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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的String类代码
2010/04/20 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
GWT的应用有哪两种部署模式
2012/12/21 面试题
优秀毕业生推荐信
2013/11/02 职场文书
股权收购意向书
2014/04/01 职场文书
团代会邀请函
2015/02/02 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
OpenCV-Python实现油画效果的实例
2021/06/08 Python