代码编织梦想

伪数组转成真数组的5种方法

1.for循环

第一种就是使用最基础的for循环,这个应该有一点基础的都看得懂。

	const divs = document.querySelectorAll('div');
	let arr = [];
	console.log(divs instanceof Array);
	for (let i = 0; i < divs.length;i++) {
        arr.push(divs[i]);
    } 
    console.log(arr instanceof Array);
    // false
    // true

2.[].slice.call()

第二种就是通过调用Array的slice的截取方法。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = [].slice.call(divs);
	console.log(arr instanceof Array);
	// false
	// true

想知道怎么通过slice方法实现转换就需要知道数组的slice方法内部实现原理。下面我简单的模拟一下slice方法。

	function slice(start,end){
  		const startIndex = start || 0;
  		const endIndex = end || this.length;
  		let tempArr = [];
  		for(let i = startIndex;i < endIndex;i++){
          tempArr.push(this[i]);
  		}
  		return tempArr;
	}

里面的this就是能实现伪数组转换成真数组的关键,通过call()方法将里面的this绑定到伪数组对象上,再通过循环将伪数组的每一项push进一个真数组再返回这个真数组。

3.Array.prototype.slice.call()

第三种也是通过调用Array的slice的截取方法,后面有第二种和第三种的区别分析。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = Array.prototype.slice.call(divs);
	console.log(arr instanceof Array);
	// false
	// true

4.ES6 Array.form()

第四种实现的方法就比较简单了,但有兼容性问题。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = Array.from(divs);
	console.log(arr instanceof Array);
	// false
	// true

5.ES6 扩展运算符

这种方法也有兼容性问题。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = [...divs];
	console.log(arr instanceof Array);
	// false
	// true

需要注意的是,当我们自己手动去创建一个伪数组对象时,会出现一个问题,TypeError: object is not iterable,以下为大家演示一下

// 这是一个具有length的自定义伪数组
let obj = {
    '0': 'zero',
    '1': 'one',
    '2': 'two',
    '3': 'three',
    'length': 4,
};
// 当我们对它解构赋值时
const arr = [...obj];// TypeError: object is not iterable

报出这个错误的原因是什么呢?
我们需要确认将要解构赋值的这个数据结构是“可遍历的(iterable)”,或者说这个数据结构需要部署有Iterator接口。关于iterator(遍历器)的具体内容,可以去阮一峰ECMAScript 6 入门中看详细讲解。
怎么解决这个问题呢?
我们需要手动的添加一个iterator接口

let obj = {
    '0': 'zero',
    '1': 'one',
    '2': 'two',
    '3': 'three',
    'length': 4,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};	
const arr = [...obj];// [ 'zero', 'one', 'two', 'three' ]

总结

  • [].slice.call()与Array.prototype.slice.call()的区别就在于通过Array.prototype找效率更高。
  • 通过[]去调用slice方法需要通过原型链去找slice方法。
  • 解构赋值手动创建的伪数组对象时, 需要添加iterator接口。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/csc_cary/article/details/118337629

一个小例子,观察脚本语言闭包的效果-爱代码爱编程

闭包,是指脚本语言中,一个函数可以访问其他函数作用域内的变量。一般而言,当一个函数结束后,变量就随之释放了,但是闭包不同,下面看两个例子。 例子1,闭包访问函数局部变量: <!DOCTYPE> <htm

字符串转换成数字的三种方法_iteye_20193的博客-爱代码爱编程

最近经常遇到关于类型转换的问题,索性上网搜搜在此总结一篇 js字符转换成数字主要有三种可用的方法:转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行,对

数组常用方法总结以及伪数组转真数组的方法-爱代码爱编程

###数组常用方法总结以及伪数组转真数组的方法 ##1.数组的操作方法 *1. arrayObject.concat(arrayX,…,arrayX) 用于连接两个或多个数组,基于当前数组,创建一个新的数组,并返回这

将伪数组转换成真正的数组案例_weixin_44389107的博客-爱代码爱编程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn"&

伪数组转换为数组的方法_菊の物语的博客-爱代码爱编程_伪数组转换为标准数组

