JavaScript 数据类型及判断方法详解

前言

JavaScript 是一种动态类型语言，理解其数据类型及如何准确判断类型是每个前端开发者的必备技能。本文将详细介绍 JavaScript 的七种数据类型以及各种类型判断方法的优缺点和使用场景。

一、JavaScript 的七种数据类型

JavaScript 共有七种数据类型，分为两大类：基本类型和引用类型。

1. 基本类型（原始类型）

• Undefined：表示未定义，只有一个值undefined
• Null：表示空值，只有一个值null
• Boolean：布尔值，有两个值true和false
• Number：数字类型，包括整数和浮点数
• String：字符串类型
• Symbol：符号类型（ES6 新增）
• BigInt：大整数类型（ES2020 新增）

2. 引用类型

• Object：对象类型，包括普通对象、数组、函数、日期、正则表达式等

二、类型判断方法

1. typeof 操作符

typeof是最基本的类型判断方法，返回一个表示数据类型的字符串。

1
2
3
4
5
6
7
8
9
10

typeof undefined; // "undefined"
typeof null; // "object" (这是一个历史遗留的bug)
typeof true; // "boolean"
typeof 42; // "number"
typeof "hello"; // "string"
typeof Symbol(); // "symbol"
typeof 123n; // "bigint"
typeof {}; // "object"
typeof []; // "object"
typeof function () {}; // "function"

优点：

• 简单直接
• 可以区分基本类型（除了 null）

缺点：

• 对于 null 返回”object”（历史遗留问题）
• 无法区分对象和数组
• 对于所有引用类型（除函数外）都返回”object”

2. instanceof 操作符

instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

1
2
3
4
5

[] instanceof Array        // true
[] instanceof Object       // true
{} instanceof Object       // true
{} instanceof Array        // false
function(){} instanceof Function  // true

优点：

• 可以区分不同的引用类型
• 可以检测自定义类型

缺点：

• 不能用于判断基本类型
• 跨 iframe 或 window 时可能失效
• 原型链可以被修改，导致判断不准确

3. Object.prototype.toString.call()

这是最准确的类型判断方法，返回[object Type]格式的字符串。

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

Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(42); // "[object Number]"
Object.prototype.toString.call("hello"); // "[object String]"
Object.prototype.toString.call(Symbol()); // "[object Symbol]"
Object.prototype.toString.call(123n); // "[object BigInt]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(function () {}); // "[object Function]"
Object.prototype.toString.call(/regex/); // "[object RegExp]"
Object.prototype.toString.call(new Date()); // "[object Date]"

优点：

• 可以准确判断所有类型
• 不受原型链影响
• 可以区分内置对象类型

缺点：

• 写法较长
• 不够直观

4. constructor 属性

每个对象都有一个constructor属性，指向创建该对象的构造函数。

1
2
3
4

(42).constructor === Number     // true
"hello".constructor === String  // true
[].constructor === Array        // true
{}.constructor === Object       // true

优点：

• 可以区分大部分类型
• 写法相对简洁

缺点：

• null 和 undefined 没有 constructor 属性
• constructor 可以被修改
• 原型链继承可能导致判断错误

5. Array.isArray()

专门用于判断是否为数组的方法。

1
2

Array.isArray([]); // true
Array.isArray({}); // false

优点：

• 专门为数组设计，判断准确
• 不受原型链影响

缺点：

• 只能判断数组

三、最佳实践

1. 封装通用类型判断函数

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

