将未设置的属性设置为函数中的默认属性？

Question

我是 JS 的新手，我正在尝试学习一些函数基础知识。
我遇到了一个问题，我创建了一个这样的函数：

function someName (element, settings={i:"#1d252c", i2:"#fff"}) {
    .......
}

如果我将函数调用为 someName(element)。 i 和 i2 保留其值，但是

如果我像 someName(element,{i:"#3acbda"}) 那样调用它，i 的值确实会改变，但是 i2 的值是未定义的，

那么当设置对象不再是默认值时，我如何将默认值分配给属性。
因此，当我仅使用 i 分配设置时，i2 只是默认值“#fff”而不是未定义的。

Answer 1

您可以使用逻辑 ||（或）运算符（空合并）在正文中定义默认值：

function someName(element, settings={i:"#1d252c", i2:"#fff"}){
  settings['i'] = settings['i'] || "#1d252c"; // set to the current of resort to default
  settings['i2'] = settings['i2'] || "#fff"; 
  
  console.log(settings);
}
someName("foo", {i:"#3acbda"})

如果 i2 属性在 settings 参数中不存在，上面将添加 i2 属性并将其设置为 #fff

Answer 2

您可以使用 对象展开运算符 ... 来使用默认设置丰富您的选项

function someName(element, options){
    const settings = {i:"#aaa", i2:"#fff", ...options};
    console.log(settings)
}

// let's test
someName(null, {i:"#000"});

这是我的首选。或者你也可以使用第三个参数：

function someName(element, options, settings={i:"#aaa", i2:"#fff", ...options}){
    console.log(settings)
}

// let's test
someName(null, {i:"#000"});

如果您不想，或者觉得总是必须使用 settings 对象引用（如 settings.i、settings.i2 等）很麻烦，您可以使用 对象解包 - 直接去propertyName:

function someName(element, options ){
    const {i="#aaa", i2="#fff"} = options; 
    console.log( i, i2 );
}

// let's test
someName(null, {i:"#000"});

Answer 3

一种方法是在第二位使用一个额外的变量，在第三位你可以解构。（如果你不想要显式定义内部函数 )

function someName(element, input,settings={i:"#1d252c", i2:"#fff",...input}){
    console.log(settings.i)
    console.log(settings.i2)
}

someName('hello', {i:'#123'})
someName('hello', {i2:'#123'})

旁注：- 使用上述技巧时，您需要确保始终在函数中少传递一个参数比我们在函数中定义的调用。

您还可以在函数和解构中定义设置

function someName(element, input){
  const settings={i:"#1d252c", i2:"#fff",...input}
    console.log(settings.i)
    console.log(settings.i2)
}

someName('hello', {i:'#123'})
someName('hello', {i2:'#123'})

解构的更多用法你可以看

Answer 4

你可以这样使用Destructuring Objects属性。

function some(element, { i='#fff', i2='#ddd' }) {
    console.log('element', element);
    console.log('color1', i);
    console.log('color2', i2);
}


some('elementOne', {})
const settings1 = {
  i: '#ccc'
}
some('elementTwo', {...settings1});

const settings2 = {
  i2: '#bbb'
}
some('elementTwo', {...settings2});

Answer 5

ES6 Destructuring Assignment - Default Values

ES6 允许我们为对象和数组分配默认值。这是前者的语法：

//Declare Object like we normally do
const settings = {i1: "#eee", i2: "#333"}

//Destructure Object and assign defaults
const {i1:"#fff", i2:"#fff"} = settings

一个重要的警告，只有当值为 undefined.

时才会出现默认值

演示

注意：点击单选按钮改变settings对象，观察控制台。您应该会看到，当只有一个或 none 属性被显式赋予值时，默认值就会生效。

const main = document.forms[0];

function changeSettings(e) {
  const ui = e.currentTarget.elements;
  const in0 = ui.i0;
  const in1 = ui.i1;
  const in2 = ui.i2;
  const in3 = ui.i3;

  let settings = {
    i1: "#333",
    i2: "#000"
  };

  if (in0.checked) {
    settings = {
      i1: "#333",
      i2: "#000"
    };
  } else if (in1.checked) {
    settings = {
      i1: "#333",
    };
  } else if (in2.checked) {
    settings = {
      i2: "#000"
    };
  } else if (in3.checked) {
    settings = {};
  }

  let {
    i1 = "DEFAULT i1",
    i2 = "DEFAULT i2"
  } = settings;

  console.log(i1);
  console.log(i2);
  console.log('=============');
};

main.onchange = changeSettings;

.as-console-wrapper {
  width: 50%;
  margin-left: 50%;
  min-height: 100%;
}

<form id='main'>

  i1: "#333", i2: "#000"<input id='i0' type='radio' name='rad'><br> i1: "#333"<input id='i1' type='radio' name='rad'> <br> i2: "#000"<input id='i2' type='radio' name='rad'> <br> {}
  <input id='i3' type='radio' name='rad'> <br>

</form>

将未设置的属性设置为函数中的默认属性？

setting unset properties as default properties in a function?

javascript

function

destructuring

javascript-objects

ES6 Destructuring Assignment - Default Values

演示