ES6新增的数组知识实例小结


Posted in Javascript onMay 23, 2020

本文实例讲述了ES6新增的数组知识。分享给大家供大家参考,具体如下:

ES6新增的数组知识实例小结

1.JSON数组格式转换

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,json数组格式如下:

let json = {
  '0': '男',
  '1': '女',
  length:3
}

这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。

把上边的JSON代码使用Array.from(xxx)来转换成数组,代码如下:

let json = {
  '0': '男',
  '1': '女',
  length: 2
}

let arr = Array.from(json)
console.log(arr)

结果为:

 ["男", "女"]

上述中的length的值等于json中的除length:2以为的总和,若值多余实际,在数组中则会出现undefined。如下:

ES6新增的数组知识实例小结

结果为:

ES6新增的数组知识实例小结

 2.Array.of()方法

它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串,需要使用eval来进行转换,会拖慢我们的程序。这时候我们就可以使用Array.of方法。比如:

let arr =Array.of(3,4,5,6);
console.log(arr);

结果为:

ES6新增的数组知识实例小结

当然它不仅可以转换数字,字符串也是可以转换的。

let arr =Array.of('es6',1,'开发');
console.log(arr);

结果为:

ES6新增的数组知识实例小结

 3.find( )实例方法

 所谓的实例方法就是并不是以Array对象开始的,而是必须有一个已经存在的数组,然后使用的方法。也即实例方法是针对已存在的数组的。

在find方法中我们需要传入一个匿名函数,函数需要传入三个参数

  • value:表示当前查找的值。
  • index:表示当前查找的数组索引。
  • arr:表示当前数组。

在函数中如果找到符合条件的数组元素就进行return,并停止查找。相关代码如下:

let arr=[0,1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
  return value > 6;
}))

返回结果为:7。说明找到了符合条件的值,并进行返回了,如果找不到会显示undefined

 4.fill( )实例方法

fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('es',2,5);
console.log(arr);

结果为:

ES6新增的数组知识实例小结

上边的代码是把数组从第二位到第五位用es进行填充。

5.数组的遍历--for…of循环

(1)输出数组内容

let arr=['男','女']
for (let item of arr){
  console.log(item);
}

结果为:男、女。

(2)输出数组索引

let arr=['男','女']
for (let index of arr.keys()){
  console.log(index);
}

输出值为:

0、1

(3)同时输出数组的内容和索引--entries()方法

let arr=['男','女']
for (let [index,val] of arr.entries()){
  console.log(index+":"+val);
}

结果为:

ES6新增的数组知识实例小结

6.entries( )实例方法

entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。如下代码:

let arr=['男','女']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);

结果为:

ES6新增的数组知识实例小结

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery提交form表单简单示例分享
Mar 03 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Three.js基础部分学习
Jan 08 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
不得不知的ES6小技巧
Jul 28 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 #Javascript
You might like
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
js如何打印object对象
2015/10/16 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
numba提升python运行速度的实例方法
2021/01/25 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
毕业生简单求职信
2013/11/19 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
给小学生的新年寄语
2014/04/04 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
中小学生学籍证明
2014/10/25 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python