Question

我无法理解这段代码values[0]和values[1]的含义

var a = 5;
var b = 10;

function foo(strings, ...values) {
  let a = values[0];
  let b = values[1];
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

Answer 1

像这样使用的传播运算符（...）将使用一堆参数并将其转换为数组。

如果我说：

function foo(...args) {
  //do something
}

然后说：

foo(1, 2, 3, 4, 5)

args（在实际函数内部）将等于[1、2、3、4、5]。在您的示例中，values是一个数组，它从该数组中获取第一个值（values [0]）和第二个值（values [1]）。

Answer 2

使用模板中的字符串数组作为第一个参数，然后是具有每个占位符值的离散参数，调用标记函数。 rest参数（...values）收集从第二个参数（在您的情况下）开始传递到数组中的所有值。因此，values[0]是调用foo时第一个占位符的值，而values[1]是第二个占位符的值。

没有充分的理由在...values中使用foo来从a中获取b和values，这样会更简单，甚至更清晰只需将a和b声明为命名参数即可：

function foo(strings, a, b) {
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

var a = 5;
var b = 10;

function foo(strings, a, b) {
  return `Sum ${a + b}
    Product ${a * b} 
    Division ${b / a}`;
}

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

Answer 3

这三个点（...）被称为传播语法。这是将参数传递给函数的更整洁的方式（尤其是数组）。

以您为例L

console.log(foo`Num1 ${a + 10}
    Num2 ${b * 2} 
    Num3 ${b / a}`);

您在此处使用三个值15、10和2调用foo函数，这三个值分别作为[15, 10, 2]传递给该函数，因此values[0]将为15并且{{1} }将为10，而values[1]将为2。

Answer 4

这是标记模板的示例。您可以使用函数来解析模板。

var a = 5;
var b = 10;

function foo(strings, ...values) {
  let a = values[0];
  let b = values[1];
  console.log(a , b); 
}

foo`x dwqdwq ${a} qwdqwdy ${b}`;
// prints 5, 10


function foo2(strings, a, b, c) {
  console.log(a , b, c);
}

foo2`x dwqdwq ${1} qwdqwdy ${2} mmdwldw ${3}`;  
// prints 1, 2, 3

strings将是模板中字符串部分的数组。

模板文字js

4 个答案: