浅谈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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
js编写简单的计时器功能
Jul 15 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
express框架下使用session的方法
Jul 31 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中var_export与var_dump的区别分析
2010/08/21 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
js实现楼层导航功能
2017/02/23 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
Python网站验证码识别
2016/01/25 Python
python版学生管理系统
2018/01/10 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
文科生自我鉴定
2014/02/15 职场文书
运动会稿件50字
2014/02/17 职场文书
2014信息公开实施方案
2014/02/22 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang