使用默认值解构

Question

我有一些元素数组，其中一些标签为空：

let array= [ 
{category1:{id: 'aaa1', label:'bbb'}}, 
{category1:{id: 'aaa2', label:null}},
{category1:{id: 'aaa3', label:null}},
{category1:{id: 'aaa4', label:'ccc'}}, 
{category1:{id: 'aaa5', label:'ddd'}}, 
];

我想按属性标签对这个数组进行排序，并将空值理解为“”。所以我有这样的代码：

const sortingMethod = ({ category1: { label: elementALabel = '' } }, { category1: { label: elementBLabel = '' } }) => elementALabel.localeCompare(elementBLabel);
array.sort(sortingMethod );

问题是 elementAlabel 有时似乎为空。错误是“无法读取属性 'localeCompare' of null”。问题出在哪里？

Answer 1

解构中的默认值仅在值为 undefined 时应用。

如果您需要为 null 使用默认值，请使用 short circuit evaluation 和或运算符 (||)。

如果表达式 (elementALabel || '') 为真，则表达式 (elementALabel || '') 的值为 elementALabel，如果值为 falsy（在本例中为 null），则为空字符串.

const array = [{"category1":{"id":"aaa1","label":"bbb"}},{"category1":{"id":"aaa2","label":null}},{"category1":{"id":"aaa3","label":null}},{"category1":{"id":"aaa4","label":"ccc"}},{"category1":{"id":"aaa5","label":"ddd"}}];

const sortingMethod = ({ category1: { label: elementALabel } }, { category1: { label: elementBLabel } }) => (elementALabel || '').localeCompare(elementBLabel || '');
array.sort(sortingMethod)

console.log(array);

使用默认值解构

Destructing with default value

sorting

destructuring

ecmascript-6