ES6-常用四种数组
1.map
1.1 个人理解
- 映射 一个对一个 例如：[45,57,138]与[{name:'blue',level:0},{name:'zhangsan',level:99},{name:'lisi',level:100}] [45,67,99]与['不及格','不及格','及格']
1.2 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map数组</title>
<script>
let score = [12, 88, 59, 99];
// let result = score.map((item) => {
// if (item > 60) {
// return '及格'
// } else {
// return '不及格'
// }
// });
// 简写
let result = score.map(item => item > 60 ? '及格' : '不及格');
alert(score);
alert(result);
</script>
</head>
<body>
</body>
</html>
2.reduce
2.1 个人理解
- 汇总 一堆只出来一个 例如：算个总数[12,8,4]->24 算个平均数[12,8,4]->8
2.2 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>reduce数组</title>
<script>
let score = [1, 3, 6, 9];
// 求和
let result = score.reduce((tmp, item, index) => {
// 前言：//第一次时tmp,item,index分别为1,3,1,按此类推
console.log("第" + index + "次计算后返回结果:" + tmp);
// tmp:每次计算后返回结果，依次为1,3,6 没有10,10作为最终输出
console.log("当前的值" + item);
// item:当前的值，依次为3,6,9
console.log("当前值的下标" + index);
// index:当前值的下标，依次为1,2,3 从1开始，而非0
return tmp + item;
});
// 两次效果相同
// let result = score.reduce((tmp, item) => {
// return tmp + item;
// });
alert(result);
// 算平均数
let scoreone = [1, 3, 6, 14];
let resultone = scoreone.reduce((tmp, item, index) => {
// 不是最后一次
if (index != scoreone.length - 1) {
console.log(index)
return tmp + item;
} else {
// 最后一次
return (tmp + item) / scoreone.length;
}
});
alert(resultone);
</script>
</head>
<body>
</body>
</html>
2.3 分析图
3.fliter 过滤器
3.1 个人理解
- 选择自己需要的
3.2 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filter过滤器</title>
<script>
let score = [12, 88, 59, 99];
// let result = score.filter((item) => {
// alert(item % 3 == 0);
// if (item % 3 == 0) {
// return true;
// } else {
// return false;
// }
// });
// 简写
let result = score.filter(item => item % 3 == 0 ? true : false);
alert(result);
let arr = [{
title: '男士衬衫',
price: 75
}, {
title: '衬衫',
price: 65000
}, {
title: '男士',
price: 2250
}];
let resultone = arr.filter(item => item.price > 1000 ? true : false);
console.log(resultone);
// console.log(resultone[0].title);
</script>
</head>
<body>
</body>
</html>
4.forEach 循环(迭代)
4.1 个人理解
- 参数就是下标和值，然后使用即可
4.2 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>forEach迭代循环</title>
<script>
let score = [12, 88, 59, 99];
score.forEach((item, index) => {
alert(index + ":" + item);
});
</script>
</head>
<body>
</body>
</html>ES6-常用四种数组的更多相关文章
- xml常用四种解析方式优缺点的分析×××××
xml常用四种解析方式优缺点的分析 博客分类: xml 最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...
- jmeter常用四种断言
jmeter常用四种断言 一.Response Assertion(响应断言)二.Size Assertion(数据包字节大小断言)三.Duration Assertion(持续时间断言)四.bean ...
- 创建DateFrame的常用四种方式
import pandas as pd %pylab 一.使用numpy创建 df = pd.DataFrame(np.arange(16).reshape((4,4)), index=list('a ...
- Map遍历四种常用方法
Map常用四种遍历方式 一: Map<String,String> map = new HashMap<String,String>(); for(String key:map ...
- AS3清空数组的四种方法
第一种最简单的方法是: var arr:Array = ["a", "b", "c", "d", "e&quo ...
- C#中四种常用集合的运用(非常重要)
C#中4个常用的集合 1.ArrayList ArrayList类似于数组,有人也称它为数组列表.ArrayList可以动态维护,而数组的容量是固定的. 它的索引会根据程序的扩展而重新进行分配和调整. ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- SQL中常用模糊查询的四种匹配模式&&正则表达式
执行数据库查询时,有完整查询和模糊查询之分.一般模糊语句如下:SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式:1.%:表示任意0个或多个字 ...
- java正则表达式四种常用的处理方式是怎么样呢《匹配、分割、代替、获取》
java 正则表达式高级篇,介绍四种常用的处理方式:匹配.分割.替代.获取,具体内容如下package test; import java.util.regex.Matcher; import jav ...
随机推荐
- OpenCV 4下darknet修改
darknet的安装使用直接在官网上获取.https://pjreddie.com/darknet/ 但我用的是OpenCV4.1.1,make时会在image_opencv.cpp中有两个错误. 1 ...
- 工具类CountDownLatch的应用---百米赛跑案例
package com.aj.thread; import java.util.concurrent.CountDownLatch; import java.util.concurrent.Execu ...
- 给你的Java程序拍个片子吧：jstack命令解析
前言 如果有一天,你的Java程序长时间停顿,也许是它病了,需要用jstack拍个片子分析分析,才能诊断具体什么病症,是死锁综合征,还是死循环等其他病症,本文我们一起来学习jstack命令~ jsta ...
- Battery Charging Specification Revision 1.2 中文版本
Battery Charging Specification Revision 1.2 Li,Guanglei 2014.04.03 Rev0.1 转载请注明转自:http://blog.csdn.n ...
- 51单片机实战UcosII操作系统
中断定义为CPU对系统内外发生的异步事件的响应.异步事件是指没有一定时序关系的.随机发生的事件. 与前后台系统中的中断服务子程序不同,uC/OS-Ⅱ要知道当前内核是否正在处理中断.是否脱离中断. OS ...
- [csu/coj 1079]树上路径查询 LCA
题意:询问树上从u到v的路径是否经过k 思路:把树dfs转化为有根树后,对于u,v的路径而言,设p为u,v的最近公共祖先,u到v的路径必定是可以看成两条路径的组合,u->p,v->p,这样 ...
- 华为的快服务智慧平台是牛皮还是牛B？
华为快服务智慧平台是牛皮还是牛B? 来到快服务论坛专区的老铁们想必对快服务有一定的了解,那么作为华为快服务统一接入分发核心的华为快服务智慧平台是怎样的存在呢?想必带着眼睛阅读的小伙伴都已经看出来了 ...
- C++17结构化绑定
动机 std::map<K, V>的insert方法返回std::pair<iterator, bool>,两个元素分别是指向所插入键值对的迭代器与指示是否新插入元素的布尔值, ...
- PC端软件配置
一,cmder软件安装 二,Snipaste软件安装 三,vwmare虚拟机安装 四,sublime安装 五,notepad++安装 六,Python环境 anaconda navigator安装 七 ...
- Win32 Sdk 连接Access数据库
/************************************************************* *** MyWinClass.cpp 创建窗口模板 *** vs2017+ ...