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 相关文章推荐
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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过滤危险html代码
2008/08/18 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
浅析php创建者模式
2014/11/25 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue实现跑马灯效果
2020/05/25 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python Web开发模板引擎优缺点总结
2014/05/06 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python使用turtle库绘制树
2018/06/25 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
《凡卡》教学反思
2014/04/09 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
高中军训感想
2015/08/07 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript