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循环滚动图片代码
Dec 08 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
简单的网页广告特效实例
Aug 19 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
uni-app从安装到卸载的入门教程
May 15 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php随机抽奖实例分析
2015/03/04 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
python设置检查点简单实现代码
2014/07/01 Python
python实现log日志的示例代码
2018/04/28 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python查看模块安装位置的方法
2018/10/16 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python:slice与indices的用法
2019/11/25 Python
Python hmac模块使用实例解析
2019/12/24 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
大学生志愿者感言
2014/01/15 职场文书
销售经理岗位职责
2014/03/16 职场文书
地雷战观后感
2015/06/09 职场文书
中学政教处工作总结
2015/08/13 职场文书