JavaScript 使用误区

赋值运算符应用错误

在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。

if 条件语句返回 false (是我们预期的)因为 x 不等于 10:

var x = 0;

if (x == 10)

if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:

var x = 0;

if (x = 10)

if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:

var x = 0;

if (x = 0)

比较运算符常见错误

在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：

var x = 10;

var y = \"10\";

if (x == y)

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：

var x = 10;

var y = \"10\";

if (x === y)

这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:

以下实例会执行 alert 弹窗：

var x = 10;

switch(x) {

case 10: alert(\"Hello\");

}

以下实例由于类型不一致不会执行 alert 弹窗：

var x = 10;

switch(x) {

case \"10\": alert(\"Hello\");

}

加法与连接注意事项

加法是两个数字相加。

连接是两个字符串连接。

JavaScript 的加法和连接都使用 + 运算符。

接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别：

var x = 10 + 5; // x 的结果为 15

var x = 10 + \"5\"; // x 的结果为 \"105\"

使用变量相加结果也不一致:

var x = 10;

var y = 5;

var z = x + y; // z 的结果为 15

var x = 10;

var y = \"5\";

var z = x + y; // z 的结果为 \"105\"

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

var x = 0.1;

var y = 0.2;

var z = x + y // z 的结果为 0.3

if (z == 0.3) // 返回 false

我解决以上问题，可以用整数的乘除法来解决：

实例

var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3

JavaScript 字符串分行

JavaScript 运行我们在字符串中使用断行语句:

实例 1

var x =

\"Hello World!\";

但是，在字符串中直接使用回车换行是会报错的：

实例 2

var x = \"Hello

World!\";

我们可以在选择开发工具或按下 F12 来查看错误信息：

字符串断行需要使用反斜杠(\\)，如下所示:

实例 3

var x = \"Hello \\

World!\";

错误的使用分号

以下实例中，由于分号使用错误，if 语句中的代码块将无法执行：

if (x == 19);

{

// code block

}

Return 语句使用注意事项

JavaScript 默认是在代码的最后一行自动结束。

以下两个实例返回结果是一样的(一个有分号一个没有):

实例 1

function myFunction(a) {

var power = 10

return a * power

}

实例 2

function myFunction(a) {

var power = 10;

return a * power;

}

JavaScript 也可以使用多行来结束一个语句。

以下实例返回相同的结果:

实例 3

function myFunction(a) {

var

power = 10;

return a * power;

}

但是，以下实例结果会返回 undefined：

实例 4

function myFunction(a) {

var

power = 10;

return

a * power;

}

为什么会有这样的结果呢？因为在 JavaScript 中，实例 4 的代码与下面的代码一致：

function myFunction(a) {

var

power = 10;

return; // 分号结束，返回 undefined

a * power;}

解析

如果是一个不完整的语句，如下所示:

var

JavaScript 将尝试读取第二行的语句：

power = 10;

但是由于这样的语句是完整的:

return

JavaScript 将自动关闭语句:

return;

在 JavaScript 中，分号是可选的 。

由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。

	注意：不用对 return 语句进行断行。

数组中使用名字来索引

许多程序语言都允许使用名字来作为数组的索引。

使用名字来作为索引的数组称为关联数组(或哈希)。

JavaScript 不支持使用名字来索引数组，只允许使用数字索引。

实例

var person = [];

person[0] = \"John\";

person[1] = \"Doe\";

person[2] = 46;

var x = person.length; // person.length 返回 3

var y = person[0]; // person[0] 返回 \"John\"

在 JavaScript 中, 对象 使用 名字作为索引。

如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。

执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:

实例

var person = [];

person[\"firstName\"] = \"John\";

person[\"lastName\"] = \"Doe\";

person[\"age\"] = 46;

var x = person.length; // person.length 返回 0

var y = person[0]; // person[0] 返回 undefined

定义数组元素，最后不能添加逗号

错误的定义方式：

points = [40, 100, 1, 5, 25, 10,];

正确的定义方式：

points = [40, 100, 1, 5, 25, 10];

定义对象，最后不能添加逗号

错误的定义方式：

websites = {site:\"菜鸟教程\", url:\"www.runoob.com\", like:460,}

正确的定义方式：

websites = {site:\"菜鸟教程\", url:\"www.runoob.com\", like:460}

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为 null，否则为 undefined。

如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。

错误的使用方式：

if (myObj !== null && typeof myObj !== \"undefined\")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义：

if (typeof myObj !== \"undefined\" && myObj !== null)

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。

以下代码的的变量 i 返回 10，而不是 undefined：

实例

for (var i = 0; i < 10; i++) {

// some code

}

return i;

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

如何在JavaScript中处理null和undefined？

在 JavaScript 的开发工作中，许多开发人员都头疼的一个问题就是处理可选值。怎样才能最大程度减少由 null、undefined，或在运行时未初始化的值所引发的错误，有哪些最佳策略呢？

有些语言针对这类情况有内置的解决方案。在某些静态类型的语言中，你可以认定 null 和 undefined 是非法值，并且让你的编程语言在编译时抛出 TypeError。但即使在这种语言中，也不能阻止 null 输入在运行时流入程序。

为了更好地处理这种问题，我们需要了解这些值的来源。以下是一些最常见的来源：

用户输入；

数据库 / 网络记录；

未初始化状态；

无法返回任何内容的函数。

用户输入

在处理用户输入时，验证是第一道也是最好的防线。我经常依靠 schema 验证器来完成这项工作。比如，你可以试试 react-jsonschema-form。

对输入的记录做 hydrate 处理

我总是会把从网络、数据库或用户输入中获得的输入传递给一个 hydrating 函数。例如，我会使用可以处理 undefined 值的 redux 动作创建者来 hydrate 用户记录：

const setUser = ({ name = \'Anonymous\', avatar = \'anon.png\' } = {}) => ({
  type: setUser.type,
  payload: {
    name,
    avatar
  }
});
setUser.type = \'userReducer/setUser\';

有时，你需要根据数据的当前状态显示不同的内容。如果页面可以在所有数据初始化完毕之前显示，就可能会遇到这种情况。例如，当你向用户显示资金余额时，有时可能会在加载数据之前显示余额为零。这种事情我见过很多次，这会让用户感到不安。你可以创建一些自定义数据类型，这些数据类型根据当前状态生成不同的输出：

const createBalance = ({
  // 默认状态
  state = \'uninitialized\',
  value = createBalance.empty
} = {}) => createBalance.isValidState(state) && ({
  __proto__: {
    uninitialized: () => \'--\',
    initialized: () => value,
    format () {
      return this[this.getState()](value);
    },
    getState: () => state,
    set: value => {
      const test = Number(value);
      assert(!Number.isNaN(test), `setBalance Invalid value: ${ value }`);
      return createBalance({
        state: \'initialized\',
        value
      });
    }
  }
});
createBalance.empty = \'0\';
createBalance.isValidState = state => {
  if (![\'uninitialized\', \'initialized\'].includes(state)) {
    throw new Error(`createBalance Invalid state: ${ state }`);
  }
  return true;
};
const setBalance = value => createBalance().set(value);
const emptyBalanceForDisplay = createBalance()
  .format();
console.log(emptyBalanceForDisplay); // \'--\'
const balanceForDisplay = setBalance(\'25\')
  .format(balance);
console.log(balanceForDisplay); // \'25\'// 取消下列调用的注释前缀就能看到错误示例：// setBalance(\'foo\'); // Error: setBalance Invalid value: foo// Error: createBalance Invalid state: THIS IS NOT VALID// createBalance({ state: \'THIS IS NOT VALID\', value: \'0\' });

上面的代码是一个状态机，其设计无法显示无效状态。首次创建余额数字时，它将被设置为一个 unintitialized 状态。如果你尝试在 uninitialized 状态时显示余额，则只会获得一个占位符值（“--”）。要调整这个设置，你必须调用.set 方法，或调用我们在 createBalance 下面定义的 setBalance 捷径来显式设置一个值。

该状态本身经过封装，以保护其免受外界干扰，这样其他函数就无法捕获它并将其设置为无效状态了。

注意：想知道为什么我们要使用字符串而不是数字吗？那是因为我用了精度很高的大数字符串来表示货币类型，以避免舍入错误，并能准确地表示加密货币交易中的数值（这类交易中的数值精度要求可能会非常高）。

如果你使用 Redux 或 Redux 架构，则可以使用 Redux-DSM 来声明状态机。

避免创建 null 和 undefined 值

在你自己的函数中，你可以尽量避免创建 null 或 undefined 值。我想到了很多 JavaScript 的内置方法来做到这一点，见下文。

避免 null

我从未在 JavaScript 中显式创建 null 值，因为我觉得用两个不同的原始值来表示\"这个值不存在\"，实在是没什么意义的事情。

自 2015 年开始 JavaScript 就支持默认值了，当你没有为相关参数或属性提供值时，它们就会填入默认值。这些默认值不适用于 null 值。根据我的经验，这通常会导致一个错误。为了避免这种陷阱，请不要在 JavaScript 中使用 null。

如果你希望处理未初始化的值或空值这类特殊情况，状态机是更好的选择，如前所述。

新的 JavaScript 功能

有几个功能可以帮助你处理 null 或 undefined 值。在撰写本文时，下面两个功能都是第 3 阶段的提案，将来你看到本文时这两个功能可能已经正式发布了。

目前，可选链（optional chaining）是第 3 阶段的提案。它的工作机制是这样的：

const foo = {};
// console.log(foo.bar.baz); // throws errorconsole.log(foo.bar?.baz) // undefined

空位合并运算符

这也是准备添加到规范中的第 3 阶段提案，“空位合并运算符（Nullish Coalescing Operator）”基本上是“回退值运算符”的一种高大上的说法。如果左侧的值是 undefined 或 null，则其会等于右侧的值。它的工作机制是这样的：

let baz;
console.log(baz); // undefined
console.log(baz ?? \'default baz\');
// default baz// Combine with optional chaining:
console.log(foo.bar?.baz ?? \'default baz\');
// default baz

目前提案尚未正式进入规范，所以你需要安装 @babel/plugin-proposal-optional-chaining 和 @ babel/plugin-proposal-nullish-coalescing-operator。

使用 Promise 实现异步 Either

如果某个函数可能不返回值，则最好将其包装在一个 Either 中。在函数式编程中，Either monad 是一种特殊的抽象数据类型，它允许你附加两个不同的代码路径：成功路径或失败路径。JavaScript 具有内置的异步 Either monad-ish 数据类型，称为 Promise。你可以用它对 undefined 值进行声明式错误分支：

const exists = x => x != null;
const ifExists = value => exists(value) ?
  Promise.resolve(value) :
  Promise.reject(`Invalid value: ${ value }`);
ifExists(null).then(log).catch(log); // Invalid value: nullifExists(\'hello\').then(log).catch(log); // hello你可以根据需要编写一个同步版本，但这里我还用不到那一步，就留给你做练习吧。如果你在 functor 和 monad 方面有良好的基础，那么这个过程会很容易。如果这听起来很吓人，那也不用担心，只用 Promise 即可。它们是内置的，并且在大多数情况下都可以正常工作。

使用数组实现 Maybe

数组实现了一个 map 方法，这个方法会使用一个函数应用在数组的每个元素上。如果数组为空，则这个函数永远不会被调用。换句话说，JavaScript 中的数组可以充当 Haskell 等语言中的 Maybe 角色。

Maybe 是什么？

Maybe 是一种特殊的抽象数据类型，它封装了一个可选值。数据类型有两种形式：

Just——包含一个值的 Maybe；

Nothing——没有值的 Maybe。

下面是具体的机制：

const log = x => console.log(x);
const exists = x => x != null;
const Just = value => ({
  map: f => Just(f(value)),
});
const Nothing = () => ({
  map: () => Nothing(),
});
const Maybe = value => exists(value) ?
  Just(value) :
  Nothing();
const empty = undefined;
Maybe(empty).map(log); // does not log 这只是一个示例，用来演示这个概念。你可以围绕 maybe 建立一整套有用的函数库，实现 flatMap 和 flat 之类的操作（例如，在编写多个返回 Maybe 的函数时避免 Just(Just(value)) 这种情况）。但是 JavaScript 已经有一种数据类型可以直接实现这些功能，因此我通常会这样做：使用数组。

如果你要创建一个可能会，或可能不会产生结果的函数（尤其是可能有多个结果的情况下），那么这种情况下最好的方法可能就是返回一个数组。

const log = x => console.log(x);
const exists = x => x != null;
const arr = [1,2,3];
const find = (p, list) => [list.find(p)].filter(exists);
find(x => x > 3, arr).map(log); // does not log anythingfind(x => x < 3, arr).map(log); // logs 1

我发现在空列表上不会调用 map，这对避免 null 和 undefined 值来说非常有用，但是请记住，如果数组包含 null 和 undefined 值，它将使用这些值调用该函数，因此如果你在运行的函数可能会产生 null 或 undefined，你需要将其从返回的数组中过滤出来，如上所示。这可能会改变集合的长度。

在 Haskell 中，有一个函数 maybe（就像 map 一样）将一个函数应用于一个值上。但是该值是可选的，并封装在 Maybe 中。我们可以使用 JavaScript 的 Array 数据类型做基本上相同的事情：

// maybe = b => (a => b) => [a] => b
const maybe = (fallback, f = () => {}) => arr =>
  arr.map(f)[0] || fallback;
// turn a value (or null/undefined) into a maybeArray
const toMaybeArray = value => [value].filter(exists);
// maybe multiply the contents of an array by 2,// default to 0 if the array is empty
const maybeDouble = maybe(0, x => x * 2);
const emptyArray = toMaybeArray(null);
const maybe2 = toMaybeArray(2);
// logs: \"maybeDouble with fallback: 0\"
console.log(\'maybeDouble with fallback: \', maybeDouble(emptyArray));
// logs: \"maybeDouble(maybe2): 4\"console.log(\'maybeDouble(maybe2): \', maybeDouble(maybe2));

maybe 需要一个回退值，然后是一个映射到 maybe 数组上的函数，然后是一个 maybe 数组（包含一个值，或者为空的数组），最后返回将该函数应用于数组内容的结果，或者在数组为空时返回回退值。为了方便起见，我还定义了 toMaybeArray 函数，并 curry 了 maybe 函数来让它更显眼一些，方便展示。

如果你想在生产代码中执行类似的操作，我已经创建了一个经过单元测试的开源库，可以简化你的工作。这个库叫 Maybearray。与其他 JavaScript Maybe 库相比，Maybearray 的优势在于它使用原生 JavaScript 数组来表示值，因此你不必对其进行任何特殊处理，也用不着来回转换。