JavaScript高级解析：类数组对象、数组操作与数组判断技巧
本文详细讲解了JavaScript中类数组对象的概念、常见实例、转换为数组的方法，如Array.from()、slice、splice和concat，以及如何通过函数判断对象是否为类数组对象。还涵盖了稀疏数组的特点及常用的数组操作技巧。
目录
2、splice(index,howmany,item1,item2...):
3、concat(arr1,arr2...): 返回一个新拼接的数组，不会改变原来数组
首先先介绍一下数组和对象是啥
一、数组
数组是一个有序的数据集合，其索引值从0开始依次递增，有length属性，用于获取数组的元素个数，内部的值可以是任何js数据类型
二、对象
对象是一个无序的内部由若干键值对组成的数据集合，它没有length属性，但是我们可以通过把它内部的键改为从0开始依次递增的值来模拟数组，这样就成了类数组对象
三、类数组对象
3.1 什么是类数组对象
类数组对象首先它是一个对象，但是有数组的某些特点。怎么构造类数组对象呢？先把对象中的键都改为从0开始递增的值，然后我们需要定义一个length属性，手动模拟数组的length属性。
这样就能看出对象的length属性不会随着键的增加而增加，但是数组会随着内部元素的增加而增加。
3.2 js中哪些是类数组对象
如各种元素检索 API 返回的都是类数组，如 document.getElementsByTagName，document.querySelectorAll 等等。除了 DOM API 中，常见的 function 中的 arguments 也是类数组
1、argumments对象：arguments对象用于保存数组中的实参，可以直接通过arguments[0]访问函数的第一个实参
2、document.getElementsByTagName()、document.：返回一个类数组对象
3、字符串String：一个可读的类数组对象，可以通过str[0]获取第一个字符，str.length获取字符串的长度
3.3 类数组对象怎么转化为数组
一共有5种方法：
1、Array.from()（ES6+）
// [undefined, undefined, undefined]
Array.from({ length: 3 })除了 Array.from 还有更简单的运算符 ... 扩展运算符，不过它只能作用于 iterable 对象，即拥有 Symbol(Symbol.iterator) 属性值
拥有 Symbol(Symbol.iterator) 属性值，意味着可以使用 for of 来循环迭代
// 适用于 iterable 对象
[...document.querySelectorAll('div')]但是严格意义上来说，它不能把类数组转化为数组，如 { length: 3 }。它将会抛出异常
// Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
[...{length: 3}]在 ES5 中可以借用 Array API 通过 call/apply 改变 this 或者 arguments 来完成转化。
最常见的转换是 Array.prototype.slice
2、slice
var arrObj = { 0: 'dog', 1: 'cat', 2: 'rabbit', 'length': 3 }
Array.prototype.slice.call(arrObj)3、splice
Array.prototype.splice.call(arrObj, 0)4、concat
Array.prototype.concat.apply([], arrObj)5、for循环依次遍历
var arr = []
for(var i = 0; i < arrObj.length; i++) {
arr.push(arrObj[i])
}
console.log(arr)
// ["dog", "cat", "rabbit"]当然由于借用 Array API，一切以数组为输入，并以数组为输出的 API 都可以来做数组转换，如
Array(借用 arguments)Array.prototype.concat(借用 arguments)Array.prototype.slice(借用 this)Array.prototype.map(借用 this)Array.prototype.filter(借用 this)
稀疏数组 (sparse array)
使用 Array(n) 将会创建一个稀疏数组，为了节省空间，稀疏数组内含非真实元素，在控制台上将以 empty 显示，如下所示
[,,,] 与 Array(3) 都将返回稀疏数组
> [,,,]
[empty × 3]
> Array(3)
[empty × 3]当类数组为 { length: 3 } 时，一切将类数组做为 this 的方法将都返回稀疏数组，而将类数组做为 arguments 的方法将都返回密集数组
3.4 怎么判断是不是类数组对象
const MAX_SAFE_INTEGER = 9007199254740991
// 能够被“安全”呈现的最大整数是 2^53 - 1
// 在ES6中被定义为Number.MAX_SAFE_INTEGER
// 最小整数是 -9007199254740991，ES6中被定义为 Number.MIN_SAFE_INTEGERjavascript权威指南方法：
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.length是整数
o.length < 4294967296) // o.length < 2^32
return true
else
return false
}3.5 复习一下这三种数组方法，我就没记得过
1. slice(start,end):
start可选，end可选；start,end都是数组索引下标，会返回start到end（不包括）元素的数组，不会改变原来数组
返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
start可选，end可选；start,end都是数组索引下标，会返回start到end（不包括）元素的数组，不会改变原来数组
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//输出["Orange","Lemon"],不包括索引值为3的元素2、splice(index,howmany,item1,item2...):
index必需，规定开始添加或删除的索引值，howmany:可选，截取几个，item1,item2...：可选，要添加的元素，会返回一个包含删除元素的数组，会改变原来数组
可以实现删除、插入和替换。返回值是删除的项构成的数组，如果未删除则返回一个空数组
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数： 起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例 如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
//输出：["Banana","Orange","Lemon","Kiwi","Mango"]3、concat(arr1,arr2...): 返回一个新拼接的数组，不会改变原来数组
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
//输出：["Cecilie","Lone","Emil","Tobias","Linus","Robin"]
扫一扫
1742
到【灌水乐园】发言
