摘要：今天在渲染Echarts数据，就把工作中的小细节总结下。以前没做Echarts开发的时候，很少用到两个数组中的数字相加，那就利用空闲时间来想想有哪些方法可以实现两个数组中的数字相加呢？
需求：
1、后台传给我的数据如下：
2、我需要将data中faultCautionArray数组数据与normalCautionArray数组数据相加
思路：
1、方法一：利用for循环遍历数组然后相加（但是只里面需要注意几个问题）
如果没有写if条件判断会出现问题，当两个数组长度不相同的时候可能会出现NAN（注意是可能哦），上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var a = [5, 6, 7, 8,1];
var b = [-1, 2, -3, -4];
function getResult(a, b) {
var c = [];
for(var i = 0; i < a.length; i++) {
c[i] = a[i] + b[i];
}
console.log(c)
}
getResult(a, b);
</script>
</body>
</html>控制台打印的结果为：[4, 8, 4, 4, NaN]。但是如果 a = [5, 6, 7, 8]，b = [-1, 2, -3, -4,1];就不会打印出NAN结果。正确的写法如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var a = [5, 6, 7, 8,1];
var b = [-1, 2, -3, -4];
function getResult(a, b) {
var c = [];
if (a.length === b.length) {
for(var i = 0; i < a.length; i++) {
c[i] = a[i] + b[i];
}
}
return c;
}
getResult(a, b);
</script>
</body>
</html>2、方法二：代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var fault = result.data.faultCautionArray; // 第一个数组，如[1,2,1]
var normal = result.data.normalCautionArray; // 第二个数组，如[2,3,1]
console.log(fault);
console.log(normal);
let faultData = fault.map(function(v, i) { // 数组和，如[3,5,2]
return v + normal[i];
});
console.log(faultData)
</script>
</body>
</html>打印结果如下：
补充知识：map相关
（1）红宝书（JavaScript高级程序设计）中介绍的比较简单
map属于ECMAScript为数组定义的5个迭代方法之一。由于介绍比较简单，我就在网上搜了下
（2）在菜鸟教程中说map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。不会改变原始数组。
（3）在MDN中关于array的map介绍比较多，接下来我们来看看吧（MDN中关于map的详细介绍以及讲解）
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。看下示例代码（一）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
</script>
</body>
</html>