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

Question

Я довольно новичок в JS, и я пытаюсь изучить некоторые основы функций.
Я столкнулся с проблемой, я создал такую ​​функцию:

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

Если я вызываю функцию как someName(element), я и i2 сохраняют свои значения, однако

Если я назову это как someName(element,{i:"#3acbda"})значение i изменяется, однако значение i2 не определено,

Итак, как мне назначить значение по умолчанию для свойства, если объект настроек больше не является значением по умолчанию.
Поэтому, когда я назначаю настройки только для i, i2 - это просто значение по умолчанию "#fff", а не неопределенное.

Answer 1

Вы можете использовать оператор распространения объекта ... обогатить ваши варианты с настройками по умолчанию

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

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

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

Answer 2

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

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 3

ES6 Destructuring Assignment - Значения по умолчанию

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