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 ...
随机推荐
- dp (1)
D - Tree of Tree ZOJ - 3201 这个题目我开始是这么定义的dp[i][j][0] dp[i][j][1] 表示对于第i个节点还有j个的选择 0 代表不选这个节点,1 代表选这个 ...
- 简单ajax跨域请求
最近遇到需要ajax跨域的需求 首先看下不做任何处理特别处理的ajax跨域请求会出现什么样的错误 客户端代码: <script type="text/javascript"& ...
- Spring Cloud Stream学习（五）入门
前言: 在了解完RabbitMQ后,再来学习SpringCloudStream就轻松很多了,SpringCloudStream现在主要支持两种消息中间件,一个是RabbitMQ,还有一个是KafK ...
- OpenWrt R2020.3.19 反追踪 抗污染 加速 PSW 无缝集成 UnPnP NAS
固件说明 基于Lede OpenWrt R2020.3.19版本Lienol Feed及若干自行维护的软件包 结合家庭x86软路由场景需要定制 按照家庭应用场景对固件及软件进行测试,通过后发布 设计目 ...
- 这一份MySQL书单，可以帮你搞定90%以上的面试题！
- HDU 2004 （水）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2004 题目大意: 给你成绩让你根据成绩打分解题思路: 简单的if...else 应用 需要注意是,if ...
- 《C程序设计语言》 练习2-8
问题描述 练习 2-8 编写一个函数rightrot(x, n),该函数返回将x循环右移(即从最右端移出的位将从最左端移入)n(二进制)位后所得到的值. Write a function rightr ...
- markdown:列表、表格、代码实现
插入列表 1. dsf2. dsds 插入表格header 1 | header 2---|---row 1 col 1 | row 1 col 2row 2 col 1 | row 2 col 2 ...
- Hadoop 集群搭建和维护文档
一.前言 -- 基础环境准备 节点名称 IP NN DN JNN ZKFC ZK RM NM Master Worker master1 192.168.8.106 * * * * * * maste ...
- Mockito如何mock一条链式调用
在写单元测试的时候,不免可能需要mock一些对象出来,并且mock一些方法调用去返回一个自己想要的对象.一般的使用是这样的: FinalPumpkin pumpkin = mock(FinalPump ...