Mastering JS - Fundamentals

Mastering JS创建于2019年4月,旨在帮助JavaScript开发者解决日常问题。市面上,太多千篇一律的从零构建APP,或者钻牛角尖的八股文。Mastering JS提供了简洁的教程和有效的工具,帮助开发者快速的解决问题。
Mastering JS是Valeri KarpovMongoose的维护者,在美国弗罗里达州迈阿密滩创建的。Mastering JS属于MeanIT Software的产品之一,MeanIT Software是聚焦于JavaScript的软件发行商。

译序

掌握JavaScript-基础篇(Mastering JS - Fundamentals)由一系列的小专题文章组成,每篇文章都是从JavaScript的某一个特性出发,讲解它的用法、优缺点、替代品等。

在本系列中比较有价值的内容:

  • 从使用的角度,讲解容易忽略、容易出错的点
  • JavaScript语言本身存在的一些缺陷,及JavaScript后续的发展
  • 引出一些其他知识,例如相关的npm包、业界趣闻等
  • 文章中间的链接,有一些水平高、有深度的文章(英文),值得深入研究

对有经验的开发者而言,有MDN文档就够了,本系列文章的绝大部分内容都可以在其中找到。

但对初学者和经验不足的开发者,MDN太庞大而找不到重点。

而本系列文章是从语言的某一个切面出发,读者可以选择感兴趣的部分进行阅读。

单个文章篇幅几百字左右,即使加上代码测试,也不会超过10分钟,特别适合碎片时间阅读。

文章列表

JavaScript如何比较两个Object

JavaScript中有很多方法来比较对象。本文提供了JavaScript比较对象的三种方法,以及它们的优缺点。


介绍JavaScript中Symbol

Symbol提供了一种在对象中创建隐藏属性的方式。


原生JavaScript获取URL参数

本文展示了如何用原生JavaScript解析URL参数。


字符串首字母大写

不用任何外部库,实现字符串首字母大写。


用forEach()遍历对象

通过Object.keys()、Object.values()和Object.entries(),可以用forEach遍历一个JavaScript对象。


JavaScript的立即调用函数表达式(IIFE)

JavaScript的立即调用函数表达式(IIFE)是一种常用于变量闭包的设计模式。


JavaScript禁用按钮

如何用原生JavaScript禁用一个按钮。


JavaScript的FormData

FormData类在JavaScript上传文件时非常有用。


JavaScript的Blob

Blob(二进制大型对象)是JavaScript中一种类似于文件的数据结构,相当于客户端的Buffer。


用FileReader读取本地文件

FileReader类可以从原生的文件input中读取文件。


JavaScript的Thenable

Thenable是一种行为类似于Promise的对象,主要用于链式操作和async/await,但它并不是Promise。


JavaScript中Promise的reject

在Promise中出现的错误,可以用reject将其标记为rejected状态。


JavaScript的Promise链

Promise链式调用是一种很强大的模式,最大的好处是可以用一个catch()处理所有的错误。


使用bluebird操作Promise

blurbird是JavaScript一个流行的Promise库。


JavaScript创建Promise

本文简述JavaScript创建Promise的几种方式。


JavaScript中Promise的catch函数

Promise的catch函数是一个很方便的语法糖,用于处理Promise中的错误。


JavaScript比较数组

JavaScript比较两个数组的一些技巧。


JavaScript比较日期

JavaScript比较日期不太容易,Date类型是对象,比较符按照引用而不是按值进行对比。本文简介如何用原生JavaScript比较日期。


JavaScript比较字符串

JavaScript的比较运算符很容易比较字符串,另外还有localeCompare()可以用于排序。


JavaScript的typeof运算符

typeof运算符可以判断一个值的类型——number、string、object等。


JavaScript对象数组排序

JavaScript的内置sort函数可以用属性将对象数组进行排序。


如何遍历JavaScript的对象

有许多种方法可以遍历JavaScript对象的所有key和value。本文介绍3种方法和它们的优缺点。


Puppeteer简介

Puppeteer使用真实浏览器测试JavaScript应用,是非常好的工具。


有限状态机的实用介绍

状态机乍一看像是无趣的抽象话题,但它对JavaScript开发者来说非常有用。


理解JavaScript中async/await

async/await可以以同步的方式写异步代码,没有回调函数或Promise链,只有for循环和if语句。


理解JavaScript中new Promise

在使用new Promise时,调用的时Promise的constructor。本文介绍了Promise constructor的专业用法。


JavaScript中Promise的resolve

在JavaScript的Promise中,resolve一个值时,会将Promise状态标记为fulfilled。


JavaScript的Promise.all()函数

Promise.all()函数可以并行执行多个Promise,然后收集执行结果。


JavaScript的switch/case语句

switch语句就像多个叠加的if语句,可以在不同条件执行不同的代码。本文展示了如何使用switch/case语句。


JavaScript的this

this关键字,也称为函数的“上下文”或“范围”,是一个强大的也令人迷惑的概念。本文帮你捋清思路。


JavaScript的===和==

何时使用==,何时使用===,经常会导致开发者困惑不已。简单的版本:除了一个小小的例外,应该一直使用===


JavaScript获取明天的日期

虽然用Moment.js一类的库很容易操作日期,但原生JavaScript也能获取明天日期。


JavaScript的静态属性和函数

static关键字可以在ES6的类中定义静态属性和函数。


JavaScript的取余运算符

JavaScript的取余运算符返回第一个数除以第二个数的余数。


JavaScript的真值

