es6 的数组的方法
es6 数组的拓展
数组的类 Array
数组的定义:
1. var arr=[];
2. var arr=new Array(3) // 3 代表有三个元素
arr[0]=12;
arr[1]=24;
arr[2]=36;
3. var arr=new Array("zhang","lisi","wang");
[] 代表空数组 [empty] 代表一个空元素
var arr=new Array("4");
代表有一个元素 为 4
var arr=new Array(3) 与 var arr=new Array("3") 的区别?
第一个的 3 代表,这个数组中有 3 个元素, 第二个的 3 代表,这个数组中有一个元素,为3
数组的方法:
1. of() 他是 Array 类上的方法
var arr=Array.of(4);
console.log(arr) // [4] 返回一个数组,里面有一个元素为 4
2. forEach() 他是原型的方法,用于对数组的遍历,返回值 undefined
案例:
var arr=[12,23,56,96,105];
var as = arr.forEach((item,index)=>{
// item 代表元素 index 代表索引
console.log(item)
console.log(index)
})
console.log(as) // undefined
3. map 原型上的方法,用于数组遍历加工, 返回值:仍然是个新数组, 参数:回调函数
var arr=[12,36,85,96,102];
var as = arr.map((item,index)=>{
return item+3; // 此方法一定要 return
})
4. filter 过滤 从数组中找出所有的指定条件的元素,并返回成一个新的数组,不改变原有数组 return 返回值是 true 就保留,返回值是 false 就不保留
var arr=[
{name:"zhang",age:20},
{name:"lisi",age:10}
];
var as=arr.filter((item,index)=>{
// item 元素 index 索引
return item.age>15; // 条件语句的返回值 true 和 false
})
console.log(as) // 返回满足条件的 {name:"zhang",age:20};
5. find:查找,查找第一个满足条件的元素 参数:回调函数 返回值:第一个满足条件的元素
var arr=[
{name:"zhang",age:20},
{name:"lisi",age:30},
{name:"wang",age:15}
]
var as=arr.find((item,index)=>{
// item 元素 index 索引
return item.age>18;
})
console.log(as) // 他的返回结果就只有一个,(对数组中逐个查找,当返回值为 true,说明找到,直接将结果返回,不在继续查找)
6. every:看数组中的每个是元素是否都满足条件 参数:回调函数 返回值:布尔
var arr=[
{name:"zhang",age:20},
{name:"lisi",age:10}
]
var as=arr.every((item,index)=>{
// item 元素 index 索引
return item.age>5;
})
console.log(as) // true 这种结果返回的 true,因为它的所有元素都满足这个条件,但是只要有一个不满足,返回值为 false
7. some: 看数组中的元素是否都满足条件,只要有一个满足,返回值是 true ,全部都不满足这个条件,返回值为false 参数:回调函数
var arr=[
{name:"zhang",age:20},
{name:"lisi",age:10}
]
var as=arr.some((item,index)=>{
// item 元素 index 索引
return item.age>30;
})
console.log(as) // false 所有的元素都不满足他的条件,返回 false,但只要有一个满足,返回 true
8. reduce:迭代,在原有的基础上继续
var arr=[1,2,3,4,5,6,7,8,9,10];
var as=arr.requce((prev,item,index)=>{
// prev 代表上一个的返回值(return 的返回值,就好比 item = 3 的时候,prev 代表上次返回的结果,return 1+2)
// item 数组的元素,如果遍历的话,默认从第二个元素开始, index 数组的索引
return prev+item // return 的结果
},0) // 这个0 代表第一个返回的结果,最终目的是让 item 从第一个元素开始
上面的代码翻译为 var as=1+2+3+4+5+6+7+8+9+10
console.log(as) // 55
注意:
1. 默认从第二个元素开始执行,第一个元素没有上一个
2. 第一次执行返回的是第一个元素,reduce 的参数 是一个回调函数,回调函数中有三个参数,第一个叫 prev 代表上一次 reduce 执行的返回值就,第二个叫 item 代表返回的元素
第三个叫 index 返回的是当前的索引
3. 如果想让 reduce 从第一个元素开始执行,(默认从第二个),回调函数后面的参数,就是第一次执行的 prev
1. 面试题
将一个数组转换成对象,属性是数组的元素,属性值是元素的个数
解答;
es6 的数组的方法的更多相关文章
- ES6之数组扩展方法【一】(相当好用)
form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: ...
- es6 filter() 数组过滤方法总结
1.创建一个数组,判断数组中是否存在某个值 var newarr = [ { num: , val: 'ceshi', flag: 'aa' }, { num: , val: 'ceshi2', fl ...
- es6 filter() 数组过滤方法总结(转载)
1.创建一个数组,判断数组中是否存在某个值 var newarr = [ { num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', ...
- 关于ES6的数组字符串方法
注:ES6的一些新属性会显示语法错误,不过不会影响效果,在Languages里面也可以调: let:用来定义变量 特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明;比如: v ...
- es6数组的方法
1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null (是实参构成的数组 ...
- ES6使用的一些方法
查找数组中符合条件的所有记录 var list=[ {id:1,name:"张三"}, {id:2,name:"李四"}, {id:3,name:"王 ...
- 前端面试之JavaScript中数组的方法!【残缺版!!】
前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...
- 关于ES3、ES5、ES6以及ES7所有数组的方法(api)的总结
起因:工作用经常用到操作数组的方法,这里进行一下总结,我尽量以简洁的语言概括每个方法(api)的作用.如果您想快速定位,可以Control+F 然后搜相应的方法即可定位 :) ES3的数组方法 joi ...
- ES6中数组的新方法
数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...
随机推荐
- Python基础教程之dict和set
1. dict Python中的dict等于js中的 map ,使用键-值(key-value)存储,具有极快的查找速度. 如果 我们要根据同学的姓名去查找他的成绩在不用dict的情况下.就需要两个l ...
- 使用transform属性和animation属性制作跳动的心
transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...
- 浅尝https
HTTPS http超文本传输协议,所以的东西都是明文传输,容易被拦截,被攻击,我们希望能对通话内容进行加密,那么因此而生,出现了https https:在http的基础上新增加了SSL层 先放图 / ...
- Java高并发程序设计学习笔记(二):多线程基础
转自:https://blog.csdn.net/dataiyangu/article/details/86226835# 什么是线程?线程的基本操作线程的基本操作新建线程调用run的一种方式调用ru ...
- idea一键生成mybatis工具
1.创建maven项目,导包 <build> <plugins> <plugin> <groupId>org.mybatis.generator< ...
- 12、Nginx代理缓存服务
通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时 1.缓存常见类型 服务端缓存 代理缓存, 获取服务端内容进行缓存 客户端浏览器缓存 Nginx代理缓存原理 ...
- Rasa学习记录 01
目录 Rasa的安装和简单的测试 什么是Rasa: 安装Rasa: 测试自带的数据 查看项目里的文件内容 举一反三(自己的第一个机器人) Rasa的安装和简单的测试 怪雨是新手,刚刚接触Rasa,以下 ...
- Python名称空间与作用域
什么是名称空间? 比如下图的长方形代表内存,在这个内存里我要设置一个变量100,那么这个变量得有个门牌号,就叫他a吧,但其实变量不是这么存储的,他其实的存储方式是这样的,他会有一个名称空间,这个名称空 ...
- Windows 聚焦的锁屏壁纸设置为桌面壁纸
需求: Windows的锁屏壁纸偶尔遇到非常喜欢的壁纸,想设置为桌面壁纸. 步骤如下: 1. “Windows 聚焦”的锁屏壁纸都保存在隐藏文件夹 --- Assets里. a. 打开“资源管理器 b ...
- 【小知识】比较 x^y 和 y^x 的大小
往前翻几个编号相邻的题目翻到了这么一道题,感觉很好奇就做了一下 (upd:我下午问了下出题人做法,他就把题隐藏了……这不太友好啊……所以我补一下题意:) 题意 给你两个整数 $x$ 和 $y$,求 $ ...