JavaScript,js培训班
您的位置: 主页 > web前端文章 > javascript >

ES-6中的解构和递归【访问量:133】

数组文字数组是JavaScript对列表的“本地”表示。列表很重要,因为它们表示有序的事物集合,而有序集合是理解现实的基本抽象。 JavaScript具有创建数组的字面语法:[和]字符。我们可以创建一个空数组:

[]
  //=> []

我们可以创建一个包含一个或多个元素的数组,方法是将它们放置在括号内,并用逗号分隔各个项目。空白是可选的:

[1]
  //=> [1]
  
[2, 3, 4]
  //=> [2,3,4]

任何表达式都可以使用

[ 2,
  3,
  2 + 2
]
  //=> [2,3,4]

包括表示另一个数组的表达式:

[[[[[]]]]]

这是一个数组,其中一个元素是一个数组,其中一个元素是一个数组,其中一个元素是一个数组,其中一个元素是一个空数组。虽然这看起来似乎没有人会构建,但许多学生在探索集合论的算术构造的各种方法时几乎完全一样。 任何表达方式都可以,包括名字:

const wrap = (something) => [something];

wrap("lunch")
  //=> ["lunch"]

数组文字是表达式,而数组是引用类型。我们可以看到,每次对数组进行求值时,即使它包含完全相同的元素,我们也会得到一个新的不同数组:

[] === []
  //=> false
  
[2 + 2] === [2 + 2]
  //=> false
  
const array_of_one = () => [1];

array_of_one() === array_of_one()
  //=> false

解构数组 解构是一种回到Common Lisp的功能,如果不是以前。我们看到了如何使用[,表达式,和构造一个数组字面值]。以下是使用名称的数组文字示例: const wrap = (something) => [something]; 我们将其展开为使用块和额外名称:

const wrap = (something) => {
  const wrapped = [something];
  
  return wrapped;
}

wrap("package")
  //=> ["package"]

这条线const wrapped = [something];很有趣。左边是要绑定的名称,右边是数组文字,是用于构造数组的模板,非常类似于准文字字符串。 在JavaScript中,我们实际上可以颠倒语句并将模板放在左侧,并在右侧放置一个值:

const unwrap = (wrapped) => {
  const [something] = wrapped;
  
  return something;
}

unwrap(["present"])
  //=> "present"

该语句const [something] = wrapped; 破坏了由其表示的数组wrapped,将其单个元素的值绑定到该名称something。我们可以用多个元素来做同样的事情:

const surname = (name) => {
  const [first, last] = name;
  
  return last;
}

surname(["Reginald", "Braithwaite"])
  //=> "Braithwaite"

我们可以做同样的事情(name) => name[1],但解构是类似于它消耗的数据的代码,这是一种有价值的编码风格。 解构可以嵌套:

const description = (nameAndOccupation) => {
  const [[first, last], occupation] = nameAndOccupation;
  
  return `${first} is a ${occupation}`;
}

description([["Reginald", "Braithwaite"], "programmer"])
  //=> "Reginald is a programmer"

搜集 有时我们需要从数组中提取数组。这是最常见的模式:提取头部并收集数据中除头部以外的所有东西:

const [car, ...cdr] = [1, 2, 3, 4, 5];

car
  //=> 1
cdr
  //=> [2, 3, 4, 5]

car并且cdr是回溯到在IBM 704计算机上运行的Lisp实现的陈旧术语。其他一些语言称他们first和butFirst,或head和tail。我们将使用一个通用约定并调用我们收集的变量rest,但将...操作称为“聚集”,遵循凯尔辛普森的例子。1 唉,这个...符号不提供通用的模式匹配功能。例如,我们不能写

const [...butLast, last] = [1, 2, 3, 4, 5];
  //=> ERROR
  
const [first, ..., last] = [1, 2, 3, 4, 5];
  //=> ERROR

另外需要注意的是,...可以在开始时使用,例如在构造函数如下的情况下:

const date = new Date(...[2015, 1, 1]);

现在,当我们引入解构时,我们发现它与数组文字相反。因此,如果

const wrapped = [something];

然后:

const [unwrapped] = something;

收集的反面是什么?我们知道:

const [car, ...cdr] = [1, 2, 3, 4, 5];

什么是相反的?这将是:

const cons = [car, ...cdr];

让我们试试看:

const oneTwoThree = ["one", "two", "three"];

["zero", ...oneTwoThree]
  //=> ["zero","one","two","three"]

有用!我们可以使用...将数组的元素放入另一个数组中。我们说使用...去结构是收集,并在文字中使用它来插入元素被称为“传播”。 解构参数 考虑我们将参数传递给参数的方式:

foo()
bar("smaug")
baz(1, 2, 3)

它非常像数组文字。并考虑我们如何将值绑定到参数名称:

const foo = () => ...
const bar = (name) => ...
const baz = (a, b, c) => ...

它看起来像解构。它的行为就像解构。只有一个区别:我们没有尝试收集。让我们这样做:

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
  //=> [1,2,3,4,5]
  
const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
  //=> [1,[2,3,4,5]]


2018-04-03
匿名评论