установка неустановленных свойств в качестве свойств по умолчанию в функции?

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

Назначение деструктурирования ES6 - значения по умолчанию

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, наблюдайте за консолью.Вы должны увидеть, что значения по умолчанию вступают в действие, когда только одному или ни одному из свойств явно присваивается значение.

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>

Answer 2

Вы можете использовать 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 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 и т. Д.),Вы можете использовать Распаковка объекта - и перейти непосредственно к свойству name:

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

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

Answer 4

Один из способов - использовать одну дополнительную переменную на втором месте, а на третьем месте вы можете деструктурировать. (если вы не хотите явно определять внутреннюю функцию)

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