一个爱听歌的搬砖工

sort()方法用原地算法对数组的元素进行排序，并返回数组，该排序方法会在原数组上直接进行排序，并不会生成一个排好序的新数组。排序算法现在是稳定的。默认排序顺序是根据字符串 Unicode 码点。

1

arr.sort([compareFunction]);

阅读全文

filter(过滤，筛选) 方法创建一个新数组,原始数组不发生改变。

1

array.filter(callback,[ thisObject]);

其包含通过提供函数实现的测试的所有元素。接收的参数和 map 是一样的，filter的callback函数需要返回布尔值true或false. 如果为true则表示通过啦！如果为false则失败，其返回值是一个新数组，由通过测试为true的所有元素组成，如果没有任何数组元素通过测试，则返回空数组。

来个例子介绍下，现在有一个数组 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]，我们想要生成一个新数组，这个数组要求没有重复的内容，即为去重。

阅读全文

reduce() 方法对数组中的每个元素执行一个提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。传递给 reduce 的回调函数（callback）接受四个参数，分别是累加器 accumulator、currentValue——正在操作的元素、currentIndex（可选）——元素索引，但是它的开始会有特殊说明、array（可选）——原始数组本身，除了 callback 之外还可以接受初始值 initialValue 值（可选）。

1. 如果没有提供 initialValue，那么第一次调用 callback 函数时，accumulator 使用原数组中的第一个元素，currentValue 即是数组中的第二个元素。在没有初始值的空数组上调用 reduce 将报错。

2. 如果提供了 initialValue，那么将作为第一次调用 callback 函数时的第一个参数的值，即 accumulator，currentValue 使用原数组中的第一个元素。

例子，现在有一个数组 [0, 1, 2, 3, 4]，需要计算数组元素的和，需求比较简单，来看下代码实现。

阅读全文

map() (映射)方法最后生成一个新数组，不改变原始数组的值。其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

1

array.map(callback, [thisObject]);

callback(回调函数)

1
2
3

[].map(function (currentValue, index, array) {
  // ...
});

阅读全文

时隔一个多月没更新博客了，前段时间家里出了点事情处理了一下，上班后项目太忙一直加班没时间跟精力在这方面，今天项目提测，忙里偷闲，更新一下。

首页改版完成后，自己测试了下IE兼容性问题时，新闻模块出现bug，设计师要求最多显示4个文字，所以我给了溢出隐藏属性，但是在IE和火狐下会出现这种情况：

尝试解决没有实质性进展，都想自己重构写个tab页了，想着试着改下标签，抱着试试的想法，把span标签改为div标签，dispaly:inline-block删除，就正常了。。。。

排查一下，应该是dispaly:inline-block这个属性导致的。

很多网站设计一般是三个部分组成，header + content + footer，header 里面展示着网站头部的导航 logo 等信息，content 里面装的是网站主体内容，footer 里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现两种情况：

一、由于主体内容太少的原因，你会看到底部模块没有固定在底部而是往上跑了，跟在主体内容后面。

二、主体内容较长时，底部模块跟在内容后面滑动，这就正常的情况下。

在 PC 端这种问题还是很常见的，今天总结了一下实现这种布局的几个方法。

阅读全文

想要获取图片的宽高首先要知道图片的 url；一般图片上传 UI 组件或自己封装的组件都会获取到图片的 url，知道 url 就好办了，上代码。

1
2
3
4
5
6

var Uploadimgurl = URL; //图片URL地址
var img = new Image(); //创建对象
img.src = Uploadimgurl; //改变图片地址
img.onload = function () {
  console.log(img.width + "" + img.height);
};

阅读全文

• Vue-Router路由懒加载（利用Webpack的代码切割）
• 使用CDN加速，将通用的库从vendor进行抽离
• Nginx的gzip压缩
• Vue异步组件
• 服务端渲染SSR
• 如果使用了一些UI库，采用按需加载
• Webpack开启gzip压缩
• 如果首屏为登录页，可以做成多入口
• Service Worker缓存文件处理
• 去除非 HTML 页面的静态资源的 cache-control: no-cache 配置，充分利用客户端缓存
• 减少页面加载时的请求数量。
• 减少 Cookie 中保存的信息或去除请求中的非必要 Cookie 信息
• 压缩图片体积（也可尝试更改图片格式，使用同等质量下体积最小的图片）
• 合并小图片为一张大图或将图片转为 base64 编码
• 延迟加载图片
• 移除冗余代码
• 封装公共组件（减少重复代码）
• 预渲染页面框架或骨架图
• 尽量减少 iframe 使用，它会阻塞主页面的渲染; 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;
• 使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）

1、三目运算符

下面是一个很好的例子，将一个完整的 if 语句，简写为一行代码。

1
2
3
4
5
6
7

const x = 20;
let answer;
if (x > 10) {
  answer = "greater than 10";
} else {
  answer = "less than 10";
}

简写为：

1

const answer = x > 10 ? "greater than 10" : "less than 10";

阅读全文