ES6中新增的数组知识
JSON数组格式转换
JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,我们先来看一下JSON的数组格式怎么写。
let json = {
'0': 'xzblogs',
'1': '小智',
'2': 'zachary',
length:3
}
这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。
我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组,并打印在控制台。
let json = {
'0': 'xzblogs',
'1': '小智',
'2': 'zachary',
length:3
}
let arr=Array.from(json);
console.log(arr)
实际开发中这种方法还是比较常用的,毕竟节省了我们代码行数,也让我们的程序更清晰。
Array.of()方法:
它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串,需要使用eval来进行转换,如果你一个老手程序员都知道eval的效率是很低的,它会拖慢我们的程序。
这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上:
let arr =Array.of(3,4,5,6);
console.log(arr);
当然它不仅可以转换数字,字符串也是可以转换的,看下边的代码:
let arr =Array.of('xzblogs','小智','zachary');
console.log(arr);
find( )实例方法:
所谓的实例方法就是并不是以Array对象开始的,而是必须有一个已经存在的数组,然后使用的方法,这就是实例方法(不理解请看下边的代码,再和上边的代码进行比对,你会有所顿悟)。
这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数,函数需要传入三个参数:
value:表示当前查找的值。
index:表示当前查找的数组索引。
arr:表示当前数组。
在函数中如果找到符合条件的数组元素就进行return,并停止查找。你可以拷贝下边的代码进行测试,就会知道find作用。 let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 5;
})) 控制台输出了6,说明找到了符合条件的值,并进行返回了,如果找不到会显示undefined。
fill( )实例方法:
fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill(xzblogs,2,5);
console.log(arr); 上边的代码是把数组从第二位到第五位用xzblogs进行填充。
数组的遍历
for…of循环:
这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环。
let arr=['xzblogs','小智','zachary']
for (let item of arr){
console.log(item); // xzblogs 小智 zachary
}
for…of数组索引:有时候开发中是需要数组的索引的,那我们可以使用下面的代码输出数组索引。
let arr=['xzblogs','小智','zachary']
for (let index of arr.keys()){
console.log(index);
}
可以看到这时的控制台就输出了0,1,2,也就是数组的索引。
同时输出数组的内容和索引:我们用entries()这个实例方法,配合我们的for…of循环就可以同时输出内容和索引了。
let arr=['xzblogs','小智','zachary']
for (let [index,val] of arr.entries()){
console.log(index+':'+val);
}
entries( )实例方法:
entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码:
let arr=['xzblogs','小智','zachary']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
总结:我们通过两节课讲了ES6对数组的扩展,数组在我们的实际开发中是特别重要的,几乎我每天都要编写数组的操作代码,所以这节课一定要在听完之后自己敲一遍代码。
ES6中新增的数组知识的更多相关文章
- ES6 第七节 ES6中新增的数组知识(1)
目录 ES6 第七节 ES6中新增的数组知识(1) 第七节 ES6中新增的数组知识(1) JSON数组格式转换 Array.of()方法: find()实例方法: ES6 第七节 ES6中新增的数组知 ...
- ES6中新增的数组知识记录
JSON数组格式转换 let json = { '0': 'hello', '1': 'I am ', '2': 'michael', length:3 } 这就是一个JSON数组格式,跟普通的JSO ...
- ES6中新增let命令使用方法
在ES6中新增了let命令,该命令的用法与var 类似,但是所声明的变量只能在let命令所在的代码块(最接近let 命令的大括号内)中有效果.但是let 又有一些不同于var 的特性. 1.let定 ...
- ECMAScript 5中新增的数组方法
ECMAScript 5中定义了9个新的数组方法,用于遍历.映射.过滤.检测.简化和搜索数组. 在开始介绍之前,很有必要对这几个新增的数组方法做一个概述.首先,大多数方法的第一个参数接收一个函数,并且 ...
- ES6系列_6之新增的数组知识
1.JSON数组格式转换 JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,json数组格式如下: let json = { '0': '男', '1': '女', length:3 ...
- ES6中新增的字符串方法
实例方法:includes(), startsWith(), endsWith() 传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6 又提供 ...
- es6中对象转数组,转map
//对象转数组let array = Object.keys(userPermission).map(key=> userPermission[key]) console.log(array) ...
- ES6中新增字符串方法,字符串模板
多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123'; if(str.startsWith( ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
随机推荐
- 正确把mysql数据库从windows迁移到linux系统上的方法
(一)用mysqldump命令导出数据库文件: 在windows下cd到Mysql的bin目录: c:/data.txt这个目录和导出的文本名可以自己随便取,-B 后面的是表名,我要导出的表明叫use ...
- 什么是Unicode
写这篇博客的原因, 从做软件开始,什么ASCII码, Unicode,UTF-8,UTF-16,UTF-32......这些鬼东西总是经常碰到,只知道这些鬼是编码格式,其他的就啥都不清楚了,既然总是遇 ...
- 直流-直流(DC-DC)变换电路_BUCK&BOOST变换电路
1. 直流—直流变换器通过对电力电子器件的通断控制,将直流电压断续地加到负载上,通过改变占空比改变输出电压平均值. BUCK线路原理图如上,其中Q管/MOS作为开关管,驱动电压一般为PWM. 当开关管 ...
- 区块链3.0 ada Cardano卡尔达诺如何获得一致好评?
区块链3.0 ada Cardano卡尔达诺如何获得一致好评? EOS 的直接竞争对手是以太坊.文章介绍的卡尔达诺(Cardano)的目标就更加远大了,他要同时锁定比特币和以太坊.但大家去网上搜索卡尔 ...
- P1012 拼数
P1012 拼数 输入输出样例 输入样例 3 13 312 343 输出样例 34331213 注意 当你输入: 6321 32 407 135 13 217 应该输出: 40732321217135 ...
- Python框架----cookie和session
一.cookie和session的介绍 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie ...
- GoldenGate Logdump基本使用
Logdump是GoldenGate复制软件中附带的一个工具软件,在OGG的目录下可以找到.这个工具主要用于分析OGG生成的队列文件,查找记录.统计队列文件中的数据等. 在OGG安装目录下执行logd ...
- orm操作
一.必知必会13条 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(**kwar ...
- Struts2 概述
1. struts2应用在javaee三层结构中web层框架 2. struts2框架在struts1和webwork基础之上的发展全新的框架 3.struts2 解决的问题: 用户管理的crud操作 ...
- opencv3.1线性可分svm例子及函数分析
https://www.cnblogs.com/qinguoyi/p/7272218.html //摘自:http://docs.opencv.org/2.4/doc/tutorials/ml/int ...