现代 JavaScript 参考

feiwen8772 / modern-js-reference

一份现代 JavaScript 参考,你在现代项目中会经常遇到,以及最新的代码示例

http://www.css88.com/archives/8244

简介

初心

本文档是一份 JavaScript 速查表,你在现代项目中会经常遇到,以及最新的代码示例。

本指南不是为了教你从头开始学习 JavaScript ,而是为了帮助那些可能不熟悉当前代码库(例如 React)所用到 JavaScript 概念的开发人员。

此外,我有时还会提供一些个人的建议,这些建议可能是有争议的,但我也会注意到,当我这么做的时候,这是我个人的建议。 继续阅读

JavaScript 中的不可变对象(Immutable Objects)

默认情况下,JavaScript 中的对象是可变的。我们可以更改原始值(字符串,数字等)和对象。我们来看看这个对象:

let obj = {
    num: 10,
    obj: {
        content: "mutable object"
    }
}

你可以轻松地改变它: 继续阅读

JavaScript ECMAScript 2015 (ES6) 和 ECMAScript 2016 (ES7) 新特性速查

上图为 ES6 新特性速览

ES6 给 JavaScript 带来了很深刻的变化。 它完全改变了我们使用 JavaScript 的方式。 ES7是在ES6之上的一个微小更新。 让我们看看 ES6 更新中带来的变化。本文起初是我的学习笔记,现在我和大家分享一下。

支持UNICODE标准版本8

它将允许使用笑脸,一个可以使用 unicode 声明为转义字符的变量。 继续阅读

JavaScript 函数式编程术语大全

函数式编程(FP)有许多优点,它也越来越流行了。然而,每个编程范式都有自己独特的术语,函数式编程也不例外。通过提供的这张术语表,希望使你学习函数式编程变得容易些。

示例以 JavaScript (ES2015) 方式呈现。 Why JavaScript?

这是一份 WIP; 欢迎随时 PR 😉

在适用的情况下,本文档使用的术语定义在 Fantasy Land spec继续阅读

[回归基础]JavaScript 函数中的参数:Parameters(形参) 和 Arguments(实参)

Parameters(形参) 和 Arguments(实参) 一样吗?

Javascript是一种函数式语言,这意味着函数是主要的执行模块单元。显然,JavaScript中的函数非常重要。当讨论函数时,术语 parameters(形式参数,简称形参) 和 arguments(实际参数,简称实参) 通常可以混用,就好像它们是一样的,但其实有一个非常微妙的区别。

  • Parameters(形参) 是函数定义时的形式参数,作为函数定义的一部分,是列出类的变量。
  • Arguments(实参) 是函数调用时的实际参数,是在函数被调用时传递给该函数的变量值。

我们为什么要为这个微小的差异而烦恼呢? 继续阅读

使用 ES2017 中的 Async(异步) 函数 和 Await(等待)

ES2017 在 6 月最终敲定了,随之而来的是广泛的支持了我最喜欢的最喜欢的JavaScript功能: async(异步) 函数。如果你也曾为异步 Javascript 而头疼,那么这个就是为你设计的。如果你没有的话,那么你有可能是个天才。

Async(异步) 函数或多或少允许你编写顺序的 JavaScript 代码,而无需将所有逻辑包装在 callbacks(回调),generators(生成器) 或 promises 中。 考虑一下这个代码:

function logger() {
    let data = fetch('http://sampleapi.com/posts')
    console.log(data)
}

logger()

这段代码没有按照你的预期执行。如果你写过 JS 的话,你可能知道上面的代码为什么不会按预期运行。 继续阅读

[回归基础]JavaScript 等值比较 == ,=== 和 Object.is()

我们都知道 JavaScript 是松散类型,并且在某些情况下,当使用 == 来做等值比较时,会给你意想不到的结果。这是因为使用 == 做等值比较时,JavaScript 会对2个比较的值进行隐式强制转换。

0 == ' ' //true
null == undefined //true
[1] == true //true

所以 JavaScript 还为我们提供了三个等号运算符 === ,它更严格,不强制转换比较值,但实用 === 比较有些时候也不是最好的解决方案: 继续阅读

[回归基础] JavaScript 中循环迭代数组

在 JavaScript 中循环迭代数组的方法有很多种。抽时间简单的归纳一下,我们先从经典的方法开始,然后转向新标准提供的方法。

while 循序语句

while 语句只要指定的条件求值为 true ,就会一直执行它的语句块。 继续阅读

在 Vue.js 中使用任意 JavaScript 第三方库

Lodash, Moment, Axios, Async … 等等, 这些非常有用的 JavaScript 库。你可能会在你的很多 Vue.js 应用中使用它们。

但随着项目的不断增长,您通常会将代码拆分成多个组件文件或模块文件。您也可能希望在不同的环境中能够运行你的 APP ,包括服务器渲染。

除非你已经找到一个简单而强大的方法来将这些 JavaScript 库包含到你的组件和模块文件中,否则这将是一件非常麻烦的事情! 继续阅读

JavaScript 中的 Hoisting (变量提升和函数声明提升)

如何将 函数声明 / 变量 “移动” 到作用域的顶部。

术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析。其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的。你在任何的 JavaScript 文档中找不到这个术语,我们说的 Hoisting(提升) 只是使用了其字面含义来做个比喻。

如果你已经对 JavaScript 作用域工作原理有基本的了解,那么更深入的了解 Hoisting(提升) 有助于你建立更强大的基础知识。(愚人码头注:作为 JavaScript 中的一个总要概念,变量提升和函数声明提升经常在前端开发面试时被问及,或者在前端开发笔试题中出现。可见了解 Hoisting(提升) 的重要性。)

为了更好地理解基础知识,让我们来回顾一下 “Hoisting(提升)” 到底意味着什么。另外,给你一个提醒,JavaScript 是一种解释性语言,这不同于编译性语言,这意味着JS代码是逐行执行的。 继续阅读