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);
});