伪数组与可迭代对象

这两者都可以通过Array.from(arrayLike[,mapFn[,thisArg]])来返回一个数组。

伪数组

首先先得清楚对象和数组的差别:

  1. 对象的原型链上只有Object.prototype,而数组的原型链上有Array.prototype和Object.prototype
  2. 对象没有length属性,数组有,且自动更新
  3. 对象根据键值对取值,而数组根据序号取值

ok,接下来就可以引出伪数组了。

定义:

  1. 拥有length属性,其他属性为非负整数字符串(因为对象使用[]来取值,会将数值隐式转换为字符串)
  2. 不具有数组具有的方法,即原型链上没有Array.prototype

内容如下:

var fakeArray = {
    length: 3,
    "0": "first",
    "1": "second",
    "2": "third"
};

伪数组是个对象(所以没有Array.prototype的属性值),但他和数组一样拥有length,数值属性下标,从外观上看伪数组,看不出他和数组的区别。

伪数组的意义就是:让普通对象也可以正常使用数组的很多方法。

大名鼎鼎的伪数组有:arguments对象,DOM的childNodes。

我们通过Array.isArray()来判断其是否为数组。

可迭代对象

在学习可迭代对象之前,我们先来学习ES6新引入的Map和Set数据类型。

Map

Map相对应的是Object对象,两者都是键值对结构。(注意,他的格式依然是{}格式,而不是数组格式,格式如下Map { 2323 => 23423, ‘sdfasdf‘ => 234234, 324 => ‘sfsdfas‘ }

但是Object对象有一个小问题,即Object的键必须得是字符串,但实际上Number或者其他数据类型作为键也是十分合理的。

为了解决这个问题,最新的ES6引入了新的数据类型Map。

Map通过一个二维数组来定义。

var m = new Map([[100,‘sdfsd‘],[35,‘dsfdsf‘]]),其中每个数组中的第一个是键,第二个是值

但是,注意,要想获得Map的值不能像对象一样直接访问,需要使用set来添加键值对,通过get来得到值(通过has来判断是否有这个key)

方法有:

  1. m.get(键)可以得到对应的值
  2. m.set(键,值)来新添一维数组,如果键名重复的话,覆盖原先的。如果只有一个参数,则值为undefined
  3. m.has(键)来确定是否存在这个键
  4. m.delete(键)来删除一维数组成员

Set

Set和数组相对应,他的出现是为了解决数组中重复成员的问题。

创建一个Set。需要提供一个一维数组作为输入,重复的元素在Set中自动被过滤。(注意,他的格式依然是个{}格式,而不是数组格式,格式如下Set { 2323, 23423, ‘sfsdfsfs‘ })

方法:

  1. s.add(值)来添加Set对象成员
  2. s.delete(值)来删除成员
  3. s.has(值)
  4. Set无法单独取成员,因为其既没有下标,又没有键值对,所以没有办法取到单个成员

iterable

Map,Set,Array的作用是一致的,都是为了保存一组数据,所以这三者都属于iterable类型(因为数据都是迭代存储的,所以存储在迭代器中)。而我们往往会有这么一个需求:遍历这一组数据。

Array可以使用for循环遍历,但是因为Set,Map没有下标,所以无法使用for循环遍历。

所以,我们创建了一个新的方法:for..of来遍历,for..of着眼的不再是下标,而是每个迭代对象,Array的迭代对象是单值,Map的迭代对象是一维数组,Set的迭代对象也是单值。

切记,for..in不能用于迭代内容,他仅能用于Array的迭代下标及Object的迭代属性,而Map,Set都是不能使用这个for..in,能且仅能使用for..of。

然而,更好的方式是直接使用iterable内置的forEach()方法,他接受一个函数,每次迭代就自动回调该函数。

Array:

var a = ['A', 'B', 'C'];
a.forEach(function(element,index,array){//第一个参数是当前元素的值,第二个参数是当前索引,第三个参数指向Array对象本身

    console.log(element)
    console.log(index)
    console.log(array)

})

Map:

var m = new Map([[2323,23423],['sdfasdf',234234],[324,'sfsdfas']])

m.forEach(function(value,key,map){//第一个参数是当前数组的值,第二个参数当前数组的键,第三个指向Map对象本身
    console.log(value)
    console.log(key)
    console.log(map)

})

Set:

var m = new Set([2323,23423,'sfsdfsfs'])
console.log(m)
m.forEach(function(element,sameElement,Set){//第一个是当前元素的值,第二个也是当前元素的值,第三个是指向Set对象本身
    console.log(element)
    console.log(sameElement)
    console.log(Set)

})

记忆技巧:

for(var i=0;i<9;i++):仅能用于Array及伪数组。因为这个方法要求有length属性及下标,只有Array和伪数组有

for..in:仅能用于Array,Object,结果是迭代属性(for (var item in Array))

for..of:仅能用于Array,Map,Set。这个方法是迭代器的专属,而只有这三者是迭代器,Object不是迭代器,结果是迭代内容(for(var item of Set))

forEach(function):是迭代器的方法,因为参数的丰富性,所以比for..of好用

原文地址:https://www.cnblogs.com/caiyy/p/10509597.html

时间: 2024-10-29 17:41:25

伪数组与可迭代对象的相关文章

JS伪数组对象转对象---底层实现原理

2.伪数组对象转数组 Array.prototype.slice.call(jQuery实例对象) slice截取拷贝测试:      底层实现:     接下来写个伪数组对象   接下来,伪数组对象转数组,如下所示 此时,内部this指向fakeArr伪数组对象 . 原文地址:https://www.cnblogs.com/jianxian/p/12150992.html

jQuery对象就是伪数组

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07-jQuery对象</title> <script src="../js/jquery-3.4.1.js"></script> <script> $(function () { var $div= $(

one:arguments对象伪数组

这是我的第一个博客 1 <script> 2 //计算N个数字的和 3 //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传入了几个参数,没办法计算, 4 // 但是如果在函数中知道了参数的个数,也知道了,每个参数的值,可以 5 //定义 6 function f1() { 7 //arguments.length:获取的是函数在调用的时候传入了几个参数 8 //arguments:获取传入的每个参数的值: 9 //console.log(arguments.length); 1

JavaScript中的数组与伪数组的区别

在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 5种原始数据类型: number boolean string null undefined 在这个前提下,咱们再来讨论JavaScript的对象. 1.创建对象 var obj = {}; //种方式创建对象,被称之为对象直接量(Object Literal) var obj = new Object(); // 创建一个空对象,和{}一样 更多创建对象的知识,参见<JavaScript权威

数组 / 伪数组 判断及方法调用 (权威指南笔记)

数组判断方法 function isArrayLike(o){ if(o && //o非null.undefined typeof o === "object" && //o是对象 isFinite(o.length) && //o.length是有限数值 o.length > 0 && //o.length为非负数 o.length === Math.floor(o.length) && //o.l

Python 迭代对象、迭代器、生成器详解

在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict comprehension)众多概念参杂在一起,难免让初学者一头雾水,本文将一一为大家进行介绍,希望对大家学习python有所帮助. 容器(container) 容器是一种把多个元素组织在一起的数据结构,容器中的元素可以逐个地迭代获取,可以用 in ,  not in 关键字判断元素是否包含在容器

伪数组和真数组

/* * 什么是伪数组: * 1.伪数组是一个对象 * 2.这个对象必须要有length属性 * 3.如果这个对象的length不为0,那么必须要有按照下标存储的数据 * */ // 不是伪数组 var obj = {}; var obj2 = { length: 3 }; // 是伪数组 var obj3 = { length: 0 }; var obj4 = { 0: '888', length: 1 }; var obj5 = { 99: 'abc', length: 100 } /* *

关于js中伪数组

伪数组: 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 伪数组无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push().pop()等方法,但仍可以对真正数组遍历方法来遍历它们.这种对象有很多,比较特别的是function内的arguments对象,还有像调用getElementsByTagName, document.childNodes之类的,它们都返回的NodeList对象都属于伪数组,也称为类数组,还有自定义的对象,

JavaScript中的伪数组理解

看过jQuery源码的人都知道类数组对象,与我们熟知的arguments对象很像 构造一个类数组必须有两个条件 第一个条件:你必须给对象定义个splice方法,只要他是一个function就可以 第二个条件:就是赋值一个length属性,或者增加push,unshift,shift,pop其中任何一个方法,并且调用了一次. 当这两个条件同时满足那么当前的对象在控制台输出后跟数组的格式一模一样. 一般而言大部分都是这样构造一个类数组对象(jQuery就是这么干的).因为相比而言,这样更简洁,并且更