修复 JavaScript 中“无法读取 Undefined 的属性‘push’”错误的 4 种方法

更新日期: 2022-09-02阅读: 1.2k标签: 错误

了解如何轻松修复 JavaScript 中的“无法读取未定义的属性‘push’”错误。

当您尝试对旨在包含数组但实际上包含未定义值的变量调用 push() 方法时,会出现 JavaScript 中的“无法读取未定义的属性‘push’”错误。

这可能是由多种原因引起的:

  1. 对变量调用 push() 方法,而无需先使用数组对其进行初始化。
  2. 对数组元素而不是数组本身调用 push() 方法。
  3. 对先前设置为未定义的变量调用 push() 方法。
  4. 对不存在或值为 undefined 的对象属性调用 push() 方法。

我们将在本文中探讨所有这些可能原因的实用解决方案。


1. 在变量上调用 push() 方法,而不用先用数组初始化它

要修复“无法读取未定义的属性‘push’”错误,请确保变量在调用 push() 方法之前已使用数组初始化。

let doubles;let nums = [1, 2, 3, 4, 5];for (const num of nums) {
  let double = num * 2;  // :x: TypeError: cannot read properties of undefined (reading 'push')
  doubles.push(double);
}console.log(doubles);

在上面的例子中,我们在 doubles 变量上调用了 push() 方法,而没有先初始化它。

let doubles;console.log(doubles); // undefined

因为未初始化的变量在 JavaScript 中具有 undefined 的默认值,所以调用 push() 会引发错误。

要修复该错误,我们所要做的就是将 doubles 变量分配给一个数组(对于我们的用例来说是空的):

// :white_check_mark: "doubles" initialized before use
let doubles = [];let nums = [1, 2, 3, 4, 5];for (const num of nums) {
  let double = num * 2;  // :white_check_mark: push() called - no error thrown
  doubles.push(double);
}console.log(doubles); // [ 2, 4, 6, 8, 10 ]


2. 对数组元素而不是数组本身调用 push() 方法

要修复“无法读取未定义的属性‘push’”错误,请确保在调用 push() 之前没有从数组变量中访问元素,而是在实际数组变量上调用 push()。

const array = [];// :x: TypeError: Cannot read properties of undefined (reading 'push')
array[0].push('html');
array[0].push('css');
array[0].push('javascript');console.log(array);

使用括号索引访问 0 属性为我们提供了数组索引 0 处的元素。 该数组没有元素,因此 arr[0] 的计算结果为 undefined 并对其调用 push() 会导致错误。

为了解决这个问题,我们需要在数组变量上调用 push,而不是它的元素之一。

const array = [];// :white_check_mark: Call push() on "array" variable, not "array[0]"
array.push('html');
array.push('css');
array.push('javascript');console.log(array); // [ 'html', 'css', 'javascript' ]


3. 对之前设置为 undefined 的变量调用 push() 方法

要修复“无法读取未定义的属性‘push’”错误,请确保最后分配给变量的值不是未定义的。

let arr = ['orange'];arr.push('watermelon');arr = undefined;// hundreds of lines of code...// :x: TypeError: Cannot read properties of undefined (reading 'push')
arr.push('apple');console.log(arr);

这里的问题是我们曾经明确地将变量设置为未定义,但后来我们在变量上调用了 push()。 对此的修复将根据您的情况而有所不同。

也许您在再次使用之前忘记将变量设置为定义的值:

let arr = ['orange'];arr.push('watermelon');// :white_check_mark: Fixed: variable re-assigned
arr = ['banana'];// hundreds of lines of code...arr.push('apple');console.log(arr); // [ 'banana', 'apple' ]

或者,也许你犯了一个错误,根本不打算将变量分配给 undefined:

let arr = ['orange'];arr.push('watermelon');// arr = undefined; :white_check_mark: Fixed: line removedarr.push('apple');console.log(arr); // [ 'orange', 'watermelon', 'apple' ]


4. 对不存在或值为 undefined 的对象属性调用 push() 方法

要修复 JavaScript 中的“无法读取未定义的属性‘push’”错误,请确保调用 push() 方法的对象属性存在且未定义。

const students = [
  { name: 'Mac', scores: [80, 85] },
  { name: 'Robert' },
  { name: 'Michael', scores: [90, 70] },
];// :x: TypeError: Cannot read properties of undefined (reading 'push')
students[1].scores.push(50);

在这种情况下,出现错误是因为索引 1 处的对象元素没有 score 属性。

const obj = {};console.log(obj.prop); // undefined

从对象访问不存在的属性不会在 JavaScript 中引发错误,而是会为您提供 undefined 值。 如果您尝试在该不存在的属性上调用类似 push() 的方法,您将遇到错误。

在这种情况下,我们可以通过将第二个数组元素的 score 属性设置为定义的值来修复错误。

const students = [
  { name: 'Mac', scores: [80, 85] },
  // :white_check_mark: Fixed: "scores" set to a defined value
  { name: 'Robert', scores: [] },
  { name: 'Michael', scores: [90, 70] },
];// :white_check_mark: "scores" property exists, "push()" works - no error thrown
students[1].scores.push(50);

来自:https://www.toutiao.com/article/7137296740683874850/

链接: https://fly63.com/article/detial/12077

解决Cannot read property range of null 错误

vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property range of null 错误,该问题是babel-eslint版本更新问题导致的;

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

js异步错误捕获

我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么。以及异步代码在 js 中是特别常见的,我们该怎么做才比较?

不能执行已释放Script的代码

父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给父页面变量a赋值,赋值后销毁iframe子页面,再次调用变量a的时候就会抛出异常‘SCRIPT5011:不能执行已释放Script的代码’。

JS错误处理:前端JS/Vue/React/Iframe/跨域/Node

js错误的实质,也是发出一个事件,处理他,error实例对象message:错误提示信息,name:错误名称(非标准属性)宿主环境赋予

nodejs提示 cross-device link not permitted, rename 错误解决方法

文件上传的功能时候,调用fs.renameSync方法错误,这个提示是跨区重命名文件出现的权限问题。先从源文件拷贝到另外分区的目标文件,然后再unlink,就可以了。

Js中使用innerHTML的缺点是什么?

如果在JavaScript中使用innerHTML,缺点是:内容随处可见;不能像“追加到innerHTML”一样使用;innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断

Web前端开发,必须规避的8个错误点!

现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站。

web前端错误监控

为什么要做前端错误监控?1. 为了保证产品的质量2. 有些问题只存在于线上特定的环境3. 后端错误有监控,前端错误没有监控,前端错误分为两类: 即时运行错误和资源加载错误

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!