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 uaMatch源代码
Feb 14 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
vue实现全匹配搜索列表内容
Sep 26 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框架Swoole定时器Timer特性分析
2014/08/19 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
javascript如何实现create方法
2019/11/04 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python操作MongoDB基础知识
2013/11/01 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
历史学专业推荐信
2013/11/06 职场文书
办理护照介绍信
2014/01/16 职场文书
摄影助理岗位职责
2014/02/07 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
电子商务专业自荐信
2014/06/02 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
小学毕业感言100字
2015/07/30 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android