浅谈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代码格式化和语法着色V2
Oct 14 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
vue实现购物车案例
May 30 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
node中的密码安全(加密)
2018/09/17 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python常用的爬虫技巧总结
2016/03/28 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python逆序打印各位数字的方法
2018/06/25 Python
python实现顺序表的简单代码
2018/09/28 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
wxPython实现画图板
2020/08/27 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
家长给小学生的评语
2014/01/30 职场文书
优秀教师获奖感言
2014/01/31 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
女生节标语
2014/06/26 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
党员转正申请报告
2015/05/15 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