一、创建一个新数组,遍历这个伪数组,并将其每一项添加到新数组中。 var ul=document.getElementsByTagName("li"); var newArr=[]; for(var i=0;i<ul.length;i++){ newArr.push(ul[i]); } conso

js中什么是伪数组,怎么将伪数组转化为标准数组?_zlq_csdn的博客-爱代码爱编程_js中什么是伪数组

伪数组就是:具有0到length-1的属性,并有length属性 一般获取到的DOM元素或者jQuery获取到的元素都是伪数组。 伪数组: 将伪数组转化为标准数组需要用到数组原型中的方法 slice //需要使用到

如何将伪数组转换成真数组-爱代码爱编程

如何将伪数组转换成真数组 第一种 var arr = []; for(var i =0; i<weiArr.length;i++){ arr[i] = weiArr[i]; } console.log(arr)

javascript中类数组转真数组的两种方法-爱代码爱编程

类数组和数组之间的区别 1、真数组的长度是可变的,类数组不可变 2、真数组可以使用数组中的方法,类数组不行 第一种方法:Array.prototype.slice.call() 这种方法是借用了数组的原型中的slice方法

怎么将伪数组转成数组-爱代码爱编程

伪数组转数组 1. 为什么会出现伪数组 在jquery中,使用下面的代码获取元素 var divArr = $("div") 返回的并不是一个数组,而是一个伪数组,伪数组属于对象,对于伪数组,一些数组循环遍历的方法

7、把伪数组转成真数组-爱代码爱编程

伪数组:个人观点是只要有length属性的对象 实例 <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li>

【JS】Array.from() 将伪数组转换成数组-爱代码爱编程

微信订阅号:Rabbit_svip Array.from 方法用于将两类对象转换为真正的数组: 1、类似数组的对象,可以理解为“伪数组” 2、可遍历对象(比如字符串) 什么是伪数组? 伪数组都有一个基本的特点:必须有 length 属性。 let arrayLike = {

JS之怎么让伪数组转成真数组??-爱代码爱编程

举个栗子🌰: var obj = { 0: '王源', 1: '易烊千玺', 2: '王俊凯', length: 3 }; 我的这个伪数组,需要怎样才能转换成真数组呢??? 其实是可以用到数组里面的slice属性, slice属性有什么用处呢?提取字符串的某个部分,

js将伪数组转成真数组-爱代码爱编程

所谓伪数组,当一个对象具有以下特点: 可以使用索引对数据进行操作;具有length(长度)属性;不能使用数组的方法,如push,pop等真数组方法。真伪数组区别: 对象没有数组的Array.prototype 的属性值,类型是 Object ,而数组类型是 Array数组是索引,对象是键值对使用对象创建伪数组,伪数组可以使用部分方法方法1:遍历:创建一

如何将一个对象转换成数组?_javascript中什么是伪数组?如何转换成真数组-爱代码爱编程

点击上方“蓝字”,发现更多精彩。 大约在200万年前,人类祖先炎帝联合黄帝同神魔蚩尤展开激烈的战斗,那一战打的昏天暗地,日月无光,足足百年,人间生灵涂炭。。。千年之后,人类开始从再次从蛮荒开始走向文明。。。扯犊子了,实际上在两年前,一次面试前端时候遇到面试官问起我什么是伪数组,我蒙蔽,纳尼?只知道数组,怎么还有假数据,蒙了,后来回去一番侦

将伪数组转换成真正的数组方法总结-爱代码爱编程

伪数组:无法调用数组的方法,但是有length属性,又可以索引获取内部项的数据结构。 比如:arguments、getElementsByTagName等一系列dom获取的NodeList对象 转换 一 let arr = [].slice.call(pagis) 二 let arr = Array.prototype.slice.call

伪数组转变为真实数组方法-爱代码爱编程

文章目录 前言一、伪数组1. 概念2. 目标二、实现方式1. 方式一2. 方式二总结 前言 当我们得到一个伪数组数据的时候,我们应该如何操作才能将其转变为真实数组,并使它能够使用数组的方法呢?本文列举了两个方法,一起来看下吧~ 一、伪数组 1. 概念 具有 length 属性按索引方式存储数据不具有数组的 push.pop 等方法