这样的问题是这样的:
向我解释以下JavaScript代码的行怎么办:
const [{ isoCode: firstCode = '' } = {}] = allStates;
如果您不熟悉数组和对象破坏,那么这个问题听起来可能很复杂。但实际上不是。
为了能够回答这个问题,您首先需要了解一些数组和对象破坏的基础知识。
所以让我们修改。
如果您有这样的数组:
const numbers = [10, 20];
然后,要访问值10和20,我们可以使用这样的数组破坏:
const [a, b] = numbers;
console.log(a); // 10
console.log(b); // 20
如果我们只想从数组中访问第一个元素,我们会这样做:
const [a] = numbers;
console.log(a); // 10
现在,如果我们有这样的对象:
const user = { name: 'Mike', age: 30 };
然后,要访问name
和age
,我们可以使用这样的对象:
const { name, age } = user;
console.log(name); // Mike
console.log(age); // 30
现在,如果我们有类似的对象:
const allStates = [
{isoCode: 'IN', name: 'India'},
{isoCode: 'CA', name: 'Canada'}
];
然后,我们可以使用像这样的阵列访问数组的第一个元素:
const [firstObject] = allStates;
console.log(firstObject); // {isoCode: 'IN', name: 'India'}
,如果我们想从数组的第一个对象访问isoCode
属性,我们可以使用像这样破坏阵列内部破坏对象:
const [ {isoCode} ] = allStates;
console.log(isoCode); // IN
但是,如果isoCode
属性本身不存在在数组的第一个对象中,那么我们将获得undefined
作为结果。
该属性可能不存在,因为
allStates
数组数据可能来自API,该数据可能没有isoCode
属性。
因此,为避免获得undefined
,我们可以在破坏自己时分配一个默认值:
const [ {isoCode = ''} ] = allStates;
console.log(isoCode); // IN
但是,由于在我们的情况下已经存在isoCode
属性,因此我们将isoCode
作为IN
。
但是,如果我们有这样的数组:
const allStates = [
{ name: 'India' },
{ name: 'Canada' }
];
然后,isoCode
的值将是一个像这样的空字符串:
const [ {isoCode = ''} ] = allStates;
console.log(isoCode); // ''
但是,如果allStates
数组本身为空,并且不包含任何这样的对象:
const allStates = [];
然后以下代码将丢弃错误。
const [ {isoCode = ''} ] = allStates;
console.log(isoCode); // Cannot read properties of undefined (reading 'isoCode')
我们会遇到错误,因为我们正在破坏数组的第一个元素,但不存在第一个元素本身。
因此,为避免遇到错误,我们可以在对象破坏自身时分配一个空对象:
const [ {isoCode = ''} = {} ] = allStates;
console.log(isoCode); // ''
在这里,我们将空字符串作为isoCode
值,因为破坏一个空对象将像这样返回undefined
:
const obj = {};
const { name } = obj;
console.log(name); // undefined
并且由于我们还使用一个空字符串的默认值,如果属性为undefined
,我们将获得空字符串作为上述isoCode
的结果。
另外,如果我们不想使用isoCode
属性名称,我们可以在这样的对象破坏过程中使用重命名语法:
const allStates = [
{isoCode: 'IN', name: 'India'},
{isoCode: 'CA', name: 'Canada'}
];
const [ {isoCode: firstCode} ] = allStates;
console.log(firstCode); // IN
所以,现在您有所有的知识来回答最初的问题。
// Explain to me what the below line of JavaScript code does.
const [{ isoCode: firstCode = '' } = {}] = allStates;
答案:
在上面的代码中,我们使用数组破坏语法来破坏allStates
数组的第一个元素。
,从数组的第一个元素是一个对象,我们正在破坏isoCode
属性以找出其值。
如果isoCode
属性本身不存在,那么我们将一个空字符串分配为其值。
,如果allStates
阵列的空白,则为了避免遇到JavaScript错误,我们还会在对象破坏时分配一个空对象。
最后,我们正在使用重命名语法将isoCode
属性重命名为firstCode
。
所以,如果我们有这样的数组:
const allStates = [
{isoCode: 'IN', name: 'India'},
{isoCode: 'CA', name: 'Canada'}
];
然后,我们将获得IN
作为结果:
const [{ isoCode: firstCode = '' } = {}] = allStates;
console.log(firstCode); // 'IN'
,如果我们有这样的数组:
const allStates = [
{name: 'India'},
{name: 'Canada'}
];
然后,我们将获得一个空字符串,如下所示:
const [{ isoCode: firstCode = '' } = {}] = allStates;
console.log(firstCode); // ''
,如果我们有这样的数组:
const allStates = [];
然后,我们将再次获得一个空字符串,如下所示:
const [{ isoCode: firstCode = '' } = {}] = allStates;
console.log(firstCode); // ''
,但是如果allStates
是一个空数组,我们将永远不会出错。
结束点
知道破坏性作为JavaScript/React开发人员非常重要,因为它极大地简化了您的代码。
如果您想以易于理解的方式深入学习所有ES6+功能,请查看我的Mastering Modern JavaScript书。
您也可以查看this freeCodeCamp article中的书籍内容的免费预览。
在本电子书中,您还将在开始学习React.js.
之前学习所有应该知道的先决条件。是否想了解有关JavaScript,React,Node.js的常规内容? Follow me on LinkedIn。