[js]关于MDN中 elements.map(({ “length“: lengthFooBArX }) =」 lengthFooBArX) 的解释

    技术2022-07-13  62

    关于MDN中箭头函数部分的这段代码

    var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; elements.map(element => element.length); // [8, 6, 7, 9] // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构 // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名, // 可以替换成任意合法的变量名 elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

    涉及到关于对象解构赋值的两个知识点

    给新的变量名赋值: 从一个对象中提取变量并赋值给和对象属性名不同的新的变量名

    ({a: foo, b: bar} = {a: 10, b: 20}); console.log(foo); //10 console.log(bar); //20

    从作为函数实参的对象中提取数据: 当函数传入参数是对象时,使用大括号可取得对应属性名的属性值

    function userId({id}) { console.log(id); } userId({id: 42}); //42

    现在回头看这段代码

    elements.map(({ "length": lengthFooBArX }) => lengthFooBArX);

    实际上就是获取传入数组元素对象的length属性,那么下面的写法也是同样可以的:

    elements.map(({ length }) => length);
    Processed: 0.015, SQL: 9