JS实现linearSearch动画时遇到的知识点

JS实现linearSearch动画时遇到的知识点

标签（空格分隔）： JavaScript

arguments 对象

定义

arguments是一个对应于传递给函数的参数的类数组对象。
重点：类数组对象

描述

arguments对象是所有（非箭头）函数中都可用的局部变量。可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数的条目，第一个条目索引从0开始。
例如：若一个函数传递了三个参数，可以用下列方式引用：

1
2
3
4
5
6
7
8
9
10
11
12
function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

输出结果：即arguments[0] 对应 参数a；arguments[1] 对应 参数b；arguments[2] 对应 参数c

1
2
3
> 1
> 2
> 3

arguments对象不是一个Array，但它类似于Array，其除了length属性和索引元素之外没有任何Array属性。例如，它没有pop方法，但是它可以被转换为一个真正的Array：

1
2
3
4
5
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);

注意：对参数使用slice会阻止某些js引擎中的优化，另一种方式是：

1
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

如果调用的参数多于正式声明接受的参数，则可以使用arguments对象。（对可以传递可变数量的参数的函数很有用)。使用arguments.length来确定传递给函数参数的个数，然后使用arguments对象来处理每个参数。要确定函数签名中参数的数量，使用Function.length属性。

对参数使用 typeof

typeof参数返回“object”。

1
console.log(typeof arguments); // 'object'

可以使用索引确定单个参数的类型。

1
console.log(typeof arguments[0]); //this will return the typeof individual arguments.

对参数使用扩展语法

还可以使用Array.from()方法或扩展运算符将参数转换为真实数组：

1
2
var args = Array.from(arguments);
var args = [...arguments];

属性

  • arguments.callee 指向当前执行的函数
  • arguments.caller 指向调用当前函数的函数
  • arguments.length 指向传递给当前函数的参数数量
  • arguments[@@iterator] 返回一个新的Array迭代器对象，改对象包含参数中每个索引的值。

注意：在严格模式下，arguments对象与之前不同。arguments[@@iterator]不再与函数的实际形参之间共享，同时caller属性也被移除。

例子

定义链接字符串的函数

这个例子定义了一个函数来连接字符串。这个函数唯一正式声明了的参数是一个字符串，该参数指定一个字符作为衔接点来连接字符串。该函数定义如下：

1
2
3
4
function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}

你可以传递任意数量的参数到该函数，并使用每个参数作为列表中的项创建列表。

1
2
3
4
5
6
7
8
// returns "red, orange, blue"
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah"
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley"
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

定义创建html列表的方法

这个例子定义了一个函数通过一个字符串来创建HTML列表。这个函数唯一正式声明了的参数是一个字符。当该参数为 “u” 时，创建一个无序列表 (项目列表)；当该参数为 “o” 时，则创建一个有序列表 (编号列表)。该函数定义如下：

1
2
3
4
5
6
7
8
function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list

  return result;
}

你可以传递任意数量的参数到该函数，并将每个参数作为一个项添加到指定类型的列表中。例如：

1
2
3
4
5
6
7
var listHTML = list("u", "One", "Two", "Three");

/* listHTML is:

"<ul><li>One</li><li>Two</li><li>Three</li></ul>"

*/

剩余参数、默认参数和解构赋值参数

arguments对象可以与剩余参数、默认参数、解构赋值参数结合使用。

1
2
3
4
function foo(...args) {
  return args;
}
foo(1, 2, 3);  // [1,2,3]

在严格模式下，剩余参数、默认参数和解构赋值参数的存在不会改变arguments对象的行为，但是在非严格模式下就有所不同了。

当非严格模式中的函数没有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值会跟踪参数的值（反之亦然）。看下面的代码：

1
2
3
4
5
function func(a) { 
  arguments[0] = 99;   // 更新了arguments[0] 同样更新了a
  console.log(a);
}
func(10); // 99

并且

1
2
3
4
5
function func(a) { 
  a = 99;              // 更新了a 同样更新了arguments[0] 
  console.log(arguments[0]);
}
func(10); // 99

当非严格模式中的函数有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值不会跟踪参数的值（反之亦然）。相反, arguments反映了调用时提供的参数：

1
2
3
4
5
function func(a = 55) { 
  arguments[0] = 99; // updating arguments[0] does not also update a
  console.log(a);
}
func(10); // 10

并且

1
2
3
4
5
function func(a = 55) { 
  a = 99; // updating a does not also update arguments[0]
  console.log(arguments[0]);
}
func(10); // 10

并且

1
2
3
4
function func(a = 55) { 
  console.log(arguments[0]);
}
func(); // undefined

babel处理Symbol的麻烦（未理解）

在使用 babel 转换 ES next 代码的时候，并不会将 Symbol 直接转换成 ES5 中对应的内容，需要引入额外的 polyfill 才能正常工作。

有的团队为了避免引入这个额外的 polyfill ，会选择不使用 Symbol ，包括通过 babel 生成 Symbol 的特性（比如 for of 等）。

这时候就会有个比较隐蔽的地方需要注意，就是尽量不要让 babel 生成这样的代码：

1
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

这个里面包含了一个 Symbol ，为了让 Symbol 不至于报错，又要想办法在全局先声明一下 Symbol 变量，比较丑陋。

目前在实践中，发现这样的 ES next 代码会生成上述代码：

1
2
3
4
5
6
7
8
9
function fn1() {
    if (1) {
        let a = 1;
        filter(function fn() {
            console.log(a);
        });
        return;
    }
}

生成的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"use strict";

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

function fn1() {
    if (1) {
        var _ret = function () {
            var a = 1;
            filter(function fn() {
                console.log(a);
            });
            return {
                v: void 0
            };
        }();

        if ((typeof _ret === "undefined" ? "undefined" : _typeof(_ret)) === "object") return _ret.v;
    }
}

这段代码有什么特征呢？就是在 if 块中定义了函数，函数中访问了 if 块中的“块级变量”，并且 if 块使用了 return 语句。

可以看出，babel 为了保证 if 块内变量的作用域，会套一个匿名函数，同时由于 if 块中存在 return 返回，所以就用 _ret 来接收匿名函数的返回值。然后后面为啥会生成那串长长的对 _ret 的类型判断代码，目前还不太清楚，可能要结合 babel 的内部处理逻辑去看了，单从生成的代码看，这个完全是多余的。

推而广之， for 块等局部非函数作用域都会有类似的问题。

实际上，从代码编写规范角度来看，是不应该在这种局部作用域块里面定义函数的。函数应该是一段通用的代码，不应该缩在那一小块里面。