JavaScript 在 iOS Safari 上需要避免的构建方式和模式

引言

在移动端网页开发中，iOS Safari 平台的兼容性一直是一个比较棘手的问题。特别是对于 JavaScript 的编写，由于 iOS Safari 平台所采用的 JavaScript 引擎与其他平台不同，因此需要特别注意一些构建方式和模式，以避免出现兼容性问题。

本篇文章将主要介绍一些在 iOS Safari 平台上需要避免的 JavaScript 构建方式和模式，同时提供相应的学习和指导意义，并附带示例代码。

1. 使用 for...in 循环遍历数组

在 JavaScript 中，可以使用 for...in 循环来遍历对象或者数组。但是，在 iOS Safari 平台上，使用 for...in 循环遍历数组会出现一些问题。

例如，下面的代码会输出 0、1、2 和 foo：

const arr = [1, 2, 3];
arr.foo = 'bar';
for (const key in arr) {
  console.log(key);
}

这是因为 for...in 循环不仅会遍历数组的元素，还会遍历数组的原型链属性。

因此，在 iOS Safari 平台上，建议使用 for 循环或者 Array.prototype.forEach() 方法来遍历数组。

const arr = [1, 2, 3];
arr.foo = 'bar';
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. 使用 eval() 函数

eval() 函数可以将字符串作为 JavaScript 代码执行。但是，在 iOS Safari 平台上，使用 eval() 函数会被认为是一个安全风险，因此可能会被浏览器阻止执行。

除非你非常了解自己的代码和环境，并且必须动态执行一些代码，否则不要使用 eval() 函数。

例如，下面的代码在 iOS Safari 平台上会抛出一个错误：

const x = 10;
eval('console.log(x)'); // Error: Can't access lexical declaration `x' on `eval'

3. 不使用分号结束语句

在 JavaScript 中，可以不使用分号来结束语句。但是，在 iOS Safari 平台上，如果不使用分号来结束语句，可能会导致出现一些奇怪的行为。

例如，下面的代码在大多数浏览器中都能正常执行，但是在 iOS Safari 平台上会报错：

const foo = () => {
  return
  {
    bar: 'baz'
  }
}

console.log(foo()); // undefined

这是因为在某些情况下，iOS Safari 平台会自动在语句之间插入分号，而这可能会导致代码执行不如预期。

因此，在 iOS Safari 平台上，建议始终在语句末尾添加分号。

const foo = () => {
  return {
    bar: 'baz'
  };
}

console.log(foo()); // {bar: "baz"}

4. 使用 with 语句

with 语句可以将一个对象的属性作为变量来使用。但是，在 iOS Safari 平台上，使用 with 语句会被认为是一个安全风险，因此可能会被浏览器阻止执行。

除非你非常了解自己的代码和环境，并且必须使用 with 语句，否则不要使用它。

例如，下面的代码在 iOS Safari 平台上会抛出一个错误：

-- -------------------- ---- -------
----- --- - -
  ---- -----
--

---- ----- -
  ----------------- -- --------------- ----- ---- --------- ---

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------