ES6 Destructuring Assignment - Default Values

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

一种方法是在第二位和第三位使用 一个额外的变量，您可以对其进行分解。 （如果您不想显式定义内部函数）< / p>

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'})

附带说明：- 在使用上述技巧时，您需要确保在函数调用中传递的参数总是比在函数中定义的传递的参数少。 / p>

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

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'})

更多的破坏性用法，您可以看到here

Answer 2

ES6 Destructuring Assignment - Default Values

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

x = df[:, col]

一个重要的警告，仅当值为df时才发生默认值。

演示

注意：单击单选按钮将更改//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

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;

Answer 3

您可以使用对象传播算子 ...使用默认设置丰富您的选项

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 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

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

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并将其设置为#fff

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

5 个答案:

ES6 Destructuring Assignment - Default Values

演示