// 精确的类型判断函数
function getType(value) {
	return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

// 使用示例
getType(42); // "number"
getType("hello"); // "string"
getType([]); // "array"
getType({}); // "object"
getType(null); // "null"
getType(undefined); // "undefined"

2. 常用类型判断工具函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// 判断是否为null
function isNull(value) {
	return value === null;
}

// 判断是否为undefined
function isUndefined(value) {
	return value === undefined;
}

// 判断是否为null或undefined
function isNullOrUndefined(value) {
	return value == null; // 利用==的特性
}

// 判断是否为数字
function isNumber(value) {
	return typeof value === "number" && !isNaN(value);
}

// 判断是否为字符串
function isString(value) {
	return typeof value === "string";
}

// 判断是否为布尔值
function isBoolean(value) {
	return typeof value === "boolean";
}

// 判断是否为函数
function isFunction(value) {
	return typeof value === "function";
}

// 判断是否为数组
function isArray(value) {
	return Array.isArray(value);
}

// 判断是否为普通对象
function isPlainObject(value) {
	return getType(value) === "object";
}

// 判断是否为Promise
function isPromise(value) {
	return getType(value) === "promise";
}

3. 类型判断的选择建议

• 基本类型判断：使用typeof（除了 null）
• null 判断：使用value === null
• 数组判断：使用Array.isArray()
• 精确类型判断：使用Object.prototype.toString.call()
• 自定义类型判断：使用instanceof

四、常见陷阱与注意事项

1. typeof null === “object”

这是 JavaScript 的一个历史遗留 bug，在第一版 JavaScript 中，null 被标记为对象类型，虽然后来有了单独的 null 类型，但为了兼容性，这个 bug 被保留了下来。

2. NaN 的特殊性

1
2
3
4
5

typeof NaN === "number"; // true
NaN === NaN; // false
Object.is(NaN, NaN); // true
isNaN(NaN); // true
Number.isNaN(NaN); // true

3. 包装对象的影响

1
2
3
4
5

typeof new String("hello"); // "object"
typeof "hello"; // "string"

new String("hello") instanceof String; // true
"hello" instanceof String; // false

4. 跨 iframe 问题

1
2
3
4
5
6

// 在iframe中创建的数组
const iframeArray = window.frames[0].Array;
const arr = new iframeArray(1, 2, 3);

arr instanceof Array; // false
Array.isArray(arr); // true

五、总结

JavaScript 提供了多种类型判断方法，每种方法都有其适用场景：

• typeof：适合判断基本类型（除 null 外）
• instanceof：适合判断引用类型和自定义类型
• Object.prototype.toString.call()：最准确的类型判断方法
• Array.isArray()：专门用于判断数组
• constructor：可以用于类型判断，但不够可靠

在实际开发中，建议根据具体需求选择合适的判断方法，或者封装成工具函数以提高代码的可读性和可维护性，准确的类型判断是编写健壮 JavaScript 代码的基础。

Vue2 中如何优雅地使用外部工具函数

前言

在 Vue2 项目开发中，我们经常需要引入一些通用的工具函数（如日期格式化、防抖节流等）。很多开发者会有疑问：为什么在 Vue 组件中不能直接使用 import 导入的函数？为什么在<template><button @click='func'></button></template>中func不能直接绑定到 click 事件？

一、直接导入使用（推荐方式）

对于纯工具函数（不依赖 Vue 实例），最简单的使用方式就是直接导入：

1
2
3
4

// utils/date.js
export function formatDate(date) {
	return date.toISOString().split("T")[0];
}

1
2
3
4
5
6
7
8
9
10

// MyComponent.vue
import { formatDate } from "@/utils/date";

export default {
	methods: {
		handleClick() {
			console.log(formatDate(new Date())); // 直接调用
		},
	},
};

优点：

• 简单直接，符合 ES6 模块规范
• 不会污染 Vue 实例
• 适合不依赖 Vue 实例的纯函数

二、在模板中使用外部函数

由于 Vue 模板只能访问组件实例（this）上的属性和方法，我们需要通过以下方式将外部函数暴露给模板：

1. 通过 methods 包装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
	<div>{{ formatDateInTemplate(currentDate) }}</div>
</template>

<script>
import { formatDate } from "@/utils/date";

export default {
	data() {
		return { currentDate: new Date() };
	},
	methods: {
		formatDateInTemplate(date) {
			return formatDate(date); // 包装后暴露给模板
		},
	},
};
</script>

2. 通过 computed 计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
	<div>{{ formattedDate }}</div>
</template>

<script>
import { formatDate } from "@/utils/date";

export default {
	data() {
		return { currentDate: new Date() };
	},
	computed: {
		formattedDate() {
			return formatDate(this.currentDate);
		},
	},
};
</script>

三、全局方法挂载

对于高频使用的工具函数，可以挂载到 Vue 原型上：

1
2
3
4
5

// main.js
import Vue from "vue";
import { formatDate } from "@/utils/date";

Vue.prototype.$formatDate = formatDate;

1
2
3
4
5
6
7
8
9
10
11

<template>
	<div>{{ $formatDate(currentDate) }}</div>
</template>

<script>
export default {
	data() {
		return { currentDate: new Date() };
	},
};
</script>

适用场景：

• 多个组件都需要使用的工具函数
• 需要保持一致的格式化逻辑

四、Vue2 过滤器（即将淘汰）

Vue2 提供了过滤器功能，但 Vue3 已废弃：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
	<div>{{ currentDate | formatDate }}</div>
</template>

<script>
import { formatDate } from "@/utils/date";

export default {
	data() {
		return { currentDate: new Date() };
	},
	filters: {
		formatDate(date) {
			return formatDate(date);
		},
	},
};
</script>

五、为什么需要”包装”？

Vue 模板不能直接使用 import 的函数，主要基于以下设计考虑：

1. 作用域隔离：模板应该只依赖组件内部状态
2. 响应式追踪：Vue 需要知道哪些数据变化会影响渲染
3. 代码可维护性：明确的依赖关系更利于团队协作

六、最佳实践建议

结语

理解 Vue 的设计哲学，能帮助我们写出更优雅的代码。虽然需要多一层”包装”，但这正是 Vue 保持代码结构清晰的关键。根据不同的使用场景选择合适的方案，可以让我们的 Vue 项目更加可维护。

作者：你的名字
发布日期：2025 年 7 月 29 日
标签：Vue2, JavaScript, 前端开发

CSS的border-image属性允许开发者使用图片作为元素的边框，这为网页设计提供了更多创意可能。本文将详细解析border-image的各个参数，帮助你掌握这一强大的CSS特性。

border-image属性概述

border-image是一个复合属性，可以分解为以下子属性：

• border-image-source：指定用作边框的图片
• border-image-slice：定义如何切割图片
• border-image-width：设置边框图片的宽度
• border-image-outset：控制边框图片向外扩展
• border-image-repeat：定义图片如何填充边框区域

参数详解

1. border-image-source

指定用作边框的图片路径，可以是URL或渐变：

1
2
3

.element {
  border-image-source: url('border.png');
}

2. border-image-slice

定义如何切割图片，接受1-4个值（类似margin/padding的简写）：

1
2
3
4
5
6

.element {
  border-image-slice: 30; /* 所有边距30px */
  border-image-slice: 30 20; /* 上下30px，左右20px */
  border-image-slice: 30 20 10; /* 上30px，左右20px，下10px */
  border-image-slice: 30 20 10 5; /* 上30px，右20px，下10px，左5px */
}

数值可以是像素值（不带单位）或百分比，表示从图片边缘向内切割的距离。

3. border-image-width

控制边框图片的显示宽度：

1
2
3
4
5

.element {
  border-image-width: 20px; /* 所有边20px */
  border-image-width: 20px 15px; /* 上下20px，左右15px */
  border-image-width: auto; /* 使用border-width的值 */
}

4. border-image-outset

定义边框图片向外扩展的距离：

1
2
3
4

.element {
  border-image-outset: 10px; /* 所有边扩展10px */
  border-image-outset: 10px 5px; /* 上下10px，左右5px */
}

5. border-image-repeat

控制图片如何填充边框区域：

• stretch：拉伸图片填充（默认）
• repeat：平铺图片
• round：类似repeat，但会调整图片尺寸使完整显示
• space：类似repeat，但会添加空白使完整显示

1
2
3
4
5
6

.element {
  border-image-repeat: stretch; /* 默认值 */
  border-image-repeat: repeat;
  border-image-repeat: round;
  border-image-repeat: space;
}

复合写法示例

border-image的完整简写语法为：

1

border-image: source slice / width / outset repeat;

实际应用示例：

1
2
3
4

.fancy-border {
  border: 20px solid transparent; /* 定义边框宽度和透明色 */
  border-image: url('border.png') 30 / 20px / 5px round;
}

实用案例

1. 九宫格边框

1
2
3
4
5
6

.nine-grid {
  width: 200px;
  height: 200px;
  border: 30px solid transparent;
  border-image: url('nine-grid.png') 30 round;
}

2. 渐变边框

1
2
3
4

.gradient-border {
  border: 10px solid;
  border-image: linear-gradient(45deg, #f00, #00f) 1;
}

3. 复杂图案边框

1
2
3
4

.pattern-border {
  border: 15px solid transparent;
  border-image: url('floral-pattern.png') 50 / 15px / 0 stretch;
}

注意事项

1. 兼容性：现代浏览器都支持border-image，但IE10及以下版本支持不完整
2. 备用方案：始终设置常规border作为备用
3. 图片选择：选择适合平铺或拉伸的边框图片
4. 性能考虑：复杂的边框图片可能影响渲染性能
5. 移动端：在高DPI设备上可能需要提供@2x图片

总结

border-image属性为CSS边框带来了无限可能，通过合理设置slice、width和repeat参数，可以创建出各种独特的边框效果。

在CSS中，我们经常使用伪元素(::before, ::after)来创建各种形状，特别是三角形。然而，当我们需要为这些三角形添加box-shadow时，经常会遇到阴影显示不合理的问题。本文将探讨这个问题的原因及解决方案。

问题描述

当我们使用边框法创建三角形并尝试添加box-shadow时，阴影会出现在包含三角形的矩形框上，而不是三角形本身：

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

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}

.triangle::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3498db;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

上面的代码会在整个伪元素的矩形区域上显示阴影，而不是只在下方的三角形上。

解决方案

方法1：使用filter: drop-shadow

filter: drop-shadow 可以正确识别元素的透明部分，只对有颜色的部分应用阴影：

1
2
3
4

.triangle::after {
  /* 三角形代码同上 */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

方法2：使用clip-path

结合clip-path裁剪出三角形形状，然后应用box-shadow：

1
2
3
4
5
6
7
8
9

.triangle::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: #3498db;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

方法3：使用SVG

使用SVG创建三角形可以更精确地控制阴影：

1
2
3
4
5
6

<div class="triangle">
  <svg width="100" height="100" viewBox="0 0 100 100">
    <polygon points="50,0 0,100 100,100" fill="#3498db" 
             filter="drop-shadow(0 0 10px rgba(0,0,0,0.5))"/>
  </svg>
</div>

注意事项

1. filter: drop-shadow 的性能消耗比 box-shadow 略高，在动画中大量使用可能导致性能问题
2. clip-path的浏览器兼容性较好，但某些旧版本浏览器可能需要前缀
3. SVG方案兼容性最好，但会增加DOM节点
4. 如果必须使用边框法创建三角形，可以考虑在外部容器上应用阴影

总结

对于伪元素创建的三角形阴影问题，推荐优先使用filter: drop-shadow方案，它既能保持代码简洁，又能正确显示阴影。在需要更复杂形状或更好性能时，可以考虑clip-path或SVG方案。

在使用div包裹<img>元素时，可能会遇到元素底部出现异常空隙的问题。

问题原因

1. 行内元素的基线对齐特性
2. 父容器的默认行高设置
3. 图片与文本混合时的垂直对齐问题

解决方案

方法一：设置图片为块级元素

1

<img src="/path/to/image.jpg" style="display: block;" />

或在 CSS 中全局设置：

1
2
3

img {
	display: block;
}

方法二：调整垂直对齐方式

1
2
3

<img
	src="/path/to/image.jpg"
	style="vertical-align: middle; display: inline-block;" />

方法三：移除父元素的行高

1
2
3

.post-content img {
	line-height: 0;
}

方法四：使用负边距（不推荐）

1
2
3

img {
	margin-bottom: -4px;
}