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 ...
随机推荐
- TransactionHelper
public class TransactionHelper { public static OracleTransaction ora_Transaction = null; public stat ...
- 记一次 spinor flash 读速度优化
背景 某个项目使用的介质是 spinor, 其 bootloader 需要从 flash 中加载 os. 启动速度是一个关键指标,需要深入优化.其他部分的优化暂且略过,此篇主要记录对 nor 读速度的 ...
- 简述异步编程&Promise&异步函数
前言:文章由本人在学习之余总结巩固思路,不足之前还请指出. 一.异步编程 首先我们先简单来回顾一下同步API和异步API的概念 1.同步API:只有当前的API执行完成之前,才会执行下一个API 例: ...
- [whu1568]dp优化
http://acm.whu.edu.cn/land/problem/detail?problem_id=1568 思路:先将所有数分解,得到2,3,5,7的个数,转化为用这些2,3,5,7" ...
- java基础一（标识符、数据类型及注释）
1.标识符 标识符可以由字母.数字(不能以数字开头).下划线(_).美元符($)组成: 标识符不能包含 @.%.空格等其它特殊字符: 标识符区分大小写: 2.数据类型 int->整型->4 ...
- Oracle细粒度审计
场景 管理信息化应用,想审计某张表的数据是否做了删除.Oracle中专门有自带的函数.可以满足这个需求 1.查询审计日志的语句 select timestamp, db_user, os_user, ...
- HTML标签和属性一
一.web基础知识 html,专门指网页技术 HTML5,大前端技术(网页,app,桌面程序,数据可视化,VR....) 网页(pc,pad,phone) app wx 服务器 数据库 HTML5 ...
- 11.2Go gin
11.1 Go gin 框架一直是敏捷开发中的利器,能让开发者很快的上手并做出应用. 成长总不会一蹴而就,从写出程序获取成就感,再到精通框架,快速构造应用. Gin是一个golang的微框架,封装比较 ...
- flask之Flask、config配置
flask_config.py ''' flask的配置: 1.flask项目初始化配置: (1)app=Flask(__name__)#初始化声明falsk项目为当前py文件,app应用变量名可以更 ...
- 若依微服务版本 Windows下开发环境搭建
看了若依官网的教程,搭建环境还是踩了坑,简单整理一下 1.下载地址:https://gitee.com/y_project/RuoYi-Cloud 2.本地环境(仅供参考) JDK1.8 Mysql ...