无法在 JS 中读取未定义的属性(读取“concat”)

无法读取未定义的属性(读取 ‘concat’)

TypeError: Cannot read property ‘concat’ of Undefined in JS

concat()在值上调用该方法时会发生“无法读取未定义的属性(读取‘concat’)”错误undefined

要解决该错误,请确保仅concat在实现它的数据类型(数组或字符串)上调用该方法。

无法读取未定义的属性连接

下面是错误如何发生的示例。

索引.js
const arr = undefined; // ⛔️ TypeError: Cannot read properties of undefined (reading 'concat') arr.concat(['b', 'c']);

如果变量存储,则提供回退值undefined

解决错误的一种方法是在变量存储undefined.

索引.js
const value = undefined; const arr = value || []; console.log(arr); // 👉️ [] const newArr = arr?.concat(['b', 'c']); console.log(newArr); // 👉️ ['b', 'c']

如果变量存储的是假值(例如) ,我们使用逻辑 OR (||) 运算符undefined提供空数组的后备值。

我们还使用
可选的链接 (?.) 运算符null在变量存储空值(或)时进行短路undefined

索引.js
const arr = undefined; const newArr = arr?.concat(['b', 'c']); console.log(newArr); // 👉️ undefined
undefined如果引用等于or ,则可选链接 (?.) 运算符短路null,否则调用该方法。 concat

在调用之前检查值的类型是否正确concat

您可以使用该Array.isArray()方法在调用该方法之前检查该值是否为数组concat

索引.js
const arr = undefined; if (Array.isArray(arr)) { const newArr = arr.concat(['b', 'c']); console.log(newArr); } else { // 👇️ this runs console.log('The value is NOT an array'); }

如果值是数组,则Array.isArray()方法返回,
否则返回。
truefalse

如果使用该String.concat方法,请在调用之前检查该值是否为字符串concat

索引.js
const str = 'a'; let result = ''; if (typeof str === 'string') { result = str.concat('b', 'c'); } else { console.log('The value is not a string'); } console.log(result); // 👉️ 'abc'

运算typeof符指示值的类型。

在调用之前提供回退值concat

您还可以使用逻辑 OR (||) 运算符在调用concat.

索引.js
const arr = undefined; const newArr = (arr || []).concat('b', 'c'); console.log(newArr); // 👉️ ['b', 'c']

如果arr变量存储的是假值(例如undefined),则表达式返回一个空数组。

如果您使用该方法,请使用空字符串的回退String.concat

索引.js
const arr = undefined; const newArr = (arr || '').concat('b', 'c'); console.log(newArr); // 👉️ "bc"

如果左边的值是假的(例如 ),逻辑 OR (||) 运算符返回右边的值undefined

使用三元运算符避免错误

You can also use the
ternary operator to
avoid getting the error.

index.js
const arr = undefined; const newArr = arr ? arr.concat(['b', 'c']) : []; console.log(newArr); // 👉️ []

The ternary operator is very similar to an if/else statement.

It
checks if the value to the left is truthy,
and if it is, the operator returns the value to the left of the colon,
otherwise, the value to the right is returned.

If the variable stores a truthy value, we return the result of calling the
concat() method, otherwise, we return an empty array.

# Track down where the variable got assigned an undefined value

If the error persists, you have to track down where the variable got assigned an
undefined value.

A common source of undefined values is assigning the output of a function that doesn’t return anything to a variable.

许多在适当位置改变对象的内置方法返回undefined

所有不返回值的 JavaScript 函数都返回undefined

您可能正在访问不存在的索引处的数组或对象中不存在的属性。