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面向对象编程
Nov 15 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
js实现继承的5种方式
Dec 01 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
从vue源码看props的用法
2019/01/09 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python 序列的方法总结
2016/10/18 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python 删除非空文件夹的实例
2018/04/26 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
竞选文艺委员演讲稿
2014/04/28 职场文书
运动会演讲稿200字
2014/08/25 职场文书