JavaScript数组原理二：类数组详解

JavaScript数组原理二：类数组详解

JavaScript中一直存在一种数组对象他们不能直接调用数组的方法，但是又和数组比较类似在某些特定的变成场景中会出现。
首先我们要了解在哪些情况下会出现类数组：
1.包括函数里面的参数对象arguments
2.用getelements bytagname/classname/name获得的HTMLcollection
3.用queryselector获得的nodelist
这是主要遇到的几种类数组的情况
首先先讲解arguments：
类数组对象arguments通常会定义在函数体中包括了函数参数和其他属性。
我们通过代码来实现一下：

function foo(name,age,sex){
	console.log(arguments);
	console.log(typeof arguments);
	console.log(Object.proto.tostring.call(arguments));
}
foo('jack','18','male');

下面是控制台输出结果：

下面讲述一下HTMLcollection：
简单来说HTMLcollection是HTMLDOM的一个接口这个接口包含了获取到的DOM元素，返回的类型是类数组对象，如果用typeof来进行判断的话它会返回object，它是及时跟新的，在文档中DOM发生变化他也会随即发生变化
下面代码实例：
要在有form表单的页面执行哦

var elem1, elem2;
// document.forms是一个HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);console.log(elem1);
console.log(elem2);
console.log(typeof elem1);
console.log Object.prototype.toString.call(elem1));

控制台输出结果如下：

还有nodelist：
nodelist对象是节点的集合通常是由queryslector返回的，虽然不是数组但是可以使用for…of来进行迭代，在一些特定情况下nodelist是一个实时的集合

var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list){
checkbox.checked = true;
console.log(list);
console.log(typeof list);
console.log(Object.prototype.toString.call(list));

从代码里就可以看出是在有checkbox页面元素中执行的代码
控制台的执行结果：

那么类数组有哪些应用场景呢？
1.参数的遍历操作：在函数内部可以直接获取arguments这个类数组的值那么也可以对于参数进行一些操作

function add(){var sum =0,
len = arguments.lengthfor(vari= 0; i< len; i++){sum += arguments[i];}
return sum;
add()
//0
add(1)
//1
add(1?2)
//3
add(1,2,3,4);
//10

通过上述的代码我们可以执行函数的累加操作，参数多少也是可以不受限制的

function myConcat(separa){
var args = Array.prototype.slice.call(arguments,1);return args.join(separa);
定义链接字符串
myConcat(", ", "red", "orange", "blue");// "red, orange, blue "
myConcat("; ","elephant", "lion", "snake");// "elephant; lion; snake"
myConcat(". ", "one", "two", "three", "four", "five");// "one.two. three. four. five"

该函数定义了，你可以传任意参数到该函数，使用每个参数到每个列表中的创建列表进行拼接

传递参数的使用：可以借助arguments将参数从一个函数传递到另一个函数
代码示例：

//使用apply 将foo的参数传递给barfunction foo(){
bar.apply(this,arguments);}
function bar(a, b, c){console.log(a, b, C);}
foo(1,2,3) //123

下面讲解一下类数组借用数组方法转成数组
apply和call方法相信你已经了解过了，如果你不知道的话可以去我的主页找之前的博客，类数组因为不是真正的数组所以没有数组类型的自带方法

var arrayLike ={0: 'java',1 : 'script',length: 2}
Array. prototype.push.call(arrayLike, 'jack ', 'lily');
console.log(typeof arrayLike); // 'object'
console.log(arrayLike);
//{0: "java", 1: "script"", 2: "jack", 3: "lily", length: 4}

function sum(a, b){
let args = Array.prototype.slice.call(arguments);
// let args = ].slice.call(arguments);//这样写也是一样效果
console.log(args.reduce((sum, cur) => sum + cur));
sum(1,2);// 3
function sum(a, b){
let args = Array.prototype.concat.apply(l], arguments);console.log(args.reduce((sum, cur) => sum + cur));
sum(1,2); //3

以上是两种实现方法可以自己仔细看看理解一下
还可以使用ES6的方法转数组
一般我们采用ES6中的array.from方法以及展开运算符的方法
代码示例：

function sum(a, b){
let args =Array.from(arguments);
console.log(args.reduce((sum, cur) => sum + cur));}
sum(1,2);//3function sum(a, b){
let args = [...arguments];
console.log(args.reduce((sum, cur) => sum + cur));}
sum(1,2);//3
function sum (...args){
console.log(args.reduce((sum, cur) => sum + cur));
sum(1,2);//3

总结：

上述文章如果有问题或者想问问题或者想交流技术或者想和作者闲聊可以+QQ：2029788643