主页 / 问题 / 1052768
Accepted
John
Asked:2020-12-01 04:58:19 +0000 UTC2020-12-01 04:58:19 +0000 UTC

如何在扩展运算符中设置默认值

  • 772

资料来源：

图像.js

export const makeImage = ({...prop}) =>{
    const img = document.createElement('img')

        for(let key in prop){
        if(prop.hasOwnProperty(key)){

            img[key] = prop[key]
        }

    }


    return img
}

main.js

import { makeImage } from './url-loader'
import imgUrl from './url-loader/webpack-logo.jpg'


let  NewImg = makeImage({
        src: imgUrl,
        height: '100',
        width: '100',
        alt: 'webpack-logo',
        title: "webpack"
})

问题：

如果你突然不问，例如：heightorwidth等​​。 如何使它们成为默认值？

javascript

2 个回答

  1. Best Answer

    如何在扩展运算符中设置默认值

    实际上，没办法，因为扩展运算符本身不赋值，也不声明变量——它只是将结构值“扩展”为组件。

    并且在解构时，如问题中那样，...这已经是一个休息运算符，它的作用与扩展运算符相反：它将未指定的属性“折叠”成一个新结构。
    因此，参数中的 kind 表达式{ ...prop }只是将传递的对象复制到新的对象中，prop. 而且，由于问题中的代码不会从参数中改变对象，因此这种复制是没有意义的。

    在这种特殊情况下，要设置默认属性值，根本不需要解构（就像展开休息运算符一样）：

    export const makeImage = props => {
  const img = document.createElement('img'); 
  return Object.assign(img, {
    height: '100',
    width: '100', 
    // ... 
  }, props);  
};

    函数体中需要解构，对象的 prop(s) 中有嵌套对象。但是，从问题中的代码来看，它是平坦的（在它的属性中只有原语：数字和字符串）。

    演示：

    const makeImage = props => {
  const img = document.createElement('img'); 
  return Object.assign(img, {
    height: '100',
    width: '100'
  }, props);  
}; 
const test = makeImage({ height: 42 }); 
console.log('ширина (дефолтная): ' + test.width); 
console.log('высота (из аргумента): ' + test.height);

    • 1

  2. 看起来唯一的选择是在函数的开头手动设置它们。

    您还可以设置默认值，例如

    export const makeImage = ({height=10, ...prop}) =>{

    但是，在这种情况下，该字段将不在对象中prop，并且有必要以某种方式将其添加到循环中。

    • 0

相关问题