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 parseInt 函数分析(转)
Mar 21 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
安全生产月活动总结
2014/05/04 职场文书
推荐信怎么写
2014/05/09 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
合作合同协议书
2016/03/21 职场文书