浅谈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 相关文章推荐
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
JavaScript严格模式详解
Jan 16 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JavaScript缓动动画函数的封装方法
Nov 25 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Java程序员面试题
2016/09/27 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
物理教师自荐信范文
2013/12/28 职场文书
心理健康心得体会
2014/01/02 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python