浅谈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 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 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取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
Jquery性能优化详解
2014/05/15 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
STP的判定过程
2012/10/01 面试题
创立科技Java面试题
2015/11/29 面试题
出纳的岗位职责
2013/11/09 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
《老王》教学反思
2014/02/23 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
php去除deprecated的实例方法
2021/11/17 PHP
Golang 并发编程 SingleFlight模式
2022/04/26 Golang