浅谈ES6新增的数组方法和对象


Posted in Javascript onAugust 08, 2017

es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map

let arr=[1,2,3,4,3,2,1,2];

遍历数组最简洁直接的方法

for (let value of arr) {
  console.log(value);//输出1,2,3,4,3,2,1,2
}

1. 数组.map()

返回一个新的数组,es5要复制一个新的数组我们一般用循环,现在直接用map

let arr=[1,2,3,4,3,2,1,2];
let newArr=arr.map((value,index,arr)=>value)
console.log(newArr)//输出[1,2,3,4],当然里面也可以返回下标的数组
console.log(newArr==arr)//输出false

2. 数组.filter()

过滤,返回为真的值,

let arr=[1,2,3,4,3,2,1,2];
let newArr1=arr.filter((value,index,arr)=>value>=3)
console.log(newArr1);//输出[3,4,3]

3. 数组.reduce()

每个参数的意思previousValue上次回调的返回值或者初始值,currentValue正在处理的数组值,currentIndex正在处理函数的下标

//以前找最大值,最小值我们是用的2层循环来找的,现在直接一行代码搞定,是不是很爽
let arr=[1,2,3,4,3,2,1,2];
let newArr2=arr.reduce((pre,cur,curIndex,arr)=>pre>cur?pre:cur)
//pre=1不大于cur=2,返回2;
//pre接收返回值2;pre=2不大于cur=3,返回3
.....
//一直找到4并且返回4;
//pre接收4,pre=4大于pre=3然后就一直返回的都是4,这样就会找到最大值

console.log(newArr2)//输出4,找到最大值,如果想找最小值只需要pre<cur?pre:cur

es6提供的一种新的数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值(包括NaN),但是set内部对象是不相等的

Set不是数组,自然就没有length属性,它有size属性,set.size,就是返回它的成员数量;

let set=new Set([1,2,3,4,3,2,1]);//这里必须传入的是数组
console.log(set)//输出set {1,2,3,4}
console.log(set.add(2))//依然输出set {1,2,3,4}
console.log(set.add(5))//输出 set {1,2,3,4,5}
console.log(set.delete(1))//输出true,表示删除成功
console.log(set.has(2))//输出true,表示存在这个值
console.log(set.clear())//输出undefined,这个方法知识删除所有值,并没有返回值
console.log(set)//这时候set已经清空了,所以输出为 set {}

Array.from()方法从一个类似数组或可以迭代的对象中创建一个新的数组实例

let set=new Set([1,2,3,4,3,2,1]);
console.log(Array.from(set))//用这个方法就可以把set对象转换我数组,输出为[1,2,3,4,3,2,1]
console.log(Array.from('hello'))//输出为['h','e','l','l','o']

利用set 和 from达到数组去重

let arr1=[1,2,2,1,1,3,5,2]
console.log(Array.from(new Set(arr1)))//输出[1,2,3,5],以后别人问你怎么数组去重,你可以装下逼了

写到这里突然想到es6的...方法

console.log([...new Set(arr1)])

Set的遍历方法

for (let value of set.keys()) {
console.log(value)//输出键
}
for (let value of set.values()) {
console.log(value)//输出值
}
for (let value of set.entries()) {
console.log(value)//输出键值对
}

es6提供了Map数据结构,它类似于对象,也是键值对的集合,但是它的强大在于键的范围可以任何类型的数据;

let map=new Map([["name","张三"],[[1,2,3],18],[{},"男"]])
console.log(map)
console.log(map.set("name","李四"))//输出 Map { 'name' => '张三', [ 1, 2, 3 ] => 18, {} => '男' }如果没有这个键,就会添加新的键值对到后面
console.log(map.get("name"))//输出李四
console.log(map.delete("name"))//输出true
console.log(map.clear())//删除所有键值对

以上这篇浅谈ES6新增的数组方法和对象就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
带左右箭头图片轮播的JS代码
Dec 18 Javascript
javascript制作2048游戏
Mar 30 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
JS重载实现方法分析
Dec 16 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 #Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 #Javascript
详解express与koa中间件模式对比
Aug 07 #Javascript
JS实现简单短信验证码界面
Aug 07 #Javascript
ReactNative Image组件使用详解
Aug 07 #Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
You might like
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python中的字典遍历备忘
2015/01/17 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
银行职业规划书范文
2013/12/28 职场文书
大学班长的职责
2014/01/27 职场文书
会计核算科岗位职责
2014/03/19 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python