浅谈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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript Split()方法
Dec 18 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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采集时被封ip的解决方法
2010/08/29 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
node中的session的具体使用
2018/09/14 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vue实现菜单切换功能
2019/05/08 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
python读取注册表中值的方法
2013/04/08 Python
django query模块
2019/04/20 Python
python多线程并发实例及其优化
2019/06/27 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
理财投资建议书
2014/03/12 职场文书
孟佩杰观后感
2015/06/17 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
python Django框架快速入门教程(后台管理)
2021/07/21 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python