如果为空则初始化解构道具

Question

如果我的变量为空或不存在，我想将其初始化为 []。

这是我的代码：

  const {
columnDates = [],
rowTitles = [],
last3MonthComparisonDirections = [],
last3MonthComparisonMeanings = [],
last3MonthComparisonValues = [],
last3MonthValues = [],
last12MonthValues = [],
lastMonthComparisonDirections = [],
lastMonthComparisonMeanings = [],
lastMonthComparisonValues = [],
lastMonthValues = [],
yearToDateValues = [],
emphasisRow = [],
  } = table;

现在的问题是，如果 table 中的 columnDates 为空，则我的变量 columnDates 为空。如果它为 null，我希望它在 [] 处初始化它而不是 null。

有什么建议吗？谢谢！

Answer 1

仅当被解构的值为undefined时才会使用默认值。改变那不是你能做的。您有几个选择：

不要使用解构，而是使用更新的 nullish coalescing operator (??):

const columnDates = table.columnDates ?? []; // default if columnDates is `null` or `undefined`
... continue for others ...

如果您只是在使用 columnDates 时遇到此问题，请对 columnDates 执行上述操作，然后对其他属性使用解构。否则，如果所有值都可以是 null，则对每个属性.

执行上述操作

将 null 值映射到 undefined，因此您采用 null 值的默认值：

const {
  columnDates = [], 
  rowTitles = [], 
  ... etc ...
} = Object.fromEntries(Object.entries(table).map(
  ([key, val]) => [key, val === null ? undefined : val]
));

以上映射了整个 table 对象的值，并为您构建了一个新对象，其中先前的 null 值现在为 undefined。

您可以创建一个要提取的字符串属性数组，然后从对象中映射这些属性，而不是映射整个对象：

const keys = ["columnDates", "rowTitles", ...];
const desiredKeys = Object.fromEntries(keys.map(
  key => [key, table[key] == null ? [] : table[key]]
));

上面使用==检查table[key]是否等于null或undefined，如果是，它会将值默认为空 [] 数组。如果您只希望 null 有此行为，请改用严格相等 ===。

Answer 2

如前一个答案所述，默认值适用于 undefined 道具，但 null 是已定义道具的值，因此您需要手动进行这些检查，

除了建议的方法外，我还建议另一种方法，即使用 Proxy

const table = {
  columnDates: null,
  rowTitles: [1,2,3],
  last3MonthComparisonDirections: [],
  last3MonthComparisonMeanings: null,
  yearToDateValues: ['a,','b','c'],
  emphasisRow: null
}; 

var proxyObj = new Proxy(table, {
  get: (target, prop) => target[prop] === null ? undefined : target[prop]
});

const {
  columnDates = [],
  rowTitles = [],
  last3MonthComparisonDirections = [],
  last3MonthComparisonMeanings = [],
  last3MonthComparisonValues = [],
  last3MonthValues = [],
  last12MonthValues = [],
  lastMonthComparisonDirections = [],
  lastMonthComparisonMeanings = [],
  lastMonthComparisonValues = [],
  lastMonthValues = [],
  yearToDateValues = [],
  emphasisRow = [],
 } = proxyObj;

console.log(columnDates); // []
console.log(rowTitles); // [1,2,3]
console.log(lastMonthValues); // []
console.log(last3MonthComparisonDirections); // []

您不想使用默认值？你也可以 return [] 用于未定义的道具：

const table = {
  columnDates: null,
  rowTitles: [1,2,3],
  last3MonthComparisonDirections: [],
  last3MonthComparisonMeanings: null,
  yearToDateValues: ['a,','b','c'],
  emphasisRow: null
}; 

var proxyObj = new Proxy(table, {
  get: (target, prop) => target[prop] || []
});

const {
  columnDates,
  rowTitles,
  last3MonthComparisonDirections,
  last3MonthComparisonMeanings,
  last3MonthComparisonValues,
  last3MonthValues,
  last12MonthValues,
  lastMonthComparisonDirections,
  lastMonthComparisonMeanings,
  lastMonthComparisonValues,
  lastMonthValues,
  yearToDateValues,
  emphasisRow,
 } = proxyObj;

console.log(columnDates); // []
console.log(rowTitles); // [1,2,3]
console.log(lastMonthValues); // []
console.log(last3MonthComparisonDirections); // []

此外，您可以检查特定的允许或预期的键，因此并非所有未定义的道具都会 return []:

const table = {
  columnDates: null,
  rowTitles: [1,2,3],
  last3MonthComparisonDirections: [],
  last3MonthComparisonMeanings: null,
  yearToDateValues: ['a,','b','c'],
  emphasisRow: null
}; 

// Define possible allowed props, 
const possibleProps = [
  'columnDates',
  'rowTitles',
  'last3MonthComparisonDirections',
  'last3MonthComparisonMeanings',
  'last3MonthComparisonValues',
  'last3MonthValues',
  'last12MonthValues',
  'lastMonthComparisonDirections',
  'lastMonthComparisonMeanings',
  'lastMonthComparisonValues',
  'lastMonthValues',
  'yearToDateValues',
  'emphasisRow'
 ];

var proxyObj = new Proxy(table, {
  get: function(target, prop) {
    if (possibleProps.includes(prop)) {
      return target[prop] || [];
    }
    
    return Reflect.get(...arguments);
  }
});

const {
  columnDates,
  rowTitles,
  last3MonthComparisonDirections,
  last3MonthComparisonMeanings,
  last3MonthComparisonValues,
  last3MonthValues,
  last12MonthValues,
  lastMonthComparisonDirections,
  lastMonthComparisonMeanings,
  lastMonthComparisonValues,
  lastMonthValues,
  yearToDateValues,
  emphasisRow,
 } = proxyObj;

console.log(columnDates); // []
console.log(rowTitles); // [1,2,3]
console.log(lastMonthValues); // []
console.log(last3MonthComparisonDirections); // []

如果为空则初始化解构道具

Initialize Destructuring props if null

javascript

destructuring

reactjs