将伪数组转为真正的数组
时间:2019-12-07
本文章向大家介绍将伪数组转为真正的数组,主要包括将伪数组转为真正的数组使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
将伪数组转为真正的数组
2018.08.14 21:06:53字数 90阅读 2321
伪数组转为真数组
对DOM元素进行map、forEach操作时候需要进行遍历,伪数组遍历会报错:'elem.map is not a function',为了避免这个问题,需要进行转换。
(1) ES5 转为真数组
Array.prototype.slice.call(元素对象)
let elem1 = Array.prototype.slice.call(elem)
(2) ES6 转为真数组
Array.from(元素对象)
let elem2 = Array.from(elem)
(3) 例子
<ul>
<li class="a" ></li>
<li class="a" ></li>
<li class="a" ></li>
<li class="a" ></li>
<li class="a" ></li>
</ul>
<script>
/* 获取li元素*/
let elem = document.getElementsByClassName('a')
/* 这样写是错误的,因为是伪数组*/
elem.map((item,index,elem) => {
console.log(item +'---'+index + '----'+elem)
/*elem.map is not a function*/
})
// (1)es6 转为真数组
let elem1 = Array.from(elem)
// (2)es5 转为真数组
let elem2 = Array.prototype.slice.call(elem)
console.log(elem)
console.log(typeof elem)
console.log(elem1)
console.log(elem2)
elem1.map((item,index,elem1) => {
console.log(item +'---'+index + '----'+elem1)
})
elem2.map((item,index,elem2) => {
console.log(item +'---'+index + '----'+elem2)
})
</script>
原文地址:https://www.cnblogs.com/li923/p/11724038.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 指针变量的传值和传址
- 又被限速,我决定用 Serverless 搭建一款私人网盘
- C语言与C++常见面试题
- delete 和 delete [] 的真正区别
- C语言最大难点揭秘:编程的祸根!
- 【漏洞修复】MongoDB未授权访问漏洞复现和修复
- 在 Istio 中实现 Redis 集群的数据分片、读写分离和流量镜像
- 实现Android 滑动退出Activity的功能
- Android开发中播放声音的两种方法分析
- Android UI设计与开发之实现应用程序只启动一次引导界面
- Android编程实现两点触控功能示例
- Android RecycleView添加head配置封装的实例
- Android编程实现捕获程序异常退出时的错误log信息功能详解
- Android开发之Socket通信传输简单示例
- Android自定义对话框Dialog的简单实现