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 相关文章推荐
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
详解Vue方法与事件
Mar 09 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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中cookie的作用域
2008/03/27 PHP
php 分页类 扩展代码
2009/06/11 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
Python求解任意闭区间的所有素数
2018/06/10 Python
python实现反转部分单向链表
2018/09/27 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
销售人员个人求职信
2013/09/26 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
事务机电主管工作职责
2014/02/25 职场文书
《钱学森》听课反思
2014/03/01 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
信息技术国培研修日志
2015/11/13 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL