浅谈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 写类方式之六
Jul 05 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
PHP PDO操作总结
Nov 17 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
JS ES6异步解决方案
Apr 29 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
用php实现选择排序的解决方法
2013/05/04 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vue的keep-alive用法技巧
2019/08/15 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python实现12306火车票抢票系统
2019/07/04 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
大学旷课检讨书
2014/01/28 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
小王子读书笔记
2015/06/29 职场文书