一个爱听歌的搬砖工

之前有讲过数组去重的方法，今天说一下如何判断是否为空数组和数组的一些方法。话不多说直接上代码！

如何判断一个变量是不是数组：

使用 Array.isArray 判断，如果返回 true, 说明是数组；
使用 instanceof Array 判断，如果返回 true, 说明是数组；
使用 Object.prototype.toString.call 判断，如果值是 [object Array], 说明是数组；
通过 constructor 来判断，如果是数组，那么 arr.constructor === Array. (不准确，因为我们可以指定 obj.constructor = Array)

1
2
3
4
5
6
7
8
9
10
11
12
13

function fn() {
  console.log(Array.isArray(arguments)); //false; 因为 arguments 是类数组，但不是数组
  console.log(Array.isArray([1, 2, 3, 4])); //true
  console.log(arguments instanceof Array); //fasle
  console.log([1, 2, 3, 4] instanceof Array); //true
  console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
  console.log(Object.prototype.toString.call([1, 2, 3, 4])); //[object Array]
  console.log(arguments.constructor === Array); //false
  arguments.constructor = Array;
  console.log(arguments.constructor === Array); //true
  console.log(Array.isArray(arguments)); //false
}
fn(1, 2, 3, 4);

阅读全文

Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，从而创建快速动态网页的技术。

Ajax 过程

• 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
• 创建一个新的 HTTP 请求,并指定其请求的方法、URL 及验证信息
• 设置响应 HTTP 请求状态变化的函数
• 发送 HTTP 请求
• 获取异步调用返回的数据
• 使用 JavaScript 和 DOM 实现局部刷新

阅读全文

1、webpack 介绍

当我们打开webpack 中文文档首页时，最底下的几个大字让一切变得简单，我就觉得它很牛逼，很不简单。官网上的 webpack 概念：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，显然 webpack 是一个项目静态模块打包器。不过后面还有一句就是：当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。这个的意思就是 webpack 会自动分析你的项目结构，各个的模块依赖关系，然后打包成相应的 bundle，至于模块就理解为一个 js 文件为一个模块，css 也是一样。

2、创建 webpack 项目

1.新建文件夹，名为 webpackdemo，创建 src 文件夹并且包含 app.js； 2.打开终端进入 webpackdemo 文件夹，输入 npm init,执行完了会出现 package.json 文件； 3.安装 webpack 和 webpack-cli，输入 npm i webpack webpack-cli -D 4.在 package.json 中添加

阅读全文

在实际项目当中，用户登录网站输入账号密码，当用户选择记住密码的时候，下次自动填充表单的背景变成了黄色，影响了视觉体验。这个是可以修改的。下面给出方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 方法1

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff; // 设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}

// 方法2

input:-webkit-autofill 
{
  -webkit-box-shadow: 0px 0 3px 100px #ccc inset; // 背景色
}

1. 盒模型

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

• content-box (W3C 标准盒模型)
• border-box (IE 盒模型)
• padding-box
• margin-box (浏览器未实现)

box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。
box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

2. BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

• IE下为 Layout，可通过 zoom:1 触发

阅读全文

Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节。
但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。
在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端缓存有所帮助。

1. 浏览器缓存基本认识

它分为强缓存和协商缓存：
1.浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

阅读全文

1. http/https 协议

1.0 协议缺陷:

• 无法复用链接，完成即断开，重新慢启动和 TCP 3次握手
• head of line blocking: 线头阻塞，导致请求之间互相影响

1.1 改进:

• 长连接(默认 keep-alive)，复用
• host 字段指定对应的虚拟站点

阅读全文

今天总结一下数组去重的一些方法。记录一下。在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理这种问题。虽然日常项目用到的比较少，但我们还是需要了解一下，以防面试的时候可能回被问到。如果是被提问到，数组去重的方法有哪些？你能答出其中的几种？

一、利用 ES6 Set 去重

1
2

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]

set 是 ES6 新出来的一种一种定义不重复数组的数据类型
Array.from 是将类数组转化为数组
…是扩展运算符,将 set 里面的值转化为字符串

阅读全文

1. 编码优化

编码优化，指的就是 在代码编写时的，通过一些 最佳实践，提升代码的执行性能。通常这并不会带来非常大的收益，但这属于 程序猿的自我修养，而且这也是面试中经常被问到的一个方面，考察自我管理与细节的处理。

数据读取:
通过作用域链 / 原型链 读取变量或方法时，需要更多的耗时，且越长越慢；
对象嵌套越深，读取值也越慢；
最佳实践:

• 尽量在局部作用域中进行 变量缓存；
• 避免嵌套过深的数据结构，数据扁平化 有利于数据的读取和维护；

阅读全文

通过jsonp跨域
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

原生实现:

1
2
3
4
5
6
7
8
9
10
11

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.daxihong.com:8080/login?user=admin&callback=jsonCallback';
document.head.appendChild(script);

// 回调执行函数
function jsonCallback(res) {
  alert(JSON.stringify(res));
}

阅读全文