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 相关文章推荐
extjs render 用法介绍
Sep 11 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
node中的session的具体使用
2018/09/14 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
简单解析Django框架中的表单验证
2015/07/17 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
华为C++笔试题
2014/08/05 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
就业自荐书
2013/12/05 职场文书
培训讲师邀请函
2014/01/10 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
2014中考励志标语
2014/06/05 职场文书
教师节倡议书
2014/08/30 职场文书