浅谈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实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
15个值得收藏的JavaScript函数
Sep 15 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
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
解决python报错MemoryError的问题
2018/06/26 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
建筑安全生产责任书
2014/07/22 职场文书
现实表现材料范文
2014/12/23 职场文书
成绩报告单家长评语
2014/12/30 职场文书
团员个人年度总结
2015/02/26 职场文书
《秋思》教学反思
2016/02/23 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
如何理解及使用Python闭包
2021/06/01 Python
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS