发表于 | | 阅读次数:

ES6 新增了...操作符，通常用于在函数中提取剩余参数和展开数组。但其实它的用途不止于此，本文就介绍几个技巧，用它来操作 JavaScript 对象。

1. 添加属性

复制对象的同时，为其添加新的属性。

例子中复制了user对象到userWithPass，并添加了 password 属性。

1
2
3
4
5
const user = { id: 110, name: 'Kayson Li'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 110, name: 'Kayson Li'}
userWithPass //=> {  id: 110, name: 'Kayson Li', password: 'Password!' }
阅读全文 »

发表于 | | 阅读次数:

在编程领域中，模块是自包含的功能单元，可以跨项目共享和重用。它们使开发人员的生活更加轻松，因为我们可以使用它来增加应用程序的功能，而不必亲自编写这些功能。它还让我们可以组织和解耦代码，从而使应用程序更容易理解、调试和维护。

在本文中，我们来探究如何使用 Node.js 中的模块，主要介绍如何导出和导入。

不同的模块格式

由于JavaScript 最初没有模块的概念，随着时间的推移出现了各种相互竞争的格式。以下是主流的几种格式：

  • Asynchronous Module Definition (AMD)格式， 用于浏览器端，使用 define 函数定义模块。
  • CommonJS (CJS) 格式，用于 Node.js，使用 require 和 module.exports 定义依赖和模块。
  • ES Module (ESM) 格式。从 ES6 (ES2015)开始，JavaScript 支持原生模块格式。它使用export 关键字导出模块的公开 API，并用 import 关键字导入。
  • System.register 格式被设计用于在ES5 中 支持 ES6 模块。
  • Universal Module Definition (UMD) 格式，在浏览器和 Node.js 中都可以使用。当模块需要被多种模块加载程序导入时，这个很有用。

请注意，本文只讨论 CommonJS 格式，它是Node.js 中的标准格式。如果你想深入了解其他格式，我推荐你阅读这篇文章，作者是 SitePoint 的 Jurgen Van de Moere。

阅读全文 »

发表于 | | 阅读次数:

JavaScript 使用原型继承：每个对象都从原型对象继承属性和方法。

Java 或 Swift 等语言中作为创建对象的蓝图的传统 Class，在JavaScript 中不存在。原型继承只处理对象。

原型继承可以模拟经典的类继承。为了将传统的类引入 JavaScript，ES2015 标准引入了class语法：这是在原型继承之上的一种语法糖。

这篇文章让你熟悉 JavaScript 类：如何定义类，初始化实例，定义字段和方法，理解私有和公共字段，掌握静态字段和方法。

阅读全文 »

发表于 | | 阅读次数:

引言

我们经常会碰到树形数据结构，比如组织层级、省市县或者动植物分类等等数据。下面是一个树形结构的例子：
树形结构

在实际应用中，比较常见的做法是将这些信息存储为下面的结构，特别是当存在1对多的父/子节点关系时：

1
2
3
4
5
6
7
8
9
10
11
const data = [
  { id: 56, parentId: 62 },
  { id: 81, parentId: 80 },
  { id: 74, parentId: null },
  { id: 76, parentId: 80 },
  { id: 63, parentId: 62 },
  { id: 80, parentId: 86 },
  { id: 87, parentId: 86 },
  { id: 62, parentId: 74 },
  { id: 86, parentId: 74 },
];

那么，如何将这种对象数组格式转换为层级树的格式呢？其实，利用 JavaScript 对象引用的特性，实现起来会非常简单。它可以不用递归，在O(n)时间内完成。

阅读全文 »

发表于 | | 阅读次数:

你可能在网上见过有人用 几个不同的字符写的各种稀奇古怪的 JavaScript 代码，虽然看起来奇怪，但是能正常运行！比如这个：

1
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

你猜运行结果是什么？你可以自己去控制台试一下。

看起来很神奇，但这到底是怎么回事呢?

事实上，你几乎可以用下面这 6 个字符写出任意的 JavaScript 程序：

1
[]()!+

很多人都知道这个技巧，但是没有多少开发人员知道它到底是如何工作的。今天，我们就来看看它背后的执行原理。我们的目标是用这几个字符来写出字符串“self”。姑且用这个字符串向 Self 语言致敬，JavaScript 的灵感来源之一就是它。

阅读全文 »