JavaScript的if条件不一定是Boolean值,可以是任何类型的值。内置的强制类型转换接收到一个真值,会转换为true。


JavaScript的逻辑运算符

JavaScript有3个逻辑运算符:&&||!。这三个运算符常用在if语句,本文介绍了逻辑运算符其他的一些神奇的用法。


JavaScript中的“假”值是什么

JavaScript的类型强制转换导致代码很容易出错,但如果理解了基本原理,可以省去很多无用的类型检查。本文简述了“假”值。


JavaScript数组的filter()

JavaScript的数组函数filter()可以筛选出符合指定条件的数组元素,本文简述该函数的使用。


让JavaScript函数暂停一段时间

JavaScript没有内置的sleep()函数,但也可以通过其他方式让函数暂停一段时间。


CORS(跨域资源共享)的简单总结

跨域资源共享,简写为CORS,是浏览器端的一项协议,用于确定从其他域请求一个资源是否安全。本文简要介绍。


POJO(Plain Old JavaScript Object)是什么

POJO是JavaScript存储用户输入数据最常用的方式,如何确切定义POJO呢?


JavaScript中Promise的then()函数

then()函数是JavaScript的Promise交互的主要方式,是Promise链式语法的一部分。


JavaScript的Promise

Promise是一个代表异步操作的对象,它是JavaScript的基础并发原语。本文讲解了相关知识。


JavaScript的instanceof操作符

instanceof运算符可以确定一个对象是否是一个类的实例。


JavaScript的类

从ES6/2015开始,JavaScript新增了面向对象编程的内置关键字class。本文介绍了它的工作原理。


JavaScript的JSON.stringify()

JSON.stringify()函数是JavaScript对象转JSON字符串最常见的方法。本文从实用的角度、以示例说明JSON.stringify()


JavaScript的Object.seal()

seal()函数可以防止对象添加或移除属性,同时仍然允许修改已有的属性,本文介绍了一些相关知识。


JavaScript对象的原型(prototype)简介

JavaScript的继承是基于原型(prototype-based)的,即使使用ES6中类的extends关键词时也是如此。本文介绍了原型(prototype)的一些知识。


JavaScript的深拷贝和浅拷贝

在JavaScript中,经常会听说“深克隆”和“浅克隆”,也叫做浅拷贝和浅拷贝。本文介绍了其含义及示例。


JavaScript中的Object.assign()

Object.assign()函数将一个对象的属性赋给另一个对象,可以用于浅拷贝对象或一次性赋值多个属性。


JavaScript拼接字符串3种方法

JavaScript中可以用+运算符、Array#join()函数和String#concat()函数拼接字符串。本文介绍了一些需要了解的知识。


JavaScript字符串首字母大写

JavaScript中如何将“dog”转为“Dog”。


JavaScript中void 0的作用

JavaScript中的void运算符是一个普遍的难点,它很少出现在教程中,但它有一些方便的用途。本文展示了void运算符最常见的一些用途。


JavaScript的表达式

类似Vue的许多框架,允许在HTML中内嵌JavaScript表达式。什么是表达式?可以在表达式加入if语句吗?


JavaScript数组的push教程

push()方法向JavaScript数组的末尾添加一个元素。本文介绍push()是如何使用的。


检查JS数组是否包含特定值

检查JavaScript数组是否包含某个值,有两种常见方法:includes()indexOf()。本文展示了如何使用二者,以及二者分别适用的场景。


JavaScript的箭头函数

箭头函数可以让编写函数更简洁,但有一些语法上的奇怪之处。本文描述了有效的使用箭头函数所需要了解的知识。


用Object.freeze()使JavaScript对象不可变

const关键字并不能防止对象属性的修改,而Object.freeze()函数可以实现,但会带有警告。


JavaScript中“use strict”的作用

JavaScript的“use strict”会开启严格模式。本文解释了何为严格模式。


理解JavaScript的回调机制

“回调”是JavaScript中较其他语言不同的几个概念之一。本文围绕回调帮助你缕清思路。


JavaScript的Object.keys()函数概览

介绍如何使用JavaScript的Object.keys()。


理解JavaScript中的Array.splice()

如何使用splice()从JavaScript数组中添加和移除元素。


JavaScript中substring、substr和slice的区别

JavaScript有3种方法可以获取字符串的子串。本文介绍了String#substring()String#substr()String#slice()的区别。


JavaScript替换字符串中所有给定子字符串

学习如何替换JavaScript字符串中所有给定子字符串。


JavaScript的数组排序

学习如何使用JavaScript内置的Array#sort()函数。


JavaScript的Map

学习如何使用ES6的Map。


JavaScript比较两个字符串

学习如何比较两个字符串:哪个更大、更小或相等。


JavaScript检查字符串是否包含子字符串

学习使用原生JavaScript检查字符串是否包含子字符串。


JavaScript中forEach()8个简洁的例子

学习如何使用JavaScript的forEach()遍历嵌套数组、对象的key和其他类型。


JavaScript中in和hasOwnProperty的区别

JavaScript中检查对象中是否包含指定key的两种方法。


使用原生JavaScript格式化日期

学习使用toLocaleString()函数格式化日期,不用外部库。


JavaScript计算标准差

在Node.js和浏览器中使用Math.js计算标准差。


理解JavaScript中的valueOf()

学习String类型、Number类型、Date类型都具备的valueOf()函数。


JavaScript获取当前时间戳

学些如何在JavaScript中获取当前Unix时间戳。