随手记（六）map和forEach、常见功能性代码：从数组里找出重复项、kb单位换算、前端下载

1. map和forEach

简单区别： map有返回值 forEach没有

想要输出一个符合条件的新数组，一个错误的使用例子：

let arr = [{name: 'a', value: 1}, {name: 'b', value: 2},{name: 'c', value: 3}, {name: 'd', value: 4}, {name: 'e', value: 5}]
let newArr = arr.map(v=> {if(v.value>3) return v.name}) 

newArr的值打印出来是：

[undefined, undefined, undefined, 'd', 'e']

map 方法会给原数组中的每个元素都按顺序调用一次 callbackFn 函数。callbackFn 每次执行后的返回值（包括 undefined！）组合起来形成一个新数组。 callbackFn 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

MDN的详细描述，推荐前往阅读 Map()

因为 map 生成一个新数组，当你不打算使用返回的新数组却使用 map 是违背设计初衷的，请用 forEach 或者 for-of 替代。

如果有以下情形，则不该使用 map：

• 你不打算使用返回的新数组；或
• 你没有从回调函数中返回值。

callbackFn 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

如果 thisArg 参数提供给 map，则会被用作回调函数的 this 值。否则 undefined 会被用作回调函数的 this 值。this 的值最终相对于 callbackFn 函数的可观察性是依据确定函数绑定的 this 的常见规则决定的。

map 不修改调用它的原数组本身（当然可以在 callbackFn 执行时改变原数组）

map 方法处理数组元素的范围是在 callbackFn 方法第一次调用之前就已经确定了。调用 map 方法之后追加的数组元素不会被 callbackFn 访问。如果存在的数组元素改变了，那么传给 callbackFn 的值是 map 访问该元素时的值。在 map 函数调用后但在访问该元素前，该元素被删除的话，则无法被访问到。

2. 从数组里找出重复项

duplicateCheck(arr = []) {
      // 返回数组中重复的元素
      return arr.filter((e, i) => e && arr.indexOf(e) !== arr.lastIndexOf(e )&& arr.indexOf(e) === i);
    }

 3. b kb mb单位换算

/**
 * 存储单位换算
 * @param {*} bytes  
 */
Vue.filter('formatbytes', function(bytes){
   if (bytes === 0) return '0 B';
    var k = 1000, // or 1024
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));

    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
});

4. 下载

4.1 直接链接url

注意 配置a.download

不配置时 浏览器默认打开了其可识别的文件

配置时 经测试 会触发下载动作  另，downloadName命名时应带上后缀名

let a = document.createElement("a");
a.style.display = "none";
a.download = downloadName;

a.href = downloadUrl;

a.target = "_blank";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

4.2 fetch转blob方式

fetch(downloadUrl)
        .then(res => res.blob())
        .then(blob => {
　　　　　　 const blobUrl = window.URL.createObjectURL(blob);
           a.href = blobUrl;
           document.body.appendChild(a);
           a.click();
           window.URL.revokeObjectURL(blobUrl);
           document.body.removeChild(a);
    });  

更详细的内容 参考这篇博客：前端实现文件下载

5. 修bug启示：

涉及map、 length的地方一定要做容错处理！！不做测试必出